/* Final presentation layer: native scrolling, a static curved work panel,
   and one precise centre line for the full-screen menu. */
:root {
  --bq-accent: #3b3b3b;
  --bq-accent-soft: #5b5b5b;
  --bq-accent-light: #8b8b8b;
}

::selection {
  background: var(--bq-accent);
  color: #fff;
}

.rail-dot {
  background: var(--bq-accent-light) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bq-accent-light) 18%, transparent) !important;
}

.design-cta-dot,
.mobilebar-cta .design-cta-dot {
  background: #39d98a !important;
  box-shadow: 0 0 0 4px rgba(57, 217, 138, .18) !important;
}

/* The hero is a pinned backdrop: it sticks to the top of the viewport while
   the opaque portfolio card (and every sheet after it) slides up over it.
   The work catalogue is fully opaque now, so the old desktop repaint stall
   from a translucent panel over a sticky hero no longer applies. */
/* The hero scrolls WITH the page (not pinned). A sticky hero stayed put while
   the portfolio card slid up through it, so the card's top edge sliced across
   the hero's name/lede — read as a "cut". In normal flow the card sits in the
   hero's bottom margin and the two move together, so nothing is sliced. */
#design > .hero {
  position: relative !important;
  z-index: 0 !important;
}

/* From the biography note onward, opaque content owns the canvas. */
#design > .practice-note,
#design > .practice-note ~ * {
  position: relative;
  z-index: 8;
  background: var(--bg) !important;
  isolation: isolate;
}

#design > .practice-note {
  box-shadow: 0 -34px 90px -68px rgba(0, 0, 0, .92);
}

/* Retired rooms stay out of both the page and navigation. */
#panjamor,
#work,
#brandboard,
[data-route="panjamor"],
[data-route="work"],
[data-route="brandboard"] {
  display: none !important;
}

/* Portfolio: one static curved hand-off from the hero. The surface is opaque
   enough to avoid a full-height backdrop-filter repaint while scrolling. */
#design > .section.work {
  position: relative;
  z-index: 6;
  width: calc(100% - clamp(20px, 2.5vw, 42px));
  margin-inline: auto !important;
  margin-top: clamp(-52px, -4.5vh, -34px) !important;
  padding-top: clamp(72px, 8vw, 112px) !important;
  border-radius: clamp(30px, 4.5vw, 64px) clamp(30px, 4.5vw, 64px) 0 0 !important;
  isolation: isolate;
  overflow: clip;
}

#design > .section.work::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  pointer-events: none;
}

#design > .section.work > * {
  position: relative;
  z-index: 1;
}

/* The ambient dot grid (body::after) rides ON the card too, so the surface
   keeps the same paper texture as the room around it. */
:root[data-theme="dark"] #design > .section.work {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .055), transparent 28rem),
    #101010 !important;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  box-shadow:
    0 -28px 78px -50px rgba(0, 0, 0, .9),
    inset 0 1px rgba(255, 255, 255, .045);
}

:root[data-theme="light"] #design > .section.work {
  background:
    radial-gradient(circle, rgba(0, 0, 0, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    radial-gradient(circle at 90% 0%, rgba(39, 39, 87, .055), transparent 26rem),
    #f4f3f0 !important;
  border: 1px solid rgba(39, 39, 87, .12);
  border-bottom: 0;
  box-shadow: 0 -24px 64px -50px rgba(39, 39, 87, .24);
}

/* =========================================================
   v26 — the hero is a fixed backdrop; the portfolio card lands on top of it

   The hero pins under everything (sticky, z:0) and the work card — plus every
   section after it — slides over the pinned hero like a sheet of paper.
   Sticky keeps document geometry identical, so anchors, reveals and the
   masonry maths are untouched. (The sticky declaration itself lives in the
   single #design > .hero rule near the top of this file.)
   ========================================================= */

/* Everything after the hero must be an opaque sheet, or the pinned hero would
   show through. Each sheet carries the same dot grid the body::after layer
   painted here before. */
#design > .section {
  position: relative;
  z-index: 2;
}

#design > .section:not(.work) {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg);
}

:root[data-theme="light"] #design > .section:not(.work) {
  background:
    radial-gradient(circle, rgba(0, 0, 0, .045) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg);
}

/* Inside the fixed menu stage the sticky offset is lost — freeze the hero at
   the displacement it had when the menu opened (set by menu-stage.js). */
body.menu-open .bq-page-stage #design > .hero {
  transform: translate3d(0, var(--bq-hero-shift, 0px), 0) !important;
}

/* =========================================================
   Light-mode footer: a clean white slab.

   The base stylesheet ships the footer as a self-contained dark "island"
   (its own inverted variable set). In light mode we flip those variables so
   every child that reads --ink / --line / --gold turns dark-on-white, drop
   the dot texture, and keep the layout untouched — plain and quiet.
   ========================================================= */
:root[data-theme="light"] .footer.footer-v249 {
  --bg: #f4f3f0;
  --surface: #eae9e5;
  --card-bg: #f4f3f0;
  --ink: #17110c;
  --ink-2: #2a2620;
  --ink-soft: #5f5c55;
  --ink-muted: #8f8b82;
  --line: rgba(23, 17, 12, .14);
  --line-soft: rgba(23, 17, 12, .07);
  --gold: #17110c;
  --gold-ink: #17110c;
  --ember: #17110c;
  color-scheme: light;
  background-color: #f4f3f0 !important;   /* match the site's paper, not pure white */
  background-image: none !important;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
}

:root[data-theme="light"] .footer.footer-v249 .footer-cta-title {
  color: var(--ink) !important;
}

:root[data-theme="light"] .footer.footer-v249 .footer-cta-title em {
  color: var(--ink-soft) !important;
}

:root[data-theme="light"] .footer.footer-v249 .footer-cta-btn {
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

:root[data-theme="light"] .footer.footer-v249 .footer-cta-btn:hover {
  background: var(--ink) !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .footer.footer-v249 .footer-bq,
:root[data-theme="light"] .footer.footer-v249 .footer-email {
  color: var(--ink) !important;
}

/* Menu: keep only the requested identity, four rooms and contact action. */
.mobile-menu .mm-right,
.mobile-menu .mm-top-label,
.mobile-menu .mm-link .mm-n,
.mobile-menu .mm-link > i,
.mobile-menu .mm-link::before,
.mobile-menu .mm-link::after {
  display: none !important;
}

.mobile-menu .mobile-sheet {
  grid-template-columns: minmax(0, 1fr) !important;
}

.mobile-menu .mm-left,
.mobile-menu .mm-top,
.mobile-menu .mm-foot,
.mobile-menu .mm-socs {
  align-items: center !important;
  text-align: center !important;
}

.mobile-menu .mm-top {
  position: relative !important;
  width: 100% !important;
  justify-content: center !important;
}

/* The name itself—not the avatar/name combination—sits on the menu centre
   line. The portrait remains a quiet signature just before it. */
.mobile-menu .mm-logo {
  position: relative !important;
  width: max-content !important;
  min-height: 46px;
  margin-inline: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
}

.mobile-menu .mm-logo-av {
  position: absolute !important;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%);
}

.mobile-menu .mm-logo-txt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: start !important;
}

.mobile-menu .mm-logo-name,
.mobile-menu .mm-logo-role {
  width: auto !important;
  text-align: start !important;
}

.mobile-menu .mm-logo-name {
  order: 0 !important;
}

.mobile-menu .mm-logo span.mm-logo-role {
  order: 1 !important;
  margin: 3px 0 0 !important;
}

/* Reset the inherited two-column menu rows so every visible label shares the
   same exact centre axis as the name and contact action. */
.mobile-menu .mm-nav {
  width: min(100%, 880px) !important;
  margin-inline: auto !important;
  align-items: stretch !important;
  justify-content: center !important;
  text-align: center !important;
}

.mobile-menu .mm-link,
.mobile-menu .mm-link.is-active,
.mobile-menu .mm-link[data-route].is-active {
  display: flex !important;
  grid-template-columns: none !important;
  width: 100% !important;
  padding-inline: clamp(14px, 1.6vw, 22px) !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.mobile-menu .mm-link .mm-link-text {
  width: auto !important;
  text-align: center !important;
  transform: none !important;
}

.mobile-menu .mm-link:hover .mm-link-text,
.mobile-menu .mm-link:focus-visible .mm-link-text,
.mobile-menu .mm-link.is-active .mm-link-text,
.mobile-menu .mm-link[data-route].is-active .mm-link-text {
  transform: none !important;
}

.mobile-menu .mm-foot {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: min(100%, 880px) !important;
  max-width: 880px !important;
  margin-inline: auto !important;
  align-self: center !important;
}

.mobile-menu .mm-touch {
  align-self: center !important;
  margin-inline: auto !important;
}

.mobile-menu .mm-socs {
  justify-content: center !important;
  width: 100% !important;
}

.section-num i,
.hero-services-ai i {
  color: var(--ink-soft) !important;
}

:focus-visible {
  outline: 2px solid var(--bq-accent-light) !important;
  outline-offset: 4px;
}

@media (max-width: 820px) {
  #design > .section.work {
    width: calc(100% - 12px);
    margin-top: -28px !important;
    padding-top: 52px !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 -24px 64px -42px rgba(0, 0, 0, .82);
  }

  .mobile-menu .mm-nav {
    width: 100% !important;
  }
}

@media (max-width: 360px) {
  .mobile-menu .mm-logo-av {
    display: none !important;
  }
}

/* =========================================================
   v24 — Bqurtas stage menu

   One spatial gesture does the work: the live page recedes as an editorial
   card and reveals a restrained black menu bed. Opening and closing share the
   same timing, so the interaction feels causal instead of decorative.
   ========================================================= */

.bq-page-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
}

#mobileMenu.mobile-menu,
[dir="rtl"] #mobileMenu.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: block !important;
  overflow: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background: #101011 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity .16s cubic-bezier(.15, .2, .1, 1),
    visibility 0s linear .9s !important;
}

#mobileMenu.mobile-menu.is-open,
[dir="rtl"] #mobileMenu.mobile-menu.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    opacity .12s cubic-bezier(.15, .2, .1, 1),
    visibility 0s linear 0s !important;
}

#mobileMenu .mobile-sheet {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: none !important;
  pointer-events: none;
}

#mobileMenu .mobile-sheet::before,
#mobileMenu .mm-left::before {
  display: none !important;
  content: none !important;
}

#mobileMenu .mm-left {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  display: flex !important;
  width: max(33.333vw, 390px) !important;
  min-height: 100% !important;
  padding:
    clamp(30px, 4.2vh, 48px)
    clamp(34px, 4vw, 68px)
    clamp(28px, 4vh, 46px) !important;
  /* The menu is a single fitted composition — no inner scroll. */
  overflow: hidden !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
  justify-content: center;
  border: 0 !important;
  background: #101011 !important;
  color: #f3f2ef;
  opacity: 0;
  transform: translate3d(110px, 0, 0);
  transition:
    transform .8s cubic-bezier(.15, .2, .1, 1),
    opacity .38s ease !important;
  pointer-events: auto;
  will-change: transform, opacity;
}

#mobileMenu .mm-left::-webkit-scrollbar {
  display: none;
}

#mobileMenu.is-ready .mm-left {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .04s, .04s !important;
}

#mobileMenu.is-closing .mm-left {
  transition-delay: 0s, .18s !important;
}

body.menu-open {
  background: #101011 !important;
}

body.menu-open .bq-page-stage {
  position: fixed;
  inset: 0;
  z-index: 1210;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transform: scale(1) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  transition:
    transform .8s cubic-bezier(.15, .2, .1, 1),
    box-shadow .8s cubic-bezier(.15, .2, .1, 1),
    border-radius .8s cubic-bezier(.15, .2, .1, 1);
  will-change: transform;
}

body.menu-open .bq-page-stage .main {
  width: 100%;
  transform: translate3d(0, var(--bq-menu-scroll-shift, 0), 0) !important;
}

body.menu-revealed .bq-page-stage {
  border-radius: 2px;
  box-shadow:
    0 80px 145px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255, 255, 255, .08);
  transform: scale(.76) translate3d(min(-31vw, -430px), -2vh, 0);
}

/* The floating dock is hidden while the menu is open — the close pill (×) is
   how you dismiss it, so the bar should not sit over the menu curtain. */
body.menu-open .rail,
body.menu-open .mobilebar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
}

/* The right-hand index keeps one exact optical axis: identity, rooms and CTA. */
#mobileMenu .mm-top {
  position: static !important;
  flex: 0 0 auto;
  width: 100% !important;
  min-height: 56px;
  justify-content: center !important;
  color: #f3f2ef;
}

#mobileMenu .mm-logo {
  color: #f3f2ef !important;
  opacity: 0;
  transform: translate3d(42px, 0, 0) !important;
  transition:
    opacity .42s cubic-bezier(.16, 1, .3, 1),
    transform .62s cubic-bezier(.16, 1, .3, 1) !important;
}

#mobileMenu .mm-logo-av {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  filter: grayscale(1);
}

#mobileMenu .mm-logo-name {
  color: #f3f2ef !important;
  font-size: clamp(21px, 2vw, 28px) !important;
  line-height: 1 !important;
}

#mobileMenu .mm-logo span.mm-logo-role {
  color: rgba(243, 242, 239, .56) !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1.25 !important;
  text-transform: uppercase;
}

#mobileMenu.is-ready .mm-logo {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
  transition-delay: .13s, .13s !important;
}

#mobileMenu .mm-nav {
  flex: 1 0 auto !important;
  display: flex !important;
  width: min(100%, 520px) !important;
  max-width: 520px !important;
  margin: clamp(42px, 8vh, 94px) auto !important;
  gap: clamp(4px, 1vh, 12px) !important;
  align-items: stretch !important;
  justify-content: center !important;
  border: 0 !important;
}

#mobileMenu .mm-link,
#mobileMenu .mm-link.is-active,
#mobileMenu .mm-link[data-route].is-active,
#mobileMenu .mm-link:hover,
#mobileMenu .mm-link:focus-visible {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(7px, 1.1vh, 12px) 0 !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #f3f2ef !important;
  font-style: normal !important;
  opacity: 0;
  transform: translate3d(72px, 0, 0) !important;
  transition:
    opacity .42s cubic-bezier(.16, 1, .3, 1),
    transform .62s cubic-bezier(.16, 1, .3, 1) !important;
  overflow: visible !important;
}

#mobileMenu .mm-link .mm-link-text,
#mobileMenu .mm-link:hover .mm-link-text,
#mobileMenu .mm-link:focus-visible .mm-link-text,
#mobileMenu .mm-link.is-active .mm-link-text,
#mobileMenu .mm-link[data-route].is-active .mm-link-text {
  position: relative;
  width: auto !important;
  color: #f3f2ef !important;
  font-family: 'Manrope', 'Noto Kufi Arabic', sans-serif !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-style: normal !important;
  font-weight: 430 !important;
  letter-spacing: -.045em !important;
  line-height: 1.04 !important;
  text-align: center !important;
  transform: none !important;
  transition: color .37s cubic-bezier(.52, .01, .16, 1) !important;
}

#mobileMenu .mm-link .mm-link-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .3s cubic-bezier(.25, 0, .4, 1);
}

#mobileMenu .mm-link:hover .mm-link-text::after,
#mobileMenu .mm-link:focus-visible .mm-link-text::after,
#mobileMenu .mm-link.is-active .mm-link-text::after,
#mobileMenu .mm-link[aria-current="page"] .mm-link-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

#mobileMenu.is-ready .mm-link {
  opacity: 1;
  transform: translate3d(0, 0, 0) !important;
}

#mobileMenu.is-ready .mm-link[data-route="design"] { transition-delay: .16s, .16s !important; }
#mobileMenu.is-ready .mm-link[data-route="blog"] { transition-delay: .215s, .215s !important; }
#mobileMenu.is-ready .mm-link[data-route="bio"] { transition-delay: .27s, .27s !important; }
#mobileMenu.is-ready .mm-link[data-route="contact"] { transition-delay: .325s, .325s !important; }

#mobileMenu.is-closing .mm-link,
#mobileMenu.is-closing .mm-logo,
#mobileMenu.is-closing .mm-foot {
  transition-delay: 0s !important;
}

#mobileMenu .mm-foot {
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 520px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  transform: translate3d(48px, 0, 0);
  transition:
    opacity .4s cubic-bezier(.16, 1, .3, 1),
    transform .62s cubic-bezier(.16, 1, .3, 1) !important;
}

#mobileMenu.is-ready .mm-foot {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .38s, .38s !important;
}

#mobileMenu .mm-touch {
  min-height: 44px;
  padding: 11px 20px !important;
  border: 1px solid rgba(243, 242, 239, .34) !important;
  border-radius: 999px;
  color: #f3f2ef !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  font-style: normal !important;
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease !important;
}

#mobileMenu .mm-touch:hover,
#mobileMenu .mm-touch:focus-visible {
  border-color: #f3f2ef !important;
  background: #f3f2ef !important;
  color: #101011 !important;
}

#mobileMenu .mm-socs {
  gap: 15px !important;
  margin-top: 17px;
}

#mobileMenu .mm-socs a {
  color: rgba(243, 242, 239, .48) !important;
  font-size: 10px !important;
  letter-spacing: .06em;
  transition: color .3s ease !important;
}

#mobileMenu .mm-socs a:hover,
#mobileMenu .mm-socs a:focus-visible {
  color: #f3f2ef !important;
}

/* The close control sits fully on-screen in the top-left corner (LTR and RTL),
   never clipped by the viewport edge. */
#mobileMenu .mobile-menu-close,
[dir="rtl"] #mobileMenu .mobile-menu-close {
  position: absolute !important;
  left: clamp(20px, 3vw, 40px) !important;
  right: auto !important;
  top: clamp(20px, 3.4vh, 40px) !important;
  z-index: 1301;
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f3f2ef !important;
  color: #101011 !important;
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .8);
  opacity: 0;
  transform: scale(.55) !important;
  transition:
    opacity .3s ease,
    transform .45s cubic-bezier(.16, 1, .3, 1),
    background .3s ease !important;
}

#mobileMenu.is-ready .mobile-menu-close,
[dir="rtl"] #mobileMenu.is-ready .mobile-menu-close {
  opacity: 1;
  transform: scale(1) !important;
  transition-delay: .3s, .3s, 0s !important;
}

#mobileMenu .mobile-menu-close:hover,
#mobileMenu .mobile-menu-close:focus-visible,
[dir="rtl"] #mobileMenu .mobile-menu-close:hover,
[dir="rtl"] #mobileMenu .mobile-menu-close:focus-visible {
  transform: scale(1.1) rotate(90deg) !important;
}

@media (max-width: 820px) {
  body.menu-revealed .bq-page-stage {
    border-radius: 0 18px 18px 0;
    transform: scale(.84) translate3d(-112vw, 0, 0);
  }

  #mobileMenu .mm-left {
    inset: 0 !important;
    width: 100% !important;
    padding:
      max(20px, calc(env(safe-area-inset-top) + 12px))
      clamp(24px, 8vw, 42px)
      max(24px, calc(env(safe-area-inset-bottom) + 18px)) !important;
  }

  #mobileMenu .mobile-menu-close,
  [dir="rtl"] #mobileMenu .mobile-menu-close {
    left: 20px !important;
    top: max(22px, calc(env(safe-area-inset-top) + 14px)) !important;
    width: 42px !important;
    height: 42px !important;
    transform: scale(.6) !important;
  }

  #mobileMenu.is-ready .mobile-menu-close,
  [dir="rtl"] #mobileMenu.is-ready .mobile-menu-close {
    transform: scale(1) !important;
  }

  #mobileMenu .mobile-menu-close:hover,
  #mobileMenu .mobile-menu-close:focus-visible,
  [dir="rtl"] #mobileMenu .mobile-menu-close:hover,
  [dir="rtl"] #mobileMenu .mobile-menu-close:focus-visible {
    transform: scale(1.08) !important;
  }

  #mobileMenu .mm-top {
    min-height: 52px;
  }

  #mobileMenu .mm-nav {
    flex: 1 0 auto !important;
    width: 100% !important;
    margin: clamp(38px, 8vh, 72px) auto clamp(30px, 6vh, 54px) !important;
    gap: clamp(3px, 1vh, 9px) !important;
  }

  #mobileMenu .mm-link,
  #mobileMenu .mm-link.is-active,
  #mobileMenu .mm-link[data-route].is-active,
  #mobileMenu .mm-link:hover,
  #mobileMenu .mm-link:focus-visible {
    padding: clamp(7px, 1.2vh, 12px) 0 !important;
  }

  #mobileMenu .mm-link .mm-link-text,
  #mobileMenu .mm-link:hover .mm-link-text,
  #mobileMenu .mm-link:focus-visible .mm-link-text,
  #mobileMenu .mm-link.is-active .mm-link-text {
    font-size: clamp(34px, 11vw, 50px) !important;
  }

  #mobileMenu .mm-foot {
    width: 100% !important;
  }
}

@media (max-width: 360px), (max-height: 620px) {
  #mobileMenu .mm-logo-av {
    display: none !important;
  }

  #mobileMenu .mm-logo-name {
    font-size: 20px !important;
  }

  #mobileMenu .mm-nav {
    margin-block: 28px 22px !important;
  }

  #mobileMenu .mm-link .mm-link-text {
    font-size: clamp(30px, 9vh, 40px) !important;
  }

  #mobileMenu .mm-socs {
    margin-top: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobileMenu.mobile-menu,
  #mobileMenu.mobile-menu.is-open,
  #mobileMenu .mm-left,
  #mobileMenu .mm-logo,
  #mobileMenu .mm-link,
  #mobileMenu .mm-foot,
  #mobileMenu .mobile-menu-close,
  body.menu-open .bq-page-stage,
  body.menu-revealed .bq-page-stage {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  body.menu-open .bq-page-stage {
    opacity: 0 !important;
    transform: none !important;
  }

  #mobileMenu .mm-left {
    inset: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #mobileMenu .mm-logo,
  #mobileMenu .mm-link,
  #mobileMenu .mm-foot {
    opacity: 1 !important;
    transform: none !important;
  }

  #mobileMenu .mobile-menu-close,
  [dir="rtl"] #mobileMenu .mobile-menu-close {
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  #mobileMenu .mobile-menu-close,
  [dir="rtl"] #mobileMenu .mobile-menu-close {
    transform: none !important;
  }
}

/* =========================================================
   v25 — Fixed rounded viewport frame

   The whole site sits inside one pinned, rounded window. Content scrolls
   beneath the frame and is masked at every edge, so the shape holds at the
   top AND ends rounded at the bottom of the screen. A pure overlay: layout,
   native scrolling and Lighthouse behaviour stay untouched.
   ========================================================= */

:root {
  --bq-frame-gap: clamp(10px, 1.5vw, 22px);
  --bq-frame-r: clamp(20px, 3vw, 44px);
  --bq-frame-bed: #060607;
  --bq-frame-line: rgba(255, 255, 255, .14);
}

:root[data-theme="light"] {
  --bq-frame-bed: #14130f;
  --bq-frame-line: rgba(255, 255, 255, .22);
}

/* Overscroll rubber-banding shows the frame bed, not raw page colour. */
html {
  background: var(--bq-frame-bed);
}

.bq-frame {
  position: fixed;
  top: calc(var(--bq-frame-gap) + env(safe-area-inset-top, 0px));
  right: calc(var(--bq-frame-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--bq-frame-gap) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--bq-frame-gap) + env(safe-area-inset-left, 0px));
  /* Above the menu bed (1220) so the rounded frame stays wrapped around the menu
     too; still below the floating dock (1300). Transparent + pointer-events:none,
     so it never blocks content or clicks. */
  z-index: 1250;
  pointer-events: none;
  border-radius: var(--bq-frame-r);
  /* Hairline ring + a bed band that masks the gap and corners. The spread only
     needs to reach past the viewport edge (the gap is ≤22px), so a small fixed
     band replaces the old 200vmax fill — that huge shadow forced a full-screen
     repaint on every scroll frame under the sticky hero and tore the scroll. */
  box-shadow:
    0 0 0 1px var(--bq-frame-line),
    0 0 0 64px var(--bq-frame-bed);
  transition: opacity .3s ease;
}

/* The rounded frame stays wrapped around the menu too (it no longer hides on
   open), matching the framed website. */

/* Floating chrome steps inside the window so it never crosses the frame line. */
.rail {
  bottom: calc(var(--bq-frame-gap) + 10px) !important;
}

.mobilebar {
  bottom: calc(var(--bq-frame-gap) + 10px + env(safe-area-inset-bottom, 0px)) !important;
}

.to-top {
  right: calc(var(--bq-frame-gap) + 16px) !important;
  bottom: calc(var(--bq-frame-gap) + 16px) !important;
}

[dir="rtl"] .to-top {
  right: auto !important;
  left: calc(var(--bq-frame-gap) + 16px) !important;
}

/* Lift the back-to-top control clear of the floating dock so the two never
   overlap (that overlap was the "go up" button's problem). */
.to-top {
  bottom: calc(var(--bq-frame-gap) + var(--dock-h, 64px) + 22px) !important;
  z-index: 720 !important;
}

/* =========================================================
   v28 — Flat by request: no decorative shadows anywhere.

   The rounded viewport frame keeps its structural bed mask (it isn't read as a
   shadow); everything else goes flat.
   ========================================================= */
body *:not(.bq-frame) {
  box-shadow: none !important;
}

/* The card's top seam over the hero was a drawn line + gradient; drop it so the
   portfolio card meets the hero cleanly with no cut. */
#design > .section.work::before {
  display: none !important;
}
#design > .section.work {
  border-top: 0 !important;
}

/* =========================================================
   v28 — Light stage menu

   The bed matches the site (a paper tone a shade darker than the page, so the
   live page reads as a lighter card on top). Text turns dark; the close control
   sits centred on the seam between the shown room and the menu index.
   ========================================================= */
:root {
  --bq-menu-bed: #f4f3f0;   /* exactly the site's paper — the card's border keeps it legible */
}
:root[data-theme="dark"] {
  --bq-menu-bed: #101011;
}

/* Only the index column and the page backdrop carry the bed; the menu root is
   transparent so the receding page-card shows through it. The menu is lifted
   above the card (so the close pill, which lives inside the menu, can sit over
   the card at the seam) — the two never overlap, so nothing is hidden. */
body.menu-open,
#mobileMenu .mm-left {
  background: var(--bq-menu-bed) !important;
}

#mobileMenu.mobile-menu,
[dir="rtl"] #mobileMenu.mobile-menu {
  background: transparent !important;
}

body.menu-open #mobileMenu.mobile-menu,
body.menu-revealed #mobileMenu.mobile-menu {
  z-index: 1220 !important;
}

#mobileMenu .mm-left {
  color: var(--ink) !important;
}

/* The sheet's blur was frosting the page-card behind the now-transparent menu;
   drop it so the shown room reads crisply. */
#mobileMenu .mobile-sheet {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* While the menu is open the page-card is fixed but the body keeps its locked
   full height, which left the root scrollbar showing behind the menu. Clip it. */
html:has(body.menu-open) {
  overflow: hidden !important;
}

/* A CLOSED menu must never catch clicks. Its "Get in touch" foot link kept
   pointer-events and sat at the bottom-right, overlapping the back-to-top
   control — so tapping "go up" hijacked to the contact room. Force the whole
   closed menu inert. (.is-open stays interactive; the close animation keeps
   .is-open until it finishes, so it isn't cut short.) */
#mobileMenu.mobile-menu:not(.is-open),
#mobileMenu.mobile-menu:not(.is-open) * {
  pointer-events: none !important;
  visibility: hidden !important;
}

/* Every label, link and icon in the index reads on the light bed. */
#mobileMenu .mm-top,
#mobileMenu .mm-logo,
#mobileMenu .mm-logo *,
#mobileMenu .mm-link,
#mobileMenu .mm-link *,
#mobileMenu .mm-link .mm-link-text,
#mobileMenu .mm-foot,
#mobileMenu .mm-foot *,
#mobileMenu .mm-socs a,
#mobileMenu .mm-socs a * {
  color: var(--ink) !important;
}

/* The current room stays in the index (it's no longer held hidden) and is
   marked in the site's accent green, so you can see which room you're in. */
#mobileMenu.is-ready .mm-link.is-active,
#mobileMenu.is-ready .mm-link[data-route].is-active,
#mobileMenu.is-open .mm-link.is-active,
#mobileMenu.is-open .mm-link[data-route].is-active {
  opacity: 1 !important;
  transform: none !important;
}
#mobileMenu .mm-link.is-active .mm-link-text,
#mobileMenu .mm-link[data-route].is-active .mm-link-text {
  color: #b45c3c !important;   /* the site's warm terracotta accent — fits the paper palette */
  font-weight: 640 !important;
}
#mobileMenu .mm-link.is-active .mm-link-text::after,
#mobileMenu .mm-link[data-route].is-active .mm-link-text::after {
  transform: scaleX(1) !important;
  transform-origin: left center !important;
  background: #b45c3c !important;
}

/* The live page-card stays on screen, a shade lighter than the bed with a crisp
   edge, so the shown room is unmistakable — no shadow required. */
body.menu-revealed .bq-page-stage {
  background: var(--bg) !important;
  border: 1px solid rgba(0, 0, 0, .22) !important;
  border-radius: 16px !important;
}
:root[data-theme="dark"] body.menu-revealed .bq-page-stage {
  border-color: rgba(255, 255, 255, .16) !important;
}

/* The index column is allowed to overflow so the close pill can straddle the
   seam without being clipped (.mm-left used to clip its outer half). The menu
   is a fitted composition, so nothing else spills. */
#mobileMenu .mm-left {
  overflow: visible !important;
}

/* Close control: a dark pill centred on the seam (the index's inner edge = its
   left: 0), half over the shown room and half over the menu. It's absolute
   (fixed would anchor to .mm-left's own transform, not the viewport). */
#mobileMenu .mobile-menu-close,
[dir="rtl"] #mobileMenu .mobile-menu-close {
  position: absolute !important;
  left: 0 !important;   /* the seam = .mm-left's inner edge */
  right: auto !important;
  top: 50% !important;
  z-index: 1240 !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  transform: translate(-50%, -50%) scale(.55) !important;
}
#mobileMenu.is-ready .mobile-menu-close,
[dir="rtl"] #mobileMenu.is-ready .mobile-menu-close {
  transform: translate(-50%, -50%) scale(1) !important;
}
#mobileMenu .mobile-menu-close:hover,
#mobileMenu .mobile-menu-close:focus-visible,
[dir="rtl"] #mobileMenu .mobile-menu-close:hover,
[dir="rtl"] #mobileMenu .mobile-menu-close:focus-visible {
  transform: translate(-50%, -50%) scale(1.1) rotate(90deg) !important;
}

/* Mobile: keep the room on screen (don't fling it fully off) beside a right-hand
   menu column, with the close on the seam between them. */
@media (max-width: 820px) {
  /* Menu index takes the right 56vw; the room-card shrinks into the left 44vw so
     the two sit side by side with the close pill on the seam between them. */
  #mobileMenu .mm-left {
    inset: 0 0 0 auto !important;
    width: 50vw !important;
  }
  body.menu-revealed .bq-page-stage {
    transform-origin: left center !important;
    transform: scale(.5) translate3d(0, 0, 0) !important;
    border-radius: 24px !important;
  }
  #mobileMenu .mm-link .mm-link-text,
  #mobileMenu .mm-link:hover .mm-link-text,
  #mobileMenu .mm-link:focus-visible .mm-link-text,
  #mobileMenu .mm-link.is-active .mm-link-text {
    font-size: clamp(22px, 6vw, 34px) !important;
  }
  #mobileMenu .mobile-menu-close,
  [dir="rtl"] #mobileMenu .mobile-menu-close {
    left: 0 !important;   /* the seam = .mm-left's inner edge (the 50/50 split) */
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.6) !important;
  }
  #mobileMenu.is-ready .mobile-menu-close,
  [dir="rtl"] #mobileMenu.is-ready .mobile-menu-close {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  #mobileMenu .mobile-menu-close:hover,
  #mobileMenu .mobile-menu-close:focus-visible,
  [dir="rtl"] #mobileMenu .mobile-menu-close:hover,
  [dir="rtl"] #mobileMenu .mobile-menu-close:focus-visible {
    transform: translate(-50%, -50%) scale(1.08) rotate(90deg) !important;
  }
}

/* =========================================================
   v28 — Footer: photo removed, identity centred and a touch larger.
   ========================================================= */
.footer-signature {
  align-items: center !important;
  text-align: center !important;
}
.footer-av {
  display: none !important;
}
.footer-signature .footer-bq {
  font-size: clamp(52px, 6vw, 78px) !important;
}
.footer-signature .footer-role {
  font-size: clamp(13px, 1.4vw, 16px) !important;
}
.footer-email {
  justify-content: center !important;
  font-size: clamp(19px, 1.9vw, 24px) !important;
}