/* =====================================================================
   VenueBaba.com — Design System
   Find. Book. Celebrate.  |  A unit of Navix Technologies.

   Structure
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout primitives
     05  Buttons
     06  Badges, pills, chips
     07  Forms
     08  Header & navigation
     09  Hero & search
     10  Cards (venue / category / city)
     11  Sections
     12  Filters & listing
     13  Venue detail
     14  Modal & enquiry
     15  Toasts
     16  Footer
     17  Dashboards
     18  Admin
     19  Auth
     20  Utilities
     21  Responsive
   ===================================================================== */

/* ============================ 01 TOKENS ============================ */
:root {
    /* ------------------------------------------------------------------
     | Brand — sampled directly from the VenueBaba logo.
     |
     | These six stops are the exact sweep across the "baba" wordmark,
     | measured by database/prepare-brand-assets.php. Re-run that script
     | after changing the logo and it re-reports them.
     * ------------------------------------------------------------------ */
    --brand-magenta:   #DA2397;
    --brand-rose:      #F9306B;
    --brand-orange:    #FD8C28;
    --brand-amber:     #F1B616;
    --brand-green:     #71C663;
    --brand-teal:      #03B2B5;

    /* The full logo sweep. Decorative surfaces only — never behind text. */
    --gradient: linear-gradient(135deg,
        #DA2397 0%, #F9306B 20%, #FD8C28 40%, #F1B616 60%, #71C663 80%, #03B2B5 100%);

    /* Buttons carry the SAME sweep with a charcoal label, but evened out.
       Each stop keeps the logo's exact hue and saturation; only lightness is
       tuned, so that across the whole ramp:
         - nothing exceeds 158 perceived brightness. The raw amber sits at 181
           and reads as a washed-out white patch beside the deep magenta.
         - nothing drops below 4.6:1 against the label. The raw magenta is
           4.18:1, which a narrow button like "Register" exposes.
       Four of the six stops barely move; the amber deepens and the magenta
       lifts a little. See database/prepare-brand-assets.php for the source
       colours and scratchpad ramp-solve for the derivation. */
    --gradient-cta:    linear-gradient(135deg,
        #DF35A0 0%, #F9306B 20%, #FD861E 40%, #D49E0D 60%, #6BC45D 80%, #03B2B5 100%);
    --cta-ink:         #14110F;

    /* Gradient-clipped TEXT on a light page: the sweep's bright half
       disappears there, so small figures use the deep end only. */
    --gradient-text:   linear-gradient(135deg, #C01F85 0%, #DB2A5E 100%);

    /* A tinted wash of the full sweep, for icon chips and soft fills. */
    --gradient-soft: linear-gradient(135deg,
        rgba(218,35,151,.13) 0%, rgba(253,140,40,.12) 45%, rgba(3,178,181,.13) 100%);

    /* Accessible brand shades for text and icons on light surfaces.
       --pink is the workhorse accent used across links, icons and active
       states; it is the logo magenta deepened to clear AA on the off-white. */
    --pink:            #C21B86;
    --pink-strong:     #B31A7C;
    /* Primary CTA fill: the logo's magenta → rose sweep, each stop at the
       lightest value where white text still clears 4.5:1. The hover variant
       deepens both stops one notch. --btn-pink is the solid fallback. */
    --btn-pink:        #D82396;
    --btn-grad:        linear-gradient(135deg, #D82396 0%, #E90749 100%);
    --btn-grad-deep:   linear-gradient(135deg, #C21B86 0%, #D42553 100%);
    --orange:          #C97A19;
    --green:           #4E8F33;
    --teal:            #017E80;

    /* Neutrals — the actual interface */
    --ink:             #171717;
    --ink-2:           #252525;
    --ink-3:           #404040;
    --muted:           #737373;
    --muted-2:         #A3A3A3;
    --line:            #E7E5E1;
    --line-2:          #F0EEEA;
    --surface:         #FFFFFF;
    --bg:              #FAF9F7;
    --bg-2:            #F4F2EE;

    /* Semantic */
    --success:         #1E9E5A;
    --success-bg:      #E8F6EE;
    --warning:         #B7791F;
    --warning-bg:      #FDF3E2;
    --danger:          #D33A3A;
    --danger-bg:       #FCEBEB;
    --info:            #2563EB;
    --info-bg:         #EAF1FE;

    /* Typography */
    --font:            'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif:      'Instrument Serif', Georgia, 'Times New Roman', serif;

    --text-xs:         0.75rem;
    --text-sm:         0.8125rem;
    --text-base:       0.9375rem;
    --text-md:         1rem;
    --text-lg:         1.125rem;
    --text-xl:         1.375rem;
    --text-2xl:        1.75rem;
    --text-3xl:        2.25rem;
    --text-4xl:        3rem;
    --text-5xl:        3.75rem;

    /* Spacing */
    --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

    /* Radii */
    --r-xs:  6px;  --r-sm: 10px;  --r-md: 14px;
    --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

    /* Elevation — restrained */
    --sh-xs: 0 1px 2px rgba(23,23,23,.05);
    --sh-sm: 0 2px 8px rgba(23,23,23,.06);
    --sh-md: 0 8px 24px rgba(23,23,23,.08);
    --sh-lg: 0 18px 48px rgba(23,23,23,.10);
    --sh-xl: 0 28px 72px rgba(23,23,23,.14);

    --ring: 0 0 0 3px rgba(218,35,151,.18);

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --container: 1240px;
    --header-h: 84px;

    --z-header: 100;
    --z-dropdown: 200;
    --z-sheet: 900;
    --z-modal: 1000;
    --z-toast: 1100;
}

/* ========================= 02 RESET & BASE ========================= */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--bg-2); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--pink); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* The hidden attribute must always win.
   Several components below set an explicit `display` (.modal is display:grid,
   .lightbox is display:grid), and an author rule beats the user-agent
   stylesheet's [hidden]{display:none} — which would leave them permanently on
   screen. Everything toggled from JS uses el.hidden, so this rule is what makes
   that work. */
[hidden] { display: none !important; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection { background: rgba(218,35,151,.16); color: var(--ink); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: var(--ink); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* ========================= 03 TYPOGRAPHY ========================= */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
}
h1 { font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

.serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; }

.lead { font-size: var(--text-lg); color: var(--muted); line-height: 1.65; }

.eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--pink);
}
.eyebrow::before {
    content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--btn-grad);
}

/* Gradient-clipped text. Uses the deepened range, not the full sweep: these
   are small bold figures on light surfaces, and the logo's amber sits at
   1.7:1 there. --text-gradient-light is the counterpart for dark surfaces,
   where the bright end of the sweep is exactly what reads well. */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.text-gradient--full {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.prose { color: var(--ink-3); line-height: 1.75; }
.prose h2 { font-size: var(--text-xl); margin: var(--sp-8) 0 var(--sp-3); }
.prose h3 { font-size: var(--text-lg); margin: var(--sp-6) 0 var(--sp-2); }
.prose p { margin-bottom: var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.prose ul li { list-style: disc; margin-bottom: var(--sp-2); }
.prose ol li { list-style: decimal; margin-bottom: var(--sp-2); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

/* ===================== 04 LAYOUT PRIMITIVES ===================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-5);
}
.container--narrow { max-width: 820px; }
.container--mid    { max-width: 1020px; }

.section { padding-block: var(--sp-20); }
.section--tight { padding-block: var(--sp-12); }
.section--alt { background: var(--surface); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--sp-6); margin-bottom: var(--sp-8);
}
.section-head__text { max-width: 640px; }
.section-head__title { font-size: var(--text-3xl); margin-bottom: var(--sp-2); }
.section-head__sub { color: var(--muted); font-size: var(--text-md); margin: 0; }
.section-head__link {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-weight: 600; font-size: var(--text-base); color: var(--ink);
    white-space: nowrap; padding-bottom: 4px;
    border-bottom: 2px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.section-head__link:hover { color: var(--pink); border-bottom-color: var(--pink); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--venues { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--sp-6); }
.grid--cats { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid--cities { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
}
.card--flush { padding: 0; overflow: hidden; }
.card--raised { box-shadow: var(--sh-sm); border-color: var(--line-2); }

/* ========================== 05 BUTTONS ==========================
   background-origin matters here. Buttons carry a 1px transparent border so
   outlined and filled variants share a box. By default a background is SIZED
   to the padding box but PAINTED to the border box, leaving a 1px ring that
   gets filled by repeating the image — which on a gradient wraps the far end
   round to the near edge and shows as a colour fringe. Sizing to the border
   box removes the leftover ring entirely. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    background-origin: border-box;
    padding: 12px 22px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    font-size: var(--text-base); font-weight: 700; line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:disabled, .btn.is-loading { pointer-events: none; opacity: .65; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    /* The logo's magenta → rose sweep, trimmed to its first two colours and
       carried by a white label. Each stop is that logo hue pulled down to the
       lightest value where white text still clears WCAG AA — magenta #DA2397
       becomes #D82396 (4.56:1), rose #F9306B becomes #E90749 (4.57:1) — so
       every point along the gradient keeps the label readable.
       background-IMAGE, not the `background` shorthand: the shorthand resets
       background-origin to padding-box and reintroduces the 1px fringe that
       .btn sets border-box to avoid. */
    background-image: var(--btn-grad);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(224,21,112,.30);
}
.btn--primary:hover {
    background-image: var(--btn-grad-deep);
    color: #fff;
    box-shadow: 0 8px 24px rgba(224,21,112,.36);
    transform: translateY(-1px);
}

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-2); color: #fff; transform: translateY(-1px); box-shadow: var(--sh-md); }

.btn--outline { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.btn--ghost { background: transparent; color: var(--ink-3); }
.btn--ghost:hover { background: var(--bg-2); color: var(--ink); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--pink); transform: translateY(-1px); }

.btn--whatsapp { background: #1FAF54; color: #fff; }
.btn--whatsapp:hover { background: #18994A; color: #fff; }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #B92F2F; color: #fff; }

.btn--sm { padding: 9px 16px; font-size: var(--text-sm); }
.btn--lg { padding: 15px 30px; font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn--icon { padding: 12px; width: 44px; height: 44px; }

.btn__spinner {
    display: none; width: 16px; height: 16px; flex: 0 0 16px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%; animation: vb-spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading .btn__label { opacity: .8; }
.btn--outline .btn__spinner, .btn--ghost .btn__spinner {
    border-color: rgba(23,23,23,.2); border-top-color: var(--ink);
}
@keyframes vb-spin { to { transform: rotate(360deg); } }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--r-full);
    color: var(--ink-3); background: transparent;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.icon-btn:hover { background: var(--bg-2); color: var(--ink); }

/* ================= 06 BADGES, PILLS, CHIPS ================= */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: var(--r-full);
    font-size: var(--text-xs); font-weight: 700; line-height: 1.3;
    letter-spacing: .01em; white-space: nowrap;
    background: var(--bg-2); color: var(--ink-3);
}
.badge--gradient { background: var(--btn-grad); color: #fff; box-shadow: 0 2px 8px rgba(218,35,151,.28); }
.badge--verified { background: rgba(255,255,255,.94); color: var(--success); backdrop-filter: blur(6px); }
.badge--success { background: var(--success-bg); color: var(--success); }
.badge--warning { background: var(--warning-bg); color: var(--warning); }
.badge--danger  { background: var(--danger-bg);  color: var(--danger); }
.badge--info    { background: var(--info-bg);    color: var(--info); }
.badge--muted   { background: var(--bg-2);       color: var(--muted); }
.badge--dark    { background: var(--ink); color: #fff; }
.badge--dot::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* ---- Venue badges -------------------------------------------------
   Tinted rather than filled, so a row of cards stays calm. Each style is a
   soft wash of one brand hue with a readable text colour on top. */
.vbadges { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.vbadge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: var(--r-full);
    font-size: 11px; font-weight: 700; line-height: 1.3; white-space: nowrap;
    background: rgba(255,255,255,.94); color: var(--ink-3);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(23,23,23,.10);
}
.vbadge i { font-size: 10px; }

.vbadge--verified    { color: #17795A; }
.vbadge--featured    { color: var(--pink); }
.vbadge--recommended { color: #1D4ED8; }
.vbadge--popular     { color: #C2410C; }
.vbadge--new         { color: #4E8F33; }
.vbadge--premium     { color: #7A5A0B; }
.vbadge--neutral     { color: var(--muted); }

/* On the venue page there is room for the full set, on the page ground. */
.vbadges--md { gap: 7px; }
.vbadges--md .vbadge {
    padding: 6px 13px; font-size: var(--text-xs);
    background: var(--bg-2); box-shadow: none; backdrop-filter: none;
}
.vbadges--md .vbadge i { font-size: 11px; }

.rating-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-full);
    background: var(--ink); color: #fff;
    font-size: var(--text-xs); font-weight: 700;
}
.rating-pill i { color: var(--orange); font-size: 10px; }

.stars { display: inline-flex; gap: 2px; color: var(--orange); font-size: var(--text-sm); }
.stars.stars--lg { font-size: var(--text-lg); }
.star-inline { color: var(--orange); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface);
    font-size: var(--text-sm); font-weight: 600; color: var(--ink-3);
    transition: all .18s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip__remove { display: inline-flex; opacity: .7; }
.chip__remove:hover { opacity: 1; }

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--btn-grad); color: #fff;
    font-weight: 800; font-size: var(--text-sm); letter-spacing: .02em;
    flex: none;
}
.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-md); }

/* =========================== 07 FORMS =========================== */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.form-field { display: flex; flex-direction: column; gap: 7px; grid-column: 1 / -1; }
.form-field--half { grid-column: span 1; }

.form-field > label {
    font-size: var(--text-sm); font-weight: 600; color: var(--ink-2);
    display: flex; align-items: center; gap: 6px;
}
.req { color: var(--pink); }
.optional { color: var(--muted-2); font-weight: 500; font-size: var(--text-xs); }
.field-hint { font-size: var(--text-xs); color: var(--muted); margin: 0; }

.input-wrap { position: relative; display: flex; align-items: center; }
/* These sit inside the field, so they must be centred against it explicitly.
   `align-items` on the flex parent does not reach an absolutely positioned
   child — without a top/transform they fall to the top of the box. */
.input-wrap > i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    line-height: 1; color: var(--muted-2);
    font-size: var(--text-sm); pointer-events: none; transition: color .18s var(--ease);
}
.input-prefix {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    line-height: 1; color: var(--muted);
    font-size: var(--text-base); font-weight: 600; pointer-events: none;
    /* A hairline divider makes "+91 | 98765 43210" read as one field. */
    padding-right: 9px; border-right: 1px solid var(--line);
}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="url"], input[type="search"], input[type="date"],
input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: 12px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--text-base);
    color: var(--ink);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
    -webkit-appearance: none; appearance: none;
}
/* Room for the leading icon or the +91 prefix.
   These MUST come after the base rule above: they carry the same specificity,
   and its `padding` shorthand would otherwise reset padding-left back to 15px
   and drop the text on top of the icon. */
.input-wrap > i ~ input,
.input-wrap > i ~ select { padding-left: 42px; }
.input-prefix ~ input { padding-left: 58px; }

input::placeholder, textarea::placeholder { color: var(--muted-2); }

input:hover, select:hover, textarea:hover { border-color: #D6D3CE; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: var(--ring);
}
.input-wrap:focus-within > i { color: var(--pink); }

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23737373' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    padding-right: 40px;
    cursor: pointer;
}

textarea { resize: vertical; min-height: 96px; line-height: 1.6; }

input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }

.has-error input, .has-error select, .has-error textarea,
input.has-error, select.has-error, textarea.has-error {
    border-color: var(--danger);
    background: #FFFBFB;
}
.field-error {
    margin: 0; font-size: var(--text-xs); color: var(--danger); font-weight: 600;
    display: none;
}
.field-error:not(:empty) { display: block; }

/* Honeypot — off-screen, never display:none (bots skip those) */
.hp-field {
    position: absolute !important;
    left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

/* Checks */
.check {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 8px 4px; cursor: pointer; border-radius: var(--r-xs);
    transition: background-color .15s var(--ease);
}
.check:hover { background: var(--bg-2); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    width: 19px; height: 19px; flex: none; border-radius: 50%;
    border: 2px solid var(--line); background: var(--surface);
    position: relative; transition: all .18s var(--ease);
}
.check__box--square { border-radius: 5px; }
.check input:checked + .check__box {
    border-color: var(--pink); background: var(--pink);
}
.check input:checked + .check__box::after {
    content: ''; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}
.check input:focus-visible + .check__box { box-shadow: var(--ring); }
.check__label { font-size: var(--text-base); color: var(--ink-3); flex: 1; }
/* Consent rows carry Terms/Privacy links — they must not read as plain text. */
.check__label a {
    color: var(--pink); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.check__label a:hover { color: var(--pink-strong); }
.check input:checked ~ .check__label { color: var(--ink); font-weight: 600; }
.check__count { font-size: var(--text-xs); color: var(--muted-2); font-variant-numeric: tabular-nums; }

.chip-check { cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
    /* Flex drops the whitespace text node between icon and label, so the
       gap has to be explicit or the two collide. */
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface);
    font-size: var(--text-sm); font-weight: 600; line-height: 1.2; color: var(--ink-3);
    transition: all .18s var(--ease);
}
.chip-check span i {
    /* Icon glyphs vary in width; a fixed centred box keeps every pill's
       label starting at the same distance from its icon. */
    width: 16px; flex: none; text-align: center;
    font-size: 13px; color: var(--muted);
    transition: color .18s var(--ease);
}
.chip-check:hover span { border-color: var(--ink-3); }
.chip-check input:checked + span {
    background: var(--ink); border-color: var(--ink); color: #fff;
}
.chip-check input:checked + span i { color: rgba(255,255,255,.85); }
.chip-check input:focus-visible + span { box-shadow: var(--ring); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track {
    width: 44px; height: 25px; border-radius: var(--r-full);
    background: var(--line); position: relative; transition: background-color .2s var(--ease); flex: none;
}
.switch__track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    box-shadow: var(--sh-xs); transition: transform .2s var(--ease);
}
.switch input:checked + .switch__track { background: var(--pink); }
.switch input:checked + .switch__track::after { transform: translateX(19px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring); }

.form-actions {
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    padding-top: var(--sp-5); margin-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

/* ================== 08 HEADER & NAVIGATION ==================
   The header runs on the deep charcoal. That is what lets the logo use its
   reversed colourway, where the neutral ink lifts to white and the "baba"
   gradient stays intact — far more legible than the mark on white at this
   size, and it gives the brand colour somewhere to sit. */
.site-header {
    position: sticky; top: 0; z-index: var(--z-header);
    background: rgba(23,23,23,.94);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.09);
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.is-stuck {
    background: rgba(23,23,23,.98);
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

.site-header__inner {
    height: var(--header-h);
    display: flex; align-items: center; gap: var(--sp-6);
}

/* Brand
   The supplied lockup is a wide horizontal mark, so it is sized by height and
   allowed to find its own width. Dark surfaces use the reversed colourway file
   rather than a CSS filter, which would wreck a multi-colour mark. */
.brand { display: inline-flex; align-items: center; flex: none; min-width: 0; }
/* The supplied lockup stacks a wordmark (33% of its height) over a tagline
   (12%), with the Baba icon spanning the full height. At 42px the tagline
   rendered at ~5px and turned to mush, so the mark is given real room. */
.brand__img {
    height: 54px; width: auto; max-width: 240px;
    object-fit: contain; object-position: left center; background: none;
}
/* Fallback only: an admin-uploaded logo with no reversed counterpart sits on a
   light plate over dark surfaces, so it stays legible without being recoloured. */
.brand__img--plate {
    background: #fff; padding: 6px 10px; border-radius: var(--r-sm);
    box-sizing: content-box;
}
.brand__fallback { display: inline-flex; align-items: center; gap: 9px; }
.brand__mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--btn-grad); color: #fff;
    display: grid; place-items: center; font-size: 15px;
}
.brand__word {
    font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink);
}
.brand__word-accent {
    background: var(--gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand--light .brand__word { color: #fff; }

/* Nav */
.site-nav { margin-left: auto; margin-right: var(--sp-2); }
.site-nav__list { display: flex; align-items: center; gap: var(--sp-1); }
.site-nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: var(--r-full);
    font-size: var(--text-base); font-weight: 600;
    color: rgba(255,255,255,.78);
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.site-nav__link:hover, .site-nav__link.is-active {
    background: rgba(255,255,255,.1); color: #fff;
}
.site-nav__link i { font-size: 10px; transition: transform .2s var(--ease); }
.site-nav__trigger[aria-expanded="true"] { background: rgba(255,255,255,.14); color: #fff; }
.site-nav__trigger[aria-expanded="true"] i { transform: rotate(180deg); }

/* The header sits on charcoal, so its controls invert too. The dropdown
   panels below stay light — long lists read better on a light card. */
.site-header .icon-btn { color: rgba(255,255,255,.8); }
.site-header .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.site-header .btn--ghost { color: rgba(255,255,255,.85); }
.site-header .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.site-header .user-menu__trigger {
    background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff;
}
.site-header .user-menu__trigger:hover { border-color: rgba(255,255,255,.34); }
.site-header .user-menu__trigger i { color: rgba(255,255,255,.6); }

.has-mega { position: relative; }
.mega {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    width: min(760px, calc(100vw - 48px));
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    padding: var(--sp-5); z-index: var(--z-dropdown);
    animation: vb-drop .22s var(--ease-out);
}
.mega--narrow { width: min(480px, calc(100vw - 48px)); }
.mega__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line-2);
}
.mega__title { margin: 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.mega__foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.mega__foot .mega__title { margin-bottom: var(--sp-3); }
.mega__all { font-size: var(--text-sm); font-weight: 700; color: var(--pink); display: inline-flex; gap: 6px; align-items: center; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mega__grid--compact { grid-template-columns: repeat(2, 1fr); }
.mega__grid a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px; border-radius: var(--r-sm);
    transition: background-color .15s var(--ease);
}
.mega__grid a:hover { background: var(--bg); }
.mega__icon {
    width: 34px; height: 34px; flex: none; border-radius: 9px;
    background: var(--gradient-soft); color: var(--pink);
    display: grid; place-items: center; font-size: 13px;
}
.mega__name { display: block; font-size: var(--text-base); font-weight: 600; color: var(--ink); line-height: 1.3; }
.mega__count { display: block; font-size: var(--text-xs); color: var(--muted-2); }

@keyframes vb-drop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* margin-left:auto lives here rather than on .site-nav, which is hidden below
   980px — otherwise the actions stop short of the right edge on mobile. */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; margin-left: auto; }
.site-header__menu-toggle { display: none; }

.hamburger { display: grid; gap: 4px; width: 18px; }
.hamburger span {
    height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
}
[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* User dropdown */
.user-menu { position: relative; }
.user-menu__trigger {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 5px 12px 5px 5px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface);
    font-size: var(--text-sm); font-weight: 600;
    transition: border-color .18s var(--ease);
}
.user-menu__trigger:hover { border-color: var(--ink-3); }
.user-menu__trigger i { font-size: 9px; color: var(--muted); }

.dropdown {
    position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--sh-lg);
    padding: 6px; z-index: var(--z-dropdown);
    animation: vb-drop-r .2s var(--ease-out);
}
@keyframes vb-drop-r { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dropdown__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }
.dropdown__name { margin: 0; font-weight: 700; font-size: var(--text-base); }
.dropdown__meta { margin: 0; font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dropdown__item {
    display: flex; align-items: center; gap: var(--sp-3);
    width: 100%; padding: 10px 12px; border-radius: var(--r-xs);
    font-size: var(--text-base); font-weight: 500; color: var(--ink-3); text-align: left;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
.dropdown__item:hover { background: var(--bg); color: var(--ink); }
.dropdown__item i { width: 16px; color: var(--muted); font-size: var(--text-sm); }
.dropdown__divider { height: 1px; background: var(--line-2); margin: 6px 0; }

/* Header search panel — part of the dark bar; the field itself stays light. */
.header-search {
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(23,23,23,.98); padding: var(--sp-4) 0;
}
.header-search__form { position: relative; display: flex; align-items: center; gap: var(--sp-3); }
.header-search__icon { position: absolute; left: 16px; color: var(--muted-2); }
.header-search__form input { padding-left: 44px; }

/* Suggestions */
.suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-dropdown);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--sh-lg);
    padding: 6px; max-height: 380px; overflow-y: auto;
}
.suggest__group { padding: 8px 12px 4px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.suggest__item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px 12px; border-radius: var(--r-xs); width: 100%; text-align: left;
    transition: background-color .14s var(--ease);
}
.suggest__item:hover, .suggest__item.is-active { background: var(--bg); }
.suggest__thumb { width: 38px; height: 30px; border-radius: 6px; object-fit: cover; flex: none; }
.suggest__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--gradient-soft); color: var(--pink); display: grid; place-items: center; font-size: 12px; flex: none; }
.suggest__name { font-size: var(--text-base); font-weight: 600; color: var(--ink); display: block; line-height: 1.3; }
.suggest__meta { font-size: var(--text-xs); color: var(--muted); display: block; }
.suggest__empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: var(--text-sm); }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-sheet); }
.mobile-menu__scrim { position: absolute; inset: 0; background: rgba(23,23,23,.45); animation: vb-fade .25s var(--ease); }
.mobile-menu__panel {
    position: absolute; inset: 0 0 0 auto; width: min(370px, 88vw);
    background: var(--surface); display: flex; flex-direction: column;
    animation: vb-slide-in .3s var(--ease-out); z-index: 1;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@keyframes vb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vb-slide-in { from { transform: translateX(100%); } to { transform: none; } }
.mobile-menu__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.mobile-menu__search { position: relative; padding: var(--sp-4) var(--sp-5) 0; }
.mobile-menu__search i { position: absolute; left: calc(var(--sp-5) + 15px); top: calc(var(--sp-4) + 14px); color: var(--muted-2); }
.mobile-menu__search input { padding-left: 42px; }
.mobile-menu__nav { padding: var(--sp-4) var(--sp-3); flex: 1; }
.mobile-menu__nav > a, .mobile-menu__group > summary {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 14px var(--sp-4); border-radius: var(--r-sm);
    font-size: var(--text-md); font-weight: 600; color: var(--ink-2);
    cursor: pointer; list-style: none;
}
.mobile-menu__group > summary::-webkit-details-marker { display: none; }
.mobile-menu__group > summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    margin-left: auto; font-size: 10px; color: var(--muted); transition: transform .2s var(--ease);
}
.mobile-menu__group[open] > summary::after { transform: rotate(180deg); }
.mobile-menu__nav > a:hover, .mobile-menu__group > summary:hover { background: var(--bg); }
.mobile-menu__nav > a i, .mobile-menu__group > summary i { width: 20px; color: var(--muted); font-size: var(--text-base); }
.mobile-menu__sub { padding: 4px 0 10px var(--sp-10); display: grid; gap: 2px; }
.mobile-menu__sub a { padding: 9px var(--sp-3); border-radius: var(--r-xs); font-size: var(--text-base); color: var(--muted); }
.mobile-menu__sub a:hover { background: var(--bg); color: var(--ink); }
.mobile-menu__more { color: var(--pink) !important; font-weight: 700; }
.mobile-menu__foot {
    padding: var(--sp-5); border-top: 1px solid var(--line);
    display: grid; gap: var(--sp-3); position: sticky; bottom: 0; background: var(--surface);
}

/* ====================== 09 HERO & SEARCH ====================== */
/* The hero is light on purpose: the header runs on charcoal, and a pale
   ground beneath it reads as a distinct bar rather than merging into one dark
   mass. Brand colour arrives as soft washes instead of a dark overlay. */
.hero {
    position: relative; overflow: hidden;
    background: var(--bg);
    padding-block: clamp(56px, 8vw, 104px);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* An admin-set hero photo becomes a faint texture, never a backdrop for text. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(900px 460px at 84% -14%, rgba(218,35,151,.14), transparent 62%),
        radial-gradient(760px 420px at 8% 106%, rgba(3,178,181,.13), transparent 60%),
        radial-gradient(620px 340px at 52% 128%, rgba(253,140,40,.09), transparent 62%),
        linear-gradient(180deg, rgba(250,249,247,.55) 0%, rgba(250,249,247,.82) 100%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 880px; margin-inline: auto; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 7px 16px; border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
    color: var(--ink-3); margin-bottom: var(--sp-5);
    box-shadow: var(--sh-xs);
}
.hero__eyebrow i { color: var(--orange); }
.hero__title {
    font-size: clamp(2.15rem, 5.4vw, 3.9rem);
    line-height: 1.06; letter-spacing: -0.04em; color: var(--ink);
    margin-bottom: var(--sp-5);
}
.hero__title em {
    font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em;
    background: var(--gradient-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero__sub {
    font-size: clamp(1rem, 1.6vw, 1.175rem); color: var(--muted);
    max-width: 640px; margin: 0 auto var(--sp-8); line-height: 1.65;
}
.hero__cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }
.hero__stats {
    display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px);
    margin-top: var(--sp-10); padding-top: var(--sp-8);
    border-top: 1px solid var(--line); flex-wrap: wrap;
}
.hero__stat { text-align: center; }
.hero__stat-value { display: block; font-size: var(--text-2xl); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.hero__stat-label { display: block; font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Search box */
.searchbox {
    display: flex; align-items: stretch; gap: 0;
    background: var(--surface);
    /* A hairline keeps the edge defined now that the hero behind it is pale;
       --line-2 is only 4 levels off the hero ground, so use --line. */
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    padding: 7px;
    box-shadow: var(--sh-xl);
    max-width: 780px; margin-inline: auto;
    position: relative;
}
.searchbox__field { flex: 1; position: relative; padding: 6px 8px 6px 18px; min-width: 0; text-align: left; }
.searchbox__label {
    display: block; font-size: 10px; font-weight: 800; letter-spacing: .11em;
    /* --muted-2 only reaches 2.5:1 on white; at 10px these need the full 4.5. */
    text-transform: uppercase; color: var(--muted); margin-bottom: 1px;
}
.searchbox__control { position: relative; display: flex; align-items: center; gap: 8px; }
.searchbox__control > i { color: var(--pink); font-size: var(--text-sm); flex: none; }
.searchbox__control input {
    border: 0; padding: 0; background: none; font-size: var(--text-base); font-weight: 600;
    border-radius: 0; height: 24px;
}
.searchbox__control input:focus { box-shadow: none; }
.searchbox__control input::placeholder { font-weight: 500; }
.searchbox__divider { width: 1px; background: var(--line); margin-block: 10px; flex: none; }
.searchbox__submit { flex: none; padding-inline: 26px; }
.searchbox .suggest { top: calc(100% + 14px); left: 8px; right: 8px; }

.searchbox--inline {
    box-shadow: var(--sh-sm); border: 1px solid var(--line);
    max-width: none; border-radius: var(--r-lg);
}

/* ===================== 10 CARDS ===================== */
.venue-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease);
    position: relative;
}
@media (hover: hover) {
    .venue-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }
    .venue-card:hover .venue-card__img { transform: scale(1.05); }
}
.venue-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.venue-card__media-link { display: block; height: 100%; }
.venue-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.venue-card__badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 64px); }
.venue-card__category {
    position: absolute; bottom: 12px; left: 12px;
    padding: 5px 11px; border-radius: var(--r-full);
    background: rgba(23,23,23,.72); backdrop-filter: blur(8px);
    color: #fff; font-size: var(--text-xs); font-weight: 600;
}

.fav-btn {
    position: absolute; top: 12px; right: 12px;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    display: grid; place-items: center;
    color: var(--ink-3); font-size: var(--text-base);
    box-shadow: var(--sh-xs);
    transition: transform .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.fav-btn:hover { transform: scale(1.09); color: var(--pink); }
.fav-btn.is-saved { color: var(--pink); }
.fav-btn.is-pulse { animation: vb-pop .4s var(--ease-out); }
@keyframes vb-pop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.28); } }

.venue-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.venue-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.venue-card__title { font-size: var(--text-lg); font-weight: 700; line-height: 1.28; letter-spacing: -0.02em; }
.venue-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.venue-card__location { margin: 0; font-size: var(--text-sm); color: var(--muted); display: flex; align-items: center; gap: 6px; }
.venue-card__location i { color: var(--muted-2); font-size: 11px; }
.venue-card__desc { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.55; }
.venue-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.venue-card__meta li {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--r-full);
    background: var(--bg); font-size: var(--text-xs); font-weight: 600; color: var(--ink-3);
}
.venue-card__meta i { color: var(--muted-2); font-size: 10px; }
.venue-card__foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
    padding-top: var(--sp-4); margin-top: auto; border-top: 1px solid var(--line-2);
}
.venue-card__price-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); font-weight: 700; }
.venue-card__price-value { display: block; font-size: var(--text-lg); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.venue-card__price-value small { font-size: var(--text-xs); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.venue-card__price-value--muted { font-size: var(--text-base); color: var(--muted); font-weight: 700; }
.venue-card__cta { position: relative; z-index: 2; }

.venue-card--compact .venue-card__body { padding: var(--sp-4); gap: var(--sp-2); }
.venue-card--compact .venue-card__title { font-size: var(--text-base); }

/* Venue card — horizontal list variant */
.venue-card--row { flex-direction: row; }
.venue-card--row .venue-card__media { width: 280px; flex: none; aspect-ratio: auto; }

/* Category card */
.cat-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 168px; padding: var(--sp-5);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; color: inherit; }
.cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,23,.15) 0%, rgba(23,23,23,.82) 100%); }
.cat-card__img ~ .cat-card__body .cat-card__name,
.cat-card__img ~ .cat-card__body .cat-card__count { color: #fff; }
.cat-card__icon {
    position: relative; width: 44px; height: 44px; border-radius: 13px;
    background: var(--gradient-soft); color: var(--pink);
    display: grid; place-items: center; font-size: var(--text-lg);
    margin-bottom: auto; transition: transform .3s var(--ease-out);
}
.cat-card:hover .cat-card__icon { transform: scale(1.08) rotate(-4deg); }
.cat-card__body { position: relative; margin-top: var(--sp-5); }
.cat-card__name { display: block; font-size: var(--text-md); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; }
.cat-card__count { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.cat-card__arrow {
    position: absolute; top: var(--sp-5); right: var(--sp-5);
    color: var(--muted-2); font-size: var(--text-sm);
    opacity: 0; transform: translateX(-6px); transition: all .25s var(--ease-out);
}
.cat-card:hover .cat-card__arrow { opacity: 1; transform: none; color: var(--pink); }

/* City card */
.city-card {
    position: relative; display: block; aspect-ratio: 4 / 5;
    border-radius: var(--r-lg); overflow: hidden; background: var(--ink);
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.city-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.city-card:hover .city-card__img { transform: scale(1.07); }
.city-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,23,0) 32%, rgba(23,23,23,.85) 100%); }
.city-card__body { position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
.city-card__name { display: block; font-size: var(--text-lg); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.city-card__count { display: block; font-size: var(--text-xs); color: rgba(255,255,255,.72); font-weight: 600; }

/* ===================== 11 SECTIONS ===================== */
/* "Venues near you" — the pincode box that lets a visitor override whatever
   the IP lookup guessed. */
.near-you__tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pincode-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 5px 5px 14px; border-radius: var(--r-full);
    border: 1px solid var(--line); background: var(--surface);
}
.pincode-mini > i { color: var(--pink); font-size: var(--text-sm); }
.pincode-mini input {
    width: 118px; border: 0; padding: 6px 0; background: none;
    font-size: var(--text-base); font-weight: 600; border-radius: 0;
}
.pincode-mini input:focus { box-shadow: none; }
.near-you__note {
    margin: var(--sp-5) 0 0; font-size: var(--text-xs); color: var(--muted);
    display: flex; align-items: center; gap: 7px;
}
.near-you__note i { color: var(--muted-2); }

@media (max-width: 860px) {
    .near-you__tools { width: 100%; }
    .pincode-mini { flex: 1; }
    .pincode-mini input { width: 100%; }
}

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-6); }
.feature {
    padding: var(--sp-6); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.feature__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; font-size: var(--text-lg);
    background: var(--gradient-soft); color: var(--pink);
    margin-bottom: var(--sp-4);
}
.feature__title { font-size: var(--text-md); margin-bottom: var(--sp-2); }
.feature__text { margin: 0; font-size: var(--text-base); color: var(--muted); line-height: 1.6; }

.steps { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); position: relative; }
.step { text-align: center; position: relative; }
.step__num {
    width: 52px; height: 52px; margin: 0 auto var(--sp-4);
    border-radius: 50%; display: grid; place-items: center;
    /* 2px border goes transparent on hover under a gradient — see .btn above. */
    background: var(--surface); background-origin: border-box;
    border: 2px solid var(--line);
    font-size: var(--text-md); font-weight: 800; color: var(--ink);
    position: relative; z-index: 1;
    transition: all .25s var(--ease);
}
.step:hover .step__num { border-color: transparent; background-image: var(--btn-grad); color: #fff; box-shadow: 0 6px 18px rgba(23,23,23,.18); }
.step__title { font-size: var(--text-md); margin-bottom: 6px; }
.step__text { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: 1.55; }
.steps--dark .step__num { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.steps--dark .step__text { color: rgba(255,255,255,.65); }

.testimonial {
    padding: var(--sp-6); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: var(--sp-4); height: 100%;
}
.testimonial__quote { margin: 0; font-size: var(--text-base); line-height: 1.68; color: var(--ink-3); flex: 1; }
.testimonial__who { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial__name { display: block; font-weight: 700; font-size: var(--text-base); }
.testimonial__role { display: block; font-size: var(--text-xs); color: var(--muted); }

.cta-band {
    position: relative; overflow: hidden;
    border-radius: var(--r-xl); padding: clamp(40px, 6vw, 72px);
    background: var(--ink); color: #fff; text-align: center;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(760px 380px at 78% -20%, rgba(218,35,151,.4), transparent 60%),
                radial-gradient(600px 340px at 12% 118%, rgba(3,178,181,.30), transparent 60%);
}
.cta-band > * { position: relative; }
.cta-band__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); color: #fff; margin-bottom: var(--sp-4); letter-spacing: -0.035em; }
.cta-band__sub { color: rgba(255,255,255,.76); font-size: var(--text-md); max-width: 620px; margin: 0 auto var(--sp-8); }
.cta-band__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.split__media img { border-radius: var(--r-xl); box-shadow: var(--sh-lg); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.check-list { display: grid; gap: var(--sp-3); margin: var(--sp-6) 0; }
.check-list li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-base); color: var(--ink-3); }
.check-list i { color: var(--green); margin-top: 3px; flex: none; }
/* On dark panels the list needs its own colour — the base rule sets a dark ink
   that would otherwise win over anything inherited from the container. */
.check-list--light li { color: rgba(255,255,255,.82); }
.check-list--light strong { color: #fff; }

/* ================ 12 FILTERS & LISTING ================ */
.listing { display: grid; grid-template-columns: 286px 1fr; gap: var(--sp-8); align-items: start; }
.listing__sidebar { position: sticky; top: calc(var(--header-h) + 20px); }

.filters {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden;
}
.filters__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.filters__title { font-size: var(--text-base); display: flex; align-items: center; gap: 8px; }
.filters__title i { color: var(--pink); font-size: var(--text-sm); }
.filters__reset { font-size: var(--text-xs); font-weight: 700; color: var(--pink); }

.filter-group { border-bottom: 1px solid var(--line-2); }
.filter-group__summary {
    padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
    font-size: var(--text-base); font-weight: 700; color: var(--ink);
    display: flex; align-items: center; justify-content: space-between;
}
.filter-group__summary::-webkit-details-marker { display: none; }
.filter-group__summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 10px; color: var(--muted-2); transition: transform .2s var(--ease);
}
.filter-group[open] > .filter-group__summary::after { transform: rotate(180deg); }
.filter-group__body { padding: 0 var(--sp-4) var(--sp-4); }
.filter-group__body--scroll { max-height: 232px; overflow-y: auto; }
.filter-group__body--chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.filter-range { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-3); }
.filter-range input { padding: 9px 12px; font-size: var(--text-sm); }
.filter-range span { color: var(--muted-2); }
.filter-inline { margin-top: var(--sp-3); }
.filter-inline input { padding: 9px 12px; font-size: var(--text-sm); }
.filter-divider { height: 1px; background: var(--line-2); margin: var(--sp-3) 0; }
.filters__actions { padding: var(--sp-4) var(--sp-5); }

.listing__toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.listing__count { margin: 0; font-size: var(--text-base); color: var(--muted); }
.listing__count strong { color: var(--ink); font-weight: 700; }
.listing__tools { display: flex; align-items: center; gap: var(--sp-3); }
.sort-select { min-width: 190px; padding: 10px 38px 10px 14px; font-size: var(--text-sm); font-weight: 600; border-radius: var(--r-full); }
.filters-toggle { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }

.mobile-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: none; }
.mobile-sheet.is-open { display: block; }
.mobile-sheet__scrim { position: absolute; inset: 0; background: rgba(23,23,23,.5); animation: vb-fade .2s var(--ease); }
.mobile-sheet__panel {
    position: absolute; inset: auto 0 0 0; max-height: 86vh;
    background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex; flex-direction: column; animation: vb-slide-up .3s var(--ease-out);
}
@keyframes vb-slide-up { from { transform: translateY(100%); } to { transform: none; } }
.mobile-sheet__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line);
}
.mobile-sheet__head h2 { font-size: var(--text-lg); }
.mobile-sheet__body { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.mobile-sheet__body .filters { border: 0; border-radius: 0; }
.mobile-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 10px auto 0; }

/* Empty state */
.empty-state { text-align: center; padding: var(--sp-16) var(--sp-5); }
.empty-state__icon {
    width: 74px; height: 74px; margin: 0 auto var(--sp-5);
    border-radius: 22px; display: grid; place-items: center;
    background: var(--gradient-soft); color: var(--pink); font-size: 1.7rem;
}
.empty-state__title { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.empty-state__text { color: var(--muted); max-width: 440px; margin: 0 auto var(--sp-6); }
.empty-state__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-10); flex-wrap: wrap; }
.pagination__pages { display: flex; gap: 4px; }
.pagination__page, .pagination__nav, .pagination__gap {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-width: 40px; height: 40px; padding-inline: 13px;
    border-radius: var(--r-full); font-size: var(--text-sm); font-weight: 700; color: var(--ink-3);
    border: 1px solid transparent; transition: all .18s var(--ease);
}
.pagination__page:hover, .pagination__nav:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.pagination__page.is-current { background: var(--ink); color: #fff; }
.pagination__nav.is-disabled { opacity: .35; pointer-events: none; }
.pagination__gap { color: var(--muted-2); pointer-events: none; }

/* Breadcrumb */
.breadcrumb { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); }
.breadcrumb__item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.breadcrumb__item a { color: var(--muted); }
.breadcrumb__item a:hover { color: var(--pink); }
.breadcrumb__item span[aria-current] { color: var(--ink); font-weight: 600; }
.breadcrumb__sep { font-size: 9px; color: var(--muted-2); }

/* ===================== 13 VENUE DETAIL ===================== */
.venue-hero { position: relative; background: var(--ink); }
.venue-hero__gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; height: clamp(300px, 46vw, 500px); }
.venue-hero__cell { position: relative; overflow: hidden; background: var(--bg-2); }
.venue-hero__cell:first-child { grid-row: span 2; }
.venue-hero__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.venue-hero__cell:hover img { transform: scale(1.04); }
.venue-hero__more {
    position: absolute; right: var(--sp-5); bottom: var(--sp-5); z-index: 2;
    background: rgba(255,255,255,.96); color: var(--ink); backdrop-filter: blur(8px);
}
.venue-hero--single .venue-hero__gallery { grid-template-columns: 1fr; }
.venue-hero--single .venue-hero__cell:first-child { grid-row: auto; }

/* Swipeable on a phone (see the mobile breakpoint) — hidden on desktop,
   where the grid above already shows several photos at once. */
.venue-hero__dots {
    display: none; position: absolute; left: 0; right: 0; z-index: 2;
    justify-content: center; gap: 6px;
    /* Clears the "Show all N photos" pill (bottom: var(--sp-5), ~38px tall)
       sitting in the same corner — a few px of headroom looked fine in
       isolation but the dots sat right under the button's rounded edge. */
    bottom: 66px;
}
.venue-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.venue-hero__dot.is-active { background: #fff; transform: scale(1.3); }
.venue-hero__counter {
    display: none; position: absolute; right: var(--sp-3); top: var(--sp-3); z-index: 2;
    padding: 3px 10px; border-radius: var(--r-full);
    background: rgba(23,23,23,.72); backdrop-filter: blur(6px);
    color: #fff; font-size: var(--text-xs); font-weight: 700; margin: 0;
}

.venue-head { padding-block: var(--sp-8) var(--sp-6); }
.venue-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.venue-head__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.venue-head__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.035em; margin-bottom: var(--sp-3); }
.venue-head__sub { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; color: var(--muted); font-size: var(--text-base); }
.venue-head__sub > span { display: inline-flex; align-items: center; gap: 7px; }
.venue-head__sub i { color: var(--muted-2); font-size: var(--text-sm); }
.venue-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.venue-layout { display: grid; grid-template-columns: 1fr 372px; gap: var(--sp-10); align-items: start; padding-bottom: var(--sp-16); }

.venue-block { padding-block: var(--sp-8); border-top: 1px solid var(--line); }
.venue-block:first-child { border-top: 0; padding-top: 0; }
.venue-block__title { font-size: var(--text-xl); margin-bottom: var(--sp-5); display: flex; align-items: center; gap: var(--sp-3); }
.venue-block__title i { color: var(--pink); font-size: var(--text-md); }

.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.highlight {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
}
.highlight__icon {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: var(--gradient-soft); color: var(--pink);
    display: grid; place-items: center; font-size: var(--text-sm);
}
.highlight__label { display: block; font-size: var(--text-xs); color: var(--muted); }
.highlight__value { display: block; font-size: var(--text-base); font-weight: 700; color: var(--ink); line-height: 1.3; }

.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.amenity-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-base); color: var(--ink-3); }
.amenity-item i { color: var(--green); width: 18px; font-size: var(--text-sm); }

.service-list { display: grid; gap: var(--sp-3); }
.service-item {
    display: flex; align-items: flex-start; gap: var(--sp-4);
    padding: var(--sp-4); border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
}
.service-item__icon { width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--bg); color: var(--ink-3); display: grid; place-items: center; }
.service-item__name { font-weight: 700; font-size: var(--text-base); margin-bottom: 2px; }
.service-item__desc { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.service-item__price { margin-left: auto; text-align: right; font-weight: 800; color: var(--ink); white-space: nowrap; }
.service-item__price small { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-3); }
.gallery-item {
    position: relative; aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden;
    background: var(--bg-2); cursor: zoom-in;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__tag {
    position: absolute; left: 8px; bottom: 8px; padding: 3px 9px;
    border-radius: var(--r-full); background: rgba(23,23,23,.72); backdrop-filter: blur(6px);
    color: #fff; font-size: 10px; font-weight: 700; text-transform: capitalize;
}

.map-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.map-wrap iframe { width: 100%; height: 340px; border: 0; display: block; }
.map-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); }

/* Reviews */
.rating-summary { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: center; margin-bottom: var(--sp-6); }
.rating-summary__score { text-align: center; }
.rating-summary__value { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.rating-summary__count { font-size: var(--text-sm); color: var(--muted); }
.rating-bars { display: grid; gap: 7px; }
.rating-bar { display: grid; grid-template-columns: 46px 1fr 38px; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); color: var(--muted); }
.rating-bar__track { height: 7px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.rating-bar__fill { height: 100%; border-radius: 4px; background: var(--btn-grad); }

.review-card { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line-2); }
.review-card:last-child { border-bottom: 0; }
.review-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.review-card__name { font-weight: 700; font-size: var(--text-base); }
.review-card__meta { font-size: var(--text-xs); color: var(--muted); }
.review-card__title { font-weight: 700; margin-bottom: 5px; font-size: var(--text-base); }
.review-card__text { margin: 0; color: var(--ink-3); line-height: 1.65; font-size: var(--text-base); }

/* FAQ */
.faq-list { display: grid; gap: var(--sp-2); }
.faq {
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); overflow: hidden;
}
.faq__q {
    padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
    font-weight: 700; font-size: var(--text-base); color: var(--ink);
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: '\2b'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--pink); font-size: var(--text-sm); flex: none; transition: transform .25s var(--ease);
}
.faq[open] .faq__q::after { content: '\f068'; }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--muted); line-height: 1.7; font-size: var(--text-base); }

/* Sticky enquiry panel */
.enquiry-panel {
    position: sticky; top: calc(var(--header-h) + 20px);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden;
}
.enquiry-panel__head { padding: var(--sp-5); border-bottom: 1px solid var(--line-2); }
.enquiry-panel__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.enquiry-panel__price-value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }
.enquiry-panel__price-unit { font-size: var(--text-sm); color: var(--muted); font-weight: 600; }
.enquiry-panel__note { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.enquiry-panel__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.enquiry-panel__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.enquiry-panel__foot {
    padding: var(--sp-4) var(--sp-5); background: var(--bg);
    border-top: 1px solid var(--line-2);
    font-size: var(--text-xs); color: var(--muted); display: flex; align-items: flex-start; gap: 8px;
}
.enquiry-panel__foot i { color: var(--green); margin-top: 2px; }

.trust-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.trust-list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--muted); }
.trust-list i { color: var(--green); width: 16px; }

/* Mobile sticky action bar */
.mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none; gap: var(--sp-2); padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(23,23,23,.07);
}
.mobile-cta .btn { flex: 1; padding-inline: 10px; }
.mobile-cta .btn--icon { flex: none; }

/* Share */
.share-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
    transition: all .18s var(--ease);
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

/* ================== 14 MODAL & ENQUIRY ================== */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); }
.modal__scrim { position: absolute; inset: 0; background: rgba(23,23,23,.55); backdrop-filter: blur(3px); animation: vb-fade .2s var(--ease); }
.modal__dialog {
    position: relative; width: 100%; max-width: 560px;
    max-height: calc(100vh - 40px); overflow-y: auto;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: var(--sh-xl); animation: vb-modal-in .3s var(--ease-out);
    -webkit-overflow-scrolling: touch;
}
.modal__dialog--enquiry { max-width: 620px; }
.modal__dialog--sm { max-width: 440px; }
.modal__dialog--lg { max-width: 860px; }
@keyframes vb-modal-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--bg); color: var(--ink-3); display: grid; place-items: center;
    transition: background-color .18s var(--ease);
}
.modal__close:hover { background: var(--line); color: var(--ink); }
.modal__body { padding: var(--sp-8) var(--sp-6) var(--sp-6); }
.modal__title { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.modal__text { color: var(--muted); margin-bottom: var(--sp-5); }
.modal__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.modal__actions .btn { flex: 1; }

.enquiry-head { text-align: center; margin-bottom: var(--sp-6); }
.enquiry-head__icon {
    width: 58px; height: 58px; margin: 0 auto var(--sp-4);
    border-radius: 18px; display: grid; place-items: center;
    background: var(--btn-grad); color: #fff; font-size: var(--text-xl);
    box-shadow: 0 8px 22px rgba(218,35,151,.28);
}
.enquiry-head__title { font-size: var(--text-xl); letter-spacing: -0.03em; margin-bottom: var(--sp-2); }
.enquiry-head__sub { margin: 0; color: var(--muted); font-size: var(--text-base); }
.enquiry-head__venue {
    display: inline-flex; align-items: center; gap: 7px; margin: var(--sp-4) 0 0;
    padding: 7px 15px; border-radius: var(--r-full); background: var(--bg);
    font-size: var(--text-sm); font-weight: 700; color: var(--ink);
}
.enquiry-form__error {
    background: var(--danger-bg); color: var(--danger); padding: 11px 15px;
    border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 600; margin: var(--sp-4) 0 0;
}
.enquiry-form .btn { margin-top: var(--sp-5); }
.enquiry-form__note {
    margin: var(--sp-4) 0 0; text-align: center;
    font-size: var(--text-xs); color: var(--muted); line-height: 1.5;
}
.enquiry-form__note i { color: var(--green); }
.enquiry-form__note a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }

.enquiry-success { text-align: center; padding-block: var(--sp-10) var(--sp-6); }
.enquiry-success__icon {
    width: 72px; height: 72px; margin: 0 auto var(--sp-5);
    border-radius: 50%; display: grid; place-items: center;
    background: var(--success-bg); color: var(--success); font-size: 2rem;
    animation: vb-pop-in .45s var(--ease-out);
}
@keyframes vb-pop-in { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.enquiry-success__title { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.enquiry-success__text { color: var(--muted); margin-bottom: var(--sp-6); }
.enquiry-success__actions { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.enquiry-success__hint { font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--sp-4); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(10,10,10,.95); display: grid; place-items: center; }
.lightbox__img { max-width: 92vw; max-height: 84vh; object-fit: contain; border-radius: var(--r-sm); }
.lightbox__close, .lightbox__prev, .lightbox__next {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
    backdrop-filter: blur(6px); transition: background-color .18s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.24); color: #fff; }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: var(--text-sm); font-weight: 600; max-width: 90vw; text-align: center; }

/* ==================== 14B PAGE PRELOADER ====================
   Full-page overlay shown until every image has actually finished loading
   (the JS listens for the window "load" event, not DOMContentLoaded) — see
   assets/js/venuebaba.js. Sits on --bg so it reads as part of the page
   rather than a flash of an unrelated colour. */
.preloader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    opacity: 1; visibility: visible;
    transition: opacity .35s var(--ease), visibility 0s linear 0s;
}
.preloader.is-hidden {
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility 0s linear .35s;
    pointer-events: none;
}
.preloader__ring {
    position: absolute; width: 76px; height: 76px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--pink) 92%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation: preloader-spin .9s linear infinite;
}
.preloader__icon {
    position: relative; width: 56px; height: 56px; border-radius: 50%;
    box-shadow: 0 4px 14px rgba(23,23,23,.14);
    animation: preloader-pulse 1.6s var(--ease) infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
    .preloader__ring { display: none; }
    .preloader__icon { animation: none; }
}

/* ======================= 15 TOASTS ======================= */
.toast-stack {
    position: fixed; top: 84px; right: var(--sp-5); z-index: var(--z-toast);
    display: grid; gap: var(--sp-2); max-width: 380px; pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: 13px 15px; border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--sh-lg); pointer-events: auto;
    animation: vb-toast-in .3s var(--ease-out);
}
.toast.is-out { animation: vb-toast-out .25s var(--ease) forwards; }
@keyframes vb-toast-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes vb-toast-out { to { opacity: 0; transform: translateX(28px); } }
.toast__icon { font-size: var(--text-md); margin-top: 1px; flex: none; }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info .toast__icon { color: var(--info); }
.toast__text { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); flex: 1; line-height: 1.5; }
.toast__close { color: var(--muted-2); font-size: var(--text-sm); padding: 2px; }
.toast__close:hover { color: var(--ink); }

/* ======================= 16 FOOTER ======================= */
.site-footer { background: var(--ink); color: rgba(255,255,255,.66); padding-block: var(--sp-16) var(--sp-8); margin-top: auto; }
.site-footer__top {
    display: grid; grid-template-columns: 1.6fr repeat(4, 1fr) 1.2fr;
    gap: var(--sp-8); padding-bottom: var(--sp-10);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.brand--footer .brand__img { height: 54px; max-width: 260px; }
.site-footer__blurb { font-size: var(--text-sm); line-height: 1.65; max-width: 300px; margin: var(--sp-5) 0 0; }
.site-footer__heading {
    font-size: var(--text-xs); font-weight: 800; letter-spacing: .11em;
    text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4);
}
.site-footer__col ul { display: grid; gap: 11px; }
.site-footer__col a { font-size: var(--text-base); color: rgba(255,255,255,.66); transition: color .18s var(--ease); }
.site-footer__col a:hover { color: #fff; }
/* The contact column carries two unrelated icon treatments: small pink markers
   beside the phone/e-mail lines, and brand glyphs centred inside the social
   circles. Without the :not(), the marker rule reaches into the circles and
   pushes every glyph 4px off centre and down to 12px. */
.site-footer__contact ul:not(.social-list) li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); line-height: 1.55; }
.site-footer__contact ul:not(.social-list) i { color: var(--pink); margin-top: 4px; font-size: var(--text-xs); width: 14px; flex: none; }

/* A row of circles, not a stacked list. `.site-footer__col ul` above sets
   display:grid at a higher specificity than a lone `.social-list`, so this
   has to match the column too or the icons stack vertically. */
.site-footer__col ul.social-list,
.social-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: var(--sp-5); }
.social-list a {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
    transition: all .2s var(--ease);
}
.social-list a:hover { background: var(--btn-grad); color: #fff; transform: translateY(-2px); }

.site-footer__bottom {
    padding-top: var(--sp-6); display: flex; align-items: center;
    justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
    font-size: var(--text-sm);
}
.site-footer__bottom p { margin: 0; }
.site-footer__unit { color: rgba(255,255,255,.82); font-weight: 600; }
.site-footer__copy { color: rgba(255,255,255,.5); }
.site-footer__line {
    font-family: var(--font-serif); font-style: italic;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; font-size: var(--text-md);
}

/* ===================== 17 DASHBOARDS ===================== */
.dash { display: grid; grid-template-columns: 264px 1fr; min-height: calc(100vh - var(--header-h)); }
.dash__sidebar {
    background: var(--surface); border-right: 1px solid var(--line);
    padding: var(--sp-6) var(--sp-4);
    position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.dash__main { padding: var(--sp-8) var(--sp-8) var(--sp-16); min-width: 0; background: var(--bg); }

.dash-nav { display: grid; gap: 2px; }
.dash-nav__label {
    font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted-2); padding: var(--sp-4) var(--sp-3) 6px;
}
.dash-nav__item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px var(--sp-3); border-radius: var(--r-sm);
    font-size: var(--text-base); font-weight: 600; color: var(--ink-3);
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.dash-nav__item:hover { background: var(--bg); color: var(--ink); }
.dash-nav__item.is-active { background: var(--ink); color: #fff; }
.dash-nav__item.is-active i { color: #fff; }
.dash-nav__item i { width: 18px; text-align: center; color: var(--muted); font-size: var(--text-sm); }
.dash-nav__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding-inline: 6px;
    border-radius: var(--r-full); background: var(--pink); color: #fff;
    font-size: 10px; font-weight: 800; display: grid; place-items: center;
}
.dash-nav__item.is-active .dash-nav__badge { background: #fff; color: var(--ink); }

.dash-head { margin-bottom: var(--sp-8); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.dash-head__title { font-size: var(--text-2xl); letter-spacing: -0.03em; margin-bottom: 4px; }
.dash-head__sub { margin: 0; color: var(--muted); font-size: var(--text-base); overflow-wrap: anywhere; }
.dash-head__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-8); }
.stat-card {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
a.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); color: inherit; }
.stat-card__icon {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: grid; place-items: center; font-size: var(--text-md);
    background: var(--bg-2); color: var(--ink-3);
}
.stat-card--pink .stat-card__icon     { background: rgba(218,35,151,.1); color: var(--pink); }
.stat-card--orange .stat-card__icon   { background: rgba(253,140,40,.14); color: var(--orange); }
.stat-card--green .stat-card__icon    { background: rgba(113,198,99,.20);  color: var(--green); }
.stat-card--teal .stat-card__icon     { background: rgba(3,178,181,.14);   color: var(--teal); }
.stat-card--charcoal .stat-card__icon { background: var(--ink); color: #fff; }
.stat-card__body { min-width: 0; }
.stat-card__value { display: block; font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.stat-card__label { display: block; font-size: var(--text-sm); color: var(--muted); font-weight: 600; }
.stat-card__hint { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 2px; }
.stat-card__arrow { margin-left: auto; color: var(--muted-2); font-size: var(--text-sm); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--sp-6); }
.panel__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-5); border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.panel__title { font-size: var(--text-md); }
.panel__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); }
.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }
.panel__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--bg); }

/* Progress */
.progress { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 4px; background: var(--btn-grad); transition: width .6s var(--ease-out); }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.progress-head__value { font-size: var(--text-lg); font-weight: 800; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th {
    text-align: left; padding: 13px var(--sp-4);
    font-size: var(--text-xs); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table td { padding: var(--sp-4); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color .14s var(--ease); }
.table tbody tr:hover { background: var(--bg); }
.table tbody tr.is-unread { background: rgba(218,35,151,.03); }
.table__primary { font-weight: 700; color: var(--ink); }
.table__meta { font-size: var(--text-xs); color: var(--muted); }
.table__actions { display: flex; gap: 6px; justify-content: flex-end; }
.table__thumb { width: 52px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.table__cell-flex { display: flex; align-items: center; gap: var(--sp-3); }

/* Simple bar chart */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 130px; padding-top: var(--sp-4); }
.chart__bar { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--btn-grad); opacity: .82; transition: opacity .2s var(--ease); position: relative; }
.chart__bar:hover { opacity: 1; }
.chart__bar[data-value="0"] { background: var(--line); }
.chart-legend { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted-2); margin-top: 8px; }

/* Wizard */
.wizard-steps { display: flex; gap: 4px; margin-bottom: var(--sp-8); overflow-x: auto; padding-bottom: 4px; }
.wizard-step {
    display: flex; align-items: center; gap: 9px; flex: none;
    padding: 10px 15px; border-radius: var(--r-full);
    font-size: var(--text-sm); font-weight: 600; color: var(--muted);
    background: var(--surface); border: 1px solid var(--line);
    transition: all .2s var(--ease); white-space: nowrap;
}
.wizard-step__num {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
    background: var(--bg-2); color: var(--muted);
}
.wizard-step.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.wizard-step.is-active .wizard-step__num { background: rgba(255,255,255,.2); color: #fff; }
.wizard-step.is-done { border-color: var(--green); color: #4E8F33; }
.wizard-step.is-done .wizard-step__num { background: var(--green); color: #fff; }

/* Gallery manager */
.gallery-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); }
.gm-item {
    position: relative; border-radius: var(--r-md); overflow: hidden;
    border: 2px solid var(--line); background: var(--surface); cursor: grab;
}
.gm-item.is-cover { border-color: var(--pink); }
.gm-item.is-dragging { opacity: .45; }
.gm-item.is-over { border-color: var(--ink); }
.gm-item__img { aspect-ratio: 4/3; width: 100%; object-fit: cover; }
.gm-item__bar {
    display: flex; align-items: center; gap: 4px; justify-content: space-between;
    padding: 8px; background: var(--surface);
}
.gm-item__tag { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: capitalize; }
.gm-item__actions { display: flex; gap: 3px; }
.gm-item__btn {
    width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center;
    color: var(--muted); font-size: 11px; transition: all .16s var(--ease);
}
.gm-item__btn:hover { background: var(--bg-2); color: var(--ink); }
.gm-item__btn--danger:hover { background: var(--danger-bg); color: var(--danger); }
.gm-item__cover-flag {
    position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--r-full);
    background: var(--btn-grad); color: #fff; font-size: 10px; font-weight: 800;
}

.dropzone {
    /* It's a <label>, which is inline by default — an inline box fragments
       its dashed border across line boxes. Block makes it one clean frame. */
    display: block;
    border: 2px dashed var(--line); border-radius: var(--r-lg);
    padding: var(--sp-10) var(--sp-5); text-align: center;
    background: var(--surface); transition: all .22s var(--ease); cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--pink); background: rgba(218,35,151,.03); }
.dropzone__icon { font-size: 2rem; color: var(--muted-2); margin-bottom: var(--sp-3); }
.dropzone.is-over .dropzone__icon { color: var(--pink); }
.dropzone__title { font-weight: 700; font-size: var(--text-md); margin-bottom: 4px; }
.dropzone__hint { margin: 0; font-size: var(--text-sm); color: var(--muted); }

/* Repeater rows (services, FAQs) */
.repeater { display: grid; gap: var(--sp-3); }
.repeater__row {
    display: grid; gap: var(--sp-3); padding: var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    position: relative;
}
.repeater__remove {
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    color: var(--muted-2); transition: all .16s var(--ease);
}
.repeater__remove:hover { background: var(--danger-bg); color: var(--danger); }

/* ======================== 18 ADMIN ======================== */

/* Admin moderation of an owner's gallery: thumbnail + group + actions. */
.gallery-admin { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gallery-admin .gallery-item { width: 100%; }
.gallery-admin__meta { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted); }
.gallery-admin__actions { display: flex; gap: 2px; flex-wrap: wrap; }
.gallery-admin__actions form { margin: 0; }
.gallery-admin__delete { color: var(--danger); }
.gallery-admin__delete:hover { color: #fff; background: var(--danger); }

/* Google-result preview on the SEO page editor. Deliberately styled like
   a real result, not like the rest of the admin, so it reads as a preview. */
.serp {
    border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
    padding: var(--sp-4) var(--sp-5); max-width: 640px;
    font-family: Arial, Helvetica, sans-serif;
}
.serp__label { margin: 0 0 var(--sp-3); font-family: inherit; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.serp__url   { margin: 0 0 2px; font-size: 13px; color: #202124; overflow-wrap: anywhere; }
.serp__title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; color: #1A0DAB; overflow-wrap: anywhere; }
.serp__desc  { margin: 0; font-size: 14px; line-height: 1.58; color: #4D5156; }
.admin-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.admin-sidebar {
    background: var(--ink); color: rgba(255,255,255,.7);
    padding: var(--sp-5) var(--sp-4);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
}
.admin-sidebar__brand { padding: 0 var(--sp-3) var(--sp-5); margin-bottom: var(--sp-3); border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-sidebar__tag { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); font-weight: 700; margin-top: 6px; display: block; }
.admin-nav { display: grid; gap: 2px; flex: 1; }
.admin-nav__label {
    font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: rgba(255,255,255,.35); padding: var(--sp-4) var(--sp-3) 6px;
}
.admin-nav__item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px var(--sp-3); border-radius: var(--r-sm);
    font-size: var(--text-base); font-weight: 500; color: rgba(255,255,255,.7);
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.admin-nav__item:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav__item.is-active { background: var(--btn-grad); color: #fff; font-weight: 600; }
.admin-nav__item i { width: 18px; text-align: center; font-size: var(--text-sm); }
.admin-nav__badge {
    margin-left: auto; min-width: 20px; height: 20px; padding-inline: 6px;
    border-radius: var(--r-full); background: var(--pink); color: #fff;
    font-size: 10px; font-weight: 800; display: grid; place-items: center;
}
.admin-nav__item.is-active .admin-nav__badge { background: rgba(255,255,255,.25); }
.admin-sidebar__foot { padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.1); margin-top: var(--sp-4); }

.admin-main { background: var(--bg); min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6); background: var(--surface);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50;
}
.admin-topbar__title { font-size: var(--text-lg); }
.admin-topbar__right { display: flex; align-items: center; gap: var(--sp-3); }
.admin-content { padding: var(--sp-6) var(--sp-6) var(--sp-16); flex: 1; }
.admin-menu-toggle { display: none; }

.toolbar {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}
.toolbar__search { position: relative; flex: 1; min-width: 210px; max-width: 380px; }
.toolbar__search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: var(--text-sm); }
.toolbar__search input { padding-left: 40px; border-radius: var(--r-full); }
.toolbar select { min-width: 150px; border-radius: var(--r-full); padding-block: 11px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; }
.tabs__item {
    padding: 11px var(--sp-4); font-size: var(--text-base); font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; white-space: nowrap;
    transition: all .18s var(--ease);
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active { color: var(--ink); border-bottom-color: var(--pink); }
.tabs__count {
    display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-full);
    background: var(--bg-2); font-size: 10px; font-weight: 800; color: var(--muted);
}
.tabs__item.is-active .tabs__count { background: var(--btn-grad); color: #fff; }

/* Two side-by-side admin panels that stack on a narrow screen. */
.admin-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 1100px) { .admin-two-col { grid-template-columns: 1fr; } }

.def-list { display: grid; gap: 0; }
.def-list__row { display: grid; grid-template-columns: 190px 1fr; gap: var(--sp-4); padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.def-list__row:last-child { border-bottom: 0; }
.def-list__key { font-size: var(--text-sm); color: var(--muted); font-weight: 600; }
.def-list__val { font-size: var(--text-base); color: var(--ink); word-break: break-word; }

/* ========================= 19 AUTH ========================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth__aside {
    background: var(--ink); color: #fff; position: relative; overflow: hidden;
    padding: var(--sp-12); display: flex; flex-direction: column; justify-content: space-between;
}
.auth__aside::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(720px 420px at 82% 8%, rgba(218,35,151,.34), transparent 60%),
                radial-gradient(560px 380px at 6% 100%, rgba(3,178,181,.28), transparent 60%);
}
.auth__aside > * { position: relative; }
.auth__aside-title { font-size: var(--text-3xl); color: #fff; letter-spacing: -0.035em; margin-bottom: var(--sp-4); }
.auth__aside-text { color: rgba(255,255,255,.72); font-size: var(--text-md); max-width: 420px; }
.auth__main { display: grid; place-items: center; padding: var(--sp-10) var(--sp-5); background: var(--bg); }
.auth__card { width: 100%; max-width: 440px; }
.auth__title { font-size: var(--text-2xl); letter-spacing: -0.03em; margin-bottom: var(--sp-2); }
.auth__sub { color: var(--muted); margin-bottom: var(--sp-8); }
.auth__switch { text-align: center; margin-top: var(--sp-6); font-size: var(--text-base); color: var(--muted); }
.auth__switch a { color: var(--pink); font-weight: 700; }
.auth__divider { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-6) 0; color: var(--muted-2); font-size: var(--text-xs); font-weight: 700; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.role-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-2); border-radius: var(--r-full); margin-bottom: var(--sp-6); }
.role-toggle a {
    padding: 10px; border-radius: var(--r-full); text-align: center;
    font-size: var(--text-sm); font-weight: 700; color: var(--muted);
    transition: all .2s var(--ease);
}
.role-toggle a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-xs); }

/* Error pages */
.error-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--bg); }
.error-page__code {
    font-size: clamp(5rem, 18vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: var(--sp-4);
}
.error-page__title { font-size: var(--text-2xl); margin-bottom: var(--sp-3); }
.error-page__text { color: var(--muted); max-width: 460px; margin: 0 auto var(--sp-8); }
.error-page__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* Confirmation page (/thank-you) — shares the error page's action row. */
.thankyou__icon {
    font-size: clamp(3.5rem, 10vw, 5rem); line-height: 1;
    color: var(--success, #16A34A); margin-bottom: var(--sp-4);
}
.error-page__trace {
    margin-top: var(--sp-8); text-align: left; max-width: 860px; width: 100%;
    background: var(--ink); color: #E5E5E5; padding: var(--sp-5); border-radius: var(--r-md);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-xs);
    overflow-x: auto; line-height: 1.7;
}

/* ======================= 20 UTILITIES ======================= */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--muted); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-lg     { font-size: var(--text-lg); }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; }
.w-full { width: 100%; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--r-md); font-size: var(--text-base);
    margin-bottom: var(--sp-5);
}
.alert i { margin-top: 3px; flex: none; }
.alert--success { background: var(--success-bg); color: #14663B; }
.alert--warning { background: var(--warning-bg); color: #8A5A0F; }
.alert--danger  { background: var(--danger-bg);  color: #9E2626; }
.alert--info    { background: var(--info-bg);    color: #1D4ED8; }
.alert__title { font-weight: 700; margin-bottom: 2px; }
/* The admin's rejection note, quoted verbatim to the owner. */
.review-reason {
    margin: 0 0 var(--sp-2); padding: 11px 15px;
    border-left: 3px solid currentColor; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: rgba(255,255,255,.55); font-size: var(--text-base); line-height: 1.6;
}
.alert p { margin: 0; }

.divider-label {
    display: flex; align-items: center; gap: var(--sp-4);
    font-size: var(--text-xs); font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted-2); margin: var(--sp-6) 0 var(--sp-4);
}
.divider-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.skeleton {
    background: linear-gradient(90deg, var(--bg-2) 25%, #EDEBE7 50%, var(--bg-2) 75%);
    background-size: 200% 100%; animation: vb-shimmer 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes vb-shimmer { to { background-position: -200% 0; } }

/* ====================== 21 RESPONSIVE ====================== */
@media (max-width: 1100px) {
    .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
    .site-footer__brand { grid-column: span 3; }
    .venue-layout { grid-template-columns: 1fr; }
    .enquiry-panel { position: static; }
    .listing { grid-template-columns: 250px 1fr; gap: var(--sp-6); }
    .mega__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
    .site-nav { display: none; }
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__search-toggle { display: inline-flex; }

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

    /* The sidebar becomes a tab strip that stays put under the header, so the
       owner can switch section without scrolling back to the top. */
    .dash__sidebar {
        position: sticky; top: var(--header-h); z-index: 20;
        height: auto; border-right: 0; border-bottom: 1px solid var(--line);
        padding: var(--sp-2) 0;
        background: var(--surface);
    }
    /* The venue summary block above the nav is desktop chrome — on a phone the
       page title already says which venue this is. */
    .dash__sidebar > :not(.dash-nav) { display: none; }

    .dash-nav {
        grid-auto-flow: column; grid-auto-columns: max-content;
        gap: 2px; padding: 2px var(--sp-4);
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-4);
        /* A visible scrollbar under a tab row reads as a stray grey line. */
        scrollbar-width: none; -ms-overflow-style: none;
        /* Fade the strip at both edges so a cut-off tab looks intentional and
           signals there is more to scroll. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .dash-nav::-webkit-scrollbar { display: none; }
    .dash-nav__label { display: none; }

    /* Scoped to the strip — .dash-nav__item is reused for checklist rows,
       which must wrap on a phone rather than widen the page. */
    .dash-nav .dash-nav__item {
        white-space: nowrap; scroll-snap-align: center;
        padding: 9px 14px; border-radius: var(--r-full);
        font-size: var(--text-sm); color: var(--muted);
    }
    .dash-nav .dash-nav__item i { font-size: 13px; width: auto; }
    .dash-nav .dash-nav__item.is-active {
        background: var(--ink); color: #fff;
        box-shadow: 0 2px 8px rgba(23,23,23,.18);
    }
    .dash-nav .dash-nav__badge { margin-left: 2px; }

    .dash__main { padding: var(--sp-6) var(--sp-4) var(--sp-12); }

    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed; inset: 0 auto 0 0; width: 260px; z-index: var(--z-sheet);
        transform: translateX(-100%); transition: transform .28s var(--ease-out);
    }
    .admin-sidebar.is-open { transform: none; box-shadow: var(--sh-xl); }
    .admin-menu-toggle { display: inline-flex; }

    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }

    .split { grid-template-columns: 1fr; }
    /* A static single photo (with every other one silently display:none'd)
       used to be the whole mobile experience here — swipeable beats that. */
    .venue-hero__gallery {
        display: flex; grid-template-columns: unset;
        height: clamp(240px, 62vw, 380px);
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .venue-hero__gallery::-webkit-scrollbar { display: none; }
    .venue-hero__cell {
        flex: 0 0 100%; scroll-snap-align: start; grid-row: auto !important;
    }
    .venue-hero__dots:not(:empty) { display: flex; }
    .venue-hero__counter:not(:empty) { display: block; }
}

@media (max-width: 860px) {
    :root { --header-h: 68px; }

    /* The lockup is wide; give the header actions room on a phone. */
    .brand__img { height: 42px; max-width: 165px; }
    .brand--footer .brand__img { height: 50px; max-width: 220px; }
    .mobile-menu__head .brand__img { height: 40px; max-width: 158px; }

    .section { padding-block: var(--sp-12); }
    .section-head { flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-6); }
    .section-head__title { font-size: var(--text-2xl); }

    .searchbox {
        flex-direction: column; border-radius: var(--r-lg); padding: var(--sp-3); gap: var(--sp-2);
        box-shadow: var(--sh-lg);
    }
    .searchbox__field { padding: 10px 14px; border-radius: var(--r-sm); background: var(--bg); }
    .searchbox__divider { display: none; }
    .searchbox__submit { width: 100%; padding-block: 14px; }
    .searchbox .suggest { left: 0; right: 0; }

    .listing { grid-template-columns: 1fr; }
    .listing__sidebar { display: none; }
    .filters-toggle { display: inline-flex; }
    .listing__toolbar { gap: var(--sp-3); }
    .sort-select { min-width: 0; flex: 1; }

    .grid--venues { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: var(--sp-4); }
    .grid--cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
    .grid--cities { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: var(--sp-3); }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

    .venue-card--row { flex-direction: column; }
    .venue-card--row .venue-card__media { width: 100%; aspect-ratio: 4/3; }

    .mobile-cta { display: flex; }
    body.has-mobile-cta { padding-bottom: 76px; }

    .venue-layout { gap: var(--sp-6); padding-bottom: var(--sp-10); }
    .venue-head__actions { width: 100%; }
    .venue-head__actions .btn { flex: 1; }

    .form-grid { grid-template-columns: 1fr; }
    .form-field--half { grid-column: 1 / -1; }

    .modal { padding: 0; align-items: flex-end; }
    .modal__dialog {
        max-width: none; border-radius: var(--r-xl) var(--r-xl) 0 0;
        max-height: 94vh; animation: vb-slide-up .3s var(--ease-out);
    }
    .modal__body { padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom)); }

    .toast-stack { top: auto; bottom: 16px; left: var(--sp-4); right: var(--sp-4); max-width: none; }
    .toast { animation: vb-toast-in-m .3s var(--ease-out); }
    @keyframes vb-toast-in-m { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

    .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
    .site-footer__brand { grid-column: span 2; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); text-align: left; }

    .rating-summary { grid-template-columns: 1fr; gap: var(--sp-5); }
    .hero__stats { gap: var(--sp-6); }
    .hero__stat-value { font-size: var(--text-xl); }

    .admin-content { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
    .admin-topbar { padding: var(--sp-3) var(--sp-4); }
    .def-list__row { grid-template-columns: 1fr; gap: 2px; }

    .table th, .table td { padding: 11px var(--sp-3); font-size: var(--text-sm); }

    .hide-mobile { display: none !important; }
}

@media (max-width: 520px) {
    .container { padding-inline: var(--sp-4); }
    .grid--venues { grid-template-columns: 1fr; }
    .grid--cats { grid-template-columns: repeat(2, 1fr); }
    .grid--cities { grid-template-columns: repeat(2, 1fr); }
    .hero { padding-block: var(--sp-12); }
    .hero__cta-row .btn { width: 100%; }
    .cta-band__actions .btn { width: 100%; }
    .highlight-grid { grid-template-columns: 1fr 1fr; }
    .amenity-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-manager { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .stat-card { padding: var(--sp-4); flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .stat-card__value { font-size: var(--text-xl); }
    .enquiry-panel__row { grid-template-columns: 1fr; }
    .show-mobile-only { display: block !important; }
}

@media print {
    .site-header, .site-footer, .mobile-cta, .modal, .toast-stack,
    .enquiry-panel, .fav-btn, .btn { display: none !important; }
    body { background: #fff; }
    .venue-layout { grid-template-columns: 1fr; }
}


/* =====================================================================
   22  VENUEBABA 2026 REDESIGN — the Figma prototype, on the existing shell
   ---------------------------------------------------------------------
   Everything above this line is the base design system every page shares
   (dashboards and admin included). This block restyles the PUBLIC site to
   the prototype: deep navy + warm cream ground, coral accent, the Baba
   character and handwritten notes. It only adds selectors; nothing above
   is redefined except the handwriting font token.
   ===================================================================== */

:root {
    --font-hand:   'Kalam', 'Caveat', cursive;
    --navy:        #0F172A;
    --navy-2:      #16213A;
    --navy-3:      #1E2A47;
    --cream:       #FCF7F1;
    --cream-2:     #F7EFE4;
    --coral:       #F04258;
    --coral-deep:  #D93146;
    --coral-glow:  rgba(240, 66, 88, .38);
    --gold:        #F5B82E;
    --leaf:        #1F5F45;
    --leaf-deep:   #163F2F;
}

/* ---- Handwritten notes -------------------------------------------- */
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: .01em; }

/* ---- Coral pill button (header "List Your Venue", CTAs) ------------ */
.btn--coral-pill {
    background: linear-gradient(135deg, #F04258 0%, #EB3349 100%);
    color: #fff !important; font-weight: 700; font-size: .875rem;
    padding: 10px 20px; border-radius: 999px; border: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    box-shadow: 0 4px 14px var(--coral-glow);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn--coral-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(240,66,88,.5); }
.btn--coral-pill.btn--lg { padding: 14px 28px; font-size: 1rem; }
.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.btn--ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }

/* =============================== HEADER ===============================
   On the homepage the header floats over the hero photograph: fully
   transparent at rest, and only on scroll does it become the solid dark bar.
   The hero is pulled up by exactly the header's height so the artwork runs
   behind it — the header itself stays in flow and keeps its sticky behaviour.
   Every other page keeps the solid bar from the base design system. */
body.is-home .site-header {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
}
body.is-home .site-header.is-stuck {
    background: rgba(15,14,12,.96);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom-color: rgba(255,255,255,.09);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
body.is-home .hero-v2 {
    /* The header's box is --header-h PLUS its 1px bottom border. Pulling up by
       the token alone left a 1px light line above the artwork. */
    --hero-offset: calc(var(--header-h) + 1px);
    margin-top: calc(-1 * var(--hero-offset));
    padding-top: calc(var(--hero-offset) + clamp(28px, 4vw, 56px));
}
/* The search panel is a solid drawer whether or not the bar behind it is. */
body.is-home .header-search { background: rgba(15,14,12,.97); border-top-color: rgba(255,255,255,.09); }
.site-nav__link { position: relative; color: rgba(255,255,255,.88); }
.site-nav__link.is-active { background: none; }
.site-nav__link.is-active::after {
    content: ''; position: absolute; bottom: -2px; left: 14px; right: 14px; height: 3px;
    background: var(--coral); border-radius: 999px;
}
.site-header__shortlist-link, .site-header__auth-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.9);
    padding: 8px 12px; border-radius: 999px; transition: all .2s var(--ease);
}
.site-header__shortlist-link:hover, .site-header__auth-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-header__shortlist-link i, .site-header__auth-link i { font-size: 1rem; }
.site-header__search-toggle { display: inline-flex; }

/* ================================ HERO ================================ */
.hero-v2 {
    position: relative; overflow: hidden; color: #fff;
    background: #0d0c0a;
    min-height: clamp(520px, 44vw, 660px);
    display: flex; align-items: center;
    padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 6vw, 88px);
}
.hero-v2__bg { position: absolute; inset: 0; z-index: 0; }
.hero-v2__bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: 62% center;
    background: #0d0c0a;
}
/* Legibility for the headline column; the right half stays open so Baba
   and the notes baked into the photo read at full strength. */
.hero-v2__shade {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(90deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.72) 36%, rgba(10,9,8,.28) 58%, rgba(10,9,8,0) 76%),
        linear-gradient(180deg, rgba(10,9,8,.35) 0%, rgba(10,9,8,0) 30%, rgba(10,9,8,.55) 100%);
}
.hero-v2__inner { position: relative; z-index: 2; width: 100%; }
/* Wide enough for the four-step search card to breathe; the copy above it is
   held to a narrower measure so it still reads as a column, not a banner. */
.hero-v2__main { max-width: 860px; }
.hero-v2__pretitle {
    font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    color: #fff; margin: 0 0 6px; text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.hero-v2__title {
    font-size: clamp(2.3rem, 4.4vw, 3.7rem); font-weight: 800; line-height: 1.08;
    letter-spacing: -.03em; color: #fff; margin: 0 0 16px; max-width: 660px;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.hero-v2__title em {
    font-style: normal;
    background: linear-gradient(135deg, #F43F5E 0%, #FB7185 30%, #F59E0B 80%, #FBBF24 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(244,63,94,.45));
}
.hero-v2__desc {
    font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.6; color: rgba(255,255,255,.88);
    max-width: 520px; margin: 0 0 26px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.hero-v2__desc strong { color: #fff; }

/* Search card (4 steps) */
.hero-search-wrapper { position: relative; max-width: 100%; z-index: 3; }
.hero-search-card {
    background: #fff; border-radius: 999px; padding: 6px 8px 6px 22px;
    box-shadow: 0 14px 44px rgba(0,0,0,.34);
    display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.7);
}
.search-step { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.search-step__icon { font-size: 1.1rem; color: var(--navy); opacity: .85; flex: none; }
.rupee-circle {
    width: 22px; height: 22px; border: 1.5px solid var(--navy); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; line-height: 1;
}
.search-step__content { flex: 1; min-width: 0; }
.search-step__label { display: block; font-size: .8rem; font-weight: 700; color: var(--navy); line-height: 1.2; margin: 0; }
.search-step__select-wrap, .search-step__input-wrap { position: relative; display: flex; align-items: center; }
/* The base form rules are typed selectors (input[type="text"], select), which
   out-specify a bare class — so these carry the element too, or the location
   field keeps its bordered box while its three neighbours go flat. */
select.search-step__select,
input.search-step__input {
    width: 100%; border: 0; background: transparent; padding: 2px 18px 2px 0;
    font-size: .82rem; color: #475569; outline: none; cursor: pointer;
    appearance: none; -webkit-appearance: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
    border-radius: 0; box-shadow: none; height: auto; line-height: 1.4;
}
select.search-step__select:hover,
input.search-step__input:hover { border: 0; }
select.search-step__select:focus,
input.search-step__input:focus { box-shadow: none; border: 0; background: transparent; }
.search-step__input::placeholder { color: #94A3B8; }
.search-step__arrow { position: absolute; right: 0; font-size: .62rem; color: #94A3B8; pointer-events: none; }
.search-step__sep { width: 1px; height: 36px; background: #E2E8F0; flex: none; }
.search-step__action { flex: none; }
.hero-find-btn {
    background: linear-gradient(135deg, #F04258 0%, #EA384C 100%); color: #fff;
    border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: .92rem;
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(240,66,88,.45); transition: all .2s var(--ease);
}
.hero-find-btn:hover { background: linear-gradient(135deg, #D93146 0%, #CF263A 100%); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(240,66,88,.55); }
.hero-search-doodle {
    margin-top: 10px; display: flex; align-items: center; gap: 8px;
    font-family: var(--font-hand); font-weight: 700; color: #fff; font-size: 1.15rem;
    padding-left: 300px; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.hero-search-doodle .doodle-arrow-curve { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }

/* ============================ TRUST STRIP ============================ */
.trust-strip { background: #fff; border-bottom: 1px solid #F1F5F9; box-shadow: 0 4px 18px rgba(0,0,0,.03); padding: 22px 0; }
.trust-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item__icon {
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex: none; border: 1.5px solid currentColor;
}
.trust-item__icon--teal  { color: #0D9488; background: #F0FDFA; }
.trust-item__icon--gold  { color: #D97706; background: #FFFBEB; }
.trust-item__icon--blue  { color: #1E40AF; background: #EFF6FF; }
.trust-item__icon--green { color: #059669; background: #ECFDF5; }
.trust-item__title { font-size: .95rem; font-weight: 700; color: var(--navy); margin: 0 0 2px; }
.trust-item__sub { font-size: .78rem; color: #64748B; margin: 0; }

/* ======================= SECTION HEADINGS (v2) ======================= */
.sec { padding: clamp(44px, 5vw, 64px) 0; }
.sec--white { background: #fff; }
.sec--cream { background: var(--cream); }
.sec--navy  { background: var(--navy); color: #fff; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.sec-head__title {
    font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 800; color: var(--navy);
    letter-spacing: -.025em; margin: 0; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sec--navy .sec-head__title { color: #fff; }
.sec-head__sub { margin: 6px 0 0; font-size: .92rem; color: #64748B; }
.sec--navy .sec-head__sub { color: rgba(255,255,255,.7); }
.sec-head__sub .hand { color: var(--coral); font-size: 1.05rem; }
.sec-link {
    font-size: .88rem; font-weight: 700; color: var(--coral); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease), color .2s var(--ease);
}
.sec-link:hover { color: var(--coral-deep); gap: 10px; }
.sec--navy .sec-link { color: #FBBF24; }
.doodle-heading-arrow { color: #1F2937; flex: none; }

/* ====================== EXPLORE VENUES BY EVENT ====================== */
.event-cards-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.event-card {
    background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #EEF2F6;
    box-shadow: 0 4px 14px rgba(0,0,0,.04); text-align: center; display: flex; flex-direction: column;
    transition: all .25s var(--ease-out);
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.09); border-color: #CBD5E1; color: inherit; }
.event-card__img-wrap { aspect-ratio: 3 / 2; overflow: hidden; background: #F8FAFC; }
.event-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-out); }
.event-card:hover .event-card__img-wrap img { transform: scale(1.06); }
.event-card__content { padding: 12px 8px 14px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.event-card__icon { font-size: 1.05rem; color: var(--coral); margin-bottom: 6px; }
.event-card__name { font-size: .82rem; font-weight: 700; color: var(--navy); margin: 0 0 3px; line-height: 1.25; }
.event-card__desc { font-size: .7rem; color: #64748B; margin: 0; line-height: 1.25; }

/* ============================= MEET BABA ============================= */
.section--meet-baba { padding: 64px 0; background: var(--cream); border-top: 1px solid #F6ECE0; border-bottom: 1px solid #F6ECE0; }
.meet-baba__container { display: grid; grid-template-columns: 1.1fr 1.3fr 1.15fr; gap: 36px; align-items: center; }
.meet-baba__left { display: flex; align-items: flex-start; gap: 16px; position: relative; }
.meet-baba__polaroid-wrap { position: relative; }
.meet-baba__polaroid-tag {
    position: absolute; top: -34px; right: -12px; font-family: var(--font-hand); font-size: 1.15rem; font-weight: 700;
    color: #1F2937; display: flex; align-items: center; gap: 4px; z-index: 2;
}
.meet-baba__polaroid-card {
    background: #fff; padding: 8px 8px 22px; border-radius: 4px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
    transform: rotate(-3.5deg); transition: transform .3s var(--ease); border: 1px solid #EEE;
}
.meet-baba__polaroid-card:hover { transform: rotate(-.5deg) scale(1.02); }
.meet-baba__polaroid-img img { width: 150px; height: auto; border-radius: 2px; display: block; }
.pinned-memo-card {
    background: #fff; border: 1px solid #F3ECE3; border-radius: 6px; padding: 22px 16px 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.06); position: relative; font-family: var(--font-hand); min-width: 135px; transform: rotate(2deg);
}
.pinned-memo-card__pin { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--gold); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.pinned-memo-card__list { margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: #1F2937; line-height: 1.45; }
.pinned-memo-card__list .chk { color: var(--coral); margin-right: 4px; }
.pinned-memo-card__smile { text-align: right; font-size: 1.1rem; color: #1F2937; }
.meet-baba__title { font-size: 2.5rem; font-weight: 800; color: var(--navy); margin: 0 0 6px; line-height: 1.15; }
.meet-baba__color { background: linear-gradient(135deg, #F04258 0%, #F59E0B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.meet-baba__tagline { font-size: 1.1rem; font-weight: 700; color: #1E293B; margin: 0 0 12px; }
/* A container, not a <p>: the copy is admin-editable rich text. */
.meet-baba__desc { font-size: .94rem; color: #475569; line-height: 1.6; margin: 0 0 22px; }
.meet-baba__desc > :first-child { margin-top: 0; }
.meet-baba__desc > :last-child { margin-bottom: 0; }
.meet-baba__desc p { margin: 0 0 10px; }
.comic-bubble-baba {
    background: #fff; border: 1.8px solid var(--navy); border-radius: 20px; padding: 12px 18px;
    font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.25;
    text-align: center; position: relative; margin-bottom: 20px; box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.comic-bubble-baba p { margin: 0; }
.comic-bubble-baba__tail { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 11px solid var(--navy); }
.meet-baba__thumbs-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.baba-thumb-unit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.baba-thumb-unit__img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); transition: transform .2s var(--ease); }
.baba-thumb-unit:hover .baba-thumb-unit__img { transform: scale(1.12); }
.baba-thumb-unit span { font-size: .72rem; font-weight: 600; color: #475569; }
.meet-baba__story-quote { font-family: var(--font-hand); font-size: 1.05rem; font-weight: 700; color: #1F2937; line-height: 1.25; text-align: right; position: relative; padding-right: 30px; }
.meet-baba__story-quote p { margin: 0; }
.story-quote-arrow { position: absolute; right: 0; bottom: -6px; }

/* ========================== BABA'S TOP 5 TIPS ========================== */
.section--baba-tips { padding: 28px 0 56px; background: #fff; }
.baba-tips-banner { background: #fff; border-radius: 18px; border: 1px solid #E2E8F0; box-shadow: 0 8px 24px rgba(0,0,0,.05); display: flex; align-items: stretch; overflow: hidden; }
/* The photograph fills the badge at every width. It used to be a fixed 260px
   crop, which floated in the middle of a 726px band on a tablet and spilled
   12px past an 80px-tall band on a phone. */
.baba-tips-banner__badge {
    position: relative; background: #0F1115; flex: 0 0 300px;
    display: grid; place-items: center; overflow: hidden; min-height: 108px;
}
.baba-tips-banner__badge picture { position: absolute; inset: 0; display: block; }
.baba-tips-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; display: block; }
.baba-tips-banner__badge::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(15,17,21,.82) 0%, rgba(15,17,21,.45) 60%, rgba(15,17,21,.72) 100%);
}
.baba-tips-banner__label {
    position: relative; z-index: 1; text-align: center;
    font-family: var(--font-hand); font-weight: 700; color: #fff;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.baba-tips-banner__list { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 12px 20px; align-items: center; }
.baba-tip-item { display: flex; align-items: center; gap: 10px; border-right: 1px solid #F1F5F9; padding-right: 10px; }
.baba-tip-item:last-child { border-right: 0; }
.baba-tip-item__icon { font-size: 1.15rem; color: #64748B; flex: none; }
.baba-tip-item__icon--rupee { width: 24px; height: 24px; border: 1.5px solid #64748B; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.baba-tip-item__title { font-size: .82rem; font-weight: 700; color: var(--navy); margin: 0 0 2px; line-height: 1.2; }
.baba-tip-item__desc { font-size: .72rem; color: #64748B; margin: 0; line-height: 1.2; }

/* ==================== POPULAR VENUES (venue cards) ==================== */
.venue-card { border-radius: 16px; border-color: #EEF2F6; }
.venue-card__title { font-size: 1rem; color: var(--navy); }
.venue-card__cta { border-color: #E2E8F0; }
.venue-card__cta:hover { border-color: var(--coral); color: var(--coral); }
.near-you__tools .btn--dark { background: var(--navy); }
.pincode-mini { border-radius: 999px; }

/* ================== HORIZONTAL SCROLLER (cities, events) ================== */
.hscroll {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
    scrollbar-width: none; -ms-overflow-style: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .hscroll--7 { grid-template-columns: repeat(7, 1fr); grid-auto-flow: row; overflow: visible; } }

/* ============================ CITY CARDS ============================ */
.city-tile {
    position: relative; display: block; border-radius: 14px; overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--navy-2); color: #fff;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.city-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.22); color: #fff; }
.city-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); background: none; }
.city-tile:hover .city-tile__img { transform: scale(1.06); }
/* No photo yet: a designed tile rather than a grey placeholder. */
.city-tile--nophoto { background: linear-gradient(145deg, var(--navy-2) 0%, var(--navy-3) 55%, #2A3558 100%); }
.city-tile--nophoto::before {
    content: attr(data-initial); position: absolute; right: -6px; bottom: -22px;
    font-size: 7rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.07); letter-spacing: -.06em;
}
.city-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.88) 100%); }
.city-tile__body { position: absolute; left: 14px; right: 14px; bottom: 12px; }
.city-tile__name { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.city-tile__meta { display: block; font-size: .72rem; color: rgba(255,255,255,.75); font-weight: 600; margin-top: 2px; }
.city-tile__pin { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); display: grid; place-items: center; font-size: .8rem; color: #fff; }

/* ========================== VENUE TYPE CARDS ========================== */
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.type-card {
    position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3;
    background: var(--cream-2); border: 1px solid #EEF2F6; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.type-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.14); color: inherit; }
.type-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.type-card:hover .type-card__img { transform: scale(1.06); }
.type-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 42%, rgba(15,23,42,.85) 100%); }
.type-card__body { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.type-card__name { display: block; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.type-card__count { display: block; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.78); margin-top: 2px; }
.type-card--icon { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; background: #fff; }
.type-card--icon .type-card__icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: #FFF1F3; color: var(--coral); font-size: 1.05rem; margin-bottom: auto;
}
.type-card--icon .type-card__body { position: static; color: var(--navy); margin-top: 14px; }
.type-card--icon .type-card__count { color: #64748B; }

/* ===================== HOSTING (guest count) + TELL BABA ===================== */
.duo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; }
/* One panel left standing (the other switched off in admin) spans the row
   rather than leaving a hole beside it. */
.duo--single { grid-template-columns: 1fr; }
.panel-v2 { border-radius: 20px; padding: clamp(22px, 3vw, 34px); position: relative; overflow: hidden; }
.panel-v2--mint { background: linear-gradient(135deg, #E9F7EF 0%, #F4FBF6 100%); border: 1px solid #D5EEDF; }
.panel-v2--cream { background: var(--cream); border: 1px solid #F1E6D6; }
.panel-v2__title { font-size: 1.35rem; font-weight: 800; color: var(--navy); margin: 0 0 6px; letter-spacing: -.02em; }
.panel-v2__sub { font-size: .9rem; color: #64748B; margin: 0 0 18px; }
.panel-v2__note { position: absolute; top: 18px; right: 22px; font-family: var(--font-hand); font-weight: 700; color: var(--navy); font-size: 1.05rem; line-height: 1.15; text-align: center; max-width: 150px; }
.panel-v2__note p { margin: 0; }
.panel-v2__baba { position: absolute; left: 0; bottom: 0; width: 210px; pointer-events: none; }
.panel-v2__baba img { width: 100%; height: auto; display: block; background: none; mask-image: linear-gradient(to top, transparent 0, #000 25%); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 25%); }
.panel-v2--with-baba { padding-left: 230px; min-height: 260px; }

.guest-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.guest-opt {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 14px 8px; border-radius: 14px; background: #fff; border: 1px solid #E2E8F0;
    transition: all .2s var(--ease); color: var(--navy);
}
.guest-opt:hover { border-color: var(--coral); box-shadow: 0 8px 20px rgba(15,23,42,.08); transform: translateY(-2px); color: var(--navy); }
.guest-opt__icon { width: 42px; height: 42px; border-radius: 50%; background: #FFF1F3; color: var(--coral); display: grid; place-items: center; font-size: 1rem; }
.guest-opt__label { font-size: .8rem; font-weight: 700; }
.guest-opt__range { font-size: .7rem; color: #64748B; }

.need-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.need-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #E2E8F0; font-size: .85rem; font-weight: 600; color: var(--navy);
    transition: all .2s var(--ease);
}
.need-chip i { color: var(--coral); font-size: .8rem; }
.need-chip:hover { border-color: var(--coral); background: #FFF6F7; color: var(--navy); transform: translateY(-1px); }

/* ============================ BABA'S PICKS ============================ */
/* Dark band: the section-heading defaults are inked for light grounds, so the
   text colours are restated here rather than relying on inheritance. */
.picks { position: relative; overflow: hidden; color: #fff; background: var(--navy); }
.picks .sec-head__title { color: #fff; }
.picks .sec-head__sub { color: rgba(255,255,255,.72); }
.picks .sec-head__sub .hand { color: #FBBF24; }
.picks .sec-link { color: #FBBF24; }
.picks .sec-link:hover { color: #FCD34D; }
.picks__bg { position: absolute; inset: 0; }
.picks__bg picture { display: block; height: 100%; }
.picks__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .30; filter: saturate(1.1); }
.picks__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.9) 100%); }
.picks .container { position: relative; }
.picks__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pick-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--navy-2); }
.pick-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pick-card:hover .pick-card__img { transform: scale(1.06); }
.pick-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,.92) 100%); }
.pick-card__tag {
    position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; background: #fff; color: var(--navy);
}
.pick-card__tag--featured { background: var(--coral); color: #fff; }
.pick-card__tag--premium  { background: var(--gold); color: var(--navy); }
.pick-card__tag--popular  { background: #FB923C; color: #fff; }
.pick-card__tag--top-venue { background: #22C55E; color: #fff; }
.pick-card__tag--verified { background: #fff; color: #17795A; }
.pick-card__body { position: absolute; left: 12px; right: 12px; bottom: 12px; color: #fff; }
.pick-card__name { display: block; font-size: .95rem; font-weight: 800; line-height: 1.25; }
.pick-card__meta { display: block; font-size: .72rem; color: rgba(255,255,255,.75); margin-top: 3px; }
.pick-card__price { display: block; font-size: .78rem; font-weight: 700; color: #FBBF24; margin-top: 4px; }

/* ========================== BEFORE YOU BOOK ========================== */
.check-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.check-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #EEF2F6; }
.check-card__icon { width: 40px; height: 40px; border-radius: 12px; background: #FFF1F3; color: var(--coral); display: grid; place-items: center; font-size: .95rem; flex: none; }
.check-card__title { font-size: .85rem; font-weight: 700; color: var(--navy); margin: 0; }
.check-card__text { font-size: .72rem; color: #64748B; margin: 0; line-height: 1.3; }

/* ======================== DESTINATION WEDDING ======================== */
.destination { background: linear-gradient(180deg, #FFF 0%, var(--cream) 100%); }
.destination__head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 24px; }
.dest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dest-card { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1; background: var(--navy-2); color: #fff; }
.dest-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.dest-card:hover .dest-card__img { transform: scale(1.07); }
.dest-card--nophoto { background: linear-gradient(160deg, #F59E0B 0%, #F04258 60%, #9F1239 100%); }
.dest-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,.85) 100%); }
.dest-card__body { position: absolute; left: 12px; right: 12px; bottom: 10px; }
.dest-card__name { display: block; font-weight: 800; font-size: .95rem; }
.dest-card__meta { display: block; font-size: .7rem; color: rgba(255,255,255,.78); }
.dest-card:hover { color: #fff; }

/* ========================= SOCIAL PROOF / TRUST ========================= */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proof-card { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid #EEF2F6; display: flex; flex-direction: column; gap: 10px; }
.proof-card .stars { color: var(--gold); }
.proof-card__quote { margin: 0; font-size: .92rem; color: #334155; line-height: 1.6; flex: 1; }
.proof-card__who { display: flex; align-items: center; gap: 10px; }
.proof-card__name { font-weight: 700; font-size: .88rem; color: var(--navy); display: block; }
.proof-card__role { font-size: .72rem; color: #64748B; display: block; }
.proof-note { font-family: var(--font-hand); font-weight: 700; color: var(--navy); font-size: 1.1rem; text-align: right; margin-top: 12px; }
.proof-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ========================== FOR VENUE OWNERS ========================== */
.owners-band {
    position: relative; overflow: hidden; border-radius: 22px;
    background: linear-gradient(120deg, var(--leaf-deep) 0%, var(--leaf) 55%, #2B7A5B 100%);
    color: #fff; padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center;
}
.owners-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,.12), transparent 60%); }
.owners-band > * { position: relative; }
.owners-band__eyebrow { font-family: var(--font-hand); font-weight: 700; font-size: 1.15rem; color: #FBBF24; margin: 0 0 6px; }
.owners-band__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.025em; margin: 0 0 10px; line-height: 1.15; }
.owners-band__sub { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0 0 18px; max-width: 520px; }
.owners-band__benefits { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 22px; }
.owners-band__benefits li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: #fff; }
.owners-band__benefits i { color: #86EFAC; }
.owners-band__media { position: relative; }
.owners-band__media picture { display: block; }
/* Portrait artwork: capped by height so the band keeps its proportions, and
   anchored to the top so Baba's face is never the part that gets cropped. */
.owners-band__photo {
    width: 100%; max-height: 300px; object-fit: cover; object-position: center top;
    border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.3); background: none;
}

/* ============================ ASK BABA CTA ============================ */
.ask-baba {
    position: relative; overflow: hidden; border-radius: 22px; background: var(--navy); color: #fff;
    display: grid; grid-template-columns: 1.4fr .9fr; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 48px);
}
.ask-baba::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 320px at 15% 0%, rgba(240,66,88,.35), transparent 60%), radial-gradient(500px 300px at 100% 100%, rgba(245,184,46,.22), transparent 60%); }
.ask-baba > * { position: relative; }
.ask-baba__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.03em; margin: 0 0 10px; }
.ask-baba__sub { color: rgba(255,255,255,.8); font-size: 1rem; margin: 0 0 22px; max-width: 520px; }
.ask-baba__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ask-baba__media { position: relative; }
.ask-baba__media picture { display: block; }
.ask-baba__media img {
    width: 100%; max-width: 330px; max-height: 300px; margin-left: auto;
    object-fit: cover; object-position: center top;
    border-radius: 16px; display: block; background: none; box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* ============================== FOOTER v2 ============================== */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); padding-block: 56px 28px; }
.site-footer__top { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 28px; padding-bottom: 32px; border-bottom-color: rgba(255,255,255,.1); }
.site-footer__heading { font-size: .72rem; letter-spacing: .12em; }
.site-footer__col ul { gap: 9px; }
.site-footer__col a { font-size: .88rem; color: rgba(255,255,255,.7); }
.site-footer__col a:hover { color: #fff; }
.site-footer__tag { font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem; color: #FBBF24; margin: 12px 0 0; }
.site-footer__blurb { font-size: .84rem; color: rgba(255,255,255,.66); }
.social-list a { background: rgba(255,255,255,.08); }
.social-list a:hover { background: var(--coral); }
.site-footer__bottom { padding-top: 20px; font-size: .8rem; }
.site-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__legal a { color: rgba(255,255,255,.6); }
.site-footer__legal a:hover { color: #fff; }
.site-footer__line { font-family: var(--font-hand); font-style: normal; font-weight: 700; font-size: 1rem; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1180px) {
    .event-cards-grid { grid-template-columns: repeat(4, 1fr); }
    .picks__grid { grid-template-columns: repeat(3, 1fr); }
    .check-grid { grid-template-columns: repeat(3, 1fr); }
    .dest-grid { grid-template-columns: repeat(4, 1fr); }
    .hero-search-doodle { padding-left: 140px; }
    .baba-tips-banner__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
    .hero-v2 { min-height: 0; }
    .hero-v2__bg img { object-position: 66% center; }
    .hero-v2__shade { background: linear-gradient(90deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.78) 45%, rgba(10,9,8,.45) 100%), linear-gradient(180deg, rgba(10,9,8,.3) 0%, rgba(10,9,8,0) 30%, rgba(10,9,8,.6) 100%); }
    .trust-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .meet-baba__container { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .meet-baba__left { justify-content: center; }
    .meet-baba__desc, .comic-bubble-baba { max-width: 520px; margin-left: auto; margin-right: auto; }
    .meet-baba__story-quote { text-align: center; padding-right: 0; }
    .story-quote-arrow { position: static; display: inline-block; margin-top: 4px; }
    .baba-tips-banner { flex-direction: column; }
    .baba-tips-banner__badge { flex: none; width: 100%; min-height: 96px; }
    .baba-tips-banner__list { grid-template-columns: repeat(2, 1fr); }
    .duo { grid-template-columns: 1fr; }
    .type-grid { grid-template-columns: repeat(3, 1fr); }
    .owners-band, .ask-baba { grid-template-columns: 1fr; }
    .owners-band__photo { max-height: 240px; object-position: center 22%; }
    .ask-baba__media img { margin-left: 0; max-width: 100%; max-height: 240px; object-position: center 22%; }
    .proof-grid, .proof-trust { grid-template-columns: 1fr 1fr; }
    .site-footer__top { grid-template-columns: 1fr 1fr 1fr; }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .hero-v2 { padding: 36px 0 44px; }
    .hero-v2__title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
    .hero-search-card { border-radius: 18px; flex-direction: column; align-items: stretch; padding: 12px; gap: 4px; }
    .search-step { padding: 10px 6px; border-bottom: 1px solid #F1F5F9; }
    .search-step__select, .search-step__input { font-size: .9rem; }
    .search-step__sep { display: none; }
    .search-step__action { padding-top: 10px; }
    .hero-find-btn { width: 100%; justify-content: center; padding: 14px; }
    .hero-search-doodle { padding-left: 0; justify-content: center; }
    .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* grid-template-columns MUST be cleared: the desktop rule's repeat(7, 1fr)
       otherwise survives, the seven explicit tracks collapse to ~2px each, and
       only the overflow items get a usable width. */
    .event-cards-grid {
        display: grid; grid-template-columns: none;
        grid-auto-flow: column; grid-auto-columns: 46%;
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none;
    }
    .event-cards-grid::-webkit-scrollbar { display: none; }
    .event-cards-grid > * { scroll-snap-align: start; }
    .hscroll { grid-auto-columns: 62%; }
    .type-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .guest-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .panel-v2--with-baba { padding-left: clamp(22px, 3vw, 34px); }
    .panel-v2__baba { display: none; }
    .panel-v2__note { position: static; max-width: none; text-align: left; margin: 0 0 12px; }
    .picks__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .check-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .destination__head { grid-template-columns: 1fr; }
    .dest-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .proof-grid, .proof-trust { grid-template-columns: 1fr; }
    .site-footer__top { grid-template-columns: 1fr 1fr; }
    .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 480px) {
    .trust-strip__inner { grid-template-columns: 1fr 1fr; gap: 12px; }
    .trust-item__icon { width: 38px; height: 38px; font-size: .95rem; }
    .trust-item__title { font-size: .85rem; }
    .trust-item__sub { font-size: .72rem; }
    .event-cards-grid { grid-auto-columns: 58%; }
    .hscroll { grid-auto-columns: 78%; }
    .guest-grid { grid-template-columns: repeat(2, 1fr); }
    .dest-grid { grid-template-columns: repeat(2, 1fr); }
    .check-grid { grid-template-columns: 1fr; }
    .picks__grid { grid-template-columns: 1fr 1fr; }
    .meet-baba__left { flex-direction: column; align-items: center; gap: 26px; }
    .site-footer__top { grid-template-columns: 1fr; }
}
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-tile {
    position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3;
    background: var(--navy-2); color: #fff; transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,.18); color: #fff; }
.cat-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.cat-tile:hover .cat-tile__img { transform: scale(1.06); }
.cat-tile--nophoto { background: linear-gradient(150deg, var(--navy-2), #2A3558); }
.cat-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.05) 30%, rgba(15,23,42,.9) 100%); }
.cat-tile__icon { position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display: grid; place-items: center; font-size: .95rem; }
.cat-tile__body { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cat-tile__name { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; }
.cat-tile__text { display: block; font-size: .75rem; color: rgba(255,255,255,.78); margin-top: 3px; line-height: 1.35; }
.cat-tile__count { display: block; font-size: .72rem; font-weight: 700; color: #FBBF24; margin-top: 5px; }
.cat-tile__arrow { width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; flex: none; font-size: .8rem; transition: transform .2s var(--ease); }
.cat-tile:hover .cat-tile__arrow { transform: translateX(3px); }

.state-block { margin-bottom: 34px; }
.state-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.state-block__title { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin: 0; }
.state-block__title a:hover { color: var(--coral); }
.state-block__meta { font-size: .8rem; color: #64748B; }
.city-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.city-row {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
    background: #fff; border: 1px solid #EEF2F6; color: var(--navy); transition: all .2s var(--ease);
}
.city-row:hover { border-color: var(--coral); box-shadow: 0 8px 20px rgba(15,23,42,.08); transform: translateY(-2px); color: var(--navy); }
.city-row__pin { width: 32px; height: 32px; border-radius: 50%; background: #FFF1F3; color: var(--coral); display: grid; place-items: center; font-size: .8rem; flex: none; }
.city-row__name { display: block; font-weight: 700; font-size: .9rem; }
.city-row__count { display: block; font-size: .72rem; color: #64748B; }

@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .city-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .city-list { grid-template-columns: repeat(2, 1fr); } .cat-tile__text { display: none; } }
@media (max-width: 420px) { .city-list { grid-template-columns: 1fr; } }

/* =====================================================================
   23  ONE DESIGN SYSTEM ACROSS ALL THREE SURFACES
   ---------------------------------------------------------------------
   Public site, owner portal and admin now share one action colour. The
   logo's magenta→teal sweep stays exactly where it belongs — the mark
   itself, gradient-clipped figures and brand accents — but anything the
   user *acts on* is coral, as in the prototype.

   Contrast, measured against white label text:
     #F04258  3.7:1  — decorative only (icon chips, rules, hovers)
     #DE2A45  4.6:1  — lightest stop a filled button may use
     #C81F38  5.7:1  — coral as TEXT on a light surface
   ===================================================================== */
:root {
    --coral-ink:  #C81F38;   /* coral text/icons on light grounds */
    --coral-btn:  linear-gradient(135deg, #DE2A45 0%, #C81F38 100%);
    --coral-btn-deep: linear-gradient(135deg, #C81F38 0%, #A81730 100%);
}

/* ---- Primary action, everywhere -------------------------------------- */
.btn--primary {
    background-image: var(--coral-btn);
    box-shadow: 0 4px 14px rgba(200,31,56,.28);
}
.btn--primary:hover {
    background-image: var(--coral-btn-deep);
    box-shadow: 0 8px 22px rgba(200,31,56,.34);
}
/* The pill on the public site is the same action colour, just rounder. */
.btn--coral-pill { background: var(--coral-btn); box-shadow: 0 4px 14px rgba(200,31,56,.30); }
.btn--coral-pill:hover { background: var(--coral-btn-deep); box-shadow: 0 6px 20px rgba(200,31,56,.40); }
.hero-find-btn { background: var(--coral-btn); box-shadow: 0 4px 16px rgba(200,31,56,.40); }
.hero-find-btn:hover { background: var(--coral-btn-deep); box-shadow: 0 6px 22px rgba(200,31,56,.50); }

.btn--dark { background: var(--navy); }
.btn--dark:hover { background: var(--navy-3); }

/* Coral used as text needs the deep stop, not the brand hue. */
.sec-link, .event-card__icon, .need-chip i, .check-card__icon,
.guest-opt__icon, .type-card--icon .type-card__icon { color: var(--coral-ink); }
.sec-link:hover { color: #A81730; }

/* ---- Brand accents that were magenta ---------------------------------- */
.eyebrow { color: var(--coral-ink); }
.eyebrow::before { background: var(--coral-btn); }
.avatar { background: var(--coral-btn); }
.progress__bar { background: var(--coral-btn); }
.chart__bar { background: var(--coral-btn); }
.rating-bar__fill { background: var(--coral-btn); }
.badge--gradient { background: var(--coral-btn); box-shadow: 0 2px 8px rgba(200,31,56,.28); }
.enquiry-head__icon { background: var(--coral-btn); box-shadow: 0 8px 22px rgba(200,31,56,.26); }
.gm-item__cover-flag { background: var(--coral-btn); }
.gm-item.is-cover { border-color: var(--coral); }
.step:hover .step__num { background-image: var(--coral-btn); }
.tabs__item.is-active { border-bottom-color: var(--coral); }
.tabs__item.is-active .tabs__count { background: var(--coral-btn); }
.filters__title i, .filters__reset, .venue-block__title i { color: var(--coral-ink); }
.check input:checked + .check__box { border-color: var(--coral); background: var(--coral); }
.switch input:checked + .switch__track { background: var(--coral); }
.mega__icon, .suggest__icon, .feature__icon, .highlight__icon, .empty-state__icon {
    background: #FFF1F3; color: var(--coral-ink);
}
.faq__q::after { color: var(--coral-ink); }
.dropzone:hover, .dropzone.is-over { border-color: var(--coral); background: rgba(240,66,88,.04); }
.dropzone.is-over .dropzone__icon { color: var(--coral-ink); }
.fav-btn:hover, .fav-btn.is-saved { color: var(--coral-ink); }
/* Markers only. Recolouring the brand glyphs here would make them coral on a
   coral circle — invisible — once the social button is hovered. */
.site-footer__contact ul:not(.social-list) i { color: var(--coral); }
.social-list a:hover { background: var(--coral-btn); }
:focus-visible { outline-color: var(--coral); }
:root { --ring: 0 0 0 3px rgba(240,66,88,.20); }
input:focus, select:focus, textarea:focus { border-color: var(--coral); }
.input-wrap:focus-within > i { color: var(--coral-ink); }
.pincode-mini > i { color: var(--coral-ink); }
.searchbox__control > i { color: var(--coral-ink); }
a:hover { color: var(--coral-ink); }
.prose a, .auth__switch a, .check__label a { color: var(--coral-ink); }

/* ===================== 24  VENUE PAGE (phase 4) ===================== */
/* The hero grid assumed five photographs. With two, three or four it left
   black holes where cells had nothing to fill them, so each count now gets
   a layout that is completely filled. */
.venue-hero__gallery { border-radius: 0; }
.venue-hero--n2 .venue-hero__gallery { grid-template-columns: 1fr 1fr; }
.venue-hero--n2 .venue-hero__cell:first-child { grid-row: auto; }
.venue-hero--n3 .venue-hero__gallery { grid-template-columns: 2fr 1fr; }
.venue-hero--n3 .venue-hero__cell:first-child { grid-row: span 2; }
.venue-hero--n4 .venue-hero__gallery { grid-template-columns: 2fr 1fr 1fr; }
.venue-hero--n4 .venue-hero__cell:first-child { grid-row: span 2; }
.venue-hero--n4 .venue-hero__cell:nth-child(4) { grid-column: span 2; }

.venue-head__title { color: var(--navy); }
.venue-block__title { color: var(--navy); }
.venue-hero__more { border-radius: var(--r-full); font-weight: 700; }

/* Enquiry panel — the money column. */
.enquiry-panel { border-radius: var(--r-lg); border-color: #EEF2F6; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.enquiry-panel__head { background: var(--cream); border-bottom-color: #F1E6D6; }
.enquiry-panel__price-value { color: var(--navy); }
.enquiry-panel__foot i { color: var(--coral-ink); }

/* A venue with no map still needs a designed block, not an empty grey box. */
.map-empty {
    display: grid; place-items: center; gap: 8px; text-align: center;
    padding: var(--sp-10) var(--sp-5); border: 1px dashed var(--line);
    border-radius: var(--r-lg); background: var(--cream); color: var(--muted);
}
.map-empty__icon { width: 46px; height: 46px; border-radius: 50%; background: #FFF1F3; color: var(--coral-ink); display: grid; place-items: center; font-size: 1.05rem; }
.map-empty__title { font-weight: 700; color: var(--navy); margin: 0; font-size: var(--text-base); }
.map-empty__text { margin: 0; font-size: var(--text-sm); }

/* Sticky phone action bar */
.mobile-cta { border-top-color: #EEF2F6; }

/* ================= 25  OWNER PORTAL (phase 5) ================= */
/* A business tool: same brand, calmer surface. Navy for structure, coral
   reserved for the one action per screen. */
.dash__sidebar { background: var(--surface); border-right-color: #EEF2F6; }
.dash-nav__item.is-active { background: var(--navy); color: #fff; }
.dash-nav__item.is-active i { color: #fff; }
.dash-nav__badge { background: var(--coral); }
.dash-nav__item.is-active .dash-nav__badge { background: rgba(255,255,255,.24); color: #fff; }
.dash-head__title { color: var(--navy); letter-spacing: -.03em; }
.panel { border-color: #EEF2F6; border-radius: var(--r-lg); }
.panel__title { color: var(--navy); }
.panel__foot { background: var(--cream); border-top-color: #F1E6D6; }
.stat-card { border-color: #EEF2F6; border-radius: var(--r-lg); }
.stat-card__value { color: var(--navy); }
.stat-card--pink .stat-card__icon { background: #FFF1F3; color: var(--coral-ink); }
.wizard-step.is-active { background: var(--navy); border-color: var(--navy); }
.dash-nav .dash-nav__item.is-active { background: var(--navy); }

/* ==================== 26  ADMIN (phase 6) ==================== */
.admin-sidebar { background: var(--navy); }
.admin-sidebar__brand { border-bottom-color: rgba(255,255,255,.1); }
.admin-nav__item.is-active { background: var(--coral-btn); color: #fff; }
.admin-nav__item.is-active i { color: #fff; }
.admin-nav__badge { background: var(--coral); }
.admin-topbar { border-bottom-color: #EEF2F6; }
.admin-topbar__title { color: var(--navy); }
.admin-content { background: var(--bg); }

/* Tables: the action column is pinned right and must not ride outside the
   panel's rounded edge on a narrow viewport. */
.table th { background: var(--cream); color: var(--navy); border-bottom-color: #F1E6D6; }
.table__primary { color: var(--navy); }
.table-wrap { border-radius: inherit; }
.table__actions { justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.panel__body--flush .table-wrap { max-width: 100%; }

/* The off-canvas admin drawer had nothing behind it, so the page underneath
   stayed fully lit and the drawer read as a floating panel. Clicking outside
   already closes it (see adminNav in the JS); this just makes that obvious. */
@media (max-width: 980px) {
    .admin-sidebar.is-open::after {
        content: ''; position: fixed; inset: 0; left: 260px;
        background: rgba(15,23,42,.5); z-index: -1;
    }
}

/* Gradient-clipped figures (percentages, counters) follow the action colour
   so a dashboard does not mix a coral progress bar with a magenta number.
   The logo's own sweep stays on the mark and the footer signature. */
.text-gradient { background: linear-gradient(135deg, #DE2A45 0%, #A81730 100%); }

/* Auth screens share the navy ground. */
.auth__aside { background: var(--navy); }
.auth__title, .auth__aside-title { color: inherit; }
.auth__main .auth__title { color: var(--navy); }
.role-toggle a.is-active { color: var(--navy); }

/* Error / confirmation pages */
.error-page__code { background: var(--coral-btn); -webkit-background-clip: text; background-clip: text; }
.error-page__title { color: var(--navy); }

@media (max-width: 980px) {
    .venue-hero--n2 .venue-hero__gallery,
    .venue-hero--n3 .venue-hero__gallery,
    .venue-hero--n4 .venue-hero__gallery { grid-template-columns: unset; }
    .venue-hero--n2 .venue-hero__cell:first-child,
    .venue-hero--n3 .venue-hero__cell:first-child,
    .venue-hero--n4 .venue-hero__cell:first-child { grid-row: auto !important; }
    .venue-hero--n4 .venue-hero__cell:nth-child(4) { grid-column: auto; }
}

/* =====================================================================
   27  SHARED PAGE HERO  +  LISTING / FILTER PAGES
   ---------------------------------------------------------------------
   One navy header for every non-home public page (about, contact, the two
   index pages and all six listing routes), so discovery reads as one flow.
   Replaces the earlier .disc-hero, which only two pages used.
   ===================================================================== */
.page-hero {
    position: relative; overflow: hidden;
    background: var(--navy); color: #fff;
    padding: clamp(34px, 5vw, 60px) 0 clamp(30px, 4vw, 48px);
}
.page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(760px 340px at 88% 0%, rgba(240,66,88,.34), transparent 62%),
        radial-gradient(520px 300px at 2% 100%, rgba(245,184,46,.18), transparent 60%);
}
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
/* With a photograph behind it the copy needs a real scrim, not just the wash. */
.page-hero--photo::before {
    background:
        linear-gradient(180deg, rgba(15,23,42,.72) 0%, rgba(15,23,42,.88) 100%),
        radial-gradient(760px 340px at 88% 0%, rgba(240,66,88,.28), transparent 62%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__eyebrow {
    font-family: var(--font-hand); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: #FBBF24; margin: 0 0 6px;
}
.page-hero__title {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: -.03em;
    color: #fff; margin: 0 0 10px; max-width: 820px;
}
.page-hero__sub { color: rgba(255,255,255,.82); font-size: clamp(.94rem, 1.2vw, 1.02rem); max-width: 620px; margin: 0; }
.page-hero__stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.page-hero__stat { font-size: .82rem; color: rgba(255,255,255,.72); margin: 0; }
.page-hero__stat strong { display: block; font-size: 1.4rem; color: #fff; letter-spacing: -.02em; font-weight: 800; }
.page-hero__search { margin-top: 22px; max-width: 760px; }
.page-hero__search .searchbox { box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.page-hero__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.page-hero__chips-label { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.62); }

/* Chips sitting on the navy ground rather than a light page. */
.chip--on-dark {
    background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff;
    backdrop-filter: blur(4px);
}
.chip--on-dark:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); color: #fff; }
.chip--on-dark.is-active { background: #fff; border-color: #fff; color: var(--navy); }
.chip__count { opacity: .65; font-weight: 600; }

/* ---------------------- filter + results layout ---------------------- */
.listing { gap: var(--sp-6); }
.filters { border-color: #EEF2F6; border-radius: var(--r-lg); box-shadow: 0 4px 16px rgba(15,23,42,.05); }
.filters__head { background: var(--cream); border-bottom-color: #F1E6D6; }
.filters__title { color: var(--navy); }
.filter-group__summary { color: var(--navy); }
.filter-group__summary:hover { color: var(--coral-ink); }

.listing__toolbar {
    background: var(--surface); border: 1px solid #EEF2F6; border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-4); box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.listing__count { color: var(--muted); }
.listing__count strong { color: var(--navy); font-size: var(--text-lg); }
.sort-select { border-color: #E2E8F0; }

.active-filters .chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.active-filters .chip.is-active:hover { background: var(--coral-ink); border-color: var(--coral-ink); }

/* Beside the 286px filter column the 288px card floor only ever fitted two
   cards on a 1440 screen, leaving a wide gutter. A slightly smaller floor
   fits three without making the cards feel cramped. */
.listing__results .grid--venues { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); }

/* Related-search links at the foot of every listing page. */
.related-links { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 980px) {
    .page-hero { padding: 26px 0 22px; }
    .page-hero__search { margin-top: 16px; }
    .page-hero__stats { gap: 16px; margin-top: 14px; }
}
@media (max-width: 560px) {
    .page-hero__chips { gap: 6px; }
    .listing__toolbar { padding: var(--sp-3); }
    .listing__count strong { font-size: var(--text-base); }
}

/* =====================================================================
   28  ASK BABA — the concierge chat

   The n8n widget ships its own look. Everything below re-dresses it in the
   site's own system (navy header, cream body, coral accent, Plus Jakarta
   Sans) and replaces its launcher with ours, so nothing reads as a
   third-party bubble. Only n8n's public custom properties are set; its
   internal class names are touched in just two places, both noted.
   ===================================================================== */

/* `:root:root` on purpose. The widget's own stylesheet is pulled in from the
   CDN further down the document than this file, and it declares the same
   custom properties on a plain `:root`. Matching its specificity would hand
   the win to whichever loaded last; doubling ours settles it outright. */
:root:root {
    /* --- Palette ---------------------------------------------------- */
    --chat--color--primary:          var(--coral);
    --chat--color--primary-shade-50: var(--coral-deep);
    --chat--color--primary--shade-100: #C2283C;
    --chat--color--secondary:        var(--coral);
    --chat--color-secondary-shade-50: var(--coral-deep);
    --chat--color-dark:              var(--navy);
    --chat--color-light:             var(--cream);
    --chat--color-white:             #fff;

    --chat--font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* --- Window ----------------------------------------------------- */
    --chat--window--width:         392px;
    /* Never taller than the viewport can hold once the launcher and the gap
       below it are accounted for. */
    --chat--window--height:        min(600px, calc(100vh - 130px));
    --chat--window--border-radius: 22px;
    --chat--window--border:        1px solid rgba(15, 23, 42, .10);
    /* Below --z-sheet (900) so the mobile menu and every modal cover it. */
    --chat--window--z-index:       880;
    --chat--window--right:         24px;
    /* Clears the 60px launcher plus its own 24px offset, so the button stays
       visible and reachable while the chat is open instead of being buried
       under it. Phones take the opposite approach — see below. */
    --chat--window--bottom:        96px;
    --chat--window--margin-bottom: 0;
    --chat--border-radius:         14px;

    /* --- Header ----------------------------------------------------- */
    --chat--header--background:   linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
    --chat--header--color:        #fff;
    --chat--header--padding:      16px 18px;
    --chat--heading--font-size:   1.05rem;
    --chat--subtitle--font-size:  .78rem;
    --chat--subtitle--line-height: 1.35;

    /* --- Body / messages -------------------------------------------- */
    --chat--body--background:            var(--cream);
    --chat--messages-list--padding:      18px;
    --chat--message--font-size:          .9rem;
    --chat--message-line-height:         1.55;
    --chat--message--padding:            11px 14px;
    --chat--message--border-radius:      16px;
    --chat--message--margin-bottom:      12px;
    --chat--message--bot--background:    #fff;
    --chat--message--bot--color:         var(--navy);
    --chat--message--bot--border:        1px solid rgba(15, 23, 42, .08);
    --chat--message--user--background:   var(--coral);
    --chat--message--user--color:        #fff;
    --chat--message--user--border:       none;
    --chat--color-typing:                var(--coral);

    /* --- Footer / input --------------------------------------------- */
    --chat--footer--background:                 #fff;
    --chat--footer--color:                      var(--navy);
    --chat--footer--border-top:                 1px solid rgba(15, 23, 42, .08);
    --chat--footer--padding:                    12px;
    --chat--input--background:                  var(--cream);
    --chat--input--text-color:                  var(--navy);
    --chat--input--font-size:                   .9rem;
    --chat--input--placeholder--font-size:      .88rem;
    --chat--input--border:                      1px solid rgba(15, 23, 42, .10);
    --chat--input--border-active:               1px solid var(--coral);
    --chat--input--border-radius:               14px;
    --chat--input--send--button--background:       transparent;
    --chat--input--send--button--color:            var(--coral);
    --chat--input--send--button--background-hover:  transparent;
    --chat--input--send--button--color-hover:       var(--coral-deep);
    --chat--textarea--height:                   46px;

    /* --- Buttons (the "Start a New Search" reset) -------------------- */
    --chat--button--background--primary:        var(--coral);
    --chat--button--color--primary:             #fff;
    --chat--button--border--primary:            none;
    --chat--button--background--primary--hover: var(--coral-deep);
    --chat--button--color--primary--hover:      #fff;
    --chat--button--border--primary--hover:     none;
    --chat--button--border-radius:              999px;
    --chat--button--padding:                    10px 20px;
    --chat--button--font-size:                  .85rem;
}

/* n8n's own launcher: hidden, but still the thing that opens and closes the
   window. Ours forwards clicks to it. Kept in the layout tree (not
   display:none on the wrapper) so those synthetic clicks still land. */
.chat-window-wrapper.n8n-chat .chat-window-toggle {
    position: absolute; width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    opacity: 0; pointer-events: none;
}

/* The header becomes avatar + name + status line, the way an in-house
   support panel reads. The markup is header > (heading > h1) + p, so the
   avatar is drawn as a pseudo-element and the three parts placed on a grid. */
.chat-window-wrapper.n8n-chat .chat-header {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-areas: "avatar title close" "avatar subtitle close";
    align-items: center;
    column-gap: 12px;
    row-gap: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset;
}
.chat-window-wrapper.n8n-chat .chat-header::before {
    content: ''; grid-area: avatar;
    width: 42px; height: 42px; border-radius: 50%;
    background:
        var(--baba-chat-mark) center / 30px 30px no-repeat,
        linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
    box-shadow: 0 2px 10px rgba(240, 66, 88, .35);
}
.chat-window-wrapper.n8n-chat .chat-heading { grid-area: title; }
.chat-window-wrapper.n8n-chat .chat-header h1 {
    margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.2;
}
.chat-window-wrapper.n8n-chat .chat-header p {
    grid-area: subtitle; margin: 0;
    color: rgba(255, 255, 255, .62); font-weight: 500;
}

/* Added by the widget script — the vendor renders no close control in window
   mode, and on a phone the open window sits on top of the launcher, so this
   is the only way out of the chat. */
.chat-window-wrapper.n8n-chat .baba-chat__dismiss {
    grid-area: close;
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .85);
    font-size: 1rem; line-height: 1;
    transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.chat-window-wrapper.n8n-chat .baba-chat__dismiss:hover {
    background: rgba(255, 255, 255, .20); color: #fff; transform: rotate(90deg);
}
.chat-window-wrapper.n8n-chat .baba-chat__dismiss:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}

.chat-window-wrapper.n8n-chat .chat-window {
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 4px 14px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.chat-window-wrapper.n8n-chat .chat-message { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.chat-window-wrapper.n8n-chat .chat-message-from-user { box-shadow: 0 2px 10px var(--coral-glow); }

/* An empty `footer` string in the i18n config falls back to the vendor's own
   "Powered by n8n" line, which is the one thing that gives the widget away as
   bought-in. The footer keeps its padding so the input does not sit flush
   against the window edge. */
.chat-window-wrapper.n8n-chat .chat-powered-by { display: none; }

/* ---- Our launcher --------------------------------------------------- */
.baba-chat {
    position: fixed; right: 24px; bottom: 24px;
    z-index: 880;
}
.baba-chat[hidden] { display: none; }

.baba-chat__launcher {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit;
}

.baba-chat__label {
    font-family: var(--font-hand); font-weight: 700; font-size: 1.05rem;
    color: var(--navy); background: #fff;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
    white-space: nowrap;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.baba-chat__disc {
    position: relative; flex: none;
    width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
    box-shadow: 0 8px 24px var(--coral-glow), 0 2px 6px rgba(15, 23, 42, .18);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.baba-chat__launcher:hover .baba-chat__disc { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(240, 66, 88, .5); }
.baba-chat__launcher:active .baba-chat__disc { transform: scale(.96); }
.baba-chat__launcher:focus-visible { outline: none; }
.baba-chat__launcher:focus-visible .baba-chat__disc { box-shadow: var(--ring), 0 8px 24px var(--coral-glow); }

/* Baba while closed, a chevron once the window is up — one element swapping
   its contents, so the button never changes size or jumps. */
/* `background: none` undoes the global img placeholder tint, which would
   otherwise show as a pale square behind this transparent mark. */
.baba-chat__mark {
    width: 36px; height: 36px; display: block; background: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.baba-chat__close {
    position: absolute; color: #fff; font-size: 1.3rem;
    opacity: 0; transform: scale(.6);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.baba-chat.is-open .baba-chat__mark { opacity: 0; transform: scale(.6); }
.baba-chat.is-open .baba-chat__close { opacity: 1; transform: scale(1); }
.baba-chat.is-open .baba-chat__label { opacity: 0; transform: translateX(8px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .baba-chat__disc, .baba-chat__mark, .baba-chat__close, .baba-chat__label { transition: none; }
    .chat-window-wrapper.n8n-chat .baba-chat__dismiss { transition: none; }
    .chat-window-wrapper.n8n-chat .baba-chat__dismiss:hover { transform: none; }
}

/* ---- Phones --------------------------------------------------------- */
@media (max-width: 560px) {
    :root:root {
        --chat--window--width:  calc(100vw - 20px);
        --chat--window--height: min(72vh, 560px);
        --chat--window--right:  10px;
        /* A phone has no room to park the window above the launcher, so here
           the window simply covers it and the header's close button is the
           way out. */
        --chat--window--bottom: 10px;
    }
    .baba-chat { right: 16px; bottom: 16px; }
    /* The label needs room the phone has not got; the mark carries it. */
    .baba-chat__label { display: none; }
    .baba-chat__disc { width: 54px; height: 54px; }
    .baba-chat__mark { width: 32px; height: 32px; }
    /* A thumb needs more than the 34px the desktop header gives it, and on a
       phone this is the only way out of the chat. */
    .chat-window-wrapper.n8n-chat .baba-chat__dismiss { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* The venue page parks a fixed action bar along the bottom on small screens,
   so the launcher and the window both step above it. */
@media (max-width: 768px) {
    body.has-mobile-cta .baba-chat { bottom: calc(76px + 16px); }
    body.has-mobile-cta { --chat--window--bottom: 86px; }
}

/* Nothing floating belongs on a printed page. */
@media print {
    .baba-chat, .chat-window-wrapper { display: none !important; }
}

/* =====================================================================
   29  FAQ accordion  (views/components/faq-accordion.php)
   <details>-based, so it opens without JavaScript.
   ===================================================================== */
.faq-sec__inner { max-width: 880px; }
.faq-sec__head { margin-bottom: 22px; }
.faq-acc { display: grid; gap: 12px; }
.faq-item {
    background: #fff;
    border: 1px solid var(--line, #E7E5E1);
    border-radius: var(--r-md, 14px);
    box-shadow: var(--sh-xs, 0 1px 2px rgba(15, 23, 42, .04));
    transition: border-color .2s ease, box-shadow .2s ease;
}
.sec--white .faq-item { background: var(--cream, #FCF7F1); border-color: transparent; }
.faq-item:hover { border-color: rgba(240, 66, 88, .35); }
.faq-item[open] { border-color: rgba(240, 66, 88, .45); box-shadow: var(--sh-sm, 0 2px 8px rgba(23, 23, 23, .06)); }
.sec--white .faq-item[open] { background: #fff; }
.faq-item__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; cursor: pointer; list-style: none;
    border-radius: var(--r-md, 14px);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }
.faq-item__q:focus-visible { outline: 2px solid var(--coral, #F04258); outline-offset: 2px; }
.faq-item__title {
    margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45;
    color: var(--navy, #0F172A); letter-spacing: -.01em;
}
.faq-item__icon {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(240, 66, 88, .1); transition: background .2s ease, transform .25s ease;
}
.faq-item__icon::before,
.faq-item__icon::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 12px; height: 2px; border-radius: 2px; background: var(--coral, #F04258);
    transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .2s ease;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--coral, #F04258); transform: rotate(180deg); }
.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after { background: #fff; }
.faq-item[open] .faq-item__icon::after { opacity: 0; }
.faq-item__a {
    padding: 0 20px 18px; color: #475569; font-size: .95rem; line-height: 1.7;
}
.faq-item__a > :first-child { margin-top: 0; }
.faq-item__a > :last-child { margin-bottom: 0; }
.faq-item__a p { margin: 0 0 10px; }
.faq-item__a a { color: var(--coral-deep, #D93146); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.faq-item__a ul, .faq-item__a ol { margin: 0 0 10px; padding-left: 20px; }
.faq-sec__cta {
    margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    font-size: .92rem; color: #64748B;
}
.faq-sec__cta a { font-weight: 700; color: var(--coral, #F04258); display: inline-flex; align-items: center; gap: 6px; }
.faq-sec__cta a:hover { color: var(--coral-deep, #D93146); }
/* Inside the venue page's content column */
.venue-block .faq-item { background: #fff; }
@media (max-width: 600px) {
    .faq-item__q { padding: 15px 16px; gap: 12px; }
    .faq-item__title { font-size: .95rem; }
    .faq-item__icon { width: 26px; height: 26px; }
    .faq-item__icon::before, .faq-item__icon::after { width: 10px; }
    .faq-item__a { padding: 0 16px 16px; font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
    .faq-item, .faq-item__icon, .faq-item__icon::before, .faq-item__icon::after { transition: none; }
}

/* ===================================================================== */
/* 30  Guides                                                            */
/*     /guides index, guide cards and the /guides/{slug} article.         */
/* ===================================================================== */
.guide-grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.guides-lead { margin-bottom: 28px; }
.guides-index__pager { margin-top: 32px; }
.guides-index__pager:empty { display: none; }

.guide-card {
    background: #fff; border: 1px solid #EEF2F6; border-radius: var(--r-lg);
    overflow: hidden; display: flex; flex-direction: column; position: relative;
    box-shadow: var(--sh-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.guide-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.guide-card__media {
    display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cream-2);
}
.guide-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.guide-card:hover .guide-card__media img { transform: scale(1.04); }
.guide-card__media--empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
    color: rgba(255,255,255,.85); font-size: 2.2rem;
}
.guide-card__media--empty i { color: var(--gold); }
.guide-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.guide-card__meta {
    margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
    font-size: .76rem; color: #64748B; font-weight: 600;
}
.guide-card__cat {
    color: var(--coral-deep); background: rgba(240,66,88,.09);
    padding: 3px 10px; border-radius: 999px; font-weight: 700; letter-spacing: .01em;
}
.guide-card__title { margin: 0; font-size: 1.08rem; line-height: 1.35; font-weight: 800; color: var(--navy); letter-spacing: -.015em; }
.guide-card__title a { color: inherit; }
/* The whole card is clickable through the title link. */
.guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.guide-card__title a:focus-visible { outline: none; }
.guide-card:focus-within { box-shadow: var(--ring, 0 0 0 3px rgba(240,66,88,.35)); }
.guide-card__excerpt { margin: 0; font-size: .9rem; color: #475569; line-height: 1.6; }
.guide-card__more {
    margin-top: auto; padding-top: 6px; font-size: .86rem; font-weight: 700; color: var(--coral);
    display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease);
}
.guide-card:hover .guide-card__more { gap: 10px; }

.guide-card--featured { flex-direction: row; }
.guide-card--featured .guide-card__media { flex: 0 0 55%; aspect-ratio: auto; min-height: 320px; }
.guide-card--featured .guide-card__body { padding: 32px 36px; justify-content: center; gap: 12px; }
.guide-card--featured .guide-card__title { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.guide-card--featured .guide-card__excerpt { font-size: 1rem; }
.guide-card--featured .guide-card__more { margin-top: 8px; }

/* ---- Article ------------------------------------------------------- */
.guide-article { background: #fff; padding-bottom: clamp(40px, 5vw, 64px); }
.guide-article__head { padding: clamp(28px, 4vw, 48px) 0 24px; }
.guide-article__meta {
    margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    font-size: .84rem; color: #64748B; font-weight: 600;
}
.guide-article__meta i { margin-right: 4px; }
.guide-article__cat {
    color: #fff; background: var(--coral); padding: 4px 12px; border-radius: 999px;
    font-weight: 700; font-size: .78rem;
}
.guide-article__cat:hover { background: var(--coral-deep); color: #fff; }
.guide-article__title {
    margin: 0; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15;
    font-weight: 800; color: var(--navy); letter-spacing: -.03em; max-width: 22ch;
}
.guide-article__lead { margin: 16px 0 0; font-size: clamp(1rem, 1.6vw, 1.15rem); color: #475569; line-height: 1.65; max-width: 62ch; }
.guide-article__byline { margin: 16px 0 0; font-size: .86rem; color: #64748B; }
.guide-article__byline strong { color: var(--navy); }
.guide-article__cover { margin-bottom: 32px; }
.guide-article__cover img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--r-xl); box-shadow: var(--sh-md);
}
.guide-article__body { max-width: 72ch; font-size: 1.04rem; }
.guide-article__body h2 { color: var(--navy); letter-spacing: -.02em; }
.guide-article__body h3 { color: var(--navy); }
.guide-article__body > :first-child { margin-top: 0; }

.guide-article__cta {
    max-width: 72ch; margin-top: 36px; padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: var(--cream); border: 1px dashed rgba(240,66,88,.4); border-radius: var(--r-lg);
}
.guide-article__cta-title { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.guide-article__cta-sub { margin: 2px 0 0; font-size: .88rem; color: #64748B; }

@media (max-width: 860px) {
    .guide-card--featured { flex-direction: column; }
    .guide-card--featured .guide-card__media { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
    .guide-card--featured .guide-card__body { padding: 20px; }
}
@media (max-width: 560px) {
    .guide-grid { grid-template-columns: 1fr; gap: 16px; }
    .guide-article__cover { padding: 0; }
    .guide-article__cover img { border-radius: 0; }
    .guide-article__cta { padding: 18px; }
    .guide-article__cta .btn { width: 100%; }
}

/* =====================================================================
   31  HOMEPAGE v3 — the reference design, section by section
   ---------------------------------------------------------------------
   views/site/home/*.php. Builds on block 22 (hero, trust, meet Baba,
   tips, picks, owners, ask Baba): the rules here add the blocks the
   earlier pass did not have — handwritten notes, Baba cut-outs and
   speech bubbles, the ribbon, city/type cards, the budget band — and
   restyle a few to match the design more closely. Phone-first
   fallbacks sit at the end of the block.
   ===================================================================== */

/* ---- Shared: section heads, notes, bubbles ------------------------- */
.sec--tight { padding-block: clamp(18px, 2.4vw, 28px); }
.sec--sky {
    background:
        radial-gradient(900px 260px at 85% 0%, rgba(125, 211, 252, .22), transparent 70%),
        linear-gradient(180deg, #F2F8FD 0%, #F8FBFE 100%);
}
.sec--doodled { position: relative; }
.sec-head__main { min-width: 0; }
.sec-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sec-head__title--xl { display: block; font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.12; }
.sec-head__title--hand {
    font-family: var(--font-hand); font-weight: 700; letter-spacing: 0;
    font-size: clamp(1.55rem, 2.7vw, 2.1rem);
}
.sec-head__title--teal { color: #0F766E; }
.text-brand-gradient {
    background: linear-gradient(120deg, #F43F5E 0%, #F04258 35%, #F59E0B 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sec-note {
    margin: 0 0 4px; font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--navy);
    display: flex; align-items: center; gap: 6px; width: fit-content;
}
.sec-note i { color: var(--gold); font-size: .85em; }
.sec-aside-note {
    margin: 0; font-size: 1.05rem; color: var(--navy); line-height: 1.2;
    display: inline-flex; align-items: center; gap: 8px; transform: rotate(-2deg);
}
.sec-aside-note svg { color: var(--navy); flex: none; }
.sec-foot-note { margin: 16px 0 0; text-align: right; font-size: 1.05rem; color: var(--navy); transform: rotate(-2deg); }

/* A comic speech bubble: navy outline, tail bottom-left by default. */
.speech-bubble {
    position: relative; margin: 0; background: #fff; color: var(--navy);
    border: 1.8px solid var(--navy); border-radius: 18px; padding: 8px 14px;
    font-size: 1rem; line-height: 1.2; text-align: center; box-shadow: 0 4px 14px rgba(15,23,42,.08);
}
.speech-bubble::after {
    content: ""; position: absolute; left: 22px; bottom: -10px; width: 16px; height: 16px;
    background: #fff; border-right: 1.8px solid var(--navy); border-bottom: 1.8px solid var(--navy);
    transform: rotate(45deg) skew(8deg, 8deg);
}
.speech-bubble--left::after { left: auto; right: 26px; }
.speech-bubble--light { border-color: rgba(255,255,255,.85); }

/* ---- Hero: the photo is now a real, admin-replaceable <img> -------- */
.hero-v2__bg picture { display: block; width: 100%; height: 100%; }

/* ---- Meet Baba: polaroid photo can be an upload -------------------- */
.meet-baba__polaroid-img img { width: 150px; height: auto; aspect-ratio: 205 / 155; object-fit: cover; }
.baba-thumb-unit__img--icon { display: grid; place-items: center; background: #FFF1F3; color: var(--coral); }

/* ---- Top tips: photo layer + real heading -------------------------- */
.baba-tips-banner__media { position: absolute; inset: 0; }
.baba-tips-banner__media > img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
h2.baba-tips-banner__label { margin: 0; }

/* ---- Dark ribbon ---------------------------------------------------- */
.baba-ribbon { background: var(--navy); color: #fff; }
.baba-ribbon__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
    min-height: 54px; padding-block: 10px;
}
.baba-ribbon__side { margin: 0; font-size: 1.02rem; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.baba-ribbon__side i { color: var(--gold); }
.baba-ribbon__side--right { justify-self: end; }
.baba-ribbon__mid {
    margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
    color: rgba(255,255,255,.82); text-align: center; white-space: nowrap;
}

/* ---- Popular venues: Baba beside the heading ------------------------ */
.sec-head--baba { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 20px; }
.sec-baba { display: flex; align-items: flex-end; gap: 10px; }
.sec-baba__photo {
    width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none;
    border: 3px solid #fff; box-shadow: 0 10px 24px rgba(15,23,42,.16); background: var(--cream-2);
}
.sec-baba__photo picture { display: block; width: 100%; height: 100%; }
.sec-baba__img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.sec-baba .speech-bubble { font-size: .95rem; max-width: 150px; align-self: flex-start; }
.sec-baba .speech-bubble::after { left: -7px; bottom: 16px; transform: rotate(135deg) skew(8deg, 8deg); }
@media (min-width: 1181px) {
    .grid--venues-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---- City cards ------------------------------------------------------ */
.city-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.city-card-v2 {
    display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid #E6EEF6; box-shadow: 0 4px 14px rgba(15,23,42,.05); color: var(--navy);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.city-card-v2:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.12); color: var(--navy); }
.city-card-v2__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-2); }
.city-card-v2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.city-card-v2:hover .city-card-v2__media img { transform: scale(1.06); }
.city-card-v2__media--nophoto { background: linear-gradient(145deg, #1E3A5F 0%, var(--navy-3) 60%, #2A3558 100%); }
.city-card-v2__media--nophoto::before {
    content: attr(data-initial); position: absolute; right: 6px; bottom: -14px;
    font-size: 4.6rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.12);
}
.city-card-v2__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.city-card-v2__name { font-size: .9rem; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.city-card-v2__name i { font-size: .7rem; color: #94A3B8; transition: transform .2s var(--ease), color .2s var(--ease); }
.city-card-v2:hover .city-card-v2__name i { color: var(--coral); transform: translateX(3px); }
.city-card-v2__meta { font-size: .7rem; color: #64748B; line-height: 1.3; }

/* ---- Venue type cards -------------------------------------------------- */
.type-strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.type-card-v2 {
    display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid #F0E6DA; box-shadow: 0 4px 14px rgba(15,23,42,.05); color: var(--navy);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.type-card-v2:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.12); color: var(--navy); }
.type-card-v2__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); display: block; }
.type-card-v2__media img, .type-card-v2__media picture { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.type-card-v2:hover .type-card-v2__media img { transform: scale(1.06); }
.type-card-v2__placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 1.8rem; color: var(--coral); background: #FFF1F3; }
.type-card-v2__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.type-card-v2__icon { color: var(--coral); font-size: .9rem; margin-bottom: 2px; }
.type-card-v2__name { font-size: .88rem; font-weight: 800; }
.type-card-v2__line { font-size: .7rem; color: #64748B; line-height: 1.3; }

/* ---- Budget band -------------------------------------------------------- */
.budget-band {
    position: relative; overflow: hidden; border-radius: 22px; color: #fff;
    background:
        radial-gradient(700px 300px at 100% 0%, rgba(255,255,255,.08), transparent 60%),
        linear-gradient(120deg, #0E3B35 0%, #134E48 50%, #16655A 100%);
    display: grid; grid-template-columns: 240px minmax(0, 1fr) 170px; align-items: center; gap: 24px;
    padding: 0 28px 0 0; min-height: 230px;
}
.budget-band__baba { position: relative; align-self: stretch; }
.budget-band__baba picture { display: block; height: 100%; }
.budget-band__photo {
    width: 100%; height: 100%; min-height: 230px; object-fit: cover; object-position: center 15%; display: block;
    mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}
.budget-band__says { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.2; color: #FBBF24; transform: rotate(-2deg); transform-origin: left; }
.budget-band__main { padding-block: 26px; }
.budget-band__title { margin: 0 0 4px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.budget-band__sub { margin: 0 0 18px; color: rgba(255,255,255,.78); font-size: .92rem; }
.budget-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.budget-tier {
    display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
    background: #fff; color: var(--navy); border: 2px solid transparent;
    transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.budget-tier:hover { transform: translateY(-2px); border-color: var(--coral); color: var(--navy); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.budget-tier__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 1rem; }
.budget-tier--mint  { background: #ECFDF5; }
.budget-tier--mint  .budget-tier__icon { background: #D1FAE5; color: #047857; }
.budget-tier--sky   { background: #EFF6FF; }
.budget-tier--sky   .budget-tier__icon { background: #DBEAFE; color: #1D4ED8; }
.budget-tier--lilac { background: #F5F3FF; }
.budget-tier--lilac .budget-tier__icon { background: #EDE9FE; color: #6D28D9; }
.budget-tier--peach { background: #FFF7ED; }
.budget-tier--peach .budget-tier__icon { background: #FFEDD5; color: #C2410C; }
.budget-tier__name { display: block; font-size: .86rem; font-weight: 800; line-height: 1.2; }
.budget-tier__range { display: block; font-size: .72rem; color: #475569; margin-top: 2px; }
.sticky-note {
    margin: 0; padding: 16px 14px; background: #FEF3A2; color: #1F2937; border-radius: 4px;
    font-size: 1.02rem; line-height: 1.3; text-align: center;
    box-shadow: 0 10px 22px rgba(0,0,0,.25); transform: rotate(4deg); position: relative;
}
.sticky-note::before {
    content: ""; position: absolute; top: -8px; left: 50%; width: 56px; height: 16px; transform: translateX(-50%) rotate(-3deg);
    background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.sticky-note span { display: block; margin-top: 4px; }

/* ---- Guests + needs ------------------------------------------------------ */
.guests-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-v2__note--inline { position: static; max-width: 190px; flex: none; transform: rotate(-3deg); }
.needs-panel {
    position: relative; overflow: hidden; border-radius: 20px; background: var(--cream); border: 1px solid #F1E6D6;
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: end; gap: 12px;
}
.needs-panel__main { padding: clamp(22px, 3vw, 34px); }
.needs-panel__head { display: flex; align-items: flex-start; gap: 14px; }
.needs-panel__badge {
    width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: #FFE4E8; color: var(--coral); font-size: 1.05rem;
}
.needs-panel__baba { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.needs-panel__baba picture { display: block; }
.needs-panel__photo {
    width: 100%; max-height: 300px; object-fit: cover; object-position: center 12%; display: block;
    mask-image: linear-gradient(0deg, transparent 0, #000 22%);
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%);
}
.needs-panel__baba .speech-bubble { position: absolute; top: 16px; left: -40px; z-index: 1; max-width: 170px; font-size: .95rem; }

/* ---- Baba's picks: image-top cards on the dark band ---------------------- */
.pick-card-v2 {
    display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: var(--navy);
    box-shadow: 0 10px 26px rgba(0,0,0,.28); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.pick-card-v2:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,.36); color: var(--navy); }
.pick-card-v2__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--navy-2); display: block; }
.pick-card-v2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.pick-card-v2:hover .pick-card-v2__media img { transform: scale(1.06); }
.pick-card-v2__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.pick-card-v2__name { font-size: .92rem; font-weight: 800; line-height: 1.25; }
.pick-card-v2__meta { font-size: .72rem; color: #64748B; }
.pick-card-v2__price { font-size: .76rem; font-weight: 700; color: var(--coral); margin-top: 2px; }

/* ---- Destination --------------------------------------------------------- */
.destination__frame {
    border-radius: 22px; padding: clamp(20px, 3vw, 32px); background: #fff; border: 1px solid #F1E6D6;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.destination__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.destination__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: end; }
.destination__frame--art .destination__body { grid-template-columns: minmax(0, 1fr) 180px; }
.destination__art img { width: 100%; height: auto; display: block; }
.dest-card-v2 {
    display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; color: var(--navy);
    border: 1px solid #EEF2F6; box-shadow: 0 4px 14px rgba(15,23,42,.05);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.dest-card-v2:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.12); color: var(--navy); }
.dest-card-v2__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.dest-card-v2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.dest-card-v2:hover .dest-card-v2__media img { transform: scale(1.06); }
.dest-card-v2__media--nophoto { background: linear-gradient(160deg, #F59E0B 0%, #F04258 60%, #9F1239 100%); }
.dest-card-v2__media--nophoto::before {
    content: attr(data-initial); position: absolute; right: 8px; bottom: -12px;
    font-size: 4.2rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.2);
}
.dest-card-v2__body { padding: 10px 12px 12px; }
.dest-card-v2__name { display: block; font-weight: 800; font-size: .9rem; }
.dest-card-v2__meta { display: block; font-size: .7rem; color: #64748B; }

/* ---- Social proof with the couple photo ---------------------------------- */
.proof-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
.proof-layout--photo { grid-template-columns: minmax(0, 1fr) 260px; }
.proof-layout--photo .proof-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof-photo { margin: 0; position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.1); }
.proof-photo__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.proof-photo__note {
    position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 6px 12px; border-radius: 12px;
    background: rgba(255,255,255,.92); color: var(--navy); font-size: 1.05rem; transform: rotate(-3deg);
}

/* ---- For venue owners: numbered steps + bubble ----------------------------- */
.owners-band__eyebrow { font-family: var(--font); font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #fff; }
.owners-band__eyebrow .text-brand-gradient { background: linear-gradient(120deg, #FDE68A, #FBBF24); -webkit-background-clip: text; background-clip: text; }
.owners-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.owners-steps__item { display: flex; align-items: center; gap: 10px; }
.owners-steps__icon {
    width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(255,255,255,.14); color: #FBBF24; font-size: .9rem; border: 1px solid rgba(255,255,255,.2);
}
.owners-steps__label { font-size: .8rem; font-weight: 700; color: #fff; line-height: 1.25; }
.owners-band__media .speech-bubble { position: absolute; top: 12px; left: -18px; z-index: 1; max-width: 150px; font-size: .95rem; }

/* ---- Guides strip ------------------------------------------------------------ */
.home-guides { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.home-guides .guide-card__excerpt, .home-guides .guide-card__more { display: none; }
.home-guides .guide-card__media { aspect-ratio: 16 / 10; }
.home-guides .guide-card__body { padding: 10px 12px 14px; }
.home-guides .guide-card__title { font-size: .86rem; line-height: 1.3; }
.home-guides .guide-card__meta { font-size: .68rem; }

/* ---- Ask Baba: Baba on the left, handwritten note on the right ------------------- */
.ask-baba { grid-template-columns: 300px minmax(0, 1fr); padding: 0 clamp(24px, 4vw, 48px) 0 0; min-height: 250px; }
.ask-baba__media { align-self: stretch; }
.ask-baba__media picture { display: block; height: 100%; }
.ask-baba .ask-baba__photo {
    width: 100%; height: 100%; max-width: none; max-height: none; min-height: 250px; margin: 0;
    object-fit: cover; object-position: center 15%; border-radius: 0; box-shadow: none;
    mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}
.ask-baba__main { padding-block: 30px; }
.hand-title { font-family: var(--font-hand); letter-spacing: 0; font-weight: 700; }
.ask-baba__note {
    position: absolute; top: 22px; right: 28px; margin: 0; max-width: 160px; text-align: center;
    font-size: 1.15rem; line-height: 1.2; color: #fff; transform: rotate(-4deg);
}

/* ---- Admin: section editor ------------------------------------------------------ */
.icon-field { display: flex; align-items: center; gap: 8px; }
.icon-field input { flex: 1; min-width: 0; }
.icon-field__preview { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #FFF1F3; color: var(--coral); }
.section-img-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.section-img-preview img { width: 160px; height: 100px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #F8FAFC; }
.section-img-preview--sm img { width: 64px; height: 64px; }
.section-pos { display: inline-flex; align-items: center; gap: 6px; }
.section-pos input { width: 76px; padding: 6px 8px; }
.section-jump__list { display: flex; flex-wrap: wrap; gap: 8px; }
.section-jump__link { font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #F1F5F9; color: var(--navy); }
.section-jump__link:hover { background: #FFE4E8; color: var(--coral-deep); }
.section-jump__link.is-off { opacity: .55; text-decoration: line-through; }
.section-save { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -8px 24px rgba(15,23,42,.08); }

/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .city-strip, .type-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .budget-band { grid-template-columns: 200px minmax(0, 1fr); }
    .budget-band > .sticky-note { display: none; }
    .owners-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .sec-head--baba { grid-template-columns: minmax(0, 1fr) auto; }
    .sec-head--baba .near-you__tools { grid-column: 1 / -1; }
    .budget-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .needs-panel { grid-template-columns: minmax(0, 1fr) 200px; }
    .needs-panel__baba .speech-bubble { left: -20px; max-width: 140px; }
    .proof-layout--photo { grid-template-columns: minmax(0, 1fr); }
    .proof-photo { max-height: 320px; }
    .ask-baba { grid-template-columns: 220px minmax(0, 1fr); }
    .ask-baba__note { display: none; }
    .destination__frame--art .destination__body { grid-template-columns: minmax(0, 1fr); }
    .destination__art { display: none; }
    .baba-ribbon__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 4px; }
    .baba-ribbon__side--right { justify-self: center; }
}
@media (max-width: 768px) {
    .sec-head--baba { grid-template-columns: minmax(0, 1fr); }
    .sec-baba { order: -1; }
    .sec-baba__photo { width: 72px; height: 72px; }
    .sec-head__aside { align-items: flex-start; }
    .sec-aside-note, .sec-foot-note { transform: none; }
    .sec-foot-note { text-align: left; }
    /* Cards scroll sideways rather than shrinking to illegibility. */
    .city-strip, .type-strip, .home-guides {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%;
        overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none;
    }
    .city-strip::-webkit-scrollbar, .type-strip::-webkit-scrollbar, .home-guides::-webkit-scrollbar { display: none; }
    .city-strip > *, .type-strip > *, .home-guides > * { scroll-snap-align: start; }
    .home-guides { grid-auto-columns: 62%; }
    .budget-band { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .budget-band__baba { height: 170px; }
    .budget-band__photo { min-height: 170px; mask-image: linear-gradient(0deg, transparent 0, #000 40%); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); }
    .budget-band__main { padding: 0 20px 24px; }
    .budget-band__main .btn { width: 100%; }
    .guests-panel__head { flex-direction: column; gap: 6px; }
    .panel-v2__note--inline { max-width: none; transform: none; margin: 0 0 12px; text-align: left; }
    .needs-panel { grid-template-columns: minmax(0, 1fr); }
    .needs-panel__baba { display: none; }
    .needs-panel__main .btn { width: 100%; }
    .proof-layout--photo .proof-grid--compact { grid-template-columns: minmax(0, 1fr); }
    .owners-band__media .speech-bubble { left: 8px; }
    .ask-baba { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .ask-baba__media { height: 200px; }
    .ask-baba .ask-baba__photo { min-height: 200px; mask-image: linear-gradient(0deg, transparent 0, #000 45%); -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 45%); }
    .ask-baba__main { padding: 0 20px 26px; }
    .ask-baba__actions .btn { flex: 1 1 100%; }
    .destination__cta { align-items: flex-start; }
    .baba-ribbon__mid { letter-spacing: .18em; white-space: normal; }
}
@media (max-width: 480px) {
    .city-strip, .type-strip { grid-auto-columns: 58%; }
    .home-guides { grid-auto-columns: 78%; }
    .budget-tiers { grid-template-columns: minmax(0, 1fr); }
    .owners-steps { grid-template-columns: minmax(0, 1fr); }
    .sec-baba .speech-bubble { max-width: 130px; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
    .city-card-v2, .type-card-v2, .pick-card-v2, .dest-card-v2, .budget-tier,
    .city-card-v2__media img, .type-card-v2__media img, .pick-card-v2__media img, .dest-card-v2__media img { transition: none; }
    .city-card-v2:hover, .type-card-v2:hover, .pick-card-v2:hover, .dest-card-v2:hover, .budget-tier:hover { transform: none; }
}

/* =====================================================================
   32  ABOUT PAGE — views/site/about/*.php
   ---------------------------------------------------------------------
   Same language as the homepage (block 31): cream and navy grounds,
   coral accents, Kalam notes and Baba. Every block is admin-editable.
   ===================================================================== */
.sec-head--center { justify-content: center; text-align: center; }
.sec-head--center .sec-note { margin-inline: auto; }

/* ---- Hero ------------------------------------------------------------ */
.about-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(700px 360px at 90% 10%, rgba(240,66,88,.12), transparent 65%),
        radial-gradient(600px 320px at 0% 100%, rgba(245,184,46,.14), transparent 60%),
        var(--cream);
    padding: clamp(28px, 4vw, 56px) 0 clamp(44px, 5vw, 72px);
}
.about-hero__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.about-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid #F1E6D6; font-size: .8rem; font-weight: 700; color: var(--navy); letter-spacing: .04em; text-transform: uppercase;
}
.about-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(240,66,88,.18); }
.about-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--navy); margin: 0 0 16px; }
.about-hero__sub { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: #475569; max-width: 560px; margin: 0 0 24px; }
.about-hero__stats { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.about-hero__stats li {
    display: flex; flex-direction: column; padding: 12px 18px; border-radius: 16px; background: #fff;
    border: 1px solid #F1E6D6; box-shadow: 0 6px 18px rgba(15,23,42,.05); min-width: 120px;
}
.about-hero__stats strong { font-size: 1.5rem; font-weight: 800; color: var(--coral); line-height: 1.1; }
.about-hero__stats span { font-size: .78rem; color: #64748B; font-weight: 600; }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-hero__art { position: relative; justify-self: center; width: min(100%, 420px); }
.about-hero__frame {
    background: #fff; padding: 12px 12px 54px; border-radius: 6px; transform: rotate(2.5deg);
    box-shadow: 0 24px 50px rgba(15,23,42,.18); border: 1px solid #EEE;
}
.about-hero__frame picture { display: block; }
.about-hero__img { width: 100%; aspect-ratio: 520 / 560; object-fit: cover; object-position: center 20%; display: block; border-radius: 2px; }
.about-hero__tape {
    position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-4deg);
    background: rgba(245,184,46,.55); box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.about-hero__sign { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 1.3rem; color: var(--navy); transform: rotate(2.5deg); }
.about-hero__bubble { position: absolute; top: 18px; left: -70px; z-index: 2; max-width: 190px; }

/* ---- Story ------------------------------------------------------------ */
.about-story__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.about-story__media { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.about-polaroid {
    margin: 0; background: #fff; padding: 12px 12px 18px; border-radius: 4px; transform: rotate(-3deg);
    box-shadow: 0 18px 40px rgba(15,23,42,.14); border: 1px solid #EEE; max-width: 360px; width: 100%;
}
.about-polaroid__img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.about-polaroid__caption { margin: 12px 4px 0; text-align: center; font-size: 1.15rem; color: var(--navy); line-height: 1.25; }
.about-story__badge {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px;
    background: var(--cream); border: 1px solid #F1E6D6;
}
.about-story__badge-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #FFE4E8; color: var(--coral); }
.about-story__badge strong { display: block; color: var(--navy); font-size: .92rem; }
.about-story__badge small { display: block; color: #64748B; font-size: .76rem; }
.about-story__prose { margin-top: 16px; color: #334155; }
.about-story__prose p { line-height: 1.8; }

/* ---- Mission & vision -------------------------------------------------- */
.about-mv__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.about-mv__grid--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.about-mv__card { border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 16px 40px rgba(15,23,42,.08); }
.about-mv__card--mission { background: #fff; border: 1px solid #F1E6D6; }
.about-mv__card--vision { background: linear-gradient(145deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; }
.about-mv__media { aspect-ratio: 16 / 7; overflow: hidden; }
.about-mv__img { width: 100%; height: 100%; object-fit: cover; }
.about-mv__body { padding: clamp(24px, 3vw, 38px); position: relative; }
.about-mv__icon {
    width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.35rem; margin-bottom: 14px;
    background: #FFE4E8; color: var(--coral);
}
.about-mv__card--vision .about-mv__icon { background: rgba(245,184,46,.18); color: #FBBF24; }
.about-mv__eyebrow { margin: 0 0 2px; font-size: 1.1rem; color: var(--coral); }
.about-mv__card--vision .about-mv__eyebrow { color: #FBBF24; }
.about-mv__title { margin: 0 0 12px; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.about-mv__card--vision .about-mv__title { color: #fff; }
.about-mv__text { font-size: 1rem; line-height: 1.75; color: #475569; }
.about-mv__card--vision .about-mv__text { color: rgba(255,255,255,.82); }
.about-mv__text p { margin: 0 0 10px; }

/* ---- Values ------------------------------------------------------------ */
.about-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.about-card {
    --tone: var(--coral); --tone-bg: #FFE4E8;
    padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #EEF2F6; position: relative; overflow: hidden;
    box-shadow: 0 6px 20px rgba(15,23,42,.05); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.about-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tone); opacity: .85; }
.about-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,.1); }
.about-card--teal   { --tone: #0D9488; --tone-bg: #CCFBF1; }
.about-card--gold   { --tone: #D97706; --tone-bg: #FEF3C7; }
.about-card--violet { --tone: #7C3AED; --tone-bg: #EDE9FE; }
.about-card--green  { --tone: #059669; --tone-bg: #D1FAE5; }
.about-card--blue   { --tone: #2563EB; --tone-bg: #DBEAFE; }
.about-card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); font-size: 1.1rem; margin-bottom: 14px; }
.about-card__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--navy); }
.about-card__text { margin: 0; font-size: .9rem; line-height: 1.6; color: #64748B; }

/* ---- Journey timeline ---------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, #F0C9CF 0 8px, transparent 8px 14px); }
.timeline__item { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; margin-bottom: 22px; }
.timeline__item:last-child { margin-bottom: 0; }
.timeline__dot {
    grid-column: 2; justify-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--coral); border: 2px solid var(--coral); box-shadow: 0 0 0 6px var(--cream); z-index: 1;
}
.timeline__card { grid-column: 3; grid-row: 1; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid #F1E6D6; box-shadow: 0 8px 22px rgba(15,23,42,.06); }
.timeline__item:nth-child(even) .timeline__card { grid-column: 1; text-align: right; }
.timeline__badge { display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #FBBF24; font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
.timeline__title { margin: 0 0 4px; font-size: 1.02rem; font-weight: 800; color: var(--navy); }
.timeline__text { margin: 0; font-size: .88rem; color: #64748B; line-height: 1.55; }

/* ---- Couples / owners ----------------------------------------------------- */
.about-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.about-sides--single { grid-template-columns: minmax(0, 760px); justify-content: center; }
.about-side { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; align-items: flex-start; }
.about-side--couples { background: linear-gradient(145deg, #FFF1F3 0%, var(--cream) 100%); border: 1px solid #F8D7DD; }
.about-side--owners { background: linear-gradient(120deg, var(--leaf-deep) 0%, var(--leaf) 60%, #2B7A5B 100%); color: #fff; }
.about-side__note { position: absolute; top: 20px; right: 22px; margin: 0; max-width: 170px; text-align: right; font-size: 1.02rem; line-height: 1.2; color: var(--navy); transform: rotate(-3deg); }
.about-side--owners .about-side__note { color: #FBBF24; }
.about-side__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 14px; background: #fff; color: var(--coral); box-shadow: 0 6px 16px rgba(240,66,88,.15); }
.about-side--owners .about-side__icon { background: rgba(255,255,255,.14); color: #FBBF24; box-shadow: none; }
.about-side__title { margin: 0 0 6px; font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.about-side--owners .about-side__title { color: #fff; }
.about-side__sub { margin: 0 0 18px; color: #64748B; max-width: 420px; }
.about-side--owners .about-side__sub { color: rgba(255,255,255,.8); }
.about-side__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.about-side__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--navy); }
.about-side--owners .about-side__list li { color: #fff; }
.about-side__list span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .8rem; background: #fff; color: var(--coral); }
.about-side--owners .about-side__list span { background: rgba(255,255,255,.14); color: #86EFAC; }
.about-side .btn { margin-top: auto; }
.about-side__media { margin-top: 20px; width: 100%; border-radius: 14px; overflow: hidden; }
.about-side__img { width: 100%; height: 200px; object-fit: cover; display: block; }

/* ---- Why us --------------------------------------------------------------- */
.about-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.about-reason { position: relative; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #F1E6D6; overflow: hidden; }
.about-reason__num { position: absolute; top: 10px; right: 14px; font-size: 2.6rem; font-weight: 800; line-height: 1; color: rgba(240,66,88,.1); letter-spacing: -.04em; }
.about-reason__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FFF1F3; color: var(--coral); margin-bottom: 12px; }
.about-reason__title { margin: 0 0 6px; font-size: .98rem; font-weight: 800; color: var(--navy); }
.about-reason__text { margin: 0; font-size: .86rem; line-height: 1.6; color: #64748B; }

/* ---- Numbers ---------------------------------------------------------------- */
.about-numbers {
    position: relative; overflow: hidden; color: #fff; padding: clamp(44px, 5vw, 68px) 0;
    background:
        radial-gradient(600px 300px at 10% 0%, rgba(240,66,88,.3), transparent 60%),
        radial-gradient(500px 300px at 100% 100%, rgba(245,184,46,.2), transparent 60%),
        var(--navy);
}
.about-numbers__head { text-align: center; margin-bottom: 28px; }
.about-numbers__title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.about-numbers__sub { margin: 6px 0 0; color: rgba(255,255,255,.7); }
.about-numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.about-number { text-align: center; padding: 22px 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.about-number__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(245,184,46,.16); color: #FBBF24; margin-bottom: 10px; }
.about-number__value { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.about-number__label { display: block; margin-top: 4px; font-size: .85rem; color: rgba(255,255,255,.72); font-weight: 600; }

/* ---- Team --------------------------------------------------------------------- */
.about-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.about-person { text-align: center; padding: 22px 16px; border-radius: 18px; background: #fff; border: 1px solid #EEF2F6; position: relative; }
.about-person__photo { width: 120px; height: 120px; margin: 0 auto 14px; border-radius: 50%; overflow: hidden; border: 4px solid var(--cream); box-shadow: 0 10px 24px rgba(15,23,42,.12); display: grid; place-items: center; background: linear-gradient(145deg, var(--coral), #F59E0B); color: #fff; font-size: 2rem; font-weight: 800; }
.about-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-person__name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--navy); }
.about-person__role { margin: 2px 0 0; font-size: .84rem; color: #64748B; }
.about-person__link { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-top: 10px; border-radius: 50%; background: #EFF6FF; color: #0A66C2; }

/* ---- Closing band ---------------------------------------------------------------- */
.about-cta .ask-baba__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* ---- Responsive -------------------------------------------------------------------- */
@media (max-width: 980px) {
    .about-hero__inner, .about-story__inner { grid-template-columns: minmax(0, 1fr); }
    .about-hero__art { width: min(100%, 360px); }
    .about-hero__bubble { left: -10px; top: -10px; }
    .about-story__media { position: static; }
    .about-mv__grid, .about-sides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
    .timeline::before { left: 22px; transform: none; }
    .timeline__item { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
    .timeline__dot { grid-column: 1; }
    .timeline__card, .timeline__item:nth-child(even) .timeline__card { grid-column: 2; text-align: left; }
    .about-side__note { position: static; text-align: left; margin-bottom: 10px; transform: none; }
    .about-hero__actions .btn { flex: 1 1 100%; }
    .about-hero__stats li { flex: 1 1 calc(50% - 12px); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .about-card, .about-card:hover { transition: none; transform: none; }
}

/* =====================================================================
   33  ABOUT PAGE v2 — a richer, more visual About
   ---------------------------------------------------------------------
   Dark photographic hero with a celebration ticker, the story as
   numbered chapter cards, a bento photo collage and photo-topped
   mission / vision. Builds on block 32.
   ===================================================================== */

/* ---- Hero ------------------------------------------------------------ */
.about-hero-v2 { position: relative; overflow: hidden; color: #fff; background: var(--navy); padding: clamp(40px, 5vw, 76px) 0 0; }
.about-hero-v2__bg { position: absolute; inset: 0; }
.about-hero-v2__bg picture { display: block; height: 100%; }
.about-hero-v2__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(1.2) blur(1px); transform: scale(1.04); }
.about-hero-v2::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, rgba(15,23,42,.97) 0%, rgba(15,23,42,.88) 45%, rgba(15,23,42,.55) 100%);
}
.about-hero-v2__glow { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; }
.about-hero-v2__glow--a { width: 420px; height: 420px; top: -140px; left: -80px; background: rgba(240,66,88,.35); }
.about-hero-v2__glow--b { width: 380px; height: 380px; bottom: -160px; right: 10%; background: rgba(245,184,46,.25); }
.about-hero-v2__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 60px); align-items: center; padding-bottom: clamp(48px, 5vw, 72px); }
.about-hero-v2__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 7px 16px; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
    font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FDE68A;
}
.about-hero-v2__title { margin: 0 0 18px; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; color: #fff; }
.about-hero-v2__title .text-brand-gradient { background: linear-gradient(120deg, #FB7185 0%, #F43F5E 35%, #FBBF24 100%); -webkit-background-clip: text; background-clip: text; }
.about-hero-v2__sub { margin: 0 0 26px; max-width: 580px; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.7; color: rgba(255,255,255,.82); }
.about-hero-v2__stats { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.about-hero-v2__stats li {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);
}
.about-hero-v2__stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #F04258, #F59E0B); color: #fff; font-size: .95rem; flex: none; }
.about-hero-v2__stats strong { font-size: 1.45rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.about-hero-v2__stats li > span:last-child { font-size: 1.2rem; font-weight: 800; color: #FBBF24; line-height: 1.1; }
.about-hero-v2__stats small { display: block; font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .01em; }
.about-hero-v2__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.about-hero-v2__art { position: relative; justify-self: center; width: min(100%, 390px); }
.about-hero-v2__frame {
    position: relative; background: #fff; padding: 12px 12px 56px; border-radius: 6px; transform: rotate(3deg);
    box-shadow: 0 30px 70px rgba(0,0,0,.5); transition: transform .4s var(--ease-out);
}
.about-hero-v2__frame:hover { transform: rotate(0deg) scale(1.02); }
.about-hero-v2__frame picture { display: block; }
.about-hero-v2__img { width: 100%; aspect-ratio: 520 / 560; object-fit: cover; object-position: center 20%; display: block; border-radius: 2px; }
.about-hero-v2__tape { position: absolute; top: -14px; left: 50%; z-index: 2; width: 120px; height: 30px; transform: translateX(-50%) rotate(-4deg); background: rgba(245,184,46,.7); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.about-hero-v2__sign { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 1.35rem; color: var(--navy); }
.about-hero-v2__bubble { position: absolute; top: 26px; left: -86px; z-index: 3; max-width: 190px; color: var(--navy); animation: bubble-bob 4s ease-in-out infinite; }
.about-hero-v2__sticker {
    position: absolute; right: -18px; bottom: 70px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; background: var(--coral); color: #fff; font-size: .8rem; font-weight: 800;
    box-shadow: 0 10px 24px rgba(240,66,88,.45); transform: rotate(-6deg);
}
@keyframes bubble-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Celebration ticker along the hero's bottom edge */
.about-ticker { position: relative; z-index: 1; overflow: hidden; background: linear-gradient(90deg, #F04258, #F97316 55%, #F5B82E); padding: 12px 0; }
.about-ticker__track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.about-ticker__item { display: inline-flex; align-items: center; gap: 14px; padding: 0 16px; font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.about-ticker__item i { font-size: .6rem; color: rgba(255,255,255,.75); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Story: intro + numbered chapters ---------------------------------- */
.about-story-v2__top { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 52px); }
.about-story-v2__media { display: flex; justify-content: center; }
.about-story-v2__lead { margin-top: 14px; font-size: 1.06rem; line-height: 1.8; color: #334155; }
.about-story-v2__lead p { margin: 0 0 12px; }
.about-story-v2__lead > p:first-child::first-letter {
    float: left; font-size: 3.4rem; line-height: .9; font-weight: 800; margin: 6px 10px 0 0;
    background: linear-gradient(135deg, #F04258, #F59E0B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.story-chapters { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 22px; }
.story-chapters::before {
    content: ""; position: absolute; top: 20px; bottom: 20px; left: 50%; width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, #F04258, #F59E0B, #0D9488);
}
.story-chapter { position: relative; display: grid; grid-template-columns: 1fr 70px 1fr; align-items: start; }
.story-chapter__num {
    grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, #F04258, #F59E0B); box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(240,66,88,.35);
}
.story-chapter__card {
    grid-column: 3; grid-row: 1; position: relative; padding: 24px 26px; border-radius: 20px; background: #fff;
    border: 1px solid #F1E6D6; box-shadow: 0 12px 32px rgba(15,23,42,.07);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.story-chapter:nth-child(even) .story-chapter__card { grid-column: 1; }
.story-chapter__card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(15,23,42,.12); }
.story-chapter__icon { position: absolute; top: -16px; right: 22px; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: #FBBF24; box-shadow: 0 8px 18px rgba(15,23,42,.25); }
.story-chapter__title { margin: 0 0 10px; padding-right: 48px; font-size: 1.15rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.story-chapter__body { font-size: .94rem; line-height: 1.7; color: #475569; }
.story-chapter__body p { margin: 0 0 10px; }
.story-chapter__body p:last-child { margin-bottom: 0; }
.story-chapter__body strong { color: var(--navy); }
.story-chapter__body ul { margin: 6px 0 12px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.story-chapter__body li { padding: 4px 12px; border-radius: 999px; background: #FFF1F3; color: var(--coral-deep); font-size: .8rem; font-weight: 700; }

/* ---- Bento photo collage -------------------------------------------------- */
.moments-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; }
.moments-grid .moment--1 { grid-column: span 2; grid-row: span 2; }
.moments-grid--6 .moment--4, .moments-grid--8 .moment--6 { grid-column: span 2; }
.moment { position: relative; display: block; overflow: hidden; border-radius: 20px; background: var(--navy-2); color: #fff; box-shadow: 0 10px 28px rgba(15,23,42,.12); }
.moment picture { display: block; width: 100%; height: 100%; }
.moment__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.moment:hover .moment__img { transform: scale(1.08); }
.moment__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 35%, rgba(15,23,42,.85) 100%); }
.moment__body { position: absolute; left: 18px; right: 56px; bottom: 16px; }
.moment__title { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
.moment--1 .moment__title { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.moment__text { display: block; margin-top: 2px; font-size: .8rem; color: rgba(255,255,255,.8); }
.moment__go {
    position: absolute; right: 14px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--coral); font-size: .8rem; transform: translateX(-4px); opacity: .9;
    transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out);
}
.moment:hover .moment__go { transform: none; background: var(--coral); color: #fff; }
.moment:hover { color: #fff; }

/* ---- Mission & vision with photo banners ------------------------------------ */
.about-mv__media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.about-mv__media picture { display: block; height: 100%; }
.about-mv__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.about-mv__card:hover .about-mv__img { transform: scale(1.06); }
.about-mv__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.45) 100%); }
.about-mv__quote { position: absolute; right: 22px; bottom: -34px; z-index: 1; font-family: Georgia, serif; font-size: 7rem; line-height: 1; color: rgba(255,255,255,.9); }
.about-mv__body { margin-top: -30px; }
.about-mv__icon { position: relative; z-index: 2; box-shadow: 0 10px 24px rgba(15,23,42,.18); border: 3px solid #fff; }
.about-mv__card--vision .about-mv__icon { border-color: var(--navy); }

/* ---- Values: gradient ring on hover ------------------------------------------ */
.about-card { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out); }
.about-card:hover { border-color: var(--tone); }
.about-card:hover .about-card__icon { background: var(--tone); color: #fff; }
.about-card__icon { transition: background .25s var(--ease-out), color .25s var(--ease-out); }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 1080px) {
    .about-hero-v2__bubble { left: -30px; top: -18px; }
}
@media (max-width: 980px) {
    .about-hero-v2__inner, .about-story-v2__top { grid-template-columns: minmax(0, 1fr); }
    .about-hero-v2__art { width: min(100%, 330px); margin-top: 20px; }
    .about-hero-v2__sticker { right: -6px; }
    .moments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; }
    .moments-grid--6 .moment--4, .moments-grid--8 .moment--6 { grid-column: span 1; }
}
@media (max-width: 720px) {
    .story-chapters::before { left: 26px; transform: none; }
    .story-chapter { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
    .story-chapter__num { grid-column: 1; }
    .story-chapter__card, .story-chapter:nth-child(even) .story-chapter__card { grid-column: 2; }
    .story-chapter__card { padding: 22px 18px 18px; }
    .about-hero-v2__actions .btn { flex: 1 1 100%; }
    .about-hero-v2__stats li { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .moments-grid { grid-auto-rows: 140px; gap: 10px; }
    .moment__title { font-size: .95rem; }
    .moment__text { display: none; }
    .moment--1 .moment__text { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .about-ticker__track, .about-hero-v2__bubble { animation: none; }
    .moment__img, .about-mv__img, .story-chapter__card, .about-hero-v2__frame { transition: none; }
}

/* 33b — story chapters as a two-column card grid (the zig-zag timeline left
   half of every row empty). Numbers become badges on each card's top edge. */
.story-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; align-items: start; }
.story-chapters::before { display: none; }
.story-chapter { display: block; }
.story-chapter:last-child:nth-child(odd) { grid-column: 1 / -1; }
.story-chapter__num { position: absolute; top: -20px; left: 22px; width: 46px; height: 46px; font-size: .92rem; }
.story-chapter__card, .story-chapter:nth-child(even) .story-chapter__card { padding-top: 34px; height: 100%; }
.about-story-v2__lead > p:first-child::first-letter { background: none; -webkit-text-fill-color: currentColor; color: var(--coral); }
@media (max-width: 860px) {
    .story-chapters { grid-template-columns: minmax(0, 1fr); }
    .story-chapter, .story-chapter__card, .story-chapter:nth-child(even) .story-chapter__card { grid-column: auto; }
}
@media (max-width: 980px) {
    /* Two columns: the lead tile spans the row, and the odd one out at the end fills it too. */
    .moments-grid .moment--1 { grid-row: span 1; }
    .moments-grid .moment:last-child:not(.moment--1) { grid-column: span 2; }
}

/* =====================================================================
   34  ABOUT — company intro in the homepage's language
   ---------------------------------------------------------------------
   Cream ground, handwritten hello, coral accent, Baba's polaroid with a
   comic bubble and a pinned memo (the Meet Baba vocabulary). Mission /
   vision cards carry a quote mark instead of venue photographs.
   ===================================================================== */
.about-intro {
    position: relative; overflow: hidden; background: var(--cream);
    border-bottom: 1px solid #F6ECE0; padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 84px);
}
.about-intro__blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.about-intro__blob--a { width: 360px; height: 360px; top: -120px; right: 8%; background: rgba(240,66,88,.16); }
.about-intro__blob--b { width: 300px; height: 300px; bottom: -140px; left: -60px; background: rgba(245,184,46,.2); }
.about-intro__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-intro__hello { margin: 0 0 8px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--navy); display: flex; align-items: center; gap: 10px; }
.about-intro__hello svg { color: var(--coral); }
.about-intro__title { margin: 0 0 16px; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--navy); }
.about-intro__sub { margin: 0 0 22px; max-width: 560px; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7; color: #475569; }
.about-intro__facts { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.about-intro__facts li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
    background: #fff; border: 1px solid #F1E6D6; font-size: .84rem; font-weight: 700; color: var(--navy); box-shadow: 0 4px 12px rgba(15,23,42,.04);
}
.about-intro__facts span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #FFF1F3; color: var(--coral); font-size: .78rem; }
.about-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.about-intro__art { position: relative; justify-self: center; width: min(100%, 360px); padding-top: 26px; }
.about-intro__frame { position: relative; background: #fff; padding: 12px 12px 54px; border-radius: 6px; transform: rotate(3deg); box-shadow: 0 24px 50px rgba(15,23,42,.18); border: 1px solid #EEE; transition: transform .35s var(--ease-out); }
.about-intro__frame:hover { transform: rotate(0deg) scale(1.02); }
.about-intro__frame picture { display: block; }
.about-intro__img { width: 100%; aspect-ratio: 520 / 560; object-fit: cover; object-position: center 20%; display: block; border-radius: 2px; }
.about-intro__tape { position: absolute; top: -14px; left: 50%; z-index: 2; width: 110px; height: 28px; transform: translateX(-50%) rotate(-4deg); background: rgba(245,184,46,.6); box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.about-intro__sign { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 1.3rem; color: var(--navy); }
.about-intro__bubble { position: absolute; top: -18px; left: -110px; z-index: 3; max-width: 210px; margin: 0; }
.about-intro__memo { position: absolute; right: -54px; bottom: 36px; z-index: 3; min-width: 0; transform: rotate(5deg); }
.about-intro__memo .pinned-memo-card__list { list-style: none; padding: 0; margin: 0; font-size: .92rem; }

/* Mission / vision without photographs: a quote mark on the card's corner */
.about-mv__card { position: relative; }
.about-mv__card--plain .about-mv__body { margin-top: 0; }
.about-mv__card--plain .about-mv__quote { top: -6px; bottom: auto; right: 24px; font-size: 8rem; color: rgba(240,66,88,.14); }
.about-mv__card--vision.about-mv__card--plain .about-mv__quote { color: rgba(251,191,36,.18); }
.about-mv__card--plain .about-mv__icon { border: 0; box-shadow: none; }

@media (max-width: 1100px) {
    .about-intro__bubble { left: -40px; }
    .about-intro__memo { right: -16px; }
}
@media (max-width: 980px) {
    .about-intro__inner { grid-template-columns: minmax(0, 1fr); }
    .about-intro__art { width: min(100%, 320px); margin-top: 24px; }
    .about-intro__bubble { left: -8px; top: -30px; max-width: 190px; }
}
@media (max-width: 680px) {
    .about-intro__actions .btn { flex: 1 1 100%; }
    .about-intro__memo { display: none; }
}
@media (prefers-reduced-motion: reduce) { .about-intro__frame { transition: none; } }
/* One Baba polaroid at a time on phones: the hero's already sits just above. */
@media (max-width: 980px) { .about-story-v2__media { display: none; } }

/* =====================================================================
   35  ABOUT — Editorial "Our Story" section (Cardless Narrative)
   ---------------------------------------------------------------------
   Un-boxed, magazine-style storytelling layout:
   - Sticky left sidebar with Baba's polaroid, authentic quote, and trust badges.
   - Flowing right column with chapter numerals, clean typography, and styled lists.
   - Bottom sign-off with Baba's handwritten quote.
   ===================================================================== */

.about-story-edit {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0;
    background: var(--bg, #FAF9F7);
}

.about-story-edit__header {
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 56px);
    position: relative;
    z-index: 1;
}

.about-story-edit__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--line-1, rgba(0,0,0,.08));
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal, #017E80);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.about-story-edit__eyebrow i {
    font-size: .75rem;
    color: var(--pink, #C21B86);
}

.about-story-edit__title {
    margin: 0 0 10px;
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    font-weight: 800;
    color: var(--ink, #1F2937);
    letter-spacing: -.02em;
    line-height: 1.15;
}

.about-story-edit__subtitle {
    margin: 0;
    font-family: 'Caveat', cursive;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 700;
    color: var(--pink, #C21B86);
}

/* 2-Column Editorial Grid */
.about-story-edit__layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
    max-width: 1040px;
    margin-inline: auto;
}

/* Left Sidebar */
.about-story-edit__sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-story-edit__polaroid-wrap {
    display: flex;
    justify-content: center;
}

.about-story-edit__polaroid {
    margin: 0;
    background: #ffffff;
    padding: 12px 12px 18px;
    border-radius: 6px;
    box-shadow:
        0 14px 34px rgba(0,0,0,.08),
        0 2px 6px rgba(0,0,0,.04);
    transform: rotate(-2deg);
    transition: transform .3s ease;
    max-width: 260px;
    width: 100%;
    text-align: center;
}

.about-story-edit__polaroid:hover {
    transform: rotate(0deg) scale(1.02);
}

.about-story-edit__polaroid-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.about-story-edit__polaroid-caption {
    margin-top: 10px;
    font-family: 'Caveat', cursive;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ink, #1F2937);
    line-height: 1.25;
}

/* Baba Quote Box */
.about-story-edit__quote-box {
    margin: 0;
    position: relative;
    padding: 18px 20px 18px 24px;
    background: rgba(1, 126, 128, 0.05);
    border-left: 3px solid var(--teal, #017E80);
    border-radius: 0 14px 14px 0;
}

.about-story-edit__quote-mark {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--teal, #017E80);
    opacity: .4;
    display: block;
    margin-bottom: -6px;
}

.about-story-edit__quote-para {
    margin: 0 0 10px;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--ink, #2D3748);
    font-style: italic;
}

.about-story-edit__quote-author {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--teal, #017E80);
    font-style: normal;
}

/* Trust Highlights */
.about-story-edit__highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid var(--line-1, rgba(0,0,0,.06));
    border-radius: 12px;
}

.about-story-edit__highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink, #2D3748);
}

.about-story-edit__highlight-item i {
    width: 22px;
    color: var(--teal, #017E80);
    font-size: .95rem;
    flex-shrink: 0;
    text-align: center;
}

/* Right Column: Story Stream */
.about-story-edit__stream {
    min-width: 0;
}

.about-story-edit__lead {
    font-size: clamp(1.05rem, 1.3vw, 1.18rem);
    line-height: 1.85;
    color: var(--ink-2, #374151);
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line-1, rgba(0,0,0,.08));
}

.about-story-edit__lead p {
    margin: 0 0 16px;
}

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

/* Chapters (No Cards, Flowing Editorial Text) */
.about-story-edit__chapters {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.about-story-edit__chapter {
    padding-bottom: 36px;
    border-bottom: 1px solid var(--line-1, rgba(0,0,0,.08));
}

.about-story-edit__chapter:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-story-edit__chapter-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 14px;
}

.about-story-edit__chapter-num {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 700;
    font-style: italic;
    color: var(--teal, #017E80);
    line-height: 1;
    opacity: .85;
    flex-shrink: 0;
}

.about-story-edit__chapter-title {
    margin: 0;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 700;
    color: var(--ink, #1F2937);
    line-height: 1.3;
}

.about-story-edit__chapter-body {
    font-size: .98rem;
    line-height: 1.8;
    color: #4B5563;
}

.about-story-edit__chapter-body p {
    margin: 0 0 14px;
}

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

.about-story-edit__chapter-body ul,
.about-story-edit__chapter-body ol {
    margin: 14px 0 18px;
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 16px;
}

.about-story-edit__chapter-body li {
    position: relative;
    padding-left: 20px;
    font-size: .92rem;
    color: #374151;
}

.about-story-edit__chapter-body li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-size: .85rem;
    font-weight: 800;
    color: var(--teal, #017E80);
}

/* Bottom Sign-off */
.about-story-edit__signoff {
    text-align: center;
    margin-top: clamp(40px, 6vw, 64px);
    padding-top: 36px;
    border-top: 1px solid var(--line-1, rgba(0,0,0,.08));
}

.about-story-edit__signoff-text {
    margin: 0 0 6px;
    font-family: 'Caveat', cursive;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 700;
    color: var(--ink, #1F2937);
    line-height: 1.25;
}

.about-story-edit__signoff-text .heart {
    color: var(--pink, #C21B86);
    font-style: normal;
}

.about-story-edit__signoff-sub {
    margin: 0;
    font-size: .92rem;
    color: var(--muted, #6B7280);
    font-weight: 500;
}

/* Responsive Story Section */
@media (max-width: 900px) {
    .about-story-edit__layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .about-story-edit__sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .about-story-edit__polaroid {
        max-width: 220px;
    }
    .about-story-edit__quote-box {
        flex: 1 1 280px;
    }
    .about-story-edit__highlights {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }
}


/* =====================================================================
   36  ABOUT — Baba's Mission & Vision (Full View Background & Curved Tagline)
   ---------------------------------------------------------------------
   Shows 100% full view of mission-vission-bg.webp without cropping,
   centered soft mint cards, curved SVG tagline, and full CMS editability.
   ===================================================================== */

.about-bmv-exact {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 6vw, 84px) 0 clamp(44px, 5.5vw, 76px);
    background-color: #EBF6EE;
    background-image: var(--bmv-bg, url('../images/redesign/mission-vission-bg.webp'));
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

/* Ensure full 16:9 view on desktop matching background image (1667x943) */
@media (min-width: 900px) {
    .about-bmv-exact {
        min-height: clamp(740px, calc(100vw * 943 / 1667), 960px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Main Container */
.about-bmv-exact__container {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: 16px;
    width: 100%;
}

/* Header */
.about-bmv-exact__header {
    text-align: center;
    margin-bottom: clamp(28px, 3.8vw, 42px);
}

.about-bmv-exact__title {
    margin: 0 0 6px;
    font-family: 'Caveat', 'Kalam', cursive;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #164E47;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.about-bmv-exact__sub-wrap {
    display: inline-block;
    text-align: center;
}

.about-bmv-exact__subtitle {
    margin: 0;
    font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(.95rem, 1.25vw, 1.08rem);
    font-weight: 500;
    color: #355D56;
    letter-spacing: .015em;
}

.about-bmv-exact__underline {
    display: block;
    width: 110px;
    height: 9px;
    margin: 4px auto 0;
}

/* Cards Grid */
.about-bmv-exact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 360px));
    justify-content: center;
    gap: clamp(18px, 3.2vw, 36px);
    margin-bottom: clamp(24px, 3.2vw, 36px);
}

/* Card */
.about-bmv-exact__card {
    background: rgba(235, 246, 241, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 22px;
    padding: clamp(26px, 3.2vw, 36px) clamp(20px, 2.5vw, 30px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
        0 10px 30px rgba(18, 77, 71, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(194, 236, 229, 0.5);
    transition: transform .3s ease, box-shadow .3s ease;
}

.about-bmv-exact__card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 40px rgba(18, 77, 71, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Circular Icon Badge */
.about-bmv-exact__icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #C2ECE5;
    box-shadow: 0 0 0 7px rgba(194, 236, 229, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.about-bmv-exact__icon-circle svg {
    display: block;
}

/* Card Label */
.about-bmv-exact__label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #126B64;
    display: block;
    margin-bottom: 6px;
}

/* Accent Bar Under Label */
.about-bmv-exact__label-bar {
    width: 32px;
    height: 2.5px;
    background: #6EC3B3;
    border-radius: 2px;
    display: block;
    margin: 0 auto 14px;
}

/* Card Heading */
.about-bmv-exact__heading {
    margin: 0 0 14px;
    font-size: clamp(1.08rem, 1.35vw, 1.22rem);
    font-weight: 800;
    color: #124741;
    line-height: 1.35;
    text-align: center;
}

/* Card Description */
.about-bmv-exact__desc {
    margin: 0;
    font-size: .88rem;
    line-height: 1.68;
    color: #356059;
    text-align: center;
}

.about-bmv-exact__desc p {
    margin: 0 0 10px;
}

.about-bmv-exact__desc p:last-child {
    margin-bottom: 0;
}

/* Bottom Tagline: Curved SVG Container */
.about-bmv-exact__tagline {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}

.about-bmv-exact__tagline-svg {
    max-width: 650px;
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.about-bmv-exact__tagline-curved {
    font-family: 'Caveat', cursive;
    font-size: 28px;
    font-weight: 700;
    fill: #165249;
    letter-spacing: .02em;
}

/* Responsiveness */
@media (max-width: 860px) {
    .about-bmv-exact {
        background-size: cover;
        background-position: center top;
    }
    .about-bmv-exact__grid {
        grid-template-columns: minmax(0, 480px);
    }
    .about-bmv-exact__tagline-svg {
        max-width: 520px;
    }
    .about-bmv-exact__tagline-curved {
        font-size: 24px;
    }
}

@media (max-width: 540px) {
    .about-bmv-exact__tagline-svg {
        max-width: 360px;
    }
    .about-bmv-exact__tagline-curved {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-bmv-exact__card {
        transition: none;
    }
}