/* 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);
  /* The mat around the page is black, so the light page reads as a single card
     framed by a dark surround. */
  --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;
}

/* =========================================================
   v30 — release hardening: narrow phones, media previews,
   language typography, and reduced-motion guarantees.
   ========================================================= */
.lb-img-wrap {
  width: min(92vw, 1200px) !important;
  height: min(88dvh, 920px) !important;
  max-width: 92vw !important;
  max-height: 88dvh !important;
  padding: 50px 58px 54px !important;
}
.lb-img-wrap > img,
.lb-img-wrap > video {
  display: block !important;
  max-width: 100% !important;
  max-height: calc(88dvh - 104px) !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .58) !important;
}
.lb-close {
  top: 8px !important;
  right: 8px !important;
}
.lb-caption {
  bottom: 15px !important;
  left: 52px !important;
  right: 52px !important;
}

:root[data-lang="ku"] body {
  font-family: "Noto Naskh Arabic", Manrope, sans-serif;
}
:root[data-lang="ku"] .hero-sign,
:root[data-lang="ku"] .hero-name,
:root[data-lang="ku"] .local-faq-head h3,
:root[data-lang="ku"] .local-seo-fact h3,
:root[data-lang="ku"] .local-seo-title {
  font-family: "Noto Kufi Arabic", "Noto Naskh Arabic", sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 820px) {
  .cookie-card,
  [dir="rtl"] .cookie-card {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--dock-h, 64px) + 26px) !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(14px) !important;
  }
  .cookie-card.is-shown,
  [dir="rtl"] .cookie-card.is-shown {
    transform: translateY(0) !important;
  }
  .lb-img-wrap {
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - 28px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 28px) !important;
    padding: 48px 38px 56px !important;
  }
  .lb-img-wrap > img,
  .lb-img-wrap > video {
    max-height: calc(100dvh - 132px) !important;
  }
  .lb-caption {
    left: 38px !important;
    right: 38px !important;
  }
}

@media (max-width: 374px) {
  .mobilebar {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding-inline: 10px !important;
    justify-content: space-between !important;
    gap: 2px !important;
  }
  .mobilebar-social-wrap,
  #railLatestM {
    display: none !important;
  }
  .mobilebar .mobilebar-btn,
  .mobilebar .mobilebar-cta {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex: 0 0 42px !important;
  }
  .section.work .tabs {
    grid-template-columns: repeat(4, 48px) !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .section.work .tabs .tab {
    width: 48px !important;
    min-width: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-portrait,
  .hero-spark,
  .hero-marquee-track,
  .hero-scrolldown .mouse-wheel {
    animation: none !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   v31 — Identity removed from the menu curtain and the footer.
   The name, avatar and menu-cover signature are gone from the
   markup, so the email is now the footer's headline: it takes
   the size the signature used to carry.
   ========================================================= */

/* The menu top row is just the label and the close button now. */
#mobileMenu .mm-top {
  justify-content: space-between !important;
}

/* Email as the footer headline. It is a single unbreakable-ish
   string, so it must be allowed to wrap on narrow phones rather
   than push the footer into a horizontal scroll. */
.footer-v249 .footer-signature .footer-email,
.footer-signature .footer-email,
.footer-email {
  font-size: clamp(28px, 4.2vw, 54px) !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  justify-content: center !important;
  gap: 14px !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  margin-top: 10px !important;
}
.footer-email i {
  font-size: 0.42em !important;
}

/* The role now sits above the email as a small eyebrow. */
.footer-v249 .footer-signature .footer-role,
.footer-signature .footer-role {
  font-size: clamp(12px, 1.3vw, 14px) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: .6 !important;
}

@media (max-width: 760px) {
  .footer-v249 .footer-signature .footer-email,
  .footer-signature .footer-email,
  .footer-email {
    font-size: clamp(21px, 6.4vw, 34px) !important;
    gap: 10px !important;
  }
}

/* =========================================================
   v32 — The rounded window actually contains the page.

   The frame used to mask the gap with a 64px box-shadow spread at z-index
   1250. Two things went wrong with that: scrolled content was painting over
   the band (so the page rode ON the shape instead of disappearing INTO it),
   and every full-screen layer above 1250 — the blog reader, the lightbox,
   the dashboard, the page transition — covered the frame completely.

   Now the bed is a real, solid border on a full-viewport fixed box, and the
   frame sits above every other layer. It is still pointer-events:none, so
   being on top costs nothing: it draws the bed and the hairline, and every
   scrolling element, overlay and room is visually clipped inside it.
   ========================================================= */
.bq-frame {
  inset: 0 !important;
  border-style: solid !important;
  border-color: var(--bq-frame-bed) !important;
  border-top-width: calc(var(--bq-frame-gap) + env(safe-area-inset-top, 0px)) !important;
  border-right-width: calc(var(--bq-frame-gap) + env(safe-area-inset-right, 0px)) !important;
  border-bottom-width: calc(var(--bq-frame-gap) + env(safe-area-inset-bottom, 0px)) !important;
  border-left-width: calc(var(--bq-frame-gap) + env(safe-area-inset-left, 0px)) !important;
  border-radius: calc(var(--bq-frame-r) + var(--bq-frame-gap)) !important;
  /* Hairline just inside the mat, following the inner radius; a soft inset
     vignette lifts the light page off the mat so it reads as one card; and the
     spread fills the four screen corners (the border box is the viewport and
     its outer edge is rounded, so without it the page colour would show through
     as pale wedges on the mat). The spread only has to cover the corner arc. */
  /* No inner hairline: the light page meets the mat directly, so the black
     reads as one flat backdrop rather than an outlined frame shape. The spread
     is the only layer — it fills the four screen corners the rounded outer edge
     would otherwise leave showing the page colour. */
  box-shadow:
    0 0 0 calc(var(--bq-frame-r) + var(--bq-frame-gap)) var(--bq-frame-bed) !important;
  /* Above the reader (100001) and the dashboard (100000) so nothing crosses the
     window edge. A moderate value + its own compositing layer (translateZ) is
     what makes Safari actually paint the mat over the scrolling page — with a
     near-INT_MAX z-index and no layer, Safari let content ride over the frame. */
  z-index: 2000000 !important;
  transform: translateZ(0) !important;
  pointer-events: none !important;
}

/* =========================================================
   v35 — The framed window is restored (v34 removed it by mistake).

   The rounded window comes back exactly as the v32/v33 build had it: a solid
   bed border on a full-viewport fixed box, above every overlay, drawing the
   bed + the rounded inner cut. Content is clipped inside it on scroll and the
   four screen corners stay filled (no paper wedge). Nothing else changes.
   ========================================================= */

/* =========================================================
   v37 — Portfolio rises over a pinned hero.

   The hero stays put while the portfolio card scrolls up and slides over it,
   instead of both moving together. The work card is already an opaque, rounded
   card that overlaps the hero's base (negative margin, z-index 6), so pinning
   the hero is the only missing piece: the card now rises over it cleanly.
   ========================================================= */
#design > .hero {
  /* The hero is pinned so the work card (and every sheet after it) rises over it
     like a card. Safari composites a sticky element onto its own GPU layer and
     then paints it ABOVE plain, non-composited content — so the portrait +
     signature bled through the covering sheets on Safari even though their
     z-index is higher. The fix is NOT to drop the pin (which loses the effect)
     but to put the covering sheets on their own compositing layer too — see the
     translateZ rule below — so the GPU honours their z-index and covers it. */
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;               /* under the work card (z 6) so it is covered, not sliced */
}

/* Every sheet after the hero must both be opaque (set above) AND live on its own
   compositing layer, or Safari paints the composited sticky hero on top of it.
   translateZ(0) promotes each sheet so the compositor orders them by z-index. */
#design > .section {
  transform: translateZ(0);
}

/* Hard guarantee (belt-and-suspenders with the compositing fix above): once the
   work card has fully covered the hero, hero-pin.js flags it and we hide it.
   A hidden layer cannot bleed through anything, on any engine. visibility keeps
   its sticky flow space, so nothing shifts. */
#design > .hero.is-hero-covered {
  visibility: hidden !important;
}

/* =========================================================
   v38 — The dot grid covers the whole page, not just the cards.

   The ambient dots used to live only on the work card and the sheets after it;
   the hero and the plain canvas were flat paper. The dot grid now sits on the
   page stage itself (the canvas every room and section rides on) and the hero
   goes transparent so the canvas shows through it. Sections keep their own
   matching grid, so the texture is continuous from the very top of the page.
   ========================================================= */
.bq-page-stage {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg) !important;
}

:root[data-theme="light"] .bq-page-stage {
  background:
    radial-gradient(circle, rgba(0, 0, 0, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--bg) !important;
}

/* The hero is the pinned backdrop; letting the canvas (with its dots) show
   through it makes the grid continuous behind the name and portrait too. */
#design > .hero {
  background: transparent !important;
}

/* =========================================================
   v39 — Flat black backdrop, no corner seam.

   The border + border-radius build gave the black a rounded OUTER edge, and
   the corner-fill spread that squared it left a faint seam at each screen
   corner — the black read as an outlined shape. This rebuilds the frame as a
   single rounded window punched out of one flat fill: a rounded-rect pseudo
   (the window) casts a solid, blur-free shadow outward, so the black is one
   continuous surface with square screen corners and no internal line. The
   spread's own outer edge sits off-screen, so nothing of it is ever visible.
   ========================================================= */
.bq-frame {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.bq-frame::before {
  content: "";
  position: absolute;
  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));
  border-radius: var(--bq-frame-r);
  box-shadow: 0 0 0 calc(var(--bq-frame-r) + var(--bq-frame-gap) + 60px) var(--bq-frame-bed);
}

/* =========================================================
   v40 — Menu foot under the rooms; grey accent; role gone; big email.
   ========================================================= */

/* Get in touch + the social links sit directly beneath the room list. The nav
   no longer grows to fill the panel and the foot drops its auto margins, so the
   two groups pack together and the whole block is centred by the panel's own
   justify-content — no more stranded foot at the bottom edge. */
#mobileMenu .mm-nav {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
#mobileMenu .mm-foot {
  flex: 0 0 auto !important;
  margin: clamp(26px, 3.4vh, 40px) 0 0 0 !important;
}

/* The active room is graphite grey, not terracotta. */
#mobileMenu .mm-link.is-active .mm-link-text,
#mobileMenu .mm-link[data-route].is-active .mm-link-text {
  color: #b5b5b5 !important;
}
#mobileMenu .mm-link.is-active .mm-link-text::after,
#mobileMenu .mm-link[data-route].is-active .mm-link-text::after {
  background: #b5b5b5 !important;
}

/* Hover never flips to white — it settles on grey. */
#mobileMenu .mm-touch:hover,
#mobileMenu .mm-touch:focus-visible {
  border-color: #b5b5b5 !important;
  background: #b5b5b5 !important;
  color: #101011 !important;
}
#mobileMenu .mm-socs a:hover,
#mobileMenu .mm-socs a:focus-visible {
  color: #c9c9c9 !important;
}

/* The role line is gone from the footer, so the email is the whole voice —
   large and filling the width. overflow-wrap keeps the long address from
   forcing a horizontal scroll on narrow screens. */
.footer-v249 .footer-signature .footer-email,
.footer-signature .footer-email,
.footer-email {
  font-size: clamp(34px, 9.6vw, 120px) !important;
  margin-top: 0 !important;
  width: 100% !important;
}
@media (max-width: 760px) {
  .footer-v249 .footer-signature .footer-email,
  .footer-signature .footer-email,
  .footer-email {
    font-size: clamp(26px, 10vw, 60px) !important;
  }
}

/* =========================================================
   v41 — Room hover greys, chat + notify panels hug the dock.
   ========================================================= */

/* Hovering a room now tints it the same graphite grey as the active room,
   instead of staying the default off-white. */
#mobileMenu .mm-link:hover .mm-link-text,
#mobileMenu .mm-link:focus-visible .mm-link-text {
  color: #b5b5b5 !important;
}

/* The chat and notification panels used to float with their bottom edge just
   kissing the dock. They now drop lower so they overlap the pill and read as
   anchored to it, and the dock is lifted above them (id-specificity beats the
   class rules that set 84px) so the panels tuck BEHIND the pill instead of
   covering its buttons. Both panels share the value, so they stay aligned. */
.rail {
  z-index: 840 !important;
}
#chat,
#latestPanel {
  bottom: calc(var(--dock-h, 64px) + 4px) !important;
}

/* Mobile portfolio filters were a TRANSPARENT sticky bar (only the chips had a
   background). As the gallery scrolled, the big "All Work" title, the ghost
   "691" and the artwork showed straight THROUGH the gaps and the 60%-opaque
   chips — so the pinned tabs read as sitting *behind* the images instead of on
   top of them. Give the sticky bar its own frosted-glass band (matching the
   chips' liquid-glass look) so it cleanly covers whatever scrolls under it and
   the filters stay clearly above the work. */
@media (max-width:820px){
  .section.work > .tabs-wrap{
    background:color-mix(in srgb, var(--bg) 84%, transparent) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.6) !important;
    backdrop-filter:blur(20px) saturate(1.6) !important;
    padding:10px 0 8px !important;
    box-shadow:0 10px 22px -20px rgba(0,0,0,.45) !important;
  }
}

/* ============================================================================
   v42 — reliability, one type system, and quieter chrome.

   Noto Kufi Arabic carries Latin, extended Latin, Kurdish and Arabic, so one
   locally-hosted family can now serve every language without a flash between
   unrelated faces. Font Awesome is excluded and the Liana wordmark remains the
   one intentional exception.
   ============================================================================ */
body,
body :where(*:not(i):not([class^="fa-"]):not([class*=" fa-"])) {
  font-family: "Noto Kufi Arabic", system-ui, sans-serif !important;
  font-style: normal !important;
}

h1, h2, h3,
.section-title, .tab-header-title, .dash-card-n, .dash-side-meta strong {
  font-weight: 600 !important;
}

:root[lang] .hero-title .hero-name,
:root[lang] .hero-name,
:root[lang] .hero-name *,
:root[lang] .hero-sign,
:root[lang] .hero-sign *,
:root[lang] .splash-name,
:root[lang] .splash-name *,
:root[lang] .profile-card-name,
:root[lang] .rail-logo-name,
:root[lang] .mm-logo-name,
:root[lang] .mm-logo-name *,
:root[lang] .mobile-menu-name,
:root[lang] .footer-bq,
:root[lang] .pencemor-hero-name,
:root[lang] .bio-phil-sign,
:root[lang] .hero-float.is-portrait .hf-title {
  font-family: Liana, "Noto Kufi Arabic", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* The full-screen hero used to be a sticky, permanently composited backdrop.
   That combination could stall Safari and in-app browsers while the large work
   sheet crossed it. Keep the same curved hand-off, but let both surfaces travel
   in normal document flow. */
#design > .hero,
#design > .hero.is-hero-covered {
  position: relative !important;
  top: auto !important;
  z-index: 0 !important;
  visibility: visible !important;
}

#design > .section {
  transform: none !important;
}

/* A little more softness in both the outer page window and the work hand-off. */
:root {
  --bq-frame-r: clamp(30px, 4.2vw, 62px);
}

#design > .section.work {
  border-radius: clamp(40px, 5.4vw, 76px) clamp(40px, 5.4vw, 76px) 0 0 !important;
}

/* One lightweight menu controller now owns the overlay. The page stays in
   normal flow underneath it, avoiding the old fixed-stage + MutationObserver
   feedback loop that could leave scrolling locked. */
body.menu-open .bq-page-stage,
body.menu-revealed .bq-page-stage,
body.menu-closing .bq-page-stage {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  border-radius: 0 !important;
  transform: none !important;
}

body.menu-open .bq-page-stage .main,
body.menu-revealed .bq-page-stage .main,
body.menu-closing .bq-page-stage .main {
  transform: none !important;
}

#mobileMenu.mobile-menu {
  z-index: 1500 !important;
}

#mobileMenu .mobile-sheet {
  pointer-events: auto !important;
}

#mobileMenu .mm-left {
  inset: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#mobileMenu .mobile-menu-close,
[dir="rtl"] #mobileMenu .mobile-menu-close {
  position: absolute !important;
  top: max(18px, env(safe-area-inset-top, 0px)) !important;
  right: max(18px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  transform: scale(.72) !important;
}

[dir="rtl"] #mobileMenu .mobile-menu-close {
  right: auto !important;
  left: max(18px, env(safe-area-inset-left, 0px)) !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.06) rotate(90deg) !important;
}

/* The dock uses a nearly opaque surface instead of a live blur. This keeps the
   same glass-like calm while removing a full-width repaint on every scroll. */
.rail,
.mobilebar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
  transform-origin: center bottom;
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease,
    background-color .25s ease !important;
}

@media (min-width: 821px) {
  .rail {
    transform: translateX(-50%) scale(1) !important;
  }

  body.nav-compact:not(.menu-open) .rail {
    transform: translateX(-50%) scale(.92) !important;
  }
}

@media (max-width: 820px) {
  :root {
    --bq-frame-r: 32px;
  }

  #design > .section.work {
    border-radius: 34px 34px 0 0 !important;
  }

  .mobilebar {
    transform: scale(1) translateY(0) !important;
  }

  body.nav-compact:not(.menu-open) .mobilebar {
    transform: scale(.92) translateY(2px) !important;
  }

  /* The filter bar is a real layer above the gallery. The ID selector is
     deliberate: it beats the generic child z-index that previously let later
     image cards paint over these controls. */
  #design > .section.work > .tabs-wrap {
    position: sticky !important;
    top: calc(var(--bq-frame-gap) + env(safe-area-inset-top, 0px)) !important;
    z-index: 120 !important;
    isolation: isolate;
    background: var(--bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #design .section.work .tabs .tab {
    background: var(--bg-2) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  #design .section.work .tabs .tab.is-active {
    background: var(--ink) !important;
  }
}

/* Clean, compact footer: one invitation, one address, one quiet utility row. */
.footer.footer-v249 {
  --bg: #0d0d0f;
  --surface: #17171a;
  --ink: #f4f3ef;
  --ink-2: #e0ded8;
  --ink-soft: #b8b5ad;
  --ink-muted: #88857f;
  --line: rgba(244, 243, 239, .16);
  --line-soft: rgba(244, 243, 239, .09);
  width: calc(100% - (clamp(12px, 2vw, 28px) * 2)) !important;
  margin: clamp(18px, 3vw, 36px) clamp(12px, 2vw, 28px) 96px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: clamp(30px, 4vw, 54px) !important;
  background: #0d0d0f !important;
  background-image: none !important;
  color: var(--ink) !important;
}

.footer.footer-v249::before {
  display: none !important;
  content: none !important;
}

.footer.footer-v249 .footer-stage {
  min-height: 0 !important;
  padding: clamp(44px, 6vw, 82px) clamp(24px, 6vw, 88px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(28px, 6vw, 86px) !important;
  border-bottom: 1px solid var(--line) !important;
}

.footer.footer-v249 .footer-kicker {
  margin: 0 0 18px !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: none !important;
}

.footer.footer-v249 .footer-live-dot {
  width: 7px !important;
  height: 7px !important;
  background: #65c884 !important;
  animation: none !important;
}

.footer.footer-v249 .footer-cta-title {
  max-width: 760px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(32px, 5vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
}

.footer.footer-v249 .footer-cta-title em {
  color: var(--ink-soft) !important;
}

.footer.footer-v249 .footer-cta-btn {
  width: auto !important;
  min-width: 190px !important;
  aspect-ratio: auto !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
  border: 1px solid color-mix(in srgb, var(--ink) 52%, transparent) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  transform: none !important;
}

.footer.footer-v249 .footer-cta-btn i {
  align-self: auto !important;
  font-size: 13px !important;
}

.footer.footer-v249 .footer-cta-btn:hover,
.footer.footer-v249 .footer-cta-btn:focus-visible {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--bg) !important;
  transform: none !important;
}

.footer.footer-v249 .footer-main-v249 {
  display: block !important;
  padding: clamp(30px, 4vw, 52px) clamp(24px, 6vw, 88px) !important;
  border-bottom: 1px solid var(--line) !important;
}

.footer.footer-v249 .footer-signature {
  display: block !important;
  min-width: 0 !important;
}

.footer.footer-v249 .footer-email {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(22px, 3.4vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere !important;
}

.footer.footer-v249 .footer-email i {
  flex: 0 0 auto;
  font-size: .48em !important;
}

.footer.footer-v249 .footer-bottom {
  padding: 18px clamp(24px, 6vw, 88px) 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border: 0 !important;
  color: var(--ink-muted) !important;
  font-size: 10px !important;
}

.footer.footer-v249 .footer-top-btn {
  color: var(--ink-muted) !important;
}

.footer.footer-v249 .footer-top-btn:hover,
.footer.footer-v249 .footer-top-btn:focus-visible {
  color: var(--ink) !important;
}

@media (max-width: 760px) {
  .footer.footer-v249 {
    width: calc(100% - 20px) !important;
    margin: 18px 10px calc(var(--dock-h, 64px) + 28px) !important;
    border-radius: 32px !important;
  }

  .footer.footer-v249 .footer-stage {
    padding: 38px 22px 34px !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 28px !important;
  }

  .footer.footer-v249 .footer-cta-title {
    font-size: clamp(30px, 9vw, 44px) !important;
    letter-spacing: -.025em !important;
  }

  .footer.footer-v249 .footer-cta-btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .footer.footer-v249 .footer-main-v249 {
    padding: 28px 22px !important;
  }

  .footer.footer-v249 .footer-email {
    font-size: clamp(20px, 6.7vw, 30px) !important;
  }

  .footer.footer-v249 .footer-bottom {
    padding: 17px 22px 20px !important;
    align-items: center !important;
    flex-direction: row !important;
    text-align: start !important;
  }

  .footer.footer-v249 .footer-bottom > * {
    width: auto !important;
    justify-content: initial !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.nav-compact .rail {
    transform: translateX(-50%) scale(1) !important;
  }

  body.nav-compact .mobilebar {
    transform: none !important;
  }
}

/* Theme-qualified selectors beat the older light-footer compatibility layer. */
:root[data-theme] .footer.footer-v249 {
  --bg: #0d0d0f;
  --surface: #17171a;
  --ink: #f4f3ef;
  --ink-2: #e0ded8;
  --ink-soft: #b8b5ad;
  --ink-muted: #88857f;
  --line: rgba(244, 243, 239, .16);
  --line-soft: rgba(244, 243, 239, .09);
  color-scheme: dark;
  background: #0d0d0f !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

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

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

:root[data-theme] .footer.footer-v249 .footer-cta-btn {
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--ink) 52%, transparent) !important;
}

:root[data-theme] .footer.footer-v249 .footer-cta-btn:hover,
:root[data-theme] .footer.footer-v249 .footer-cta-btn:focus-visible {
  color: var(--bg) !important;
  background: var(--ink) !important;
  border-color: var(--ink) !important;
}

/* ============================================================================
   v43 — a reliable editorial card deck and a soft light-to-black closing scene.
   Every home section overlaps in normal document flow: no sticky panels, no
   permanently promoted layers, and no scroll-linked paint work.
   ============================================================================ */
:root {
  --bq-deck-gutter: clamp(10px, 1.8vw, 28px);
  --bq-deck-radius: clamp(36px, 4.8vw, 70px);
  --bq-deck-overlap: clamp(34px, 4.2vw, 62px);
}

#design {
  isolation: isolate;
}

#design > .section.section {
  position: relative !important;
  z-index: 10 !important;
  width: calc(100% - (var(--bq-deck-gutter) * 2)) !important;
  margin: calc(0px - var(--bq-deck-overlap)) var(--bq-deck-gutter) 0 !important;
  padding-bottom: clamp(92px, 8vw, 128px) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent) !important;
  border-image: none !important;
  border-radius: var(--bq-deck-radius) !important;
  overflow: hidden !important;
  overflow: clip !important;
  isolation: isolate;
  transform: none !important;
  box-shadow:
    0 -20px 52px -42px rgba(0, 0, 0, .62),
    inset 0 1px 0 color-mix(in srgb, #fff 44%, transparent) !important;
}

#design > .section.section::after {
  content: "";
  position: absolute;
  inset: 16px auto auto calc(50% - 24px);
  z-index: 4;
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  pointer-events: none;
}

#design > .section.work { z-index: 10 !important; }
#design > .section.service-showcase { z-index: 20 !important; }
#design > .section.practice-note { z-index: 30 !important; }
#design > .section.logos-section { z-index: 40 !important; }
#design > .section.latest-blog {
  z-index: 50 !important;
  margin-bottom: clamp(22px, 3vw, 42px) !important;
  padding-top: clamp(68px, 7vw, 100px) !important;
  padding-bottom: clamp(64px, 7vw, 100px) !important;
}

#services {
  display: block !important;
}

#design > .section.service-showcase { contain-intrinsic-block-size: auto 760px; }
#design > .section.practice-note { contain-intrinsic-block-size: auto 920px; }
#design > .section.logos-section { contain-intrinsic-block-size: auto 680px; }
#design > .section.latest-blog { contain-intrinsic-block-size: auto 520px; }

#design > .section.service-showcase::before {
  display: none !important;
}

#design .service-showcase .motion-reveal {
  filter: none !important;
  transition-property: opacity, transform !important;
}

:root[data-theme="light"] #design > .section.work {
  background: #faf9f6 !important;
  background-image: none !important;
}

:root[data-theme="light"] #design > .section.service-showcase {
  background: #efede8 !important;
  background-image: none !important;
}

:root[data-theme="light"] #design > .section.practice-note {
  background: #faf9f6 !important;
  background-image: none !important;
}

:root[data-theme="light"] #design > .section.logos-section {
  background: #eeece7 !important;
  background-image: none !important;
}

:root[data-theme="light"] #design > .section.latest-blog {
  background: #fbfaf7 !important;
  background-image: none !important;
}

:root[data-theme="dark"] #design > .section.work {
  background: #101011 !important;
  background-image: none !important;
}

:root[data-theme="dark"] #design > .section.service-showcase {
  background: #171719 !important;
  background-image: none !important;
}

:root[data-theme="dark"] #design > .section.practice-note {
  background: #111113 !important;
  background-image: none !important;
}

:root[data-theme="dark"] #design > .section.logos-section {
  background: #18181a !important;
  background-image: none !important;
}

:root[data-theme="dark"] #design > .section.latest-blog {
  background: #101011 !important;
  background-image: none !important;
}

/* The hero is entirely paint-stable. Its content is visible even if animation
   setup is interrupted, and mouse movement no longer writes styles per frame. */
#design > .hero .hero-portrait,
#design > .hero .hero-spark,
#design > .hero .hero-spark svg,
#design > .hero .hero-services,
#design > .hero .hero-scrolldown .mouse-wheel {
  animation: none !important;
  will-change: auto !important;
}

#design > .hero .hero-portrait,
#design > .hero .hero-sign,
#design > .hero .hero-lede,
#design > .hero .hero-services,
#design > .hero .hero-cta {
  opacity: 1 !important;
}

#design > .hero .hero-portrait {
  transform: none !important;
}

/* Loading cards keep a calm solid placeholder. The old background-position
   shimmer repainted every pending tile on each animation frame. */
#grid .card:not(.card--media-ready) .card-art::before {
  animation: none !important;
  background: color-mix(in srgb, var(--ink) 6%, var(--bg)) !important;
  will-change: auto !important;
}

/* Tools use the same calm type rhythm as the rest of the site. Removing the
   legacy all-caps/tracking treatment is what makes the shared face read as one. */
:root[lang] .practice-note .software-experience .software-chip,
:root[lang] #bio .bio-block-title,
:root[lang] #bio .bio-tools .bio-block-lede,
:root[lang] #bio .bio-tools .tools-cat,
:root[lang] #bio .bio-tools .tool-name,
:root[lang] #bio .bio-tools .tool-ic--txt,
:root[lang] #bio .bio-tools .tools-typing,
:root[lang] #bio .timeline .tl-head h4,
:root[lang] #bio .timeline .tl-date,
:root[lang] #bio .timeline .tl-org,
:root[lang] #bio .timeline .tl-loc,
:root[lang] #bio .timeline .tl-desc,
:root[lang] #bio .timeline .tl-skills span,
:root[lang] .tool-tip,
:root[lang] .rail-action-label,
:root[lang] .rail-tip-text {
  font-family: "Noto Kufi Arabic", system-ui, sans-serif !important;
  font-style: normal !important;
}

:root[lang] .practice-note .software-experience .software-chip,
:root[lang] #bio .bio-tools .tools-cat,
:root[lang] #bio .timeline .tl-date,
:root[lang] #bio .timeline .tl-skills span {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:root[lang] .practice-note .software-experience .software-chip {
  font-weight: 600 !important;
}

/* The fade is part of the footer itself. Its first pixel matches the page, then
   settles into black before any copy begins, so there is no hard black slab. */
:root[data-theme="light"] .footer.footer-v249 {
  --bq-footer-from: #f4f3f0;
}

:root[data-theme="dark"] .footer.footer-v249 {
  --bq-footer-from: #121212;
}

:root[data-theme] .footer.footer-v249 {
  --bq-footer-fade: clamp(178px, 22vw, 320px);
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #0d0d0f !important;
  background-image:
    linear-gradient(
      180deg,
      var(--bq-footer-from) 0%,
      color-mix(in srgb, var(--bq-footer-from) 74%, #0d0d0f) 34%,
      color-mix(in srgb, var(--bq-footer-from) 30%, #0d0d0f) 70%,
      #0d0d0f 100%
    ) !important;
  background-size: 100% var(--bq-footer-fade) !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

:root[data-theme] .footer.footer-v249 .footer-stage {
  width: min(1280px, 100%) !important;
  margin-inline: auto !important;
  padding: calc(var(--bq-footer-fade) + clamp(34px, 5vw, 64px)) clamp(24px, 6vw, 88px) clamp(42px, 6vw, 72px) !important;
  background: transparent !important;
  border: 0 !important;
  border-image: none !important;
}

:root[data-theme] .footer.footer-v249 .footer-kicker {
  display: inline-flex !important;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px;
  color: var(--ink-soft) !important;
}

:root[data-theme] .footer.footer-v249 .footer-cta-title {
  max-width: 820px !important;
  font-size: clamp(34px, 5.4vw, 72px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

:root[data-theme] .footer.footer-v249 .footer-cta-btn {
  min-width: 208px !important;
  min-height: 52px !important;
  padding: 13px 18px !important;
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #0d0d0f !important;
}

:root[data-theme] .footer.footer-v249 .footer-cta-btn:hover,
:root[data-theme] .footer.footer-v249 .footer-cta-btn:focus-visible {
  border-color: var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
}

:root[data-theme] .footer.footer-v249 .footer-main-v249 {
  width: min(1280px, 100%) !important;
  margin-inline: auto !important;
  padding: clamp(34px, 5vw, 66px) clamp(24px, 6vw, 88px) !important;
  background: transparent !important;
  border: 0 !important;
  border-image: none !important;
}

:root[data-theme] .footer.footer-v249 .footer-email {
  font-size: clamp(28px, 4.8vw, 66px) !important;
  letter-spacing: 0 !important;
}

:root[data-theme] .footer.footer-v249 .footer-bottom {
  width: min(1280px, 100%) !important;
  margin-inline: auto !important;
  padding: 19px clamp(24px, 6vw, 88px) 96px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--line-soft) !important;
  border-image: none !important;
  font-size: 12px !important;
}

:root[data-theme] .footer.footer-v249 .footer-top-btn {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

[dir="rtl"] .footer.footer-v249 .footer-cta-btn i {
  transform: scaleX(-1);
}

.footer.footer-v249 .footer-live-dot::before,
.footer.footer-v249 .footer-live-dot::after {
  animation: none !important;
}

@media (max-width: 820px) {
  :root {
    --bq-deck-gutter: 8px;
    --bq-deck-radius: 32px;
    --bq-deck-overlap: 28px;
  }

  #design > .section.section {
    padding-bottom: 74px !important;
    box-shadow:
      0 -16px 38px -34px rgba(0, 0, 0, .68),
      inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent) !important;
  }

  #design > .section.latest-blog {
    margin-bottom: 18px !important;
    padding-top: 52px !important;
    padding-bottom: 54px !important;
  }

  #design > .section.section::after {
    top: 12px;
    right: auto;
    left: calc(50% - 20px);
    width: 40px;
    height: 3px;
  }

  :root[data-theme] .footer.footer-v249 {
    --bq-footer-fade: clamp(150px, 42vw, 210px);
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-stage {
    padding: calc(var(--bq-footer-fade) + 30px) 22px 32px !important;
    gap: 26px !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-cta-title {
    font-size: clamp(30px, 9.2vw, 45px) !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-cta-btn {
    min-width: 0 !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-main-v249 {
    padding: 30px 22px !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-email {
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-bottom {
    padding: 18px 22px calc(var(--dock-h, 64px) + 28px) !important;
    font-size: 12px !important;
  }

  :root[data-theme] .footer.footer-v249 .footer-top-btn {
    padding-inline-start: 12px;
  }
}