/* ============================================================
   MAITRA MOBILE CLIENT EXPERIENCE
   Final mobile-only presentation layer.
   IMPORTANT: all rules are scoped to <=700px so the approved
   desktop/computer experience remains unchanged.
   ============================================================ */

@media (max-width: 700px) {
  :root {
    --cx-navy: #0b2947;
    --cx-navy-deep: #071f37;
    --cx-yellow: #ffbd00;
    --cx-white: #ffffff;
    --cx-nav-h: 84px;
    --cx-safe-bottom: max(10px, env(safe-area-inset-bottom));
    --cx-side: clamp(14px, 5vw, 22px);
  }

  /* ----------------------------------------------------------
     TOP MOBILE HEADER — dark translucent hamburger over the hero
     ---------------------------------------------------------- */
  .site-header {
    padding: max(10px, env(safe-area-inset-top)) var(--cx-side) 0 !important;
    z-index: 1800 !important;
  }

  .site-header .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    border: 2px solid rgba(255,189,0,.92) !important;
    border-radius: 11px !important;
    background: rgba(7,31,55,.52) !important;
    color: #fff !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }

  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header.is-menu-open .nav-toggle {
    border-color: var(--cx-yellow) !important;
    background: rgba(7,31,55,.76) !important;
    color: #fff !important;
  }

  .site-header .nav-toggle .icon {
    width: 29px !important;
    height: 29px !important;
  }

  /* ----------------------------------------------------------
     HERO — reproduce the supplied portrait/mobile composition
     without changing the desktop hero.
     ---------------------------------------------------------- */
  .hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
  }

  .hero-video,
  .hero-poster {
    object-position: 50% 48% !important;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(4,22,39,.34) 0%,
        rgba(4,22,39,.10) 22%,
        rgba(4,22,39,.18) 50%,
        rgba(4,22,39,.58) 74%,
        rgba(4,22,39,.72) 100%),
      linear-gradient(90deg,
        rgba(4,22,39,.18) 0%,
        rgba(4,22,39,.03) 52%,
        rgba(4,22,39,.14) 100%) !important;
  }

  .hero-grid-bg {
    opacity: .035 !important;
  }

  .hero-content {
    width: calc(100% - 2 * var(--cx-side)) !important;
    max-width: 430px !important;
    height: 100% !important;
    padding: calc(max(10px, env(safe-area-inset-top)) + 8px) 0
             calc(var(--cx-nav-h) + 170px + var(--cx-safe-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .hero-brand-row {
    min-height: 126px !important;
    height: 126px !important;
    display: block !important;
    position: relative !important;
  }

  .hero-brand {
    top: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: clamp(100px, 27vw, 122px) !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .hero-eyebrow {
    display: none !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .hero-kicker {
    position: relative !important;
    margin: 0 0 38px !important;
    color: var(--cx-yellow) !important;
    font-size: clamp(.64rem, 2.55vw, .82rem) !important;
    line-height: 1.25 !important;
    letter-spacing: .16em !important;
    text-align: center !important;
  }

  .hero-kicker::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    margin: 13px auto 0;
    border-radius: 99px;
    background: var(--cx-yellow);
    box-shadow: 0 3px 10px rgba(255,189,0,.25);
  }

  .hero-title {
    width: 100% !important;
    max-width: 12.5ch !important;
    margin: 0 auto 30px !important;
    font-size: clamp(2.35rem, 11.9vw, 3.7rem) !important;
    line-height: .92 !important;
    letter-spacing: -.055em !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .hero-title .mobile-break {
    display: inline !important;
  }

  .hero-support {
    width: min(100%, 31ch) !important;
    max-width: 31ch !important;
    margin: 0 auto !important;
    font-size: clamp(.86rem, 3.05vw, 1.03rem) !important;
    line-height: 1.62 !important;
    text-align: center !important;
    color: rgba(255,255,255,.95) !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.42) !important;
  }

  .hero-actions {
    display: none !important;
  }

  /* ----------------------------------------------------------
     BOTTOM NAV — full-width white mobile app navigation.
     Desktop command dock remains untouched.
     ---------------------------------------------------------- */
  .hero-command-dock {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    min-height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    max-height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    padding: 0 0 var(--cx-safe-bottom) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 -8px 32px rgba(4,24,43,.20) !important;
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
    z-index: 1600 !important;
    overflow: visible !important;
    contain: layout paint !important;
  }

  .hero-command-dock::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    width: 66px;
    height: 18px;
    transform: translateX(-50%);
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 -2px 4px rgba(4,24,43,.04);
  }

  .hero-command-label {
    display: none !important;
  }

  .hero-command-actions {
    width: 100% !important;
    height: var(--cx-nav-h) !important;
    min-height: var(--cx-nav-h) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .hero-command-item,
  .hero-command-item:hover,
  .hero-command-item:focus-visible {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    height: var(--cx-nav-h) !important;
    min-height: var(--cx-nav-h) !important;
    padding: 8px 3px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--cx-navy) !important;
    text-align: center !important;
    transform: none !important;
    border-radius: 16px !important;
  }

  .hero-command-item > span:not(.mobile-nav-icon) {
    display: none !important;
  }

  .hero-command-item .mobile-nav-icon {
    display: grid !important;
    place-items: center !important;
    width: 39px !important;
    height: 39px !important;
    flex: 0 0 39px !important;
    color: var(--cx-navy) !important;
  }

  .hero-command-item .mobile-nav-icon svg {
    width: 29px !important;
    height: 29px !important;
    display: block !important;
  }

  .hero-command-item strong {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(.53rem, 2.0vw, .66rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .015em !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: inherit !important;
  }

  .hero-command-item em {
    display: none !important;
  }

  .hero-command-item.is-primary {
    background: transparent !important;
    color: var(--cx-navy) !important;
  }

  .hero-command-item.is-current {
    background: var(--cx-yellow) !important;
    color: var(--cx-navy) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
  }

  /* On the landing screen no navigation item is semantically active. */
  body:not(:has(.panel-shell:not([hidden]))) .hero-command-item.is-current {
    background: transparent !important;
  }

  .hero-command-item.is-current .mobile-nav-icon,
  .hero-command-item.is-current strong {
    color: var(--cx-navy) !important;
  }

  /* ----------------------------------------------------------
     PROJECT ASSIST — wide CTA floating directly above the dock.
     ---------------------------------------------------------- */
  .project-assist-float {
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--cx-nav-h) + var(--cx-safe-bottom) + 28px) !important;
    transform: translateX(-50%) !important;
    width: min(338px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) 26px !important;
    align-items: center !important;
    gap: 12px !important;
    border: 2px solid var(--cx-yellow) !important;
    border-radius: 12px !important;
    background: rgba(6,29,53,.96) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(4,24,43,.30) !important;
    z-index: 1550 !important;
  }

  .project-assist-float:hover,
  .project-assist-float:focus-visible {
    background: rgba(6,29,53,.98) !important;
    border-color: #ffd34a !important;
    color: #fff !important;
    transform: translateX(-50%) translateY(-2px) !important;
  }

  .project-assist-float-icon {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 5px !important;
    background: var(--cx-yellow) !important;
    color: var(--cx-navy) !important;
    font: 800 2rem/1 Arial, sans-serif !important;
  }

  .project-assist-float > span:nth-child(2) {
    display: block !important;
    color: #fff !important;
    font: 800 .78rem/1 var(--font-mono) !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .project-assist-float-arrow {
    display: grid !important;
    place-items: center !important;
    color: var(--cx-yellow) !important;
    font: 500 2rem/1 Arial, sans-serif !important;
  }

  /* Internal experience panels retain their existing full-screen priority. */
  body:has(.panel-shell:not([hidden])) .hero-command-dock,
  body:has(.lightbox:not([hidden])) .hero-command-dock,
  body:has(#mobileMenu:not([hidden])) .hero-command-dock {
    display: none !important;
  }

  body:has(.panel-shell:not([hidden])) .project-assist-float,
  body:has(.modal-shell:not([hidden])) .project-assist-float,
  body:has(.lightbox:not([hidden])) .project-assist-float,
  body:has(#mobileMenu:not([hidden])) .project-assist-float {
    display: none !important;
  }

  /* Internal panels need breathing room above the persistent dock. */
  .panel-body {
    padding-bottom: calc(120px + var(--cx-safe-bottom)) !important;
  }

  /* ----------------------------------------------------------
     TEAM PANEL — preserve the large desktop portrait concept,
     but make the active profile usable on a phone.
     ---------------------------------------------------------- */
  .team-showcase {
    padding-bottom: calc(120px + var(--cx-safe-bottom)) !important;
  }

  .team-feature-visual.is-photo img {
    object-position: center 28% !important;
  }

  /* ----------------------------------------------------------
     MENU — the hamburger remains the secondary/mobile utility.
     ---------------------------------------------------------- */
  .mobile-menu {
    z-index: 1700 !important;
  }
}

@media (max-width: 380px) {
  :root { --cx-nav-h: 80px; }

  .hero-brand-row { min-height: 116px !important; height: 116px !important; }
  .hero-kicker { margin-bottom: 28px !important; }
  .hero-title { font-size: clamp(2.15rem, 11.8vw, 3.1rem) !important; margin-bottom: 24px !important; }
  .hero-support { font-size: .82rem !important; line-height: 1.55 !important; }
  .project-assist-float { height: 66px !important; min-height: 66px !important; grid-template-columns: 52px minmax(0,1fr) 22px !important; }
  .project-assist-float-icon { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
  .hero-command-item .mobile-nav-icon { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .hero-command-item .mobile-nav-icon svg { width: 25px !important; height: 25px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-command-item,
  .project-assist-float { transition: none !important; }
}


/* ============================================================
   MOBILE CLIENT POLISH v4
   Scope: mobile only. Desktop/computer presentation is unchanged.
   ============================================================ */
@media (max-width: 700px) {
  .site-header .nav-toggle {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border: 2px solid rgba(255,189,0,.92) !important;
    border-radius: 11px !important;
    background: rgba(248,250,252,.94) !important;
    color: #0b2947 !important;
    box-shadow: 0 12px 28px rgba(7,31,55,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(9px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
  }

  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header .nav-toggle:active {
    background: #fff !important;
    border-color: #ffbd00 !important;
    color: #0b2947 !important;
    box-shadow: 0 14px 30px rgba(7,31,55,.18), 0 0 0 3px rgba(255,189,0,.14) !important;
    outline: none !important;
  }

  .site-header.is-menu-open .nav-toggle {
    background: rgba(255,255,255,.98) !important;
    border-color: #ffbd00 !important;
    color: #0b2947 !important;
  }

  .site-header .nav-toggle .icon {
    width: 25px !important;
    height: 25px !important;
    color: inherit !important;
    stroke-width: 2.1 !important;
  }

  .mobile-menu {
    background: #f4f7fa !important;
    color: #0b2947 !important;
  }

  .mobile-menu::before {
    background:
      radial-gradient(circle at 84% 10%, rgba(23,105,255,.045), transparent 28%),
      radial-gradient(circle at 8% 82%, rgba(47,168,197,.04), transparent 26%),
      linear-gradient(145deg, #f8fafc 0%, #f3f7fa 58%, #edf3f7 100%) !important;
  }

  /* Consistent mobile icon family. Desktop command icons are untouched. */
  .hero-command-item .mobile-nav-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    display: block !important;
    color: transparent !important;
    fill: none !important;
    stroke: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 30px 30px !important;
  }

  .hero-command-item:nth-child(1) .mobile-nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V7a2 2 0 0 1 2-2h5v15M4 20h16M14 20V9a2 2 0 0 1 2-2h4v13'/%3E%3Cpath d='M7 9h1M7 12h1M7 15h1M17 10h1M17 13h1M17 16h1'/%3E%3C/svg%3E") !important;
  }
  .hero-command-item:nth-child(2) .mobile-nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='m14.7 14.7 2.1 2.1'/%3E%3C/svg%3E") !important;
  }
  .hero-command-item:nth-child(3) .mobile-nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18h14M6 15h12M7 12h10M8 9h8M9 6h6M12 3v15M8 20h8'/%3E%3Cpath d='M17.5 4.5 19 3l1.5 1.5L19 6z'/%3E%3C/svg%3E") !important;
  }
  .hero-command-item:nth-child(4) .mobile-nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c.4-4 2.5-6 6-6s5.6 2 6 6M14 15c3.2-.3 5.6 1.2 6.5 5'/%3E%3C/svg%3E") !important;
  }
  .hero-command-item:nth-child(5) .mobile-nav-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2947' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h4l1.2 4.2-2.2 1.6a12 12 0 0 0 5.2 5.2l1.6-2.2L20 14v4a2 2 0 0 1-2 2A14 14 0 0 1 4 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") !important;
  }

  .hero-command-item .mobile-nav-icon svg {
    display: none !important;
  }

  .hero-command-item strong {
    font-size: clamp(.55rem, 2.05vw, .68rem) !important;
    line-height: 1.05 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }

  /* Project Assist: keep full label + arrow inside the viewport. */
  .project-assist-float {
    width: min(338px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .project-assist-float-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
  }

  .project-assist-float > span:nth-child(2) {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: clamp(.68rem, 3.0vw, .78rem) !important;
    letter-spacing: .075em !important;
    line-height: 1 !important;
  }

  .project-assist-float-arrow {
    display: grid !important;
    width: 24px !important;
    min-width: 24px !important;
    flex: 0 0 24px !important;
    place-items: center !important;
    margin-left: auto !important;
    font-size: 1.9rem !important;
    line-height: 1 !important;
  }
}

@media (max-width: 380px) {
  .site-header .nav-toggle {
    width: 52px !important;
    height: 52px !important;
  }
  .hero-command-item .mobile-nav-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    background-size: 27px 27px !important;
  }
  .project-assist-float {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 5px !important;
  }
  .project-assist-float-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    flex-basis: 52px !important;
  }
  .project-assist-float > span:nth-child(2) {
    font-size: .65rem !important;
    letter-spacing: .055em !important;
  }
  .project-assist-float-arrow {
    width: 22px !important;
    min-width: 22px !important;
    flex-basis: 22px !important;
  }
}


/* ============================================================
   MOBILE CLIENT POLISH v5
   Scope: max-width: 700px only.
   Desktop/computer presentation remains frozen.
   ============================================================ */
@media (max-width: 700px) {
  /* Hamburger/menu: light trigger stays; opened panel gets its
     own layer so underlying page content is never hidden. */
  .site-header {
    position: relative !important;
    z-index: 120 !important;
  }

  .site-header.is-menu-open {
    z-index: 220 !important;
  }

  .site-header.is-menu-open .mobile-menu,
  .site-header .mobile-menu.is-open,
  .site-header .mobile-menu.open {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--mobile-header-height, 98px) !important;
    bottom: 0 !important;
    z-index: 210 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .site-header.is-menu-open::after {
    content: "" !important;
    position: fixed !important;
    inset: var(--mobile-header-height, 98px) 0 0 !important;
    z-index: 205 !important;
    background: rgba(7, 31, 55, .08) !important;
    pointer-events: none !important;
  }

  .mobile-menu > *,
  .mobile-menu .menu-panel,
  .mobile-menu .mobile-menu-inner {
    position: relative !important;
    z-index: 211 !important;
  }

  /* Mobile team portrait: complete image inside its bordered box. */
  .team-profile-card .profile-image,
  .team-profile-card .profile-image-wrap,
  .team-profile-card .profile-portrait,
  .team-detail .profile-image,
  .team-detail .profile-image-wrap,
  .team-detail .profile-portrait,
  .team-modal .profile-image,
  .team-modal .profile-image-wrap,
  .team-modal .profile-portrait {
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  .team-profile-card .profile-image img,
  .team-profile-card .profile-image-wrap img,
  .team-profile-card .profile-portrait img,
  .team-detail .profile-image img,
  .team-detail .profile-image-wrap img,
  .team-detail .profile-portrait img,
  .team-modal .profile-image img,
  .team-modal .profile-image-wrap img,
  .team-modal .profile-portrait img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }

  /* White text only where project typography is over photography. */
  .project-card .project-image .project-title,
  .project-card .project-image .project-label,
  .project-card .project-image .project-meta,
  .project-card .project-image .project-copy,
  .project-card .project-image h2,
  .project-card .project-image h3,
  .project-card .project-image p,
  .projects-grid .project-image .project-title,
  .projects-grid .project-image .project-label,
  .projects-grid .project-image .project-meta,
  .projects-grid .project-image h2,
  .projects-grid .project-image h3,
  .projects-grid .project-image p,
  .project-tile .project-image .project-title,
  .project-tile .project-image .project-label,
  .project-tile .project-image .project-meta,
  .project-tile .project-image h2,
  .project-tile .project-image h3,
  .project-tile .project-image p {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }

  .project-card .project-image a,
  .project-card .project-image button,
  .project-card .project-image span,
  .project-tile .project-image a,
  .project-tile .project-image button,
  .project-tile .project-image span {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.42) !important;
  }

  /* Project Assist: same position, noticeably less visual mass. */
  .project-assist-float {
    width: min(300px, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 5px !important;
    gap: 7px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .project-assist-float-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    border-radius: 8px !important;
  }

  .project-assist-float-icon svg,
  .project-assist-float-icon img {
    width: 22px !important;
    height: 22px !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: clamp(.62rem, 2.65vw, .72rem) !important;
    letter-spacing: .065em !important;
    line-height: 1 !important;
  }

  .project-assist-float-arrow {
    width: 21px !important;
    min-width: 21px !important;
    flex: 0 0 21px !important;
    font-size: 1.55rem !important;
  }
}

@media (max-width: 380px) {
  .site-header.is-menu-open .mobile-menu {
    top: 92px !important;
  }

  .site-header.is-menu-open::after {
    inset: 92px 0 0 !important;
  }

  .project-assist-float {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px !important;
    gap: 6px !important;
    border-radius: 13px !important;
  }

  .project-assist-float-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: .60rem !important;
    letter-spacing: .055em !important;
  }

  .project-assist-float-arrow {
    width: 19px !important;
    min-width: 19px !important;
    flex-basis: 19px !important;
    font-size: 1.4rem !important;
  }
}

/* ============================================================
   DESKTOP TEAM PORTRAIT CONTAINMENT
   Keep the approved portrait fully inside its feature frame.
   Do not crop the source image or let hover scaling push it
   outside the left-hand box.
   ============================================================ */
@media (min-width: 761px) {
  .team-feature,
  .team-feature-visual {
    overflow: hidden !important;
  }

  .team-feature-visual {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .team-feature-visual.is-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  .team-feature:hover .team-feature-visual.is-photo img {
    transform: none !important;
  }
}


/* ============================================================
   FINAL DESKTOP PROJECT IMAGE TEXT CONTRAST
   Scope: desktop only. All other desktop/mobile presentation
   remains frozen.
   ============================================================ */
@media (min-width: 701px) {
  .project-card .project-image .project-title,
  .project-card .project-image .project-label,
  .project-card .project-image .project-meta,
  .project-card .project-image .project-copy,
  .project-card .project-image h2,
  .project-card .project-image h3,
  .project-card .project-image p,
  .projects-grid .project-image .project-title,
  .projects-grid .project-image .project-label,
  .projects-grid .project-image .project-meta,
  .projects-grid .project-image h2,
  .projects-grid .project-image h3,
  .projects-grid .project-image p,
  .project-tile .project-image .project-title,
  .project-tile .project-image .project-label,
  .project-tile .project-image .project-meta,
  .project-tile .project-image h2,
  .project-tile .project-image h3,
  .project-tile .project-image p {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }
}


/* ============================================================
   FINAL DESKTOP PROJECT OVERLAY CONTRAST — ACTUAL OVERLAY
   Typography only; no layout/image changes.
   ============================================================ */
@media (min-width: 701px) {
  .project-card,
  .project-tile,
  .portfolio-card,
  .project-item {
    --project-overlay-text: #ffffff;
  }

  .project-card .project-overlay,
  .project-card .overlay,
  .project-card .project-content,
  .project-card .project-info,
  .project-tile .project-overlay,
  .project-tile .overlay,
  .project-tile .project-content,
  .project-tile .project-info,
  .portfolio-card .project-overlay,
  .portfolio-card .overlay,
  .portfolio-card .project-content,
  .portfolio-card .project-info,
  .project-item .project-overlay,
  .project-item .overlay,
  .project-item .project-content,
  .project-item .project-info {
    color: #fff !important;
  }

  .project-card .project-overlay *,
  .project-card .overlay *,
  .project-card .project-content *,
  .project-card .project-info *,
  .project-tile .project-overlay *,
  .project-tile .overlay *,
  .project-tile .project-content *,
  .project-tile .project-info *,
  .portfolio-card .project-overlay *,
  .portfolio-card .overlay *,
  .portfolio-card .project-content *,
  .portfolio-card .project-info *,
  .project-item .project-overlay *,
  .project-item .overlay *,
  .project-item .project-content *,
  .project-item .project-info * {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }

  /* Keep the yellow image-count accent and existing gallery control. */
  .project-card .project-overlay .image-count,
  .project-card .overlay .image-count,
  .project-tile .project-overlay .image-count,
  .project-tile .overlay .image-count,
  .portfolio-card .project-overlay .image-count,
  .portfolio-card .overlay .image-count,
  .project-item .project-overlay .image-count {
    color: #f5b900 !important;
  }
}


@media (min-width: 701px) {
  /* Project gallery overlays: force readable white typography. */
  .projects .project-overlay *,
  .projects-section .project-overlay *,
  .field-portfolio .project-overlay *,
  .field-portfolio .overlay *,
  .portfolio-grid .project-overlay *,
  .portfolio-grid .overlay * {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }
}


/* ============================================================
   FINAL ACTUAL GALLERY OVERLAY CONTRAST
   The gallery is rendered with .g-project-overlay.
   Desktop only; typography color/shadow only.
   ============================================================ */
@media (min-width: 701px) {
  .gallery-project-card .g-project-overlay,
  .gallery-project-card .g-project-overlay .g-project-copy,
  .gallery-project-card .g-project-overlay h3,
  .gallery-project-card .g-project-overlay p,
  .gallery-project-card .g-project-overlay .g-project-action {
    color: #fff !important;
  }

  .gallery-project-card .g-project-overlay h3,
  .gallery-project-card .g-project-overlay p,
  .gallery-project-card .g-project-overlay .g-project-action {
    text-shadow: 0 2px 10px rgba(0,0,0,.48) !important;
  }

  .gallery-project-card .g-project-overlay .g-project-count {
    color: #f5b900 !important;
    text-shadow: none !important;
  }
}

/* ============================================================
   MOBILE FINAL LOCKED CORRECTIONS v6
   Scope: max-width: 700px only.
   ============================================================ */
@media (max-width: 700px) {
  :root { --mobile-header-height: 56px; }
  .site-header { z-index: 220 !important; }
  .site-header.is-menu-open + .mobile-menu {
    position: fixed !important;
    top: var(--mobile-header-height) !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--mobile-header-height)) !important;
    max-height: calc(100dvh - var(--mobile-header-height)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 210 !important;
    box-sizing: border-box !important;
    background: #f4f7fa !important;
  }
  .site-header.is-menu-open + .mobile-menu .menu-shell {
    min-height: 100% !important; box-sizing: border-box !important;
  }
  .site-header.is-menu-open .nav-toggle { position: relative !important; z-index: 230 !important; }

  .team-feature, .team-feature-visual { overflow: hidden !important; }
  .team-feature-visual.is-photo { min-width: 0 !important; min-height: 0 !important; background: #fff !important; }
  .team-feature-visual.is-photo img, #teamFeatureImg {
    display: block !important; width: 100% !important; height: 100% !important;
    max-width: 100% !important; max-height: 100% !important;
    object-fit: contain !important; object-position: center center !important; transform: none !important;
  }
  .team-feature:hover .team-feature-visual.is-photo img { transform: none !important; }

  .gallery-project-card .g-project-overlay,
  .gallery-project-card .g-project-overlay .g-project-copy,
  .gallery-project-card .g-project-overlay h3,
  .gallery-project-card .g-project-overlay p,
  .gallery-project-card .g-project-overlay .g-project-action { color: #fff !important; }
  .gallery-project-card .g-project-overlay h3,
  .gallery-project-card .g-project-overlay p,
  .gallery-project-card .g-project-overlay .g-project-action { text-shadow: 0 2px 10px rgba(0,0,0,.52) !important; }
  .gallery-project-card .g-project-overlay .g-project-count { color: #f5b900 !important; text-shadow: none !important; }
  .gallery-project-card .g-project-overlay .g-project-action { border-color: rgba(255,255,255,.72) !important; }

  .project-assist-float {
    width: min(282px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
    height: 56px !important; min-height: 56px !important;
    padding: 4px 7px 4px 5px !important; gap: 7px !important;
    border-radius: 10px !important; box-sizing: border-box !important;
  }
  .project-assist-float-icon {
    width: 44px !important; height: 44px !important; min-width: 44px !important; flex: 0 0 44px !important;
    border-radius: 6px !important; font-size: 1.55rem !important;
  }
  .project-assist-float > span:nth-child(2) {
    min-width: 0 !important; flex: 1 1 auto !important;
    font-size: clamp(.60rem, 2.55vw, .68rem) !important;
    letter-spacing: .065em !important; line-height: 1 !important; white-space: nowrap !important;
  }
  .project-assist-float-arrow {
    width: 19px !important; min-width: 19px !important; flex: 0 0 19px !important; font-size: 1.45rem !important;
  }
}
@media (max-width: 380px) {
  .project-assist-float { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; height: 54px !important; min-height: 54px !important; padding: 4px 6px 4px 5px !important; gap: 6px !important; }
  .project-assist-float-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; flex-basis: 42px !important; }
  .project-assist-float > span:nth-child(2) { font-size: .58rem !important; letter-spacing: .055em !important; }
  .project-assist-float-arrow { width: 18px !important; min-width: 18px !important; flex-basis: 18px !important; font-size: 1.35rem !important; }
}


/* ============================================================
   FINAL MOBILE HEADER STRIP FIX
   Mobile only. Desktop/computer view remains untouched.
   The hamburger keeps its approved light/yellow appearance.
   ============================================================ */
@media (max-width: 700px) {
  .site-header,
  .site-header.is-scrolled,
  .site-header.is-menu-open {
    background: #f4f7fa !important;
    background-image: none !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header .nav-toggle {
    background: #f7fafc !important;
    color: #0b2947 !important;
    border-color: #ffbd00 !important;
  }

  .site-header.is-menu-open .nav-toggle {
    background: #f7fafc !important;
    color: #0b2947 !important;
    border-color: #ffbd00 !important;
  }
}

/* ============================================================
   MOBILE HERO — CONTINUOUS IMAGE + LIGHT GLASS CONTROLS
   Mobile-only. Desktop/computer view remains unchanged.
   ============================================================ */
@media (max-width: 700px) {
  /* Remove the visual header band; the control floats over the hero. */
  .site-header {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: max(10px, env(safe-area-inset-top)) var(--cx-side) 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  .site-header.is-scrolled,
  .site-header.is-menu-open {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Approved light hamburger treatment: no dark navy block. */
  .site-header .nav-toggle,
  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header.is-menu-open .nav-toggle {
    pointer-events: auto !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    border: 2px solid var(--cx-yellow) !important;
    border-radius: 11px !important;
    background: rgba(247,250,252,.88) !important;
    color: var(--cx-navy) !important;
    box-shadow: 0 10px 26px rgba(7,31,55,.14), inset 0 1px 0 rgba(255,255,255,.72) !important;
    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  }

  .site-header .nav-toggle .icon {
    width: 29px !important;
    height: 29px !important;
    color: var(--cx-navy) !important;
  }

  /* Let the hero image run continuously behind every mobile control. */
  .hero {
    position: relative !important;
    margin-top: 0 !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Soft lower fade only; no white strip/grid under the hero. */
  .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(4,22,39,.20) 0%,
        rgba(4,22,39,.05) 28%,
        rgba(4,22,39,.13) 58%,
        rgba(4,22,39,.46) 82%,
        rgba(4,22,39,.70) 100%),
      linear-gradient(90deg,
        rgba(4,22,39,.16) 0%,
        rgba(4,22,39,.02) 55%,
        rgba(4,22,39,.12) 100%) !important;
  }

  .hero-grid-bg {
    opacity: .02 !important;
  }

  /* Floating glass bottom navigation: light, translucent, not a white slab. */
  .hero-command-dock {
    background: rgba(248,251,253,.84) !important;
    border: 1px solid rgba(255,255,255,.68) !important;
    box-shadow: 0 -10px 34px rgba(4,24,43,.16), 0 2px 12px rgba(4,24,43,.06) !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  }

  .hero-command-dock::before {
    background: rgba(248,251,253,.84) !important;
    border: 1px solid rgba(255,255,255,.52) !important;
    border-bottom: 0 !important;
    backdrop-filter: blur(18px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
  }

  .hero-command-actions {
    background: transparent !important;
  }

  .hero-command-item,
  .hero-command-item:hover,
  .hero-command-item:focus-visible,
  .hero-command-item.is-primary,
  .hero-command-item.is-current {
    background: transparent !important;
    color: var(--cx-navy) !important;
    box-shadow: none !important;
  }

  .hero-command-item .mobile-nav-icon,
  .hero-command-item strong {
    color: var(--cx-navy) !important;
  }

  /* Keep Project Assist visually above the glass dock. */
  .project-assist-float {
    z-index: 1700 !important;
  }
}

/* ============================================================
   MOBILE PROJECT ASSIST + LANDSCAPE FINAL PASS
   Scope: mobile only. Desktop/computer presentation remains frozen.
   ============================================================ */
@media (max-width: 700px) {
  /* Project Assist is a compact utility control, not a banner. */
  .project-assist-float {
    width: min(290px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(4,24,43,.24) !important;
  }

  .project-assist-float-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 7px !important;
    font-size: 1.55rem !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: clamp(.60rem, 2.45vw, .70rem) !important;
    letter-spacing: .065em !important;
  }

  .project-assist-float-arrow {
    width: 20px !important;
    min-width: 20px !important;
    flex: 0 0 20px !important;
    font-size: 1.35rem !important;
  }
}

/* Landscape phones: use the available horizontal space instead of
   forcing the portrait mobile composition into a short viewport. */
@media (max-width: 700px) and (orientation: landscape) {
  :root { --cx-nav-h: 62px; }

  .site-header {
    height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .site-header .nav-toggle,
  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header.is-menu-open .nav-toggle {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: auto !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    z-index: 2200 !important;
  }

  .site-header .nav-toggle .icon {
    width: 25px !important;
    height: 25px !important;
  }

  .hero-command-dock {
    height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    min-height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    max-height: calc(var(--cx-nav-h) + var(--cx-safe-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .hero-command-dock::before {
    top: -6px !important;
    width: 52px !important;
    height: 12px !important;
    border-radius: 9px 9px 0 0 !important;
  }

  .hero-command-actions,
  .hero-command-item {
    height: var(--cx-nav-h) !important;
    min-height: var(--cx-nav-h) !important;
  }

  .hero-command-item {
    padding: 4px 2px 3px !important;
    gap: 2px !important;
    border-radius: 11px !important;
  }

  .hero-command-item .mobile-nav-icon {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }

  .hero-command-item .mobile-nav-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  .hero-command-item strong {
    font-size: .48rem !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
  }

  /* Landscape launcher: smaller, lighter, and clear of the dock. */
  .project-assist-float {
    width: min(235px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 3px !important;
    gap: 5px !important;
    bottom: calc(var(--cx-nav-h) + var(--cx-safe-bottom) + 10px) !important;
    border-radius: 10px !important;
    border-width: 2px !important;
  }

  .project-assist-float-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
    border-radius: 6px !important;
    font-size: 1.4rem !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: .56rem !important;
    letter-spacing: .055em !important;
  }

  .project-assist-float-arrow {
    width: 18px !important;
    min-width: 18px !important;
    flex-basis: 18px !important;
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   FINAL MOBILE REFINEMENT — PORTRAIT + LANDSCAPE
   Mobile only. Desktop/computer view remains unchanged.
   ============================================================ */
@media (max-width: 700px) {
  /* Keep the approved four-line mobile hero hierarchy. */
  .hero-title {
    max-width: 11.5ch !important;
  }

  /* Project Assist is a compact utility, never a full-width banner. */
  .project-assist-float {
    width: min(280px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px 7px 4px 5px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 22px !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .project-assist-float-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: none !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.55rem !important;
  }

  .project-assist-float > span:nth-child(2) {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    display: block !important;
    font-size: .67rem !important;
    letter-spacing: .07em !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .project-assist-float-arrow {
    display: grid !important;
    width: 22px !important;
    min-width: 22px !important;
    flex: none !important;
    place-items: center !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
  }
}

/* Small phones: preserve the same composition without clipping. */
@media (max-width: 380px) {
  .hero-title {
    max-width: 11.2ch !important;
  }

  .project-assist-float {
    width: min(270px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: 56px !important;
    min-height: 56px !important;
    grid-template-columns: 44px minmax(0, 1fr) 20px !important;
    gap: 6px !important;
  }

  .project-assist-float-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 1.45rem !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: .61rem !important;
    letter-spacing: .055em !important;
  }

  .project-assist-float-arrow {
    width: 20px !important;
    min-width: 20px !important;
    font-size: 1.3rem !important;
  }
}

/* Landscape phones: hamburger stays inside the viewport and the
   five navigation items remain visible. */
@media (max-width: 700px) and (orientation: landscape) {

  .site-header .nav-toggle,
  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header.is-menu-open .nav-toggle {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    z-index: 2200 !important;
  }

  .hero {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }

  .hero-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-bottom: calc(var(--cx-nav-h) + 72px + var(--cx-safe-bottom)) !important;
  }

  .hero-brand-row {
    min-height: 72px !important;
    height: 72px !important;
  }

  .hero-brand {
    top: 4px !important;
    width: 82px !important;
  }

  .hero-copy {
    margin-top: 0 !important;
  }

  .hero-title {
    max-width: 13ch !important;
    font-size: clamp(2rem, 7.2vw, 3rem) !important;
    line-height: .9 !important;
    margin-bottom: 12px !important;
  }

  .hero-support {
    max-width: 48ch !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  .hero-command-dock {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .hero-command-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .hero-command-item {
    min-height: var(--cx-nav-h) !important;
    height: var(--cx-nav-h) !important;
    padding: 3px 2px !important;
    gap: 1px !important;
  }

  .hero-command-item .mobile-nav-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
    background-size: 25px 25px !important;
  }

  .hero-command-item strong {
    font-size: .48rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .project-assist-float {
    width: min(240px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    height: 50px !important;
    min-height: 50px !important;
    bottom: calc(var(--cx-nav-h) + var(--cx-safe-bottom) + 8px) !important;
    grid-template-columns: 40px minmax(0, 1fr) 18px !important;
    padding: 3px 6px 3px 4px !important;
    gap: 5px !important;
    border-radius: 10px !important;
  }

  .project-assist-float-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1.25rem !important;
  }

  .project-assist-float > span:nth-child(2) {
    font-size: .55rem !important;
    letter-spacing: .05em !important;
  }

  .project-assist-float-arrow {
    width: 18px !important;
    min-width: 18px !important;
    font-size: 1.15rem !important;
  }
}

@media (min-width: 701px) {
  .mobile-line-break { display: none !important; }
}
@media (max-width: 700px) {
  .mobile-line-break { display: inline !important; }
}