/*
 * Bali Luxury Adventure — "Bone & Jade" design system.
 *
 * Hand-authored CSS, no build step. Volcanic ink + Balinese jade + bone,
 * Cormorant Garamond (display serif) over DM Sans (body/UI).
 *
 * The language is editorial and architectural: hairline rules instead of
 * boxes, two-digit index numerals instead of icons-in-circles, squared
 * corners, and photography carrying the weight. Deliberately the opposite
 * of a rounded-card-and-drop-shadow layout.
 *
 * Contents
 *   1. tokens          6. hero             11. faq
 *   2. base            7. editorial        12. contact
 *   3. primitives      8. chapters         13. cta
 *   4. header          9. cards            14. footer
 *   5. drawer         10. gallery          15. journal, utility, motion
 */

/* ============================================================== 1. tokens */
:root {
    /* ground */
    --bone: #fbfaf7;
    --bone-2: #f6f4ef;
    --linen: #f1eee7;
    --linen-2: #e8e4da;
    --white: #ffffff;

    /* ink — volcanic black with a green undertone, never neutral grey */
    --ink: #0e1412;
    --ink-2: #16201c;
    --ink-3: #1f2b26;

    /* jade — the single accent */
    --jade: #2d6a5b;
    --jade-deep: #1e4c40;
    --jade-light: #6f9c8d;
    --jade-wash: #eef3f0;

    /* type colour */
    --text: #171d1a;
    --text-soft: #4d5a54;
    --text-muted: #7c8883;
    --on-ink: #eef1ee;
    --on-ink-soft: #a9b5af;
    --on-ink-muted: #7d8a84;

    /* hairlines — the structural device of this theme */
    --rule: rgba(23, 29, 26, .13);
    --rule-soft: rgba(23, 29, 26, .07);
    --rule-strong: rgba(23, 29, 26, .24);
    --rule-ink: rgba(238, 241, 238, .16);
    --rule-ink-soft: rgba(238, 241, 238, .08);

    --shadow-card: 0 1px 2px rgba(14, 20, 18, .03), 0 18px 40px -28px rgba(14, 20, 18, .28);
    --shadow-float: 0 28px 70px -32px rgba(14, 20, 18, .45);

    --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* squared, architectural — not pills */
    --r-xs: 1px;
    --r-sm: 2px;
    --r: 3px;
    --r-lg: 4px;

    --container: 1240px;
    --measure: 68ch;
    --gutter: 20px;
    --header-h: 86px;
    --utility-h: 36px;

    /* vertical rhythm */
    --band-y: clamp(3.75rem, 7vw, 7.5rem);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
    :root { --gutter: 32px; }
}
@media (min-width: 1280px) {
    :root { --gutter: 40px; }
}

/* ================================================================ 2. base */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    /* The palette is light in both schemes, so say so: native scrollbars,
       form controls and <select> dropdowns then match the page instead of
       inverting on a dark-mode OS. */
    color-scheme: light;
}

/* Kill the 300ms double-tap-zoom delay, and set the tap flash deliberately
   rather than taking the browser's translucent blue. */
a, button, summary, [role="tab"], input, textarea, select, label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(45, 106, 91, .14);
}

/* Suppress page rubber-banding for mouse users only — a coarse pointer
   keeps native pull-to-refresh and edge-swipe navigation. */
@media (pointer: fine) {
    html { overscroll-behavior: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bone);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.68;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

/* Cormorant is a fine-stroked display face — it is never used below
   1.25rem, where it loses legibility. */
h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.07;
    letter-spacing: -.012em;
    color: var(--ink);
    text-wrap: balance;
}

h1 em, h2 em, h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--jade);
}

::selection { background: var(--jade); color: var(--bone); }

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

.bla-band--ink :focus-visible,
.bla-hero :focus-visible,
.bla-footer :focus-visible { outline-color: var(--jade-light); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--bone);
    font-size: .8125rem;
    font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ========================================================== 3. primitives */
.bla-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bla-band {
    position: relative;
    padding-block: var(--band-y);
}
.bla-band--bone { background: var(--bone); }
.bla-band--linen { background: var(--linen); }
.bla-band--ink { background: var(--ink); color: var(--on-ink); }
.bla-band--ink h2, .bla-band--ink h3 { color: var(--bone); }

/* A hairline at the top of every banded section: the grid made visible. */
.bla-band--bone + .bla-band--bone::before,
.bla-band--linen + .bla-band--linen::before {
    content: '';
    position: absolute;
    inset-inline: var(--gutter);
    top: 0;
    height: 1px;
    background: var(--rule-soft);
}

/* --- type scale ------------------------------------------------------- */
.bla-h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); }
.bla-h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.bla-h3 { font-size: clamp(1.4rem, 2.2vw, 1.875rem); }

.bla-eyebrow {
    margin: 0 0 1.25rem;
    font-family: var(--font-body);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jade);
}
.bla-band--ink .bla-eyebrow,
.bla-hero .bla-eyebrow,
.bla-cta .bla-eyebrow { color: var(--jade-light); }

/* Eyebrow with a short leading rule — used on section headers. */
.bla-eyebrow--ruled {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.bla-eyebrow--ruled::before {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .5;
    flex: none;
}

.bla-lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.62;
    color: var(--text-soft);
    max-width: 56ch;
}
.bla-band--ink .bla-lede { color: var(--on-ink-soft); }

.bla-prose {
    max-width: var(--measure);
    color: var(--text-soft);
}
.bla-prose p + p { margin-top: 1.15em; }

.bla-head {
    max-width: 62ch;
    margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
.bla-head--center {
    margin-inline: auto;
    text-align: center;
}
.bla-head--center .bla-eyebrow--ruled { justify-content: center; }
.bla-head--center .bla-lede { margin-inline: auto; }
.bla-head .bla-lede { margin-top: 1.5rem; }

/* Two-digit index numeral: the recurring editorial mark. */
.bla-numeral {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: .85;
    letter-spacing: -.02em;
    color: var(--jade);
    opacity: .34;
    font-variant-numeric: lining-nums tabular-nums;
}

/* --- buttons ---------------------------------------------------------- */
.bla-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9375rem 1.625rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .085em;
    text-transform: uppercase;
    line-height: 1.1;
    cursor: pointer;
    transition: background-color .22s var(--ease), color .22s var(--ease),
                border-color .22s var(--ease), transform .22s var(--ease);
}
.bla-btn i { font-size: 1.0625rem; }
.bla-btn:hover { transform: translateY(-1px); }
.bla-btn:active { transform: translateY(0); }

.bla-btn--jade { background: var(--jade); color: var(--white); }
.bla-btn--jade:hover { background: var(--jade-deep); }

.bla-btn--ink { background: var(--ink); color: var(--bone); }
.bla-btn--ink:hover { background: var(--ink-3); }

.bla-btn--light { background: var(--bone); color: var(--ink); }
.bla-btn--light:hover { background: var(--white); }

.bla-btn--ghost {
    background: transparent;
    border-color: var(--rule-strong);
    color: var(--ink);
}
.bla-btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }

.bla-btn--on-dark {
    background: transparent;
    border-color: rgba(255, 255, 255, .34);
    color: var(--white);
}
.bla-btn--on-dark:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); }

.bla-btn--sm { padding: .6875rem 1.1875rem; font-size: .75rem; }

.bla-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

/* Underlined text link with a sliding rule. */
.bla-link {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--jade);
    padding-bottom: 3px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .28s var(--ease), color .2s var(--ease);
}
.bla-link:hover { background-size: 28% 1px; color: var(--jade-deep); }
.bla-link i { transition: transform .22s var(--ease); }
.bla-link:hover i { transform: translateX(3px); }

/* --- breadcrumb ------------------------------------------------------- */
.bla-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--on-ink-muted);
}
.bla-crumb a { color: var(--on-ink-soft); }
.bla-crumb a:hover { color: var(--bone); }
.bla-crumb li[aria-hidden] { opacity: .5; }
.bla-crumb li[aria-current] { color: var(--bone); }

.bla-band--bone .bla-crumb, .bla-band--linen .bla-crumb { color: var(--text-muted); }
.bla-band--bone .bla-crumb a, .bla-band--linen .bla-crumb a { color: var(--text-soft); }
.bla-band--bone .bla-crumb li[aria-current], .bla-band--linen .bla-crumb li[aria-current] { color: var(--ink); }

/* ============================================================== 4. header */
.bla-utility {
    background: var(--ink);
    color: var(--on-ink-muted);
    font-size: .75rem;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--rule-ink-soft);
}
.bla-utility__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter);
    height: var(--utility-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.bla-utility__group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}
.bla-utility__group > * {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    white-space: nowrap;
}
.bla-utility a { color: var(--on-ink-soft); transition: color .2s var(--ease); }
.bla-utility a:hover { color: var(--bone); }
.bla-utility i { font-size: .9375rem; color: var(--jade-light); }

@media (max-width: 1023px) {
    .bla-utility { display: none; }
    :root { --utility-h: 0px; }
}

/* --- logo lockup ------------------------------------------------------ */
.bla-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}
.bla-logo__img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: none;
}
/* Requirement: the footer mark reads white on the dark ground. A dark
   source PNG is inverted here rather than needing a second asset. */
.bla-logo__img--invert { filter: brightness(0) invert(1); }

.bla-logo--footer .bla-logo__img { width: 50px; height: 50px; }

/* The header mark stands alone with no wordmark beside it, so it carries the
   brand on its own and is sized up to suit. */
.bla-logo--header .bla-logo__img { width: 64px; height: 64px; }

.bla-logo__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bla-logo__name {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.005em;
    color: var(--ink);
    white-space: nowrap;
}
.bla-logo__kicker {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.bla-logo--footer .bla-logo__name { color: var(--bone); font-size: 1.3125rem; }
.bla-logo--footer .bla-logo__kicker { color: var(--on-ink-muted); }

@media (max-width: 767px) {
    :root { --header-h: 74px; }
    .bla-logo--header .bla-logo__img { width: 52px; height: 52px; }
}

@media (max-width: 420px) {
    .bla-logo__name { font-size: 1.0625rem; }
    .bla-logo__kicker { display: none; }
}

/* --- masthead -------------------------------------------------------- */
#bla-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(251, 250, 247, .9);
    backdrop-filter: saturate(170%) blur(14px);
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    border-bottom: 1px solid var(--rule-soft);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
#bla-header.is-stuck {
    border-bottom-color: var(--rule);
    box-shadow: 0 1px 24px -8px rgba(14, 20, 18, .14);
}

.bla-header__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.bla-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* --- primary nav ----------------------------------------------------- */
.bla-nav-primary { margin-left: auto; }

.bla-nav, .bla-nav-primary ul {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.bla-nav__item, .bla-nav-primary li { position: relative; }

.bla-nav > li > a,
.bla-nav-primary > ul > li > a {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    padding: .625rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .035em;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    transition: color .2s var(--ease);
}
.bla-nav > li > a:hover,
.bla-nav-primary > ul > li > a:hover,
.bla-nav-primary > ul > li.current-menu-item > a,
.bla-nav-primary > ul > li.current-menu-parent > a,
.bla-nav-primary > ul > li.current-menu-ancestor > a { color: var(--ink); }

.bla-nav > li > a i,
.bla-nav-primary > ul > li > a i {
    font-size: .875rem;
    opacity: .55;
    transition: transform .22s var(--ease);
}
.bla-nav__item--has-children:hover > a i,
.bla-nav-primary li:hover > a i { transform: rotate(180deg); }

/* The active page keeps a jade hairline under the label. */
.bla-nav-primary > ul > li.current-menu-item > a::after,
.bla-nav-primary > ul > li.current-menu-parent > a::after,
.bla-nav-primary > ul > li.current-menu-ancestor > a::after {
    content: '';
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .25rem;
    height: 1px;
    background: var(--jade);
}

/* dropdown */
.bla-nav__dropdown,
.bla-nav-primary .sub-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: -.5rem;
    min-width: 272px;
    display: block;
    padding: .5rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--shadow-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--ease), transform .24s var(--ease), visibility .2s;
}
.bla-nav__item--has-children:hover > .bla-nav__dropdown,
.bla-nav__item--has-children:focus-within > .bla-nav__dropdown,
.bla-nav-primary li:hover > .sub-menu,
.bla-nav-primary li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bla-nav__dropdown, .bla-nav-primary .sub-menu { flex-direction: column; align-items: stretch; gap: 0; }
.bla-nav__dropdown a, .bla-nav-primary .sub-menu a {
    display: block;
    padding: .625rem .75rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-soft);
    border-radius: var(--r-sm);
    transition: background-color .18s var(--ease), color .18s var(--ease);
}
.bla-nav__dropdown a:hover, .bla-nav-primary .sub-menu a:hover {
    background: var(--jade-wash);
    color: var(--jade-deep);
}

@media (max-width: 1151px) {
    .bla-nav-primary { display: none; }
}

/* --- burger ---------------------------------------------------------- */
.bla-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.bla-burger:hover { border-color: var(--ink); background: var(--bone-2); }
@media (max-width: 1151px) {
    .bla-burger { display: inline-flex; }
}
@media (max-width: 599px) {
    .bla-header__actions .bla-btn { display: none; }
}

/* ============================================================== 5. drawer */
#bla-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
    visibility: hidden;
    pointer-events: none;
}
#bla-drawer.is-open { visibility: visible; pointer-events: auto; }

.bla-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 20, 18, .55);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
#bla-drawer.is-open .bla-drawer__backdrop { opacity: 1; }

.bla-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(400px, 90vw);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--on-ink);
    transform: translateX(100%);
    transition: transform .36s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#bla-drawer.is-open .bla-drawer__panel { transform: translateX(0); }

.bla-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem var(--gutter);
    border-bottom: 1px solid var(--rule-ink-soft);
}
.bla-drawer__close {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    color: var(--bone);
    font-size: 1.25rem;
    cursor: pointer;
    flex: none;
}
.bla-drawer__close:hover { background: rgba(255, 255, 255, .08); }

.bla-mnav { padding: 1rem var(--gutter) .5rem; flex: 1; }
.bla-mnav__link,
.bla-mnav > ul > li > a,
.bla-mnav__group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9375rem 0;
    border-bottom: 1px solid var(--rule-ink-soft);
    font-family: var(--font-display);
    font-size: 1.3125rem;
    font-weight: 500;
    color: var(--bone);
    cursor: pointer;
    list-style: none;
}
.bla-mnav__group > summary::-webkit-details-marker { display: none; }
.bla-mnav__group > summary i { font-size: 1rem; color: var(--jade-light); transition: transform .24s var(--ease); }
.bla-mnav__group[open] > summary i { transform: rotate(45deg); }
.bla-mnav__group ul, .bla-mnav .sub-menu { padding: .375rem 0 .875rem; }
.bla-mnav__group ul a, .bla-mnav .sub-menu a {
    display: block;
    padding: .5rem 0 .5rem 1rem;
    border-left: 1px solid var(--rule-ink);
    font-size: .9375rem;
    color: var(--on-ink-soft);
}
.bla-mnav__group ul a:hover, .bla-mnav .sub-menu a:hover { color: var(--bone); border-left-color: var(--jade-light); }

/* A WP-generated menu inside the drawer gets the same treatment. */
.bla-mnav > ul { display: block; }
.bla-mnav > ul > li { display: block; }
.bla-mnav > ul > li > a { font-family: var(--font-display); }
/* The drawer shows every sub-menu already open, so the parent chevron
   would point at nothing. */
.bla-mnav > ul i { display: none; }
.bla-mnav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: .25rem 0 .75rem;
}

.bla-drawer__foot {
    padding: 1.25rem var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule-ink-soft);
    display: grid;
    gap: .625rem;
}
.bla-drawer__foot .bla-btn { width: 100%; }
.bla-drawer__meta {
    font-size: .8125rem;
    color: var(--on-ink-muted);
    display: grid;
    gap: .25rem;
    margin-top: .5rem;
}
.bla-drawer__meta a { color: var(--on-ink-soft); }

/* ================================================================ 6. hero */
/* Cinematic full-bleed photograph, text sitting low-left over a scrim,
   with a meta strip that overlaps the band below it. */
.bla-hero {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--on-ink);
    overflow: hidden;
}
.bla-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.bla-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
}
/* Two-stop scrim: a soft vertical wash for legibility plus a left-weighted
   wash so the copy column keeps contrast without darkening the whole photo. */
.bla-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(14, 20, 18, .93) 0%, rgba(14, 20, 18, .62) 42%, rgba(14, 20, 18, .28) 72%, rgba(14, 20, 18, .42) 100%),
        linear-gradient(to right, rgba(14, 20, 18, .68) 0%, rgba(14, 20, 18, .18) 58%, transparent 100%);
}

.bla-hero__inner {
    position: relative;
    max-width: var(--container);
    margin-inline: auto;
    padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.75rem;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}
.bla-hero__body { margin-top: auto; max-width: 46rem; }

/* A min-height ladder, not one value: the hero must fit a 390x844 phone
   without the CTAs falling below the fold. */
@media (min-width: 480px) { .bla-hero__inner { min-height: 560px; } }
@media (min-width: 640px) { .bla-hero__inner { min-height: 620px; } }
@media (min-width: 768px) { .bla-hero__inner { min-height: 72vh; padding-bottom: 3.5rem; } }
@media (min-width: 1024px) { .bla-hero__inner { min-height: 80vh; } }
@media (min-width: 1280px) { .bla-hero__inner { min-height: 84vh; } }

.bla-hero__title {
    margin: 1.125rem 0 0;
    color: var(--white);
    font-weight: 400;
    letter-spacing: -.018em;
}
.bla-hero__title em { color: var(--jade-light); }

.bla-hero__lede {
    margin-top: 1.375rem;
    color: rgba(255, 255, 255, .84);
    max-width: 52ch;
}
.bla-hero__cta { margin-top: 2rem; }

/* Locations / places line under the H1, e.g. "Ubud · Seminyak · Gianyar" */
.bla-hero__places {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem .875rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
.bla-hero__places i { color: var(--jade-light); font-size: .9375rem; }

/* byline: "By … Editorial Desk · Updated June 2026" */
.bla-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .875rem;
    margin-top: 1.75rem;
    padding-top: 1.125rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    font-size: .75rem;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .62);
}
.bla-byline strong { font-weight: 600; color: rgba(255, 255, 255, .86); }
.bla-byline span { display: inline-flex; align-items: center; gap: .375rem; }
.bla-byline i { font-size: .875rem; color: var(--jade-light); }

/* --- hero meta strip -------------------------------------------------- */
/* Overlaps the next band by half its height on desktop — the one piece of
   deliberate grid-breaking in the layout. */
.bla-hero__facts {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}
.bla-hero__facts-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    box-shadow: var(--shadow-float);
    overflow: hidden;
}
.bla-hero__fact {
    padding: 1.25rem 1.125rem;
    border-right: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
}
.bla-hero__fact:nth-child(2n) { border-right: 0; }
.bla-hero__fact:nth-last-child(-n+2) { border-bottom: 0; }

.bla-hero__fact-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ink);
}
.bla-hero__fact-label {
    display: block;
    margin-top: .3125rem;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (min-width: 768px) {
    .bla-hero__facts { margin-top: -3.5rem; }
    .bla-hero__facts-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bla-hero__fact { padding: 1.5rem 1.375rem; border-bottom: 0; }
    .bla-hero__fact:nth-child(2n) { border-right: 1px solid var(--rule-soft); }
    .bla-hero__fact:last-child { border-right: 0; }
    .bla-hero__fact-value { font-size: 1.75rem; }
}
/* The band that follows absorbs the overlap. */
@media (min-width: 768px) {
    .bla-hero__facts + .bla-band { padding-top: calc(var(--band-y) + 1.5rem); }
}

/* Hero without a photograph: ink ground plus a faint jade topographic
   wash, so a page with no image still looks intentional. */
.bla-hero--plain .bla-hero__scrim {
    background:
        radial-gradient(120% 80% at 12% 100%, rgba(45, 106, 91, .4) 0%, transparent 62%),
        radial-gradient(80% 60% at 88% 0%, rgba(45, 106, 91, .22) 0%, transparent 70%),
        linear-gradient(to bottom, var(--ink-2), var(--ink));
}

/* ============================================================ 7. editorial */
/* The "In short:" answer block — a drop cap, a jade rule, and an optional
   list of supporting points in the right margin. */
.bla-answer__grid {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 900px) {
    .bla-answer__grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: clamp(3rem, 6vw, 5.5rem);
        align-items: start;
    }
}

.bla-answer__label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--jade);
}
.bla-answer__label::before {
    content: '';
    width: 22px; height: 1px;
    background: currentColor;
}

.bla-answer__text {
    font-family: var(--font-display);
    font-size: clamp(1.4375rem, 2.6vw, 2.0625rem);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -.008em;
    color: var(--ink);
    max-width: 40ch;
}
.bla-answer__text::first-letter {
    float: left;
    margin: .07em .07em 0 0;
    font-size: 2.55em;
    line-height: .78;
    font-weight: 600;
    color: var(--jade);
}
/* Opens with a figure: no drop cap, and lining figures so "100" reads as
   digits rather than Cormorant's old-style forms. */
.bla-answer__text--numeric { font-variant-numeric: lining-nums; }
.bla-answer__text--numeric::first-letter {
    float: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}

.bla-answer__body {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule-soft);
    max-width: var(--measure);
    color: var(--text-soft);
}

/* supporting points: hairline-separated rows, numeral-led */
.bla-answer__points { display: grid; }
.bla-answer__point {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .875rem;
    padding: .9375rem 0;
    border-top: 1px solid var(--rule-soft);
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--text-soft);
}
.bla-answer__point:last-child { border-bottom: 1px solid var(--rule-soft); }
.bla-answer__point-n {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--jade);
    padding-top: .0625rem;
    font-variant-numeric: tabular-nums;
}

/* =============================================================== 8. chapters */
/* The workhorse: a long page of heading + prose blocks. Rendered as
   hairline-separated editorial rows with the index numeral and heading in
   a sticky left rail, prose in the measure column. Every third row can
   carry a full-bleed image spread. */
.bla-chapters { display: grid; }

.bla-chapter {
    display: grid;
    gap: 1rem;
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--rule-soft);
}
.bla-chapter:first-child { border-top: 0; padding-top: 0; }
.bla-chapter:last-child { padding-bottom: 0; }

.bla-chapter__mark {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.bla-chapter__title {
    font-size: clamp(1.375rem, 2.3vw, 1.9375rem);
    font-weight: 500;
    line-height: 1.14;
}
.bla-chapter__body { color: var(--text-soft); max-width: var(--measure); }

@media (min-width: 900px) {
    .bla-chapter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        gap: clamp(2.5rem, 5vw, 4.5rem);
        align-items: start;
    }
    .bla-chapter__mark {
        position: sticky;
        top: calc(var(--header-h) + 2.5rem);
        flex-direction: column;
        gap: 1.125rem;
    }
    .bla-chapter__title { max-width: 22ch; }
}

/* An image lane that breaks out of the measure column every few chapters. */
.bla-chapter__figure {
    margin-top: 1.75rem;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--linen-2);
}
.bla-chapter__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .9s var(--ease);
}
.bla-chapter__figure:hover img { transform: scale(1.025); }

/* chapter closing note */
.bla-chapters__note {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: 1.75rem;
    background: var(--jade-wash);
    border-left: 2px solid var(--jade);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--jade-deep);
    max-width: 72ch;
}
.bla-band--linen .bla-chapters__note { background: var(--white); }

/* =============================================================== 9. cards */
/* Feature grid — hairline-divided cells rather than floating cards, so the
   section reads as one plate of information. */
.bla-cards {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.bla-card {
    padding: 1.875rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.bla-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    margin-bottom: 1.125rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--jade);
    font-size: 1.1875rem;
}
.bla-card__title {
    font-size: 1.3125rem;
    font-weight: 600;
    margin-bottom: .625rem;
}
.bla-card__text { font-size: .9375rem; line-height: 1.6; color: var(--text-soft); }
.bla-card .bla-link { margin-top: 1rem; }

@media (min-width: 640px) {
    .bla-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 1024px) {
    .bla-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bla-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- quick-select chips ("Choose your adventure") --------------------- */
.bla-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}
.bla-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.125rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--text);
    transition: border-color .2s var(--ease), background-color .2s var(--ease),
                color .2s var(--ease), transform .2s var(--ease);
}
.bla-chip i { font-size: 1.0625rem; color: var(--jade); transition: color .2s var(--ease); }
.bla-chip:hover {
    border-color: var(--jade);
    background: var(--jade);
    color: var(--white);
    transform: translateY(-2px);
}
.bla-chip:hover i { color: var(--white); }
.bla-band--linen .bla-chip { background: var(--bone); }

/* --- collection: image-led cards -------------------------------------- */
.bla-collection {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 640px) { .bla-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bla-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bla-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.bla-tile:hover {
    border-color: var(--rule);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
}
.bla-tile__media {
    position: relative;
    overflow: hidden;
    background: var(--linen-2);
}
.bla-tile__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .8s var(--ease);
}
.bla-tile:hover .bla-tile__media img { transform: scale(1.045); }
.bla-tile__n {
    position: absolute;
    top: .75rem; left: .875rem;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
    text-shadow: 0 1px 10px rgba(14, 20, 18, .6);
    font-variant-numeric: tabular-nums;
}
.bla-tile__body {
    padding: 1.375rem 1.375rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    flex: 1;
}
.bla-tile__title { font-size: 1.3125rem; font-weight: 600; line-height: 1.16; }
.bla-tile__text { font-size: .9375rem; line-height: 1.58; color: var(--text-soft); margin: 0; }
.bla-tile__foot {
    margin-top: auto;
    padding-top: .875rem;
    border-top: 1px solid var(--rule-soft);
}
.bla-band--linen .bla-tile { background: var(--bone); }

/* --- checklist panel --------------------------------------------------- */
.bla-checklist__grid {
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 900px) {
    .bla-checklist__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 5rem); align-items: start; }
}
.bla-checklist__list { display: grid; }
.bla-checklist__item {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: .875rem;
    padding: .9375rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
}
.bla-checklist__item:first-child { border-top: 1px solid var(--rule); }
.bla-checklist__item i { color: var(--jade); font-size: 1.125rem; padding-top: .125rem; }
.bla-checklist__note {
    margin-top: 1.75rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --- related --------------------------------------------------------- */
.bla-related {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule);
}
.bla-related__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.125rem .25rem 1.125rem 0;
    border-bottom: 1px solid var(--rule-soft);
    transition: padding-left .25s var(--ease), background-color .25s var(--ease);
}
.bla-related__item:hover { padding-left: .75rem; background: var(--jade-wash); }
.bla-related__label {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    min-width: 0;
}
.bla-related__label i { font-size: 1.125rem; color: var(--jade); flex: none; }
.bla-related__item > i {
    font-size: 1.0625rem;
    color: var(--text-muted);
    flex: none;
    transition: transform .25s var(--ease), color .25s var(--ease);
}
.bla-related__item:hover > i { transform: translateX(4px); color: var(--jade); }

@media (min-width: 768px) {
    .bla-related { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ============================================================= 10. gallery */
/* Edge-to-edge image strip. Scrolls horizontally on phones with snap,
   becomes a flush row on desktop. */
.bla-gallery { padding-block: 0; background: var(--ink); }
.bla-gallery__strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.bla-gallery__strip::-webkit-scrollbar { display: none; }
.bla-gallery__cell {
    position: relative;
    scroll-snap-align: start;
    overflow: hidden;
    background: var(--ink-2);
}
.bla-gallery__cell img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .9s var(--ease), opacity .4s var(--ease);
}
.bla-gallery__cell:hover img { transform: scale(1.04); }
.bla-gallery__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2.5rem .875rem .875rem;
    background: linear-gradient(to top, rgba(14, 20, 18, .82), transparent);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}
@media (min-width: 640px) {
    .bla-gallery__strip { grid-auto-columns: 42%; }
}
@media (min-width: 1024px) {
    .bla-gallery__strip {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow: visible;
    }
    .bla-gallery__cell img { aspect-ratio: 3 / 4; }
}

/* ================================================================= 11. faq */
.bla-faq { display: grid; }
.bla-faq-item {
    border-bottom: 1px solid var(--rule-soft);
}
.bla-faq-item:first-child { border-top: 1px solid var(--rule); }
.bla-faq-item__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.1875rem .25rem 1.1875rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    transition: color .2s var(--ease);
}
.bla-faq-item__q::-webkit-details-marker { display: none; }
.bla-faq-item__q:hover { color: var(--jade); }
.bla-faq-item__q i {
    flex: none;
    margin-top: .1875rem;
    font-size: 1rem;
    color: var(--jade);
    transition: transform .26s var(--ease);
}
.bla-faq-item[open] > .bla-faq-item__q { color: var(--jade-deep); }
.bla-faq-item[open] > .bla-faq-item__q i { transform: rotate(45deg); }
.bla-faq-item__a {
    padding: 0 3rem 1.375rem 0;
    font-size: .9875rem;
    line-height: 1.68;
    color: var(--text-soft);
    max-width: var(--measure);
}

/* --- grouped FAQ: category pills + panels ----------------------------- */
.bla-faqg__tabs {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    scrollbar-width: none;
    border-bottom: 1px solid var(--rule);
    /* Fade the right edge so it is obvious more categories are off-screen
       — the scrollbar is hidden, so nothing else would say so. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
}
.bla-faqg__tabs::-webkit-scrollbar { display: none; }

/* Wide enough to show every category at once: wrap instead of scroll, and
   drop the fade since nothing is hidden. */
@media (min-width: 1024px) {
    .bla-faqg__tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
        row-gap: .5rem;
        padding-bottom: 1rem;
    }
}
.bla-faqg__tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
    padding: .75rem 1.125rem;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bla-faqg__tab i { font-size: 1rem; color: var(--jade); }
.bla-faqg__tab:hover { border-color: var(--ink); color: var(--ink); }
.bla-faqg__tab[aria-selected="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--bone);
}
.bla-faqg__tab[aria-selected="true"] i { color: var(--jade-light); }
.bla-faqg__count {
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    opacity: .6;
}

.bla-faqg__panel[hidden] { display: none; }
.bla-faqg__panel-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.bla-faqg__panel-title {
    font-size: clamp(1.4375rem, 2.4vw, 1.875rem);
    font-weight: 500;
}
.bla-faqg__panel-meta {
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* With JS off every panel stays visible and the tabs become anchors. */
.no-js .bla-faqg__panel[hidden] { display: block; }
.no-js .bla-faqg__panel + .bla-faqg__panel { margin-top: 3rem; }

/* ============================================================= 12. contact */
.bla-contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) {
    .bla-contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
}

.bla-methods { display: grid; border-top: 1px solid var(--rule); }
.bla-method {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.375rem 0;
    border-bottom: 1px solid var(--rule-soft);
}
.bla-method__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    color: var(--jade);
    font-size: 1.125rem;
}
.bla-method__title { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .375rem; }
.bla-method__value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: var(--ink); word-break: break-word; }
.bla-method__value a:hover { color: var(--jade); }
.bla-method__text { font-size: .9375rem; line-height: 1.55; color: var(--text-soft); margin: .4375rem 0 0; }

.bla-hours { margin-top: 2rem; }
.bla-hours__title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .75rem; font-family: var(--font-body); }
.bla-hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: .9375rem;
}
.bla-hours__row span:first-child { color: var(--text-soft); }
.bla-hours__row span:last-child { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- enquiry form ------------------------------------------------------ */
.bla-form {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r);
}
.bla-band--bone .bla-form { background: var(--linen); }
.bla-form__title { font-size: clamp(1.4375rem, 2.4vw, 1.875rem); font-weight: 500; margin-bottom: .5rem; }
.bla-form__intro { font-size: .9375rem; color: var(--text-soft); margin-bottom: 1.75rem; }

.bla-field { margin-bottom: 1.125rem; }
.bla-field label {
    display: block;
    margin-bottom: .4375rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.bla-field input,
.bla-field textarea,
.bla-field select {
    width: 100%;
    padding: .8125rem .9375rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bla-field textarea { min-height: 128px; resize: vertical; }
.bla-field input:focus,
.bla-field textarea:focus,
.bla-field select:focus {
    outline: none;
    border-color: var(--jade);
    box-shadow: 0 0 0 3px rgba(45, 106, 91, .13);
}
.bla-field input::placeholder, .bla-field textarea::placeholder { color: var(--text-muted); }

.bla-field-row { display: grid; gap: 1.125rem; }
@media (min-width: 520px) { .bla-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bla-form__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.5rem; }
.bla-form__actions .bla-btn { flex: 1 1 auto; }
.bla-form__note { margin-top: 1.125rem; font-size: .8125rem; line-height: 1.55; color: var(--text-muted); }

/* ================================================================= 13. cta */
.bla-cta {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--on-ink);
    overflow: hidden;
    padding-block: clamp(3.75rem, 7vw, 6.5rem);
}
.bla-cta__media { position: absolute; inset: 0; z-index: -2; }
.bla-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.bla-cta__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(90% 120% at 50% 110%, rgba(45, 106, 91, .34) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(14, 20, 18, .9), rgba(14, 20, 18, .96));
}
.bla-cta__inner { text-align: center; max-width: 54rem; margin-inline: auto; }
.bla-cta__heading { color: var(--white); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.25rem); }
.bla-cta__body { margin: 1.375rem auto 0; max-width: 54ch; color: rgba(255, 255, 255, .8); font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.62; }
.bla-cta__row { justify-content: center; margin-top: 2.25rem; }

/* A pair of hairlines framing the centred block — the architectural motif
   again, at the loudest moment on the page. */
.bla-cta__rule {
    width: 1px;
    height: 46px;
    margin: 0 auto 1.75rem;
    background: linear-gradient(to bottom, transparent, var(--jade-light));
}

.bla-cta__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule-ink-soft);
    font-size: .8125rem;
    color: var(--on-ink-muted);
}
.bla-cta__meta span { display: inline-flex; align-items: center; gap: .4375rem; }
.bla-cta__meta i { color: var(--jade-light); font-size: 1rem; }
.bla-cta__meta a:hover { color: var(--bone); }

/* ============================================================== 14. footer */
.bla-footer {
    background: var(--ink);
    color: var(--on-ink-soft);
    font-size: .9375rem;
}
.bla-footer__top { padding-block: clamp(3rem, 5.5vw, 4.75rem) 2.5rem; }
.bla-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 680px) { .bla-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .bla-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.35fr; gap: clamp(1.75rem, 3.2vw, 3rem); }
}

.bla-footer__brand p {
    margin: 1.375rem 0 0;
    max-width: 38ch;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--on-ink-muted);
}
.bla-footer__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.375rem;
    padding: .5rem .875rem;
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    font-size: .75rem;
    letter-spacing: .04em;
    color: var(--on-ink-soft);
}
.bla-footer__badge i { color: var(--jade-light); font-size: 1rem; }

.bla-footer h2 {
    font-family: var(--font-body);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bone);
    margin-bottom: 1.125rem;
}
.bla-footer__links { display: grid; gap: .625rem; }
.bla-footer__links a {
    color: var(--on-ink-muted);
    font-size: .9375rem;
    line-height: 1.45;
    transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.bla-footer__links a:hover { color: var(--bone); padding-left: 4px; }

.bla-footer__contact { display: grid; gap: 1.125rem; }
.bla-footer__contact-item { display: flex; gap: .75rem; align-items: flex-start; }
.bla-footer__contact-item i { color: var(--jade-light); font-size: 1.125rem; margin-top: .125rem; flex: none; }
.bla-footer__contact-item strong {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-bottom: .1875rem;
}
.bla-footer__contact-item > div {
    color: var(--on-ink);
    font-size: .875rem;
    line-height: 1.5;
    min-width: 0;
    /* Break a long address at a sensible point rather than mid-syllable. */
    overflow-wrap: break-word;
    word-break: normal;
}
.bla-footer__contact-item a:hover { color: var(--jade-light); }

/* sibling-sites row */
.bla-footer__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
    padding-block: 1.5rem;
    padding-right: 11rem;
    border-top: 1px solid var(--rule-ink-soft);
    font-size: .8125rem;
}
.bla-footer__group > span {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    margin-right: .5rem;
}
.bla-footer__group a { color: var(--on-ink-muted); transition: color .2s var(--ease); }
.bla-footer__group a:hover { color: var(--jade-light); }

.bla-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-block: 1.5rem;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule-ink-soft);
    font-size: .8125rem;
    color: var(--on-ink-muted);
}
.bla-footer__bottom p { margin: 0; max-width: 80ch; line-height: 1.6; }
.bla-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.bla-footer__legal a:hover { color: var(--bone); }

/* ======================================== 15. journal, utility, motion */
/* --- back to top ------------------------------------------------------ */
#bla-top {
    position: fixed;
    right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(5.75rem + env(safe-area-inset-bottom));
    z-index: 70;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--bone);
    border: 1px solid var(--rule-ink);
    border-radius: var(--r-sm);
    font-size: 1.125rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
#bla-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#bla-top:hover { background: var(--jade); border-color: var(--jade); }

/* --- floating contact dock -------------------------------------------- */
.bla-dock {
    position: fixed;
    right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-end;
}
.bla-dock__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--r-sm);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .05em;
    box-shadow: var(--shadow-float);
    transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.bla-dock__btn i { font-size: 1.1875rem; }
.bla-dock__btn:hover { transform: translateY(-2px); }
.bla-dock__btn--wa { background: #1faa59; color: var(--white); }
.bla-dock__btn--wa:hover { background: #18954c; }
.bla-dock__btn--call { background: var(--ink); color: var(--bone); border: 1px solid var(--rule-ink); }
.bla-dock__btn--call:hover { background: var(--ink-3); }

@media (max-width: 599px) {
    .bla-footer__group { padding-right: 0; }
    .bla-dock {
        flex-direction: row;
        left: max(var(--gutter), env(safe-area-inset-left));
        right: max(var(--gutter), env(safe-area-inset-right));
        justify-content: stretch;
    }
    .bla-dock__btn { flex: 1; justify-content: center; }
    #bla-top { bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
}

/* --- journal ---------------------------------------------------------- */
.bla-posts { display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
@media (min-width: 640px) { .bla-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bla-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bla-post__media { overflow: hidden; border-radius: var(--r); background: var(--linen-2); margin-bottom: 1.125rem; }
.bla-post__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s var(--ease); }
.bla-post:hover .bla-post__media img { transform: scale(1.04); }
.bla-post__meta { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .625rem; }
.bla-post__title { font-size: 1.4375rem; font-weight: 600; line-height: 1.18; margin-bottom: .625rem; }
.bla-post:hover .bla-post__title { color: var(--jade); }
.bla-post__excerpt { font-size: .9375rem; line-height: 1.6; color: var(--text-soft); margin-bottom: .875rem; }

.bla-pagination { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.bla-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; height: 40px;
    padding: 0 .75rem;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-soft);
}
.bla-pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.bla-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* --- single post / editor content ------------------------------------- */
.bla-entry { max-width: var(--measure); margin-inline: auto; }
.bla-entry h2, .bla-entry h3, .bla-entry h4 { margin: 2.25em 0 .6em; }
.bla-entry h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); }
.bla-entry h3 { font-size: clamp(1.3125rem, 2.2vw, 1.625rem); }
.bla-entry p, .bla-entry li { color: var(--text-soft); }
.bla-entry > ul, .bla-entry > ol { margin: 0 0 1.25em; padding-left: 1.375rem; }
.bla-entry > ul li { list-style: none; position: relative; margin-bottom: .5em; }
.bla-entry > ul li::before { content: ''; position: absolute; left: -1.125rem; top: .72em; width: 5px; height: 5px; background: var(--jade); border-radius: 50%; }
.bla-entry > ol { list-style: decimal; }
.bla-entry > ol li { list-style: decimal; margin-bottom: .5em; }
.bla-entry a:not(.bla-btn):not(.bla-link) { color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
.bla-entry blockquote {
    margin: 2em 0;
    padding: .25rem 0 .25rem 1.5rem;
    border-left: 2px solid var(--jade);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--ink);
}
.bla-entry img { border-radius: var(--r); margin-block: 1.75em; }
.bla-entry figure { margin: 1.75em 0; }
.bla-entry figcaption { margin-top: .625rem; font-size: .8125rem; color: var(--text-muted); text-align: center; }
.bla-entry table { width: 100%; border-collapse: collapse; margin: 1.75em 0; font-size: .9375rem; }
.bla-entry th, .bla-entry td { padding: .75rem .875rem; border-bottom: 1px solid var(--rule-soft); text-align: left; }
.bla-entry th { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom-color: var(--rule); }

/* --- empty state / search -------------------------------------------- */
.bla-empty {
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px dashed var(--rule);
    border-radius: var(--r);
    text-align: center;
    color: var(--text-soft);
    max-width: 56ch;
    margin-inline: auto;
}
.bla-searchform { display: flex; gap: .5rem; max-width: 30rem; }
.bla-searchform input[type="search"] {
    flex: 1;
    padding: .8125rem .9375rem;
    background: var(--white);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-size: .9375rem;
    color: var(--text);
}
.bla-searchform input[type="search"]:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(45, 106, 91, .13); }

/* --- 404 --------------------------------------------------------------- */
.bla-404 { text-align: center; max-width: 46rem; margin-inline: auto; }
.bla-404__code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 400;
    line-height: .85;
    color: var(--jade);
    opacity: .22;
}

/* --- scroll reveal ---------------------------------------------------- */
.bla-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease), transform .55s var(--ease);
    will-change: opacity, transform;
}
.bla-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .bla-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Without JS nothing may stay invisible. */
.no-js .bla-reveal { opacity: 1; transform: none; }

/* --- print ------------------------------------------------------------ */
@media print {
    .bla-utility, #bla-header, .bla-dock, #bla-top, .bla-footer__group, .bla-cta { display: none !important; }
    body { background: #fff; color: #000; }
    .bla-hero { background: #fff; color: #000; }
    .bla-hero__media, .bla-hero__scrim { display: none; }
    .bla-hero__title, .bla-hero__lede { color: #000; }
}