/* Shared page chrome, extracted verbatim from index.html on 2026-09-14 so every page carries
   the homepage nav and footer. Edit index.html first, then re-extract; never hand-edit values
   here. Loaded LAST in <head> on every non-index Akila page so it wins specificity ties.
   A few rules below are marked "Scoping override (not from index)" -- these are NOT copied from
   index.html. They exist only to neutralise a target page's own higher-reach CSS (a permanent
   .nav-cta rule, a locally overridden --nav-h token used site-wide on that page) without ever
   editing that page's own <style> block or index.html, per design-protocol.md step 3. */

/* ===== NAV (verbatim, index.html lines ~834-1080) ===== */

#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(251,249,246,0.96);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
@media (max-width: 720px) {
  :root { --nav-h: 56px; }}

#nav.scrolled {
  background: rgba(251,249,246,0.98);
  border-bottom-color: var(--grey-border);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}

/* Ruling 9 (OWNER-FEEDBACK.md): at most one booking affordance visible per first screen.
   At the very top of the page the hero's own solid "Book online" is the one CTA; the header
   pill is demoted to a quiet outline so it doesn't compete. It regains full weight the moment
   #nav.scrolled is set (existing 10px-scroll toggle), once the hero CTA is no longer the
   dominant on-screen action. Desktop/tablet only, nav-cta is display:none under 901px. */
@media (min-width: 901px) {
  #nav:not(.scrolled) .nav-cta {
    background: transparent;
    color: var(--dark);
    border: 1.5px solid var(--grey-border);
  }
  #nav:not(.scrolled) .nav-cta::before { content: none; }}

.nav-inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: var(--space-px);
  text-decoration: none;
  padding: var(--space-0-5) 0;
  color: var(--dark);
}
.logo-img {
  width: auto;
  height: 60px;
  display: block;
  transform: translateY(2px);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.nav-logo:hover .logo-img { opacity: 0.8; transform: translateY(2px) scale(1.02); }
@media (max-width: 720px) {
  .logo-img { height: 40px; transform: translateY(1px); }
  .nav-inner { justify-content: center; position: relative; }
  .nav-logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .hamburger { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); }}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.nav-links a {
  position: relative;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  padding: var(--space-1-5) 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav-links a:hover { color: var(--dark); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Services dropdown (nav) */
.nav-item-dropdown { position: relative; }
.nav-dropdown-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  padding: var(--space-1-5) 0;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav-dropdown-trigger:hover { color: var(--dark); }
.nav-dropdown-trigger:hover::after,
.nav-item-dropdown:focus-within .nav-dropdown-trigger::after,
.nav-dropdown-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-dropdown-chevron { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-standard); }
.nav-item-dropdown:hover .nav-dropdown-chevron,
.nav-item-dropdown:focus-within .nav-dropdown-chevron,
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: var(--space-3-5);
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              visibility 0s linear var(--dur-fast),
              display 0s linear var(--dur-fast);
  transition-behavior: allow-discrete;
  z-index: 20;
}
.nav-item-dropdown:hover .nav-dropdown-panel,
.nav-item-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown-panel.is-open {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  transition-behavior: allow-discrete;
}
@starting-style {
  .nav-item-dropdown:hover .nav-dropdown-panel,
  .nav-item-dropdown:focus-within .nav-dropdown-panel,
  .nav-dropdown-panel.is-open {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.nav-dropdown-panel-inner {
  display: grid;
  gap: var(--space-0-5);
  min-width: 216px;
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible { background: var(--grey-light); color: var(--dark); }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-chevron, .nav-dropdown-panel, .nav-dropdown-trigger::after { transition: none; }}

.nav-cta { flex-shrink: 0; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-2-5);
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.hamburger:active { transform: scale(0.96); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--dark);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.hamburger[aria-expanded="true"] {
  background: var(--dark);
  border-color: var(--dark);
}
.hamburger[aria-expanded="true"] span { background: var(--white); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 720px) {
  .hamburger:active { transform: translateY(-50%) scale(0.96); }}

/* Focus rings: keyboard only. Dark ring + yellow halo = brand + WCAG 2.4.13 (index.html ~634-641) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px rgba(247,220,0,0.45);
}

/* ===== MOBILE MENU (verbatim, index.html lines ~3357-3416) ===== */
/* Ruling 65: the panel root is a <nav>, and a bare `nav` rule sets position, inset, height,
   background, border and z-index. Every one of those has to be reset here or the panel
   inherits them. On colour-correction it inherited height:76px, which over-constrained the
   box so bottom:0 was ignored, and the dock landed 500px up the screen. */
.mobile-menu { position: fixed; inset: var(--nav-h) 0 0; height: auto; z-index: 999;
  background: none; border: 0;    opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-standard), visibility 0s linear var(--dur-fast); }
.mobile-menu.open { opacity: 1; visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out-quart), visibility 0s; }
.mobile-menu-panel { height: 100%; display: flex; flex-direction: column;
  background: var(--paper); color: var(--dark); transform: translateY(-10px);
  transition: transform var(--dur-fast) var(--ease-standard); }
.mobile-menu.open .mobile-menu-panel { transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out-expo); }
.mobile-menu a { text-decoration: none; }
.mobile-menu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; border: 0;
  padding: var(--space-2-5) var(--space-6) var(--space-4); }
.mobile-menu-link { display: flex; align-items: center; min-height: 78px; border: 0;
  font-family: var(--font-display); font-size: 32px; line-height: 1.1;
  letter-spacing: -0.012em; color: var(--dark); }
.mobile-menu-sublink { display: flex; align-items: center; min-height: 52px; border: 0;
  padding-left: var(--space-5); font-family: var(--font-ui); font-size: 16px;
  font-weight: 500; color: var(--muted); }
.mobile-menu-gap { height: var(--space-4); flex: none; }
.mobile-menu-actions { flex: none; margin-top: auto; background: var(--dark); color: var(--paper);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-3) var(--space-5) max(var(--space-4), env(safe-area-inset-bottom)); }
.mobile-menu-row { display: flex; align-items: stretch; gap: var(--space-2); }
.mobile-menu .btn-teal, .mobile-menu .btn-accent { flex: 1 1 auto; display: flex;
  align-items: center; justify-content: center; min-height: 50px; border: 0;
  background: var(--accent); color: var(--dark); font-family: var(--font-ui); font-weight: 600;
  font-size: 16px; padding: 0 var(--space-3); border-radius: var(--radius-full);
  text-align: center; }
.mobile-menu-phone { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  gap: var(--space-1-5); min-height: 50px; margin: 0; padding: 0 var(--space-3-5);
  font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--paper);
  border: 1px solid #4a423a; border-radius: var(--radius-full); }
@media (max-height: 760px) {
  .mobile-menu-link { min-height: 54px; font-size: 26px; }
  .mobile-menu-sublink { min-height: 44px; font-size: 16px; }
  .mobile-menu-gap { height: var(--space-2-5); }
  .mobile-menu-actions { padding: var(--space-2-5) var(--space-4-5)
    max(var(--space-3-5), env(safe-area-inset-bottom)); }
  .mobile-menu .btn-teal, .mobile-menu .btn-accent { min-height: 46px; font-size: 16px; }
  .mobile-menu-phone { min-height: 46px; font-size: 13px; padding: 0 var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu.open, .mobile-menu-panel, .mobile-menu.open .mobile-menu-panel {
    transition: none !important; transform: none !important; }
}

/* Nav + footer collapse at 900px (verbatim, selectors filtered out of index.html's mixed
   ~3164-3176 responsive block -- hero-grid/services-grid/about-grid rules in that block are
   page sections and are intentionally NOT copied here). */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-nav { justify-content: center; flex-wrap: wrap; }}

/* ===== FOOTER (verbatim, index.html lines ~3108-3161) ===== */
footer { background: var(--dark); padding: var(--space-14) 0 var(--space-10); }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer-logo { font-family: var(--font-ui); font-weight: 700; font-size: 16px; color: rgba(255,255,255,0.92); letter-spacing: 1px; }

.footer-nav { display: flex; gap: var(--space-6); list-style: none; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,0.72); transition: color 0.2s; min-height: 44px; display: inline-flex; align-items: center; padding: var(--space-1) 0; }
.footer-nav a:hover { color: var(--white); }

.footer-social { display: flex; gap: var(--space-3); }
.footer-social a {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
  touch-action: manipulation;
}
.footer-social a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-social a:hover { background: var(--dark); color: var(--white); }

.footer-legal {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  list-style: none;
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  transition: color var(--dur-fast);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2-5) var(--space-2);
}
.footer-legal a:hover { color: rgba(255,255,255,1); }
.footer-copy { width: 100%; text-align: center; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: var(--space-3); }
@media (max-width: 720px) {
  footer { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }}

/* index.html line 538: RTL footer copy / founder-creds language override (verbatim) */
.footer-copy [lang="fa"], .founder-creds [lang="fa"] {
  font-family: 'Vazirmatn', var(--font-ui);
  font-weight: 500;
  direction: rtl;
  unicode-bidi: isolate;
}

/* index.html line 703: footer-legal gap at <=600px (verbatim, filtered out of a mixed block) */
@media (max-width: 600px) {
  .footer-legal { gap: var(--space-1) var(--space-4); row-gap: 0; }}

/* ===== Scoping overrides (NOT from index.html) =====
   The six target pages each carry their own global .btn / .btn-accent / .btn-teal rules used
   site-wide (hero CTAs, band CTAs, proof-section CTAs) which per design-protocol.md must never
   be touched here. Where index's nav Book pill differs from what those shared rules produce,
   the fix is scoped to #nav / .mobile-menu only, never a redefinition of .btn itself. */

/* index's nav-cta is 16px with an 8px (--radius-md) corner; the target pages' shared .btn is
   14px with a full pill radius. Scope the correction to the nav Book pill only. */
#nav .nav-cta.btn { font-size: 16px; border-radius: var(--radius-md); }

/* index has no explicit #nav.scrolled .nav-cta rule because it needs none -- .btn-teal's own
   background already shows through once #nav:not(.scrolled) stops demoting it. On
   colour-correction-oakleigh.html the page defines its own permanent, unconditional
   `.nav-cta { background: transparent; border: ...; color: var(--dark); }' (not scroll-gated),
   which otherwise keeps the pill transparent even after #nav.scrolled. Restore the solid pill
   without editing that page's own CSS. Redundant (harmless) on the other five pages, which
   have no such rule and already show var(--accent) via their own .btn-accent. */
#nav.scrolled .nav-cta { background: var(--accent); border-color: transparent; color: var(--dark); }

/* colour-correction-oakleigh.html sets its own --nav-h: 76px in :root. That token is used
   site-wide on that page (main padding, hero min-height calc, .mobile-menu inset) and must
   stay untouched, so it cannot be overridden globally here. Fix #nav's OWN rendered height
   only, with a literal value instead of var(--nav-h), so the token keeps doing its other job
   undisturbed. A no-op on the other five pages, whose --nav-h is already 72px. */
#nav { height: 72px; }


/* ------------------------------------------------------------------------------------------
   Component parity with index.html, added 2026-09-14 after the owner noticed the service-page
   buttons were pills while the homepage buttons are 8px rectangles ("probs other things that are
   different"). Every value below is the homepage's own rule, measured with component-parity.js
   before and after. The service pages still carry their old .btn / .faq / .section-title rules
   inline; this file loads last, so these win. Change index.html first, then mirror here.
   ------------------------------------------------------------------------------------------ */
body { font-size: 16px; line-height: 1.7; }
@media (max-width: 600px) { body { font-size: 16px; line-height: 1.65; } }

.btn {
  padding: var(--space-3-5) var(--space-7);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.4px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition: color 350ms ease, transform 80ms ease-out;
}
.btn:active { transform: scale(0.985); }
.btn-accent { background: var(--accent); color: var(--dark); border-color: transparent; }
.btn-ghost { background: transparent; color: var(--dark); border-color: var(--grey-border); }
@media (hover: hover) {
  .btn-ghost:hover { background: var(--white); border-color: var(--dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  /* CTA hover, owner ruling 2026-08-18: no black ink-sweep. Yellow deepens and lifts instead. */
  .btn-accent:hover { color: var(--dark); background: color-mix(in oklab, var(--accent) 90%, var(--dark) 10%); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(15,23,42,0.35); }
  .btn-accent:hover span { color: var(--dark); }
}
@media (prefers-reduced-motion: reduce) { .btn-accent:hover, .btn-ghost:hover { transform: none; box-shadow: none; } }

/* Headings: one weight (500) for the display face, as on the homepage. Sizes stay per page. */
h1, .section-title { font-weight: 500; }
.section-subtitle { color: var(--muted); font-size: 16px; max-width: 560px; }

/* FAQ accordion: the homepage's chip toggle. */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--dark);
  padding: var(--space-5) var(--space-10) var(--space-5) 0;
  border-radius: 0;
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid rgba(22,19,16,0.28);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  transition: transform var(--dur-base) var(--ease-out-expo), background var(--dur-fast);
}
.faq-item[open] summary::after { content: '\2212'; background: var(--accent); transform: translateY(-50%); }
.faq-item p { font-size: 16px; line-height: 1.7; color: var(--text); }

/* Google score link and mobile bar text at the homepage size. */
.ak-review-score { font-size: 16px; border-radius: 0; padding: 0; }
.mobile-book-bar { font-size: 16px; }

/* Hero CTA size and the colour-correction pills: same 8px radius as every other button on the site. */
.btn-lg { font-size: 16px; padding: var(--space-4) var(--space-8); }
.cc-v3 .cc-hero-actions .btn, .cc-v3 .cc-proof-cta .btn { border-radius: var(--radius-md); }

/* ink stat strip under hero-v6 (balayage, about): three ruled rows below 480px instead of three 107px columns
   where every cell wrapped to two lines (design-lead 2026-09-14). */
@media (max-width: 480px) {
  #main #hero.hero-v6 ~ .stat-strip .stat-grid { grid-template-columns: 1fr; gap: 0; }
  #main #hero.hero-v6 ~ .stat-strip .stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); }
  #main #hero.hero-v6 ~ .stat-strip .stat:first-child { border-top: 0; padding-top: 0; }
  #main #hero.hero-v6 ~ .stat-strip .stat:last-child { padding-bottom: 0; }
  #main #hero.hero-v6 ~ .stat-strip .stat .stat-big { font-size: 19px; }
  #main #hero.hero-v6 ~ .stat-strip .stat .stat-big { white-space: nowrap; }
  #main #hero.hero-v6 ~ .stat-strip .stat .stat-label { margin-top: 0; text-align: right; flex: 1 1 auto; min-width: 0; }
}

/* Mobile menu v3 (owner-approved 2026-09-14, E7): serif services over small-caps utilities, one field colour
   incl. the header, foot caption = address + live open-status over the dock. Content order is ruling 36. */
/* Menu direction B (owner pick 2026-09-17, ruling 103): services 30px on 64px rows, the pages tier at 15px
   small caps floats midway between services and the address foot (margin auto), no rule; the pages at
   12px read as footnotes and the panel carried a dead band above the foot. */
.mobile-menu-list.mm-v3 { display: flex; flex-direction: column; gap: 0; padding: 40px var(--space-6) 0; }
.mm-v3 .mm-item { display: grid; grid-template-columns: 1fr; align-items: center; min-height: 64px; padding: 0; color: var(--dark); }
.mm-v3 .mm-name { font-family: var(--font-display); font-size: 30px; line-height: 1.15; letter-spacing: -0.012em; font-weight: 400; }
.mm-v3 .mm-second { display: flex; flex-direction: column; gap: 0; margin: auto 0; padding: 32px 0; }
.mm-v3 .mm-second a { font-family: var(--font-ui); font-size: 15px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dark); min-height: 56px; margin: -4px 0; display: inline-flex; align-items: center; }
.mm-v3 .mm-facts { margin-top: 0; padding: 12px 0 20px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-ui); font-size: 13.5px; color: var(--muted, #6b6258); }
.mm-v3 .mm-open { color: var(--dark); font-weight: 400; display: inline-flex; align-items: center; gap: 8px; }
.mm-v3 .mm-dot { width: 7px; height: 7px; border-radius: 50%; background: #2e9e5b; flex: none; }
.mm-v3 .mm-open.is-closed .mm-dot { background: #b8b0a6; }
.mm-v3 .mm-item, .mm-v3 .mm-second, .mm-v3 .mm-facts { opacity: 0; transform: translateY(10px);
  transition: opacity 260ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)), transform 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(40ms + var(--i, 0) * 35ms); }
.mobile-menu.open .mm-v3 .mm-item, .mobile-menu.open .mm-v3 .mm-second, .mobile-menu.open .mm-v3 .mm-facts { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mm-v3 .mm-item, .mm-v3 .mm-second, .mm-v3 .mm-facts { transition: none; opacity: 1; transform: none; } }
body.menu-open #nav { background: var(--paper); box-shadow: none; border-bottom: 0; }
body.menu-open .mobile-menu-actions { padding-left: var(--space-6); padding-right: var(--space-6); }
.hamburger[aria-expanded="true"] { background: transparent; border-color: transparent; box-shadow: none; right: 11px; }
.hamburger[aria-expanded="true"] span { background: var(--dark); width: 25px; height: 1.25px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
@media (max-height: 700px) { .mm-v3 .mm-name { font-size: 24px; } .mm-v3 .mm-item { min-height: 52px; } .mm-v3 .mm-second { padding: 16px 0; } .mm-v3 .mm-second a { min-height: 46px; } .mobile-menu-list.mm-v3 { padding-top: 20px; } }