/* ==========================================================================
   Marton Dental — Site nav + sticky nav (+ the home hero)
   Decompiled from "Hero Redesign v2 Responsive" design-canvas page.
   All selectors are namespaced with .md- so this can be dropped into an
   existing page without collisions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.md-root {
  --md-olive:        #9fad5d;
  --md-olive-dark:   #8a9750;
  --md-charcoal:     #2c3138;
  --md-charcoal-dk:  #1f2329;
  --md-ink:          #1f2329;
  --md-tan:          #b5b06f;   /* matches the interior banner finder card */
  --md-select:       #403d39;   /* matches that card's dropdown pill        */
  --md-star:         #bcc985;
  --md-white:        #ffffff;
  --md-white-hover:  #f3f5ec;

  --md-header-h:      88px;   /* in-hero header, desktop */
  --md-header-h-mob:  64px;   /* in-hero header, mobile  */
  --md-sticky-h:      64px;   /* sticky bar, desktop     */
  --md-sticky-h-mob:  58px;   /* sticky bar, mobile      */
  --md-shell:       1280px;   /* max content width       */
  --md-gutter:        40px;
  --md-gutter-mob:    16px;

  --md-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Nav stacking. The static bar has to clear ordinary page content, which
     in this theme reaches z-index 99 (`.banner-col3`, the interior page
     banner's own finder card) -- the header it replaces sat at 999, so we
     match that. The sticky bar goes above it. Neither needs to beat the
     corner-fixed widgets (WhatsApp 9999999, Google badge 999999): those sit
     in a different part of the screen and never overlap the bars. */
  --md-z-header: 999;
  --md-z-sticky: 9999;

  /* Swap this for your own path when integrating */
  --md-hero-image: url('/assets/images/hero-clinic.jpg');
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.md-root {
  width: 100%;
  max-width: 100vw;
  background: var(--md-white);
  font-family: 'Jost', Helvetica, Arial, sans-serif;
  color: var(--md-ink);
  -webkit-font-smoothing: antialiased;
}

.md-root a { color: var(--md-white); text-decoration: none; }
.md-root *, .md-root *::before, .md-root *::after { box-sizing: border-box; }

/* Shared link/label typography */
.md-navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--md-white);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 200ms var(--md-ease);
}
.md-navlink:hover { color: var(--md-white-hover); }

.md-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--md-white);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  letter-spacing: .04em;
  transition: color 200ms var(--md-ease);
}
.md-phone:hover { color: var(--md-white-hover); }

/* Circular icon button (phone / pin / hamburger) */
.md-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: transparent;
  color: var(--md-white);
  cursor: pointer;
  transition: background 200ms var(--md-ease);
}
.md-iconbtn:hover { background: rgba(255,255,255,.16); }

/* Solid charcoal pill — "Book online now" */
.md-btn-book {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--md-charcoal);
  color: var(--md-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background 200ms var(--md-ease);
}
.md-btn-book:hover { background: var(--md-charcoal-dk); color: var(--md-white); }

/* Outlined pill — "For dentists" */
.md-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  color: var(--md-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  transition: background 200ms var(--md-ease);
}
.md-btn-ghost:hover { background: rgba(255,255,255,.16); }

/* Icon-only phone, swapped in for the full number on narrow desktops */
.md-compact-phone { display: none; }

/* Logo — a square mark cropped to its wordmark, knocked out to white */
.md-logo {
  /* The source is a square logo cropped down to its wordmark. The crop
     window, the image size and the offset must scale together or the
     wordmark gets clipped instead of scaled -- so all three derive from
     --md-logo-w, and a breakpoint only ever overrides that one value. */
  --md-logo-w: 150px;
  position: relative;
  display: block;
  flex: none;
  width: var(--md-logo-w);
  height: calc(var(--md-logo-w) * 58 / 150);
  overflow: hidden;
}
.md-logo img {
  position: absolute;
  left: 50%;
  top: calc(var(--md-logo-w) * -50 / 150);
  width: calc(var(--md-logo-w) * 158 / 150);
  height: calc(var(--md-logo-w) * 158 / 150);
  /* The theme has a global `img { max-width: 100%; height: auto }`. Left
     alone it clamps this image to the width of its crop window while the
     height stays put, so the logo renders squashed rather than scaled.
     The image is deliberately wider than the box it sits in. */
  max-width: none;
  min-width: 0;
  transform: translateX(-50%);
  filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   3. Sticky bar — hidden until the page scrolls past the threshold
   -------------------------------------------------------------------------- */
.md-stickybar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--md-z-sticky);
  background: var(--md-olive);
  box-shadow: 0 6px 20px rgba(31,35,41,.14);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 240ms var(--md-ease), visibility 240ms step-end;
}
.md-stickybar.is-stuck {
  transform: translateY(0);
  visibility: visible;
  transition: transform 240ms var(--md-ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .md-stickybar { transition: none; }
  .md-stickybar.is-stuck { transition: none; }
}

.md-stickybar__desktop {
  max-width: var(--md-shell);
  margin: 0 auto;
  padding: 0 var(--md-gutter);
  height: var(--md-sticky-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  white-space: nowrap;
}
.md-stickybar__actions { display: flex; align-items: center; gap: 18px; }
/* Sticky bar's book button is a touch shorter than the header's */
.md-stickybar .md-btn-book { height: 40px; padding: 0 22px; font-size: 13.5px; }
/* Sticky bar's pin is a bare icon, not a circled one */
.md-stickybar__pin { display: inline-flex; align-items: center; color: var(--md-white); transition: color 200ms var(--md-ease); }
.md-stickybar__pin:hover { color: var(--md-white-hover); }

.md-stickybar__mobile {
  display: none;
  padding: 0 var(--md-gutter-mob);
  height: var(--md-sticky-h-mob);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   4. Hero section
   -------------------------------------------------------------------------- */
.md-hero {
  position: relative;
  width: 100%;
  overflow: visible;
  /* isolation scopes the z-indexes below to the hero; the z-index lifts the
     whole hero above the following sections, so neither the finder card --
     which hangs 42px past the bottom edge -- nor an open mobile drawer is
     painted over by the next section.
     It has to clear the theme's `.margin` wrapper, which is position:
     relative with z-index:1 on every section, so z-index:1 here would tie
     and lose on DOM order. Stays well below the site's fixed chrome
     (badges at 999+) and the sticky bar (9999). */
  isolation: isolate;
  z-index: var(--md-z-header);
}

.md-hero__bg,
.md-hero__video,
.md-hero__scrim,
.md-hero__topfade { position: absolute; inset: 0; }

.md-hero__bg {
  background-image: var(--md-hero-image);
  background-size: cover;
  background-position: 62% 38%;
}

/* The background video sits over the still and under the scrim. The still is
   its poster in every sense: it is what shows before the first frame decodes,
   and what is left standing if the video is skipped (reduced motion, Save-Data)
   or fails to load -- so the hero is never bare. Matching background-position
   and object-position keeps the framing identical across the swap. */
.md-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--md-ease);
}
.md-hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  /* Both, together: the reinforced scrim below exists only to cover the
     video, so hiding one without the other would leave the still sitting
     under a scrim that was never meant for it. */
  .md-hero__video,
  .md-hero__scrim::after { display: none; }
}

.md-hero__scrim {
  background: linear-gradient(96deg,
    rgba(20,24,20,.78)   0%,
    rgba(20,24,20,.55)  42%,
    rgba(20,24,20,.14)  78%,
    rgba(20,24,20,.08) 100%);
}

/* The video runs brighter and far more variable than the still it plays over:
   measured across the loop, the brightest shots drop the white title to 2.6:1,
   under the 3:1 WCAG AA asks for large text, where the still sits at 5.1:1.
   This second layer buys that back while the video is playing, and only then --
   the still keeps the scrim it was designed against. It carries no weight at
   the right-hand end, so the footage stays bright where no text sits over it.
   A pseudo-element rather than a swapped gradient because gradients do not
   interpolate: opacity is what lets this fade up in step with the video. */
.md-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--md-ease);
  background: linear-gradient(96deg,
    rgba(20,24,20,.34)   0%,
    rgba(20,24,20,.26)  42%,
    rgba(20,24,20,.10)  78%,
    rgba(20,24,20,0)   100%);
}
.md-hero__video.is-playing ~ .md-hero__scrim::after { opacity: 1; }
.md-hero__topfade {
  bottom: auto;
  height: 220px;
  background: linear-gradient(180deg, rgba(15,18,15,.45), rgba(15,18,15,0));
}

/* ----- In-hero header ----- */
.md-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--md-olive);
}
.md-header__desktop {
  max-width: var(--md-shell);
  margin: 0 auto;
  padding: 0 var(--md-gutter);
  height: var(--md-header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
}
.md-header__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}
.md-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}
.md-header__mobile {
  display: none;
  padding: 0 var(--md-gutter-mob);
  height: var(--md-header-h-mob);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ----- Mobile nav drawer (one per bar) ----- */
.md-drawer {
  display: none;
  background: var(--md-olive);
  box-shadow: 0 12px 24px rgba(20,24,20,.25);
  animation: md-fade-down 200ms var(--md-ease) both;
}
.md-drawer.is-open { display: block; }
@media (prefers-reduced-motion: reduce) { .md-drawer { animation: none; } }

/* The header's drawer hangs below the header, over the hero */
.md-header .md-drawer {
  position: absolute;
  top: var(--md-header-h-mob);
  left: 0;
  right: 0;
  z-index: 29;
}

.md-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 20px 20px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.md-drawer__nav > .md-drawer__row,
.md-drawer__nav > .md-drawer__group {
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.md-drawer__nav > *:last-child { border-bottom: none; }

.md-drawer__cta { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.md-drawer__cta .md-btn-book  { height: 48px; justify-content: center; }
.md-drawer__cta .md-btn-ghost { height: 44px; justify-content: center; font-size: 13.5px; font-weight: 600; }

/* ----- Hero copy ----- */
.md-hero__content {
  position: relative;
  z-index: 5;
  max-width: var(--md-shell);
  margin: 0 auto;
  padding: 196px var(--md-gutter) 0;
  height: 660px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.md-hero__stars {
  color: var(--md-star);
  font-size: 16px;
  letter-spacing: .32em;
  margin-bottom: 20px;
}

.md-hero__title {
  margin: 0;
  max-width: 760px;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.16;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: var(--md-white);
  text-wrap: pretty;
}

.md-hero__lede {
  margin: 22px 0 0;
  max-width: 545px;
  font-family: 'Jost', sans-serif;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255,255,255,.92);
  text-wrap: pretty;
}

.md-hero__cta { display: flex; gap: 18px; margin-top: 36px; flex-wrap: wrap; }

/* Large hero buttons */
.md-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 36px;
  border: none;
  border-radius: 999px;
  background: var(--md-olive);
  color: var(--md-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  transition: background 200ms var(--md-ease);
}
.md-btn-primary:hover { background: var(--md-olive-dark); color: var(--md-white); }

.md-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 56px;
  padding: 0 30px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: var(--md-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: background 200ms var(--md-ease);
}
.md-btn-outline:hover { background: rgba(255,255,255,.18); color: var(--md-white); }

/* ----- Treatment finder card ----- */
.md-finder {
  /* Anchored to the 1280px content shell rather than to 50% of the viewport.
     At >=1280px this lands pixel-identical to the original's
     `right: calc(50% - 600px)`; below that it stays on-screen instead of
     sliding off to the right. */
  position: absolute;
  right: var(--md-gutter);
  bottom: -42px;
  z-index: 10;
  min-width: 400px;
  padding: 26px 34px 30px;
  border-radius: 6px;
  background: var(--md-tan);
  color: var(--md-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* The banner version centres its card contents, and the dropdown's label
     and options inherit that -- match it so the two read identically. */
  text-align: center;
}
.md-finder__title {
  font-family: 'Cinzel', Georgia, serif;
  /* The banner version is 34px in a 510px-wide card; this card is narrower,
     so it scales rather than wrapping. */
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
}
/* The finder control is the theme's own custom dropdown (.custom-select1,
   built by wp-content_themes_martondentalpractice_js_dropdown.js and styled
   by _css_dropdown.css) -- the same component as the interior page banners,
   so the closed pill and the open inner menu look and behave identically
   site-wide, and its click handler does the navigating.
   Only the colours are restated here: the theme's base is olive, while the
   banner context overrides to charcoal, and that override is scoped to
   .banner-wrapp so it cannot reach us. */
.md-finder__select { width: 284px; max-width: 100%; }
.md-finder__select.custom-select1 {
  background: var(--md-select);
  border-color: var(--md-select);
}
.md-finder__select.custom-select1:hover {
  background: var(--md-white);
  border-color: var(--md-white);
}
.md-root .md-finder__select.custom-select1 .select-selected { color: var(--md-white); }
.md-root .md-finder__select.custom-select1:hover .select-selected { color: var(--md-site-olive); }

/* --------------------------------------------------------------------------
   5. Mobile / tablet — breakpoint matches the original JS switch at 860px
   -------------------------------------------------------------------------- */
@media (max-width: 859px) {
  .md-header__desktop,
  .md-stickybar__desktop { display: none; }

  .md-header__mobile,
  .md-stickybar__mobile { display: flex; }

  .md-logo { --md-logo-w: 132px; }

  .md-stickybar .md-logo { --md-logo-w: 120px; }

  .md-iconbtn { width: 38px; height: 38px; }
  .md-stickybar .md-iconbtn { width: 36px; height: 36px; }

  /* Three icon buttons now (call, book, menu) alongside a bigger logo, so
     the action row tightens up to keep it all on one line on small phones. */
  .md-header__mobile .md-header__actions,
  .md-stickybar__mobile .md-stickybar__actions { gap: 8px; }

  @media (max-width: 359px) {
    .md-logo { --md-logo-w: 112px; }
    .md-stickybar .md-logo { --md-logo-w: 104px; }
    .md-iconbtn,
    .md-stickybar .md-iconbtn { width: 34px; height: 34px; }
  }

  .md-hero__content {
    padding: 108px 20px 64px;
    height: auto;
    min-height: 560px;
  }
  .md-hero__stars { font-size: 14px; letter-spacing: .28em; margin-bottom: 16px; }
  .md-hero__title { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.2; letter-spacing: .02em; max-width: none; }
  .md-hero__lede  { margin-top: 16px; font-size: clamp(15px, 4vw, 17px); line-height: 1.6; max-width: none; }

  .md-hero__cta { flex-direction: column; gap: 12px; margin-top: 28px; }
  .md-btn-primary { height: 52px; padding: 0 24px; font-size: 15px; width: 100%; }
  .md-btn-outline { height: 50px; padding: 0 24px; font-size: 14.5px; width: 100%; }

  /* Card moves inline, under the buttons */
  .md-finder {
    position: static;
    align-self: center;
    margin-top: 32px;
    width: 100%;
    max-width: 340px;
    min-width: 0;
    padding: 20px 24px;
  }
  .md-finder__title { font-size: 19px; letter-spacing: .06em; text-align: center; }
  .md-finder__select { width: 100%; }
}


/* --------------------------------------------------------------------------
   6. Narrow desktop / landscape tablet (860px - 1199px)
   -------------------------------------------------------------------------- */
/* The full-width header needs ~1194px to lay out without overflowing, so
   between the 860px mobile switch and 1200px it has to tighten up: smaller
   gutters and nav type, the phone number collapses to an icon, and the
   secondary "Find us" pin steps aside. Delete this whole block if you would
   rather match the original design file exactly (it overflowed here). */
@media (min-width: 860px) and (max-width: 1199px) {
  .md-root { --md-gutter: 24px; }

  .md-header__desktop,
  .md-stickybar__desktop { gap: 16px; }

  .md-logo { --md-logo-w: 132px; }

  .md-header__nav { gap: 14px; }
  .md-navlink { font-size: 11px; letter-spacing: .06em; }

  .md-header__actions,
  .md-stickybar__actions { gap: 14px; }

  /* Number -> icon */
  .md-phone { display: none; }
  .md-compact-phone { display: inline-grid; width: 36px; height: 36px; }

  /* Drop the secondary map pin; it survives in the sticky bar as a bare icon */
  .md-header__desktop .md-pin { display: none; }

  .md-btn-book { height: 40px; padding: 0 18px; font-size: 13px; }
  .md-btn-ghost { padding: 0 14px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   7. Hamburger / close icon swap
   -------------------------------------------------------------------------- */
.md-icon-close { display: none; }
[data-md-nav-toggle][aria-expanded="true"] .md-icon-open  { display: none; }
[data-md-nav-toggle][aria-expanded="true"] .md-icon-close { display: block; }

/* --------------------------------------------------------------------------
   8. Keyframes
   -------------------------------------------------------------------------- */
@keyframes md-fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   9. Nav dropdowns
   Ports the pre-redesign mega menu (Treatments) and flyouts (Prices,
   About us) onto the new bars. Panel colours follow the old menu -- white
   panel, olive category headings, dark uppercase links -- so the dropdowns
   stay continuous with the rest of the site.
   Used by both the in-hero header and the sticky bar; the panels are
   positioned against whichever bar contains them, both of which are already
   containing blocks (.md-header is absolute, .md-stickybar is fixed).
   -------------------------------------------------------------------------- */
.md-root {
  --md-site-olive: #94a068;   /* the olive the rest of the site uses */
  --md-drop-ink:   #3e3b36;
}

.md-navitem { position: relative; display: flex; align-items: center; }
/* The mega panel spans the content shell, so it must not be positioned
   against its own nav item. */
.md-navitem--mega { position: static; }

.md-navlink__chev { transition: transform 200ms var(--md-ease); }
.md-navitem--drop.is-open > .md-navlink > .md-navlink__chev { transform: rotate(180deg); }

.md-drop {
  white-space: normal;           /* the bars set nowrap */
  background: var(--md-white);
  box-shadow: 0 18px 40px rgba(31,35,41,.18);
  text-align: left;
  animation: md-fade-down 200ms var(--md-ease) both;
}
.md-drop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .md-drop { animation: none; } }

.md-drop--flyout {
  position: absolute;
  top: 100%;
  left: -22px;
  min-width: 264px;
  padding: 10px 0;
}
.md-drop--mega {
  position: absolute;
  top: 100%;
  left: var(--md-gutter);
  right: var(--md-gutter);
  max-width: calc(var(--md-shell) - (var(--md-gutter) * 2));
  margin: 0 auto;
  padding: 28px 34px 32px;
}
.md-drop__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.md-drop__col { min-width: 0; }
.md-drop__list { display: flex; flex-direction: column; }

/* Category heading -- a real link to the category page, as it was before */
.md-root .md-drop__cat {
  display: block;
  margin: 0 0 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(62,59,54,.55);
  color: var(--md-site-olive);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color 200ms var(--md-ease);
}
.md-root .md-drop__cat:hover { color: var(--md-charcoal); }

.md-root .md-drop__link {
  display: block;
  color: var(--md-drop-ink);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  transition: color 200ms var(--md-ease), padding-left 200ms var(--md-ease);
}
.md-drop--mega .md-drop__link { padding: 7px 0; }
.md-drop--flyout .md-drop__link { padding: 10px 22px; }
.md-root .md-drop--mega .md-drop__link:hover { color: var(--md-site-olive); padding-left: 6px; }
.md-root .md-drop--flyout .md-drop__link:hover { color: var(--md-site-olive); padding-left: 28px; }

/* Finance promo, carried over from the old mega menu's custom-HTML widget */
.md-root .md-drop__promo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border: 1px solid rgba(62,59,54,.55);
  color: var(--md-drop-ink);
  transition: border-color 200ms var(--md-ease), background 200ms var(--md-ease);
}
.md-root .md-drop__promo:hover { border-color: var(--md-site-olive); background: #fbfcf7; }
.md-drop__promo-h {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--md-site-olive);
}
.md-drop__promo-p { font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.45; }
.md-drop__promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--md-site-olive);
}

/* Between 860 and 1199px the shell is tighter; drop the promo to keep the
   four treatment columns readable rather than squeezing all five. */
@media (min-width: 860px) and (max-width: 1199px) {
  .md-drop--mega { padding: 22px 24px 26px; }
  .md-drop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .md-drop__grid > .md-drop__col:last-child { display: none; }
  .md-root .md-drop__cat { font-size: 13.5px; }
  .md-root .md-drop__link { font-size: 11.5px; letter-spacing: .07em; }
}

/* --------------------------------------------------------------------------
   10. Drawer accordion (mobile) -- same tree as the desktop dropdowns
   -------------------------------------------------------------------------- */
.md-drawer__nav .md-drawer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  color: var(--md-white);
  /* `font: inherit` carries the family/size/weight but not these two, and a
     <button> does not inherit them from .md-drawer__nav the way the <a>s do --
     without them the toggle rows render lowercase and mis-tracked. */
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.md-drawer__rowsplit { display: flex; align-items: center; }
.md-drawer__rowsplit .md-drawer__row { flex: 1 1 auto; }
/* Chevron alignment. Top-level rows sit their chevron inside a square touch
   target that overhangs the row's right edge, which centres it
   (tap / 2 - overhang) inside that edge. Category rows have no such box, so
   they pad by the same amount less half the glyph -- both then land on the
   identical vertical line, and changing the tap size keeps them together. */
.md-drawer {
  --md-tap: 44px;
  --md-tap-overhang: 10px;
  --md-chev: 12px;
}
.md-drawer__expand {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--md-tap);
  height: var(--md-tap);
  margin-right: calc(var(--md-tap-overhang) * -1);
  color: var(--md-white);
  background: none;
  border: 0;
  cursor: pointer;
}
.md-drawer__chev { transition: transform 200ms var(--md-ease); }
[aria-expanded="true"] > .md-drawer__chev,
[aria-expanded="true"] .md-drawer__chev { transform: rotate(180deg); }

.md-drawer__sub { padding: 2px 0 10px; }
.md-drawer__sub[hidden] { display: none; }
/* Category rows span the drawer and toggle anywhere along their width, so
   there is no narrow chevron to aim for. */
.md-drawer__nav .md-drawer__subcat {
  width: 100%;
  padding: 13px calc(var(--md-tap) / 2 - var(--md-tap-overhang) - var(--md-chev) / 2) 13px 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.92);
}
.md-drawer__nav .md-drawer__subcat:hover { color: var(--md-white); }
.md-root .md-drawer__sublink--all { font-weight: 500; opacity: 1; }
.md-root .md-drawer__sublink {
  display: block;
  padding: 11px 0;
  color: rgba(255,255,255,.9);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 400;
}
.md-root .md-drawer__sublink:hover { color: var(--md-white); }
.md-drawer__group--l2 { border-top: 1px solid rgba(255,255,255,.16); }
.md-root .md-drawer__sublink--l3 { padding-left: 14px; font-size: 12px; opacity: .85; }
/* Long trees need to scroll rather than run off the bottom of the screen.
   dvh second so it wins where supported -- on mobile 100vh includes the
   browser chrome, which would push the end of the menu out of reach. */
.md-drawer { overflow-y: auto; max-height: calc(100vh - var(--md-header-h-mob)); }
.md-drawer { max-height: calc(100dvh - var(--md-header-h-mob)); }
.md-stickybar .md-drawer { max-height: calc(100vh - var(--md-sticky-h-mob)); }
.md-stickybar .md-drawer { max-height: calc(100dvh - var(--md-sticky-h-mob)); }

/* --------------------------------------------------------------------------
   11. The heading below the hero
   It was the page's <h1> before the hero took that over. It is an <h2> now,
   for a single-H1 outline, but must keep the styling it had as an h1
   (stylesheet.css:2293 and its 480px / 481-600px overrides).
   -------------------------------------------------------------------------- */
.about-wrapp .about-col1 .about-row1 h2.xd-as-h1 {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .84px;
  margin: 0 0 22px;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  color: #94a068;
}
.about-wrapp .about-col1 .about-row1 h2.xd-as-h1 span { display: block; }
@media screen and (max-width: 600px) {
  .about-wrapp .about-col1 .about-row1 h2.xd-as-h1 { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   12. Interior pages
   The home page's header is transparent and sits *inside* the hero, over the
   photo. Every other page has no hero, so it gets the same bar as a solid
   block in normal flow instead. Everything else -- the nav, the dropdowns,
   the sticky bar, the drawers -- is identical, so there is one nav to
   maintain rather than two.
   -------------------------------------------------------------------------- */
.md-root--page {
  /* No z-index here on purpose: it would create a stacking context and trap
     the sticky bar's z-index inside it, putting the site's own fixed badges
     above the bar. The header carries the z-index instead, exactly as
     .md-hero does on the home page. */
  position: relative;
}
.md-root--page .md-header {
  position: relative;
  z-index: var(--md-z-header);
  background: var(--md-olive);
}
/* The drawer still hangs below the bar, over the page content underneath. */
.md-root--page .md-header .md-drawer { top: 100%; }

/* The home page bleeds the hero photo up behind the bar; interior pages have
   a hard edge, so soften it the way the hero's top fade does. */
.md-root--page .md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1px;
  background: rgba(31,35,41,.10);
}