/* ============================================================================
   MEGA MENU 03 - EDITORIAL PHOTO TILES
   Dark full-bleed panel. One photo tile per service group, the group name set
   large, three to four services listed beneath each tile. Slim top strip with
   hours, address, phone and Book.
   Header behaviour: headroom, fixed over the hero, solid once stuck.
   Switch with --mm-header-mode: pinned.
   Restyle by overriding tokens only.
   ========================================================================== */

:root {
  /* palette: Verano Dental. Warm dark, copper accent. Dark canvas per the
     house dark rules: never #000, text is bone, the accent stays warm. */
  --mm-canvas: #14120f;
  --mm-surface: #1b1916;          /* the panel surface, opaque */
  --mm-surface-2: #23201c;        /* tile and hover fill */
  --mm-bar: #14120f;              /* header fill once stuck */
  --mm-ink: #efe7da;              /* bone */
  --mm-body: #b8ad9e;             /* 5.4:1 on the panel surface */
  --mm-muted: #9b9184;
  --mm-accent: #d08a52;           /* copper */
  --mm-accent-ink: #1a1512;
  --mm-line: #33302b;
  --mm-scrim: rgba(8, 7, 6, .5);
  --mm-hero-scrim: rgba(10, 9, 7, .62);  /* top gradient so the bar reads on any hero */

  --mm-font-display: "Playfair Display", Georgia, serif;
  --mm-font-body: "Inter", system-ui, sans-serif;
  --mm-fs-link: 15px;
  --mm-fs-kicker: 11px;
  --mm-fs-nav: 15.5px;

  --mm-container: 1280px;
  --mm-gutter: 24px;
  --mm-pad: 30px;
  --mm-col-min: 280px;
  --mm-radius: 10px;
  --mm-radius-sm: 8px;
  --mm-icon: 24px;
  --mm-hdr-h: 84px;
  --mm-hdr-h-stuck: 66px;
  --mm-shadow: 0 36px 70px -30px rgba(0, 0, 0, .8);

  --mm-t-fast: 150ms;
  --mm-t: 240ms;
  --mm-ease: cubic-bezier(.16, 1, .3, 1);

  --mm-header-mode: headroom;
}

/* ---------------------------------------------------------------- header - */
/* fixed, so the panel can be full-bleed over a full-bleed hero. The hero's own
   top padding keeps the h1 clear of the bar at scroll 0. */
.mm-hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 120; font-family: var(--mm-font-body);
  color: var(--mm-ink); transition: transform var(--mm-t) var(--mm-ease), background var(--mm-t) var(--mm-ease); will-change: transform; }
.mm-hdr::before { content: ""; position: absolute; inset: 0 0 -46px; pointer-events: none;
  background: linear-gradient(180deg, var(--mm-hero-scrim) 0%, rgba(10, 9, 7, .38) 62%, rgba(10, 9, 7, 0) 100%);
  transition: opacity var(--mm-t) var(--mm-ease); }
.mm-hdr.is-stuck { background: var(--mm-bar); box-shadow: 0 1px 0 var(--mm-line), 0 12px 30px -20px rgba(0, 0, 0, .9); }
.mm-hdr.is-stuck::before { opacity: 0; }
.mm-hdr.is-hidden { transform: translateY(-101%); }
.mm-hdr__in { max-width: var(--mm-container); margin: 0 auto; padding: 0 var(--mm-gutter);
  height: var(--mm-hdr-h); display: flex; align-items: center; gap: 26px; transition: height var(--mm-t) var(--mm-ease); }
.mm-hdr.is-stuck .mm-hdr__in { height: var(--mm-hdr-h-stuck); }

.mm-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; color: var(--mm-ink); }
.mm-logo svg { width: 28px; height: 28px; color: var(--mm-accent); flex-shrink: 0; }
.mm-logo b { font-family: var(--mm-font-display); font-weight: 500; font-size: 22px; letter-spacing: .01em; white-space: nowrap; }
.mm-logo span { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-body); margin-top: 3px; }

.mm-nav { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.mm-nav__item { position: static; }
.mm-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; min-height: 44px;
  font-size: var(--mm-fs-nav); font-weight: 400; color: var(--mm-ink); text-decoration: none; white-space: nowrap;
  letter-spacing: .01em; border-radius: var(--mm-radius-sm); transition: color var(--mm-t-fast) ease; }
.mm-nav__link:hover { color: var(--mm-accent); }
.mm-nav__link svg { width: 13px; height: 13px; transition: transform var(--mm-t) var(--mm-ease); }
.mm-nav__link[aria-expanded="true"] { color: var(--mm-accent); }
.mm-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.mm-hdr__util { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.mm-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--mm-ink);
  font-size: 15px; font-weight: 500; white-space: nowrap; }
.mm-tel svg { width: 18px; height: 18px; color: var(--mm-accent); }
.mm-tel:hover { color: var(--mm-accent); }
.mm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--mm-accent); background: var(--mm-accent); color: var(--mm-accent-ink);
  font-family: var(--mm-font-body); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--mm-t-fast) ease, transform var(--mm-t-fast) ease; }
.mm-btn:hover { background: #e0a06a; border-color: #e0a06a; }
.mm-btn--ghost { background: transparent; color: var(--mm-ink); border-color: rgba(239, 231, 218, .34); }
.mm-btn--ghost:hover { background: transparent; color: var(--mm-accent); border-color: var(--mm-accent); }
.mm-btn:active { transform: scale(.97); }

.mm-burger { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(239, 231, 218, .28); border-radius: var(--mm-radius-sm); color: var(--mm-ink); cursor: pointer; }
.mm-burger svg { width: 22px; height: 22px; }

/* ----------------------------------------------------------------- panel - */
.mm-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 121; background: var(--mm-surface);
  border-top: 1px solid var(--mm-line); border-bottom: 1px solid var(--mm-accent); box-shadow: var(--mm-shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px);
  transition: opacity var(--mm-t) var(--mm-ease), transform var(--mm-t) var(--mm-ease), visibility var(--mm-t); }
.mm-hdr.is-open .mm-panel[data-mm-open] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.mm-panel__bar { background: var(--mm-canvas); border-bottom: 1px solid var(--mm-line); }
.mm-panel__bar-in { max-width: var(--mm-container); margin: 0 auto; padding: 11px var(--mm-gutter);
  display: flex; align-items: center; gap: 28px; }
.mm-strip__fact { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mm-body); white-space: nowrap; }
.mm-strip__fact svg { width: 22px; height: 22px; color: var(--mm-accent); flex: none; }
.mm-strip__fact b { color: var(--mm-ink); font-weight: 600; }
.mm-strip__end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.mm-strip__end .mm-btn { height: 40px; padding: 0 18px; font-size: 13.5px; }

.mm-panel__in { max-width: var(--mm-container); margin: 0 auto; padding: var(--mm-pad) var(--mm-gutter) 34px;
  display: grid; gap: var(--mm-gutter); grid-template-columns: repeat(4, minmax(var(--mm-col-min), 1fr)); }
@media (max-width: 1339px) { .mm-panel__in { grid-template-columns: repeat(2, minmax(var(--mm-col-min), 1fr)); } }

.mm-tile { min-width: 0; }
.mm-tile__hit { display: block; position: relative; border-radius: var(--mm-radius); overflow: hidden;
  text-decoration: none; color: var(--mm-ink); background: var(--mm-surface-2); }
.mm-tile__hit img { width: 100%; height: 172px; object-fit: cover; display: block;
  transition: transform 500ms var(--mm-ease), filter var(--mm-t) var(--mm-ease); filter: saturate(.92) brightness(.86); }
.mm-tile__hit::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 7, 0) 34%, rgba(10, 9, 7, .82) 100%); }
.mm-tile__hit h3 { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 2; margin: 0;
  font-family: var(--mm-font-display); font-weight: 500; font-size: 26px; line-height: 1.1; color: #fff;
  text-wrap: balance; }
.mm-tile__hit:hover img { transform: scale(1.04); filter: saturate(1) brightness(.94); }
.mm-tile ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--mm-line); }
.mm-tile li { border-bottom: 1px solid var(--mm-line); }
.mm-tile li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px;
  font-size: var(--mm-fs-link); color: var(--mm-body); text-decoration: none; white-space: nowrap;
  transition: color var(--mm-t-fast) ease, padding-left var(--mm-t) var(--mm-ease); }
.mm-tile li a::after { content: ""; width: 14px; height: 1px; background: var(--mm-accent); opacity: 0;
  transition: opacity var(--mm-t) var(--mm-ease), width var(--mm-t) var(--mm-ease); }
.mm-tile li a:hover { color: var(--mm-ink); padding-left: 6px; }
.mm-tile li a:hover::after { opacity: 1; width: 22px; }

/* scrim */
.mm-scrim { position: fixed; inset: 0; z-index: 110; background: var(--mm-scrim); opacity: 0; visibility: hidden;
  transition: opacity var(--mm-t) var(--mm-ease), visibility var(--mm-t); }
.mm-scrim[data-mm-open] { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- drawer - */
.mm-drawer { position: fixed; inset: 0; z-index: 200; display: none; font-family: var(--mm-font-body); }
.mm-drawer[data-open] { display: block; }
.mm-drawer__scrim { position: absolute; inset: 0; background: var(--mm-scrim); }
.mm-drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(420px, 100%); background: var(--mm-surface);
  color: var(--mm-ink); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform var(--mm-t) var(--mm-ease); overflow-y: auto; }
.mm-drawer[data-open] .mm-drawer__panel { transform: none; }
.mm-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--mm-gutter);
  border-bottom: 1px solid var(--mm-line); position: sticky; top: 0; background: var(--mm-surface); z-index: 2; }
.mm-drawer__close { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: transparent;
  border: 1px solid var(--mm-line); border-radius: var(--mm-radius-sm); color: var(--mm-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.mm-drawer__close svg { width: 18px; height: 18px; }
.mm-drawer__nav { padding: 8px var(--mm-gutter) 24px; }
.mm-drawer__nav > a { display: block; padding: 14px 0; font-size: 17px; color: var(--mm-ink); text-decoration: none; border-bottom: 1px solid var(--mm-line); }
.mm-acc { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; background: transparent;
  border: 0; border-bottom: 1px solid var(--mm-line); font-family: inherit; font-size: 17px; color: var(--mm-ink); cursor: pointer; text-align: left; }
.mm-acc svg { width: 18px; height: 18px; color: var(--mm-muted); transition: transform var(--mm-t) var(--mm-ease); }
.mm-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-acc__body { display: none; padding: 6px 0 14px; border-bottom: 1px solid var(--mm-line); }
.mm-acc__body[data-open] { display: block; }
.mm-kicker { display: block; font-size: var(--mm-fs-kicker); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mm-muted); margin: 16px 0 6px; }
.mm-links { list-style: none; margin: 0; padding: 0; }
.mm-link { display: flex; align-items: center; gap: 13px; padding: 10px 0; text-decoration: none; }
.mm-link__ic { flex: none; width: 40px; height: 40px; border-radius: 9px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--mm-surface-2); color: var(--mm-accent); border: 1px solid var(--mm-line); }
.mm-link__ic svg { width: var(--mm-icon); height: var(--mm-icon); }
.mm-link__tx b { display: block; font-size: 15.5px; font-weight: 600; color: var(--mm-ink); line-height: 1.3; white-space: nowrap; }
.mm-link__tx span { display: block; font-size: 13px; line-height: 1.45; color: var(--mm-body); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-drawer__cta { padding: 20px var(--mm-gutter) 32px; border-top: 1px solid var(--mm-line); background: var(--mm-canvas); margin-top: auto; }
.mm-drawer__cta .mm-btn { width: 100%; margin-bottom: 12px; }
.mm-drawer__cta .mm-tel { justify-content: center; width: 100%; height: 46px; }

.mm-hdr a:focus-visible, .mm-hdr button:focus-visible, .mm-panel a:focus-visible,
.mm-drawer a:focus-visible, .mm-drawer button:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------ responsive - */
@media (max-width: 1079px) {
  .mm-nav, .mm-hdr__util .mm-btn, .mm-hdr__util .mm-tel span { display: none; }
  .mm-burger { display: inline-flex; }
  .mm-panel { display: none; }
  :root { --mm-hdr-h: 68px; --mm-hdr-h-stuck: 60px; }
  .mm-hdr__in { gap: 14px; }
  .mm-hdr__util { gap: 10px; }
  .mm-tel { width: 46px; height: 46px; justify-content: center; border: 1px solid rgba(239, 231, 218, .28);
    border-radius: var(--mm-radius-sm); background: rgba(255, 255, 255, .06); }
}
@media (max-width: 420px) { .mm-logo b { font-size: 19px; } .mm-logo span { font-size: 9px; letter-spacing: .18em; } }

@media (prefers-reduced-motion: reduce) {
  .mm-hdr, .mm-hdr::before, .mm-hdr__in, .mm-panel, .mm-scrim, .mm-drawer__panel, .mm-btn,
  .mm-nav__link, .mm-nav__link svg, .mm-acc svg, .mm-tile__hit img, .mm-tile li a, .mm-tile li a::after { transition: none !important; }
  .mm-tile__hit:hover img { transform: none; }
}