/* ═══════════════════════════════════════════════════════════════════
   BDK HEADER — Unified Stylesheet
   Namespaces:  .bdk-d-*  (desktop, ≥ 1024 px)
                .bdk-m-*  (mobile,  < 1024 px)
   Visibility is controlled by media queries.
   No shared IDs, no overlapping selectors.
═══════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (shared tokens) ──────────────────────── */
:root {
  --bdk-gold:        #b8963e;
  --bdk-gold-light:  #d4aa55;
  --bdk-ink:         #1c1a17;
  --bdk-ink-mid:     #3a3530;
  --bdk-ink-light:   #6b6259;
  --bdk-cream:       #fdf9f2;
  --bdk-cream-mid:   #f3ede0;
  --bdk-white:       #ffffff;
  --bdk-dark:        #141210;
  --bdk-nav-h-d:     52px;   /* desktop nav-main row height   */
  --bdk-nav-h-m:     84px;   /* mobile  header bar height     */
  --bdk-nav-id-h:    170px;  /* desktop identity (crest) bar height */

  /* Full height of the expanded desktop header: identity bar + gold divider
     + main nav row + bottom rule. Derived from the rows themselves so it can
     never drift out of sync with them. */
  --bdk-header-h-d:  calc(var(--bdk-nav-id-h) + 1px + var(--bdk-nav-h-d) + 1px);

  /* How much of the viewport the header takes at the top of a page: on mobile
     the bar is fixed over the page, on desktop the header sits in normal flow
     above it. Full-height sections (the homepage hero) size themselves against
     this so they fill exactly the space that is left, instead of running past
     the fold and never being fully visible. */
  --bdk-header-offset: var(--bdk-nav-h-m);
}

@media (min-width: 1280px) {
  :root { --bdk-header-offset: var(--bdk-header-h-d); }
}


/* ════════════════════════════════════════════════════════════════════
   §1  VISIBILITY GUARDS
   Desktop block is hidden on mobile; mobile block hidden on desktop.
════════════════════════════════════════════════════════════════════ */

/* Desktop elements: hidden on mobile */
.bdk-d-cur,
.bdk-d-cur-ring,
.bdk-d-nav {
  display: none;
}

/* Mobile elements: hidden on desktop */
.bdk-m-nav,
.bdk-m-drawer {
  display: none;
}

/* Activate desktop layout */
.bdk-desktop .bdk-d-cur       { display: block; }
.bdk-desktop .bdk-d-cur-ring  { display: block; }
.bdk-desktop .bdk-d-nav       { display: block;  }

/* Activate mobile layout */
.bdk-mobile .bdk-m-nav     { display: flex; }
.bdk-mobile .bdk-m-drawer  { display: flex; }

/* Media-query fallback (no-JS / SSR safety) — kept in sync with
   header.js's DESKTOP_BP (1280px; see the comment there for why). */
@media (min-width: 1280px) {
  .bdk-d-nav     { display: block; }
  .bdk-m-nav,
  .bdk-m-drawer  { display: none !important; }

  /* The desktop header sits in normal flow, so no space needs reserving
     until it pins itself to the top and leaves that flow — at which point
     the spacer takes over exactly the height it was occupying and nothing
     on the page moves. See .bdk-d-nav.bdk-d-scrolled. */
  .d-head-spacing        { height: 0; }
  .d-head-spacing.active {
    height: var(--bdk-header-h-d);
    width: 100%;
    background: var(--bdk-white);
  }
}
@media (max-width: 1279px) {
  .bdk-d-cur,
  .bdk-d-cur-ring,
  .bdk-d-nav     { display: none !important; }
  .bdk-m-nav     { display: flex; }
  .bdk-m-drawer  { display: flex; }
}


/* ════════════════════════════════════════════════════════════════════
   §2  DESKTOP — Custom Cursor
════════════════════════════════════════════════════════════════════ */

.bdk-d-cur {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--bdk-gold);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  transition: width .2s, height .2s, opacity .2s;
  mix-blend-mode: multiply;
}

.bdk-d-cur-ring {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(184, 150, 62, .45);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9998;
  transition: width .4s ease, height .4s ease;
}

.bdk-desktop * { cursor: none; }


/* ════════════════════════════════════════════════════════════════════
   §3  DESKTOP — Navigation Shell
════════════════════════════════════════════════════════════════════ */

/* At rest the header is part of the page flow: whatever follows it (the
   homepage hero, a collection page header) starts directly underneath it and
   is never hidden behind it. `relative` only so z-index applies. */
.bdk-d-nav {
  position: relative;
  z-index: 500;
  background: var(--bdk-white);
  transition: box-shadow .4s;
}

/* Pinned state — added by header.js once the header has scrolled fully out of
   view. It leaves the flow (the .d-head-spacing spacer holds its place, so the
   page does not shift) and drops back in as the compact nav row. */
.bdk-d-nav.bdk-d-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
  animation: bdk-d-nav-pin .32s cubic-bezier(.4, 0, .2, 1);
}

@keyframes bdk-d-nav-pin {
  from { top: calc(-1 * (var(--bdk-nav-h-d) + 2px)); }
  to   { top: 0; }
}


/* ── §3a  Identity Bar ─────────────────────────────────────────── */

.bdk-d-nav-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  height: var(--bdk-nav-id-h);
  position: relative;
  /* Height is NOT transitioned: while the header is in flow its height is page
     layout, so animating it would slide the whole page (and the hero with it)
     up and down by 170px. The identity bar only ever opens/closes in the frame
     the header enters or leaves the flow, off-screen, so there is nothing to
     animate. The visible scroll animation is the compact bar dropping in
     (@keyframes bdk-d-nav-pin) plus the inline logo / appointment fade. */
  transition: opacity .2s ease;
  overflow: hidden;
}

.bdk-d-nav.bdk-d-scrolled .bdk-d-nav-id {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.bdk-d-nav-id-side {
  display: flex;
  align-items: center;
}

/* Search button */
.bdk-d-search-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 0;
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--bdk-ink-light);
  text-transform: uppercase;
  transition: color .3s;
  cursor: none;
}
.bdk-d-search-btn:hover { color: var(--bdk-gold); }
.bdk-d-search-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* Brand centre */
.bdk-d-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.bdk-d-brand-link {
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}
.bdk-d-crest-img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.bdk-d-brand-link:hover .bdk-d-crest-img { transform: rotate(8deg) scale(1.03); }
.bdk-d-brand-name {
  font-family: "Cormorant SC", serif;
  font-size: 17px;
  letter-spacing: .18em;
  /* Letter-spacing is also added AFTER the last character, so the box is half
     a letter-space wider than the type it holds and the centred wordmark sits
     off the axis of the crest, the rule and the line below it. Trimming that
     trailing space off the box puts the type back on the same axis — keep it
     equal to the letter-spacing above. */
  margin-right: -.18em;
  /* Keeps the word gaps about twice the letter gaps so the three words still
     read as separate words at this tracking. */
  word-spacing: .06em;
  color: var(--bdk-ink);
  text-transform: uppercase;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.bdk-d-brand-rule {
  width: 52px;
  height: 1px;
  margin: 0 auto 8px;
  background: linear-gradient(to right, transparent, rgba(184, 150, 62, .55), transparent);
}
.bdk-d-brand-est {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13.5px;
  letter-spacing: .2em;
  color: var(--bdk-gold);
  display: block;
}

/* Appointment button */
.bdk-d-appt-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Cormorant SC", serif;
  font-size: 10.5px;
  letter-spacing: .26em;
  color: var(--bdk-ink-mid);
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(184, 150, 62, .35);
  padding: 11px 24px;
  transition: color .3s, border-color .3s;
  cursor: none;
}
.bdk-d-appt-btn:hover {
  color: var(--bdk-gold);
  border-color: rgba(184, 150, 62, .7);
}
.bdk-d-appt-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  opacity: .65;
}


/* ── §3b  Gold Divider ─────────────────────────────────────────── */

.bdk-d-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184, 150, 62, .28), transparent);
  transition: opacity .38s;
}
.bdk-d-nav.bdk-d-scrolled .bdk-d-divider { opacity: 0; }


/* ── §3c  Main Nav Row ─────────────────────────────────────────── */

.bdk-d-nav-main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--bdk-nav-h-d);
  position: relative;
  padding: 0 340px;
}

/* Inline logo (scroll state) */
.bdk-d-inline-logo {
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.bdk-d-nav.bdk-d-scrolled .bdk-d-inline-logo {
  opacity: 1;
  pointer-events: auto;
}
.bdk-d-crest-sm {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  transition: transform .5s ease;
}
.bdk-d-inline-logo:hover .bdk-d-crest-sm { transform: rotate(8deg); }
.bdk-d-inline-name {
  font-family: "Cormorant SC", serif;
  font-size: 11.5px;
  letter-spacing: .16em;
  margin-right: -.16em;   /* trim the trailing letter-space (see .bdk-d-brand-name) */
  word-spacing: .05em;
  color: var(--bdk-ink);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s;
}
.bdk-d-inline-logo:hover .bdk-d-inline-name { color: var(--bdk-gold); }

/* Inline appointment (scroll state) */
.bdk-d-inline-appt {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--bdk-gold);
  border: 1px solid rgba(184, 150, 62, .42);
  padding: 8px 20px;
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: background .35s, color .35s, opacity .4s;
  cursor: none;
}
.bdk-d-inline-appt:hover { background: var(--bdk-gold); color: var(--bdk-white); }
.bdk-d-nav.bdk-d-scrolled .bdk-d-inline-appt {
  opacity: 1;
  pointer-events: auto;
}

/* Nav items list */
.bdk-d-nav-items {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bdk-d-nav-item { position: relative; }

.bdk-d-nav-link {
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--bdk-ink-mid);
  text-decoration: none;
  text-transform: uppercase;
  padding: 0 24px;
  height: var(--bdk-nav-h-d);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  position: relative;
  transition: color .3s;
  cursor: none;
}
.bdk-d-nav-link:hover { color: var(--bdk-gold); }

.bdk-d-chevron {
  font-size: 7px;
  opacity: .55;
  display: inline-block;
  transition: transform .3s;
}
.bdk-d-nav-item:hover > .bdk-d-nav-link > .bdk-d-chevron { transform: rotate(180deg); }

.bdk-d-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  height: 1.5px;
  background: var(--bdk-gold);
  transform: scaleX(0);
  transition: transform .35s;
  transform-origin: center;
}
.bdk-d-nav-link:hover::after { transform: scaleX(1); }


/* ── §3d  Bottom Rule ──────────────────────────────────────────── */

.bdk-d-bottom-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184, 150, 62, .12), transparent);
}


/* ════════════════════════════════════════════════════════════════════
   §4  DESKTOP — Mega Menus
════════════════════════════════════════════════════════════════════ */

.bdk-d-mega {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: rgba(253, 251, 247, .99);
  border-top: 1.5px solid rgba(184, 150, 62, .22);
  box-shadow: 0 16px 60px rgba(28, 26, 23, .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease, transform .32s ease;
  z-index: 200;
}
.bdk-d-nav-item:hover > .bdk-d-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* House mega */
.bdk-d-mega--house {
  min-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bdk-d-mega-panel {
  overflow: hidden;
  cursor: none;
  text-decoration: none;
  display: block;
}
.bdk-d-mega-panel-img {
  background: var(--bdk-cream-mid);
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  transition: transform .4s ease;
}
.bdk-d-mega-panel:hover .bdk-d-mega-panel-img { transform: scale(1.05); }
.bdk-d-mega-panel-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: var(--bdk-ink);
  padding: 14px 22px;
  border-top: 1px solid rgba(184, 150, 62, .1);
  display: block;
  transition: color .3s, padding-left .3s;
}
.bdk-d-mega-panel:hover .bdk-d-mega-panel-label { color: var(--bdk-gold); padding-left: 28px; }
.bdk-d-mega-panel + .bdk-d-mega-panel { border-left: 1px solid rgba(184, 150, 62, .1); }

/* Fine / Exclusive mega */
.bdk-d-mega--fine,
.bdk-d-mega--excl {
  min-width: 560px;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.bdk-d-mega-col { padding: 32px 36px; }
.bdk-d-mega-col-head {
  font-family: "Cormorant SC", serif;
  font-size: 10px;
  letter-spacing: .48em;
  color: var(--bdk-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
  opacity: .88;
}
.bdk-d-mega-col a {
  display: block;
  font-family: "EB Garamond", serif;
  font-size: 17px;
  color: var(--bdk-ink-mid);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid rgba(184, 150, 62, .07);
  transition: color .25s, padding-left .25s;
  cursor: none;
}
.bdk-d-mega-col a:last-child { border-bottom: none; }
.bdk-d-mega-col a:hover { color: var(--bdk-gold); padding-left: 7px; }

/* Image panel inside mega */
.bdk-d-mega-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-left: 1px solid rgba(184, 150, 62, .1);
  height: 100%;
  width: 450px;
}
.bdk-d-mega-img-link {
  display: block;
  text-decoration: none;
  cursor: none;
  overflow: hidden;
  height: 100%;
}
.bdk-d-mega-img-card {
  background: var(--bdk-cream-mid);
  background-size: cover !important;
  background-position: center !important;
  transition: opacity .3s ease, transform .4s ease;
  height: 100%;
  width: 100%;
}
.bdk-d-mega-img-link:hover .bdk-d-mega-img-card {
  transform: scale(1.05);
}

/* Exclusive (dark theme) */
.bdk-d-mega--excl {
  background: var(--bdk-dark);
  border-top-color: rgba(184, 150, 62, .3);
}
.bdk-d-mega--excl .bdk-d-mega-col-head  { color: rgba(184, 150, 62, .8); }
.bdk-d-mega--excl .bdk-d-mega-col a     { color: rgba(240, 228, 195, .58); border-bottom-color: rgba(184, 150, 62, .1); }
.bdk-d-mega--excl .bdk-d-mega-col a:hover { color: var(--bdk-gold-light); }
.bdk-d-mega--excl .bdk-d-mega-imgs      { border-left-color: rgba(184, 150, 62, .15); }
.bdk-d-mega--excl .bdk-d-mega-img-card  { background: rgba(255, 255, 255, .05); }


/* ════════════════════════════════════════════════════════════════════
   §5  DESKTOP — Responsive adjustments

   The scrolled state packs a fixed-position inline logo+name (left) and
   a fixed-position appointment button (right) around a *centred* 5-item
   nav list. The nav list's natural width (~904px) plus the ~340px each
   side reserved for the logo/appt only clears on very large screens
   (measured: no overlap until ~1584px viewport width) — every ordinary
   laptop width (1280–1536px, which is most of them) had the centred list
   running straight through the logo on the left and/or the appointment
   button on the right. Shrinking the logo to icon-only, compacting the
   appointment button, and tightening nav-link spacing in this range
   brings the list down to something that actually fits, instead of
   just pushing the breakpoint up and handing most desktop users the
   mobile nav. Verified empirically (no overlap) at 1280/1366/1440px.
════════════════════════════════════════════════════════════════════ */

@media (max-width: 1600px) {
  .bdk-d-inline-name { display: none; }
  .bdk-d-nav-main { padding: 0 190px; }
  .bdk-d-nav-link { padding: 0 12px; }
  .bdk-d-inline-appt {
    right: 24px;
    padding: 7px 14px;
    font-size: 9px;
    letter-spacing: .15em;
  }
}


/* ════════════════════════════════════════════════════════════════════
   §6  MOBILE — Header Bar
════════════════════════════════════════════════════════════════════ */

.bdk-m-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--bdk-nav-h-m);
  background: #fff;
  /* backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); */
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(184, 150, 62, .14);
  transition: box-shadow .3s;
}
.bdk-m-nav.bdk-m-elevated { box-shadow: 0 2px 24px rgba(28, 26, 23, .09); }


/* ── §6a  Hamburger ────────────────────────────────────────────── */

.bdk-m-hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.bdk-m-ham-line {
  width: 22px;
  height: 1px;
  background: var(--bdk-ink-mid);
  transform-origin: center;
  transition: transform .35s ease, opacity .35s ease, width .35s ease;
}

/* Open state — controlled by JS adding .bdk-m-open to <body> */
.bdk-m-open .bdk-m-ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bdk-m-open .bdk-m-ham-line:nth-child(2) { opacity: 0; width: 0; }
.bdk-m-open .bdk-m-ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ── §6b  Brand (centred) ──────────────────────────────────────── */

.bdk-m-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  max-width: calc(100vw - 120px);
}
.bdk-m-crest {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(184, 150, 62, .3);
  display: block;
}
.bdk-m-brand-line1,
.bdk-m-brand-line2 {
  font-family: "Cormorant SC", serif;
  font-size: 13.5px;
  letter-spacing: .08em;
  /* Same trailing-letter-space trim as the desktop wordmark. It matters more
     here: the two lines are tracked differently, so each was pulled left by a
     different amount and they read as mis-stacked under the crest. */
  margin-right: -.08em;
  color: var(--bdk-ink);
  text-transform: uppercase;
  display: block;
  line-height: 1;
  white-space: nowrap;
  font-weight: 500;
}
.bdk-m-brand-line2 { letter-spacing: .16em; margin-right: -.16em; }


/* ── §6c  Appointment icon ─────────────────────────────────────── */

.bdk-m-appt-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bdk-m-appt-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--bdk-gold);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bdk-m-appt-icon:active svg { stroke: var(--bdk-gold-light); }


/* ════════════════════════════════════════════════════════════════════
   §7  MOBILE — Drawer
════════════════════════════════════════════════════════════════════ */

.bdk-m-drawer {
  position: fixed;
  top: var(--bdk-nav-h-m);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 490;
  /* Fully opaque — no page content (hero copy, watermark type, etc.)
     should ever show through the open drawer. */
  background: var(--bdk-cream);
  flex-direction: column;
  overflow-y: auto;
  padding: 0 0 40px;
  transform: translateX(-100%);
  transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
.bdk-m-open .bdk-m-drawer { transform: translateX(0); }

/* Scrim behind the drawer, over whatever page is underneath — belt-and-
   braces so the page is never visible while the menu is open, even for a
   frame, regardless of drawer height/content. Sits below the drawer (490)
   and the mobile header bar (500) so the hamburger/close control stays live. */
.bdk-m-scrim {
  position: fixed;
  inset: var(--bdk-nav-h-m) 0 0 0;
  z-index: 480;
  background: rgba(20, 18, 16, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.bdk-m-open .bdk-m-scrim {
  opacity: 1;
  pointer-events: auto;
}


/* ── §7a  Accordion Section ────────────────────────────────────── */

.bdk-m-section { border-bottom: 1px solid rgba(184, 150, 62, .12); }

.bdk-m-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bdk-m-section-label {
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--bdk-ink-mid);
  text-transform: uppercase;
}
.bdk-m-chevron {
  font-size: 10px;
  color: var(--bdk-gold);
  transition: transform .3s;
}
.bdk-m-section.bdk-m-open > .bdk-m-section-head .bdk-m-chevron { transform: rotate(180deg); }

.bdk-m-section-links {
  padding: 0 24px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .35s ease, padding .2s;
}
/* When not hidden (JS removes [hidden] and adds .bdk-m-open to section) */
.bdk-m-section.bdk-m-open > .bdk-m-section-links {
  max-height: 400px;
  padding-bottom: 16px;
}
.bdk-m-section-links a {
  display: block;
  font-family: "EB Garamond", serif;
  font-size: 18px;
  color: var(--bdk-ink-mid);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184, 150, 62, .08);
  transition: color .25s, padding-left .25s;
}
.bdk-m-section-links a:last-child { border-bottom: none; }
.bdk-m-section-links a:active { color: var(--bdk-gold); padding-left: 6px; }


/* ── §7b  Direct Links ─────────────────────────────────────────── */

.bdk-m-drawer-direct {
  display: block;
  padding: 18px 24px;
  text-decoration: none;
  font-family: "Cormorant SC", serif;
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--bdk-ink-mid);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(184, 150, 62, .1);
  transition: color .25s;
}
.bdk-m-drawer-direct:active { color: var(--bdk-gold); }


/* ── §7c  Drawer Footer ────────────────────────────────────────── */

.bdk-m-drawer-footer {
  /* Was margin-top:auto, which pins this to the bottom of the full-height
     fixed drawer — on a short link list that leaves a large dead gap above
     it. Flow it right after the content instead. */
  margin-top: 32px;
  padding: 28px 24px 0;
  border-top: 1px solid rgba(184, 150, 62, .15);
}
.bdk-m-footer-appt {
  display: block;
  text-align: center;
  font-family: "Cormorant SC", serif;
  font-size: 10.5px;
  letter-spacing: .28em;
  color: var(--bdk-dark);
  background: var(--bdk-gold);
  border: 1px solid var(--bdk-gold);
  padding: 15px 28px;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 16px;
  transition: background .3s, color .3s;
}
.bdk-m-footer-appt:active {
  background: transparent;
  color: var(--bdk-gold);
}
.bdk-m-footer-contact {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--bdk-ink-light);
  text-align: center;
  line-height: 1.7;
}
.bdk-m-footer-contact a { color: var(--bdk-gold); text-decoration: none; }


/* ════════════════════════════════════════════════════════════════════
   §8  Scroll Reveal (shared, layout-neutral)
════════════════════════════════════════════════════════════════════ */

.rev, .rev-l, .rev-r {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .85s ease, transform .85s ease;
}
.rev-l { transform: translateX(-30px); }
.rev-r { transform: translateX(30px); }
.rev.on, .rev-l.on, .rev-r.on { opacity: 1; transform: none; }