@charset "UTF-8";
/* =========================================================================
   D`PENARIK BALI VILLA — PREMIUM BALINESE DESIGN SYSTEM
   File: assets/css/dpbv-ds.css        Loaded site-wide after style.css
   -------------------------------------------------------------------------
   Design language
     Ink & jade    deep jungle / palm shade — primary structure
     Brass         temple gold leaf (prada) — decorative accent only
     Terracotta    sunset clay — secondary CTA / warmth
     Sand & shell  warm limestone base — page ground
     Motifs        candi bentar arch, frangipani, woven alang-alang texture,
                   carved-relief corner brackets, gold hairline with jewel
   Rules
     - Decorative gold NEVER carries small body text (contrast).
     - All motion behind prefers-reduced-motion.
     - Checkout / cart / booking-form internals are deliberately excluded;
       those are governed by existing Customizer CSS and must not shift.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------- */
:root {
    /* --- core palette --- */
    --dpbv-ink:          #16211c;   /* deep jungle near-black       */
    --dpbv-ink-soft:     #26332c;
    --dpbv-jade:         #1f4d3d;   /* palm shade — primary brand   */
    --dpbv-jade-mid:     #2c6a52;
    --dpbv-jade-lt:      #3d8567;
    --dpbv-jade-wash:    #eef4f0;

    --dpbv-brass:        #c9a227;   /* temple gold — decoration     */
    --dpbv-brass-lt:     #e6cd7c;
    /* Gold used for TEXT. Measured against every light ground in the system:
       shell 6.65:1, sand 5.76:1, wash 6.37:1, white 7.10:1, villa-card 5.26:1
       — all clear of the 4.5:1 AA threshold. The previous #8a6a1f fell to
       4.09:1 on sand and 3.73:1 on the carousel card. */
    --dpbv-brass-deep:   #6f5417;

    --dpbv-terracotta:   #c1653f;   /* sunset clay                  */
    --dpbv-terracotta-dp:#9c4b2a;

    --dpbv-ocean:        #1f6b7a;   /* lagoon                       */

    --dpbv-sand:         #f2e6d2;   /* warm limestone               */
    --dpbv-sand-dp:      #e3d0b4;
    --dpbv-shell:        #fbf7f0;   /* page ground                  */
    --dpbv-white:        #ffffff;

    --dpbv-muted:        #5d6b61;   /* 5.2:1 on shell — body meta   */
    --dpbv-line:         rgba(31, 77, 61, 0.14);
    --dpbv-line-gold:    rgba(201, 162, 39, 0.42);

    /* --- typography --- */
    --dpbv-font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --dpbv-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* fluid type — clamp(min, preferred, max) */
    --dpbv-t-eyebrow:  clamp(0.68rem, 0.62rem + 0.25vw, 0.8rem);
    --dpbv-t-body:     clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
    --dpbv-t-lead:     clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
    --dpbv-t-h4:       clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
    --dpbv-t-h3:       clamp(1.32rem, 1.14rem + 0.8vw, 1.85rem);
    --dpbv-t-h2:       clamp(1.72rem, 1.36rem + 1.6vw, 2.85rem);
    --dpbv-t-h1:       clamp(2.1rem, 1.5rem + 2.9vw, 4.15rem);

    /* --- spacing scale (8pt-ish, fluid at the top end) --- */
    --dpbv-s1: 0.375rem;
    --dpbv-s2: 0.625rem;
    --dpbv-s3: 1rem;
    --dpbv-s4: 1.5rem;
    --dpbv-s5: 2.25rem;
    --dpbv-s6: 3.25rem;
    --dpbv-s7: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
    --dpbv-s8: clamp(5rem, 3.2rem + 7vw, 9rem);

    /* --- shape --- */
    --dpbv-r-sm:  6px;
    --dpbv-r-md:  12px;
    --dpbv-r-lg:  20px;
    --dpbv-r-xl:  30px;
    --dpbv-r-arch: 50% 50% var(--dpbv-r-md) var(--dpbv-r-md) / 32% 32% var(--dpbv-r-md) var(--dpbv-r-md);

    /* --- elevation: warm, low-spread, never grey --- */
    --dpbv-e1: 0 1px 2px rgba(22, 33, 28, .05), 0 2px 8px rgba(22, 33, 28, .05);
    --dpbv-e2: 0 2px 4px rgba(22, 33, 28, .05), 0 8px 24px rgba(22, 33, 28, .08);
    --dpbv-e3: 0 4px 10px rgba(22, 33, 28, .07), 0 18px 48px rgba(22, 33, 28, .12);
    --dpbv-e-gold: 0 6px 22px rgba(138, 106, 31, .22);

    /* --- motion --- */
    --dpbv-ease: cubic-bezier(.22, .61, .36, 1);
    --dpbv-ease-out: cubic-bezier(.16, 1, .3, 1);
    --dpbv-dur: .42s;

    /* --- layout --- */
    --dpbv-max: 1200px;
    --dpbv-max-narrow: 780px;
    --dpbv-gutter: clamp(1.1rem, .6rem + 2.4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   2. MOTIF PRIMITIVES  (pure CSS / inline SVG — zero extra requests)
   ---------------------------------------------------------------------- */

/* woven alang-alang thatch — barely-there texture for section grounds */
.dpbv-weave {
    background-image:
        repeating-linear-gradient(45deg,  rgba(138,106,31,.030) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(-45deg, rgba(31,77,61,.026)  0 2px, transparent 2px 6px);
}

/* poleng — sacred checker, used at very low contrast as a band */
.dpbv-poleng {
    background-image:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(22,33,28,.045) 0deg 90deg, transparent 90deg 180deg);
    background-size: 22px 22px;
}

/* gold hairline with a centred jewel — the house divider */
.dpbv-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dpbv-s3);
    margin: var(--dpbv-s5) auto;
    max-width: 340px;
}
.dpbv-rule::before,
.dpbv-rule::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dpbv-line-gold));
}
.dpbv-rule::after { background: linear-gradient(270deg, transparent, var(--dpbv-line-gold)); }
.dpbv-rule__jewel {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    rotate: 45deg;
    background: var(--dpbv-brass);
    box-shadow: 0 0 0 4px rgba(201, 162, 39, .14);
}

/* frangipani (jepun) — Bali's flower, as a scalable mask-free SVG background */
.dpbv-jepun {
    --dpbv-jepun-c: var(--dpbv-brass);
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    background: var(--dpbv-jepun-c);
    -webkit-mask: var(--dpbv-jepun-svg) center/contain no-repeat;
            mask: var(--dpbv-jepun-svg) center/contain no-repeat;
}
:root {
    --dpbv-jepun-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg%3E%3Cpath d='M32 32c0-9 2-17 6-22 4 4 6 10 5 16-1 5-5 8-11 6z'/%3E%3Cpath d='M32 32c8-4 16-5 22-3-2 5-7 9-13 10-5 1-9-2-9-7z' /%3E%3Cpath d='M32 32c6 6 10 13 11 19-5 1-11-2-14-7-3-4-2-9 3-12z'/%3E%3Cpath d='M32 32c-2 8-6 15-11 19-3-4-3-11 0-16 3-4 8-5 11-3z'/%3E%3Cpath d='M32 32c-8-2-15-6-19-11 4-3 11-4 16-1 4 2 5 8 3 12z'/%3E%3Ccircle cx='32' cy='32' r='4.2' fill='%23000' opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
}

/* candi bentar — mirrored stepped temple-gate silhouette as a section cap */
.dpbv-gate {
    position: relative;
}
.dpbv-gate::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 14px;
    background:
        linear-gradient(90deg, var(--dpbv-brass) 0 0) 0 0 / 100% 1px no-repeat,
        repeating-linear-gradient(90deg,
            transparent 0 12px,
            rgba(201,162,39,.30) 12px 13px,
            transparent 13px 26px);
    opacity: .8;
    pointer-events: none;
}

/* carved-relief corner brackets — luxury framing for cards & media */
.dpbv-bracket { position: relative; }
.dpbv-bracket::before,
.dpbv-bracket::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--dpbv-line-gold);
    pointer-events: none;
    transition: inset var(--dpbv-dur) var(--dpbv-ease-out),
                border-color var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-bracket::before {
    inset-block-start: 10px;
    inset-inline-start: 10px;
    border-width: 1.5px 0 0 1.5px;
    border-start-start-radius: var(--dpbv-r-sm);
}
.dpbv-bracket::after {
    inset-block-end: 10px;
    inset-inline-end: 10px;
    border-width: 0 1.5px 1.5px 0;
    border-end-end-radius: var(--dpbv-r-sm);
}
.dpbv-bracket:hover::before,
.dpbv-bracket:hover::after { border-color: var(--dpbv-brass); }

/* arch-topped media frame — the candi silhouette applied to imagery */
.dpbv-arch {
    border-radius: var(--dpbv-r-arch);
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------------- */
body {
    font-family: var(--dpbv-font-body);
    font-size: var(--dpbv-t-body);
    line-height: 1.72;
    color: var(--dpbv-ink-soft);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Base heading treatment.
   :where() keeps these at .dpbv-page specificity only, so ANY single
   component class (.dpbv-mbanner__title, .dpbv-hero__title, …) can override
   colour and size without an escalating specificity war. */
.dpbv-page :where(h1, h2, h3, h4) {
    font-family: var(--dpbv-font-display);
    color: var(--dpbv-ink);
    line-height: 1.12;
    letter-spacing: -.012em;
    text-wrap: balance;
    margin: 0 0 var(--dpbv-s3);
    font-weight: 600;
}
.dpbv-page :where(h1) { font-size: var(--dpbv-t-h1); }
.dpbv-page :where(h2) { font-size: var(--dpbv-t-h2); }
.dpbv-page :where(h3) { font-size: var(--dpbv-t-h3); }
.dpbv-page :where(h4) { font-size: var(--dpbv-t-h4); letter-spacing: 0; }

.dpbv-page :where(p) { margin: 0 0 var(--dpbv-s3); text-wrap: pretty; }
.dpbv-page :where(p:last-child) { margin-bottom: 0; }

/* eyebrow — the small-caps gold label that sits above every section title */
.dpbv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    margin: 0 0 var(--dpbv-s2);
    font-family: var(--dpbv-font-body);
    font-size: var(--dpbv-t-eyebrow);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dpbv-brass-deep);
}
.dpbv-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--dpbv-brass);
}
.dpbv-eyebrow--center { justify-content: center; }
.dpbv-eyebrow--center::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--dpbv-brass);
}

/* lead paragraph */
.dpbv-lead {
    font-size: var(--dpbv-t-lead);
    line-height: 1.62;
    color: var(--dpbv-muted);
    max-width: 62ch;
}
.dpbv-lead--center { margin-inline: auto; text-align: center; }

/* drop-cap for editorial openings */
.dpbv-dropcap::first-letter {
    float: inline-start;
    font-family: var(--dpbv-font-display);
    font-size: 3.3em;
    line-height: .82;
    font-weight: 600;
    margin: .06em .12em 0 0;
    color: var(--dpbv-jade);
}

/* -------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ---------------------------------------------------------------------- */
.dpbv-page { background: var(--dpbv-shell); }

.dpbv-shell {
    width: 100%;
    max-width: var(--dpbv-max);
    margin-inline: auto;
    padding-inline: var(--dpbv-gutter);
}
.dpbv-shell--narrow { max-width: var(--dpbv-max-narrow); }

.dpbv-section { padding-block: var(--dpbv-s7); position: relative; }
.dpbv-section--tight { padding-block: var(--dpbv-s6); }
.dpbv-section--sand  { background: var(--dpbv-sand); }
.dpbv-section--wash  { background: var(--dpbv-jade-wash); }
.dpbv-section--ink   { background: var(--dpbv-ink); color: rgba(251,247,240,.9); }
.dpbv-section--ink h2,
.dpbv-section--ink h3 { color: var(--dpbv-shell); }
.dpbv-section--ink .dpbv-lead { color: rgba(251,247,240,.74); }
.dpbv-section--ink .dpbv-eyebrow { color: var(--dpbv-brass-lt); }

.dpbv-head { margin-bottom: var(--dpbv-s5); }
.dpbv-head--center { text-align: center; }
.dpbv-head--center .dpbv-lead { margin-inline: auto; }

/* responsive auto-grid */
.dpbv-grid {
    display: grid;
    gap: var(--dpbv-s4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.dpbv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.dpbv-grid--wide { gap: var(--dpbv-s5); }

/* editorial split — media beside prose, collapses cleanly */
.dpbv-split {
    display: grid;
    gap: var(--dpbv-s5);
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
    .dpbv-split { grid-template-columns: 1fr 1fr; gap: var(--dpbv-s6); }
    .dpbv-split--media-end > .dpbv-split__media { order: 2; }
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   Scoped away from checkout/cart/WhatsApp/lightbox so payment UI is untouched.
   ---------------------------------------------------------------------- */
.dpbv-btn {
    --dpbv-btn-bg: var(--dpbv-jade);
    --dpbv-btn-fg: var(--dpbv-shell);
    --dpbv-btn-bg-h: var(--dpbv-jade-mid);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    min-height: 48px;               /* accessible tap target */
    padding: .85em 1.9em;
    border: 0;
    border-radius: 999px;
    background: var(--dpbv-btn-bg);
    color: var(--dpbv-btn-fg);
    font-family: var(--dpbv-font-body);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: background-color var(--dpbv-dur) var(--dpbv-ease),
                transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease);
    box-shadow: var(--dpbv-e1);
}
.dpbv-btn:hover,
.dpbv-btn:focus-visible {
    background: var(--dpbv-btn-bg-h);
    color: var(--dpbv-btn-fg);
    transform: translateY(-2px);
    box-shadow: var(--dpbv-e2);
}
.dpbv-btn:active { transform: translateY(0); }

/* gold sheen sweep — one short pass, opacity-only compositing */
.dpbv-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
    translate: -120% 0;
    transition: translate .72s var(--dpbv-ease-out);
}
.dpbv-btn:hover::after { translate: 120% 0; }

.dpbv-btn--gold {
    --dpbv-btn-bg: var(--dpbv-brass);
    --dpbv-btn-fg: var(--dpbv-ink);       /* 8:1 — passes AA */
    --dpbv-btn-bg-h: var(--dpbv-brass-lt);
    box-shadow: var(--dpbv-e-gold);
}
.dpbv-btn--clay {
    --dpbv-btn-bg: var(--dpbv-terracotta);
    --dpbv-btn-bg-h: var(--dpbv-terracotta-dp);
}
.dpbv-btn--ghost {
    --dpbv-btn-bg: transparent;
    --dpbv-btn-fg: var(--dpbv-jade);
    --dpbv-btn-bg-h: var(--dpbv-jade-wash);
    box-shadow: none;
    border: 1.5px solid var(--dpbv-line-gold);
}
.dpbv-btn--ghost:hover { color: var(--dpbv-jade); border-color: var(--dpbv-brass); }
.dpbv-btn--on-dark {
    --dpbv-btn-bg: rgba(251,247,240,.10);
    --dpbv-btn-fg: var(--dpbv-shell);
    --dpbv-btn-bg-h: rgba(251,247,240,.20);
    border: 1.5px solid rgba(230,205,124,.55);
    box-shadow: none;
    backdrop-filter: blur(6px);
}
.dpbv-btn--lg { min-height: 56px; padding: 1em 2.4em; font-size: 1.02rem; }
.dpbv-btn--block { display: flex; width: 100%; }

.dpbv-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dpbv-s3);
    align-items: center;
}
.dpbv-btn-row--center { justify-content: center; }

/* --- LINK-COLOUR RECLAIM -------------------------------------------------
   style.css line ~87 sets
       .entry-content a:not(.button):not(.wp-block-button__link) { color: … }
   at specificity (0,3,1), which out-ranks every component class here and was
   painting button labels legacy teal — only 1.67:1 against jade, well below
   WCAG AA. Colour is reclaimed with !important, which is the only mechanism
   that reliably wins without escalating selector weight everywhere.
   ---------------------------------------------------------------------- */
a.dpbv-btn,
.entry-content a.dpbv-btn,
.dpbv-page a.dpbv-btn {
    color: var(--dpbv-btn-fg) !important;
}
a.dpbv-btn:hover,
a.dpbv-btn:focus-visible,
.entry-content a.dpbv-btn:hover,
.dpbv-page a.dpbv-btn:hover {
    color: var(--dpbv-btn-fg) !important;
}

/* Prose + component links keep the house jade with a gold underline.
   :not(.dpbv-btn) is essential — these rules load after the button rule at
   equal specificity, so without the exclusion a button placed inside prose
   inherits jade text on its jade fill and the label disappears. */
.dpbv-page .dpbv-prose a:not(.dpbv-btn),
.entry-content .dpbv-prose a:not(.dpbv-btn),
.dpbv-page .dpbv-contactlist a:not(.dpbv-btn),
.entry-content .dpbv-contactlist a:not(.dpbv-btn),
.dpbv-page .dpbv-toc a:not(.dpbv-btn),
.entry-content .dpbv-toc a:not(.dpbv-btn) {
    color: var(--dpbv-jade) !important;
}
.dpbv-page .dpbv-prose a:not(.dpbv-btn):hover,
.entry-content .dpbv-prose a:not(.dpbv-btn):hover,
.dpbv-page .dpbv-contactlist a:not(.dpbv-btn):hover,
.entry-content .dpbv-contactlist a:not(.dpbv-btn):hover,
.dpbv-page .dpbv-toc a:not(.dpbv-btn):hover,
.entry-content .dpbv-toc a:not(.dpbv-btn):hover {
    color: var(--dpbv-jade-mid) !important;
}
/* links sitting on the dark CTA / banner grounds */
.dpbv-cta a:not(.dpbv-btn),
.dpbv-mbanner a:not(.dpbv-btn),
.dpbv-section--ink a:not(.dpbv-btn) {
    color: var(--dpbv-brass-lt) !important;
}

/* -------------------------------------------------------------------------
   6. CARDS
   ---------------------------------------------------------------------- */
.dpbv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e1);
    overflow: hidden;
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease),
                border-color var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--dpbv-e3);
    border-color: var(--dpbv-line-gold);
}
.dpbv-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dpbv-sand);
}
.dpbv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: scale .9s var(--dpbv-ease-out);
}
.dpbv-card:hover .dpbv-card__media img { scale: 1.05; }
.dpbv-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s2);
    padding: var(--dpbv-s4);
    flex: 1 1 auto;
}
.dpbv-card__title {
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h4);
    font-weight: 600;
    color: var(--dpbv-ink);
    margin: 0;
}
.dpbv-card__text { color: var(--dpbv-muted); font-size: .96rem; margin: 0; }
.dpbv-card__foot { margin-top: auto; padding-top: var(--dpbv-s2); }

/* numbered / icon medallion */
.dpbv-medallion {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line-gold);
    color: var(--dpbv-jade);
    font-family: var(--dpbv-font-display);
    font-size: 1.2rem;
    font-weight: 600;
}
.dpbv-medallion--gold { background: rgba(201,162,39,.12); color: var(--dpbv-brass-deep); }

/* soft feature tile — no image, motif ground */
.dpbv-tile {
    padding: var(--dpbv-s4);
    border-radius: var(--dpbv-r-lg);
    background: var(--dpbv-white);
    border: 1px solid var(--dpbv-line);
    display: flex;
    flex-direction: column;
    gap: var(--dpbv-s2);
    transition: transform var(--dpbv-dur) var(--dpbv-ease-out),
                box-shadow var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-tile:hover { transform: translateY(-4px); box-shadow: var(--dpbv-e2); }

/* pill / chip */
.dpbv-chip {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .4em .9em;
    border-radius: 999px;
    background: var(--dpbv-jade-wash);
    border: 1px solid var(--dpbv-line);
    color: var(--dpbv-jade);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.dpbv-chip--gold { background: rgba(201,162,39,.12); border-color: var(--dpbv-line-gold); color: var(--dpbv-brass-deep); }
.dpbv-chip-row { display: flex; flex-wrap: wrap; gap: var(--dpbv-s2); }

/* -------------------------------------------------------------------------
   7. BANNERS / HERO
   ---------------------------------------------------------------------- */
.dpbv-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(24rem, 20rem + 26vh, 40rem);
    padding-block: var(--dpbv-s8) var(--dpbv-s7);
    overflow: hidden;
    background: var(--dpbv-ink);
    isolation: isolate;
}
.dpbv-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* slow ken-burns, single element, GPU-composited */
    animation: dpbv-kenburns 26s var(--dpbv-ease) infinite alternate;
}
.dpbv-hero::after {          /* legibility scrim + warm grade */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(11,18,15,.90) 0%, rgba(11,18,15,.55) 38%, rgba(11,18,15,.18) 70%, rgba(11,18,15,.32) 100%),
        radial-gradient(120% 80% at 50% 100%, rgba(31,77,61,.34), transparent 60%);
}
.dpbv-hero__inner { position: relative; width: 100%; }
.dpbv-hero__title {
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h1);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: var(--dpbv-shell);
    margin: 0 0 var(--dpbv-s3);
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0,0,0,.34);
}
.dpbv-hero__sub {
    font-size: var(--dpbv-t-lead);
    color: rgba(251,247,240,.86);
    max-width: 54ch;
    margin: 0 0 var(--dpbv-s4);
}
.dpbv-hero .dpbv-eyebrow { color: var(--dpbv-brass-lt); }
.dpbv-hero .dpbv-eyebrow::before,
.dpbv-hero .dpbv-eyebrow::after { background: var(--dpbv-brass-lt); }

@keyframes dpbv-kenburns {
    from { scale: 1;    translate: 0 0; }
    to   { scale: 1.08; translate: 0 -1.5%; }
}

/* compact page banner for inner pages */
.dpbv-banner {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    min-height: clamp(15rem, 12rem + 16vh, 24rem);
    padding-block: var(--dpbv-s7);
    background: var(--dpbv-jade);
    color: var(--dpbv-shell);
    overflow: hidden;
    isolation: isolate;
}
.dpbv-banner__bg {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
}
.dpbv-banner::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(13,26,20,.62), rgba(13,26,20,.78));
}
.dpbv-banner__title {
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h1);
    font-weight: 600;
    color: var(--dpbv-shell);
    margin: 0 0 var(--dpbv-s2);
    text-wrap: balance;
}
.dpbv-banner__sub { color: rgba(251,247,240,.82); max-width: 58ch; margin: 0 auto; }
.dpbv-banner .dpbv-eyebrow { color: var(--dpbv-brass-lt); }
.dpbv-banner .dpbv-eyebrow::before,
.dpbv-banner .dpbv-eyebrow::after { background: var(--dpbv-brass-lt); }

/* CTA strip */
.dpbv-cta {
    position: relative;
    padding-block: var(--dpbv-s7);
    background:
        linear-gradient(135deg, var(--dpbv-jade) 0%, var(--dpbv-ink) 62%, #10231c 100%);
    color: var(--dpbv-shell);
    text-align: center;
    overflow: hidden;
}
.dpbv-cta__title {
    font-family: var(--dpbv-font-display);
    font-size: var(--dpbv-t-h2);
    font-weight: 600;
    color: var(--dpbv-shell);
    margin: 0 0 var(--dpbv-s3);
    text-wrap: balance;
}
.dpbv-cta__text { color: rgba(251,247,240,.78); max-width: 56ch; margin: 0 auto var(--dpbv-s5); }
.dpbv-cta .dpbv-eyebrow { color: var(--dpbv-brass-lt); }
.dpbv-cta .dpbv-eyebrow::before,
.dpbv-cta .dpbv-eyebrow::after { background: var(--dpbv-brass-lt); }

/* -------------------------------------------------------------------------
   8. MEDIA
   ---------------------------------------------------------------------- */
.dpbv-figure { margin: 0; position: relative; }
.dpbv-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dpbv-r-lg);
    box-shadow: var(--dpbv-e2);
}
.dpbv-figure--arch img { border-radius: var(--dpbv-r-arch); }
.dpbv-figure__caption {
    margin-top: var(--dpbv-s2);
    font-size: .875rem;
    color: var(--dpbv-muted);
    text-align: center;
}

/* video facade — poster + play button; the heavy file loads only on click */
.dpbv-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--dpbv-r-lg);
    overflow: hidden;
    background: var(--dpbv-ink);
    box-shadow: var(--dpbv-e2);
}
.dpbv-video > img,
.dpbv-video > video,
.dpbv-video > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    display: block;
}
.dpbv-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: linear-gradient(180deg, rgba(13,26,20,.18), rgba(13,26,20,.52));
    cursor: pointer;
    transition: background-color var(--dpbv-dur) var(--dpbv-ease);
}
.dpbv-video__play:hover { background: linear-gradient(180deg, rgba(13,26,20,.10), rgba(13,26,20,.42)); }
.dpbv-video__play::before {
    content: "";
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(251,247,240,.92);
    box-shadow: 0 10px 34px rgba(0,0,0,.34);
    transition: scale var(--dpbv-dur) var(--dpbv-ease-out);
}
.dpbv-video__play::after {
    content: "";
    position: absolute;
    width: 0; height: 0;
    border-style: solid;
    border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent var(--dpbv-jade);
    translate: 3px 0;
}
.dpbv-video__play:hover::before { scale: 1.08; }
.dpbv-video__label {
    position: absolute;
    inset-block-end: var(--dpbv-s3);
    inset-inline: 0;
    text-align: center;
    color: rgba(251,247,240,.9);
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   9. FORMS  (excludes checkout / cart — governed elsewhere)
   ---------------------------------------------------------------------- */
body:not(.woocommerce-checkout):not(.woocommerce-cart) .dpbv-page :is(
    input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
    input[type="password"], input[type="search"], input[type="number"],
    input[type="date"], select, textarea
) {
    width: 100%;
    min-height: 48px;
    padding: .8em 1em;
    background: var(--dpbv-white);
    border: 1.5px solid var(--dpbv-line);
    border-radius: var(--dpbv-r-md);
    font-family: var(--dpbv-font-body);
    font-size: 1rem;
    color: var(--dpbv-ink);
    transition: border-color .22s var(--dpbv-ease), box-shadow .22s var(--dpbv-ease);
    box-shadow: inset 0 1px 2px rgba(22,33,28,.03);
}
body:not(.woocommerce-checkout):not(.woocommerce-cart) .dpbv-page :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--dpbv-jade-lt);
    box-shadow: 0 0 0 4px rgba(61,133,103,.16);
}
.dpbv-page textarea { min-height: 8rem; resize: vertical; }
.dpbv-field { display: flex; flex-direction: column; gap: var(--dpbv-s1); margin-bottom: var(--dpbv-s3); }
.dpbv-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--dpbv-ink);
    letter-spacing: .01em;
}
.dpbv-hint { font-size: .82rem; color: var(--dpbv-muted); }

/* -------------------------------------------------------------------------
   10. ACCESSIBILITY
   ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--dpbv-brass);
    outline-offset: 3px;
    border-radius: var(--dpbv-r-sm);
}
.dpbv-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* keyboard skip-link made visible on focus */
.skip-link:focus {
    position: fixed !important;
    top: 12px; left: 12px;
    z-index: 100000;
    width: auto; height: auto;
    clip: auto; clip-path: none;
    padding: .8em 1.4em;
    background: var(--dpbv-jade);
    color: var(--dpbv-shell);
    border-radius: var(--dpbv-r-md);
    box-shadow: var(--dpbv-e3);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   11. SCROLL-REVEAL  (driven by IntersectionObserver in dpbv-ui.js)
   Elements are only hidden once JS has confirmed it will run, so a JS
   failure can never leave content invisible.
   ---------------------------------------------------------------------- */
html.dpbv-js [data-dpbv-reveal] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .68s var(--dpbv-ease-out), translate .68s var(--dpbv-ease-out);
    transition-delay: var(--dpbv-reveal-delay, 0ms);
    will-change: opacity, translate;
}
html.dpbv-js [data-dpbv-reveal].dpbv-in {
    opacity: 1;
    translate: 0 0;
    will-change: auto;
}

/* -------------------------------------------------------------------------
   12. REDUCED MOTION — strip everything non-essential
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .dpbv-hero__bg { animation: none !important; scale: 1 !important; }
    html.dpbv-js [data-dpbv-reveal] { opacity: 1 !important; translate: none !important; }
    .dpbv-btn::after { display: none; }
}

/* -------------------------------------------------------------------------
   13. PRINT — policy pages are the ones people actually print
   ---------------------------------------------------------------------- */
@media print {
    .dpbv-hero, .dpbv-banner, .dpbv-cta,
    .site-header, .site-footer, #back-to-top { display: none !important; }
    .dpbv-page { background: #fff; }
    .dpbv-section { padding-block: 1rem; }
    .dpbv-card, .dpbv-tile { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}