/**
 * Bayan Capital — Mobile System
 * Primary breakpoint: max-width 768px
 * Load AFTER assets/css/styles.css and AFTER page-specific CSS / closing </style>
 * when inline styles exist (e.g. index, about, bayan, real-estate).
 * Desktop layout is not targeted here.
 */

/* Logo/home landing anchor — clears sticky header when navigating */
#bc-home-start {
  scroll-margin-top: 5.5rem;
}

/* About: desktop-only spacer — mobile band is shown under max-width 768px rules */
.about-hero-mobile-band {
  display: none;
}

/* --------------------------------------------------------------------------
   Optional wider band for cinematic / absolute heroes only (769px–960px)
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .estate-studio-hero--construction-page .estate-studio-hero__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-block: 7rem 1.75rem;
  }

  .estate-studio-hero--construction-page .construction-cinematic-copy,
  .estate-studio-hero--construction-page .construction-cinematic-copy--plain {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 3;
    justify-items: stretch !important;
  }

  .estate-studio-hero--construction-page .construction-cinematic-copy::before,
  .estate-studio-hero--construction-page .construction-cinematic-copy::after {
    content: none !important;
  }

  .estate-studio-hero--construction-page .construction-right-watermark {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(112px, 34vw) !important;
    margin: 0 auto 0.35rem !important;
    order: -1;
    align-self: center !important;
    z-index: 2;
  }

  .estate-studio-hero--construction-page .construction-cinematic-button {
    align-self: center !important;
    text-align: center;
    max-width: 100%;
  }

  .estate-studio-hero--construction-page .construction-cinematic-paragraph {
    max-width: 100% !important;
    text-align: center !important;
    justify-self: stretch !important;
    font-size: clamp(0.94rem, 4.4vw, 1.25rem) !important;
    line-height: 1.5 !important;
  }

  .estate-studio-hero--construction-page .construction-cinematic-media__layer {
    object-fit: cover;
    object-position: center;
  }

  /* Sector heroes: bleed media edges (override desktop side insets causing narrow strips) */
  main.sector-page .estate-studio-hero--infrastructure-page.estate-studio-hero--construction-page .construction-cinematic-media,
  main.sector-page .estate-studio-hero--maintenance-page.estate-studio-hero--construction-page .construction-cinematic-media,
  main.sector-page .estate-studio-hero--steel-page.estate-studio-hero--construction-page .construction-cinematic-media {
    inset: 0 !important;
  }

  main.sector-page .estate-studio-hero--infrastructure-page.estate-studio-hero--construction-page .construction-cinematic-media::before,
  main.sector-page .estate-studio-hero--maintenance-page.estate-studio-hero--construction-page .construction-cinematic-media::before,
  main.sector-page .estate-studio-hero--steel-page.estate-studio-hero--construction-page .construction-cinematic-media::before {
    inset: 0 !important;
    background-position: center !important;
  }
}

@media (max-width: 768px) {
  /* ---- Foundation: no horizontal scroll, readable Arabic wrapping ---- */
  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  body,
  main {
    min-width: 0;
  }

  .container,
  .nav-wrap {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(1rem, 4vw, 1.35rem);
    box-sizing: border-box;
  }

  /* Flex/grid children: allow shrinking so text does not form a thin vertical strip */
  .container,
  main,
  section,
  article,
  [class*="__layout"],
  [class*="__grid"],
  [class*="-grid"],
  .sector-project-card,
  .home-service-card {
    min-width: 0;
  }

  main img,
  .sector-page img {
    max-width: 100%;
    height: auto;
  }

  /* ---- Motion off: instant, stable content ---- */
  .page-enter,
  .sector-page,
  .softPageEnter {
    animation: none !important;
  }

  .reveal-up,
  .reveal-up.is-visible,
  .luxury-reveal-section,
  .luxury-reveal-section.is-visible,
  .premium-hero .reveal-up,
  .premium-hero.is-revealed .reveal-up,
  .home-service-deck.is-pending .home-service-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .luxury-pan-image,
  .luxury-pan-image--alt,
  .soft-parallax,
  .soft-parallax--alt,
  .construction-gallery-motion {
    animation: none !important;
    transform: none !important;
  }

  .hover-lift,
  .hover-lift:hover,
  .hover-lift:active,
  .sector-page .sector-project-card,
  .sector-page .sector-project-card:hover,
  .sector-page .sector-project-card.is-active,
  .home-service-card:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: inherit;
  }

  /* ---- Home: sector cards row -> one column ---- */
  .home-service-deck__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .home-service-card,
  .home-service-card.home-service-card__link {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 260px !important;
    height: auto !important;
  }

  .home-sector-stage__grid {
    grid-template-columns: 1fr !important;
  }

  .home-studio-intro__cards {
    grid-template-columns: 1fr !important;
  }

  /* ---- Services / generic luxury grids ---- */
  .services-page--luxury [class*="__grid"],
  .estate-projects-page--luxury [class*="__grid"],
  .contact-page--luxury [class*="__grid"],
  .services-page--luxury .service-map__grid,
  .services-page--luxury .service-map__grid .service-map-card:last-child {
    grid-template-columns: 1fr !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .services-page--luxury .service-map__grid .service-map-card:last-child {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  /* ---- Sector inner pages ---- */
  .sector-hero__inner,
  .sector-overview__layout,
  .sector-process__layout,
  .sector-links {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .sector-overview__points {
    grid-template-columns: 1fr !important;
  }

  .sector-gallery__grid,
  .sector-projects__grid,
  .sector-projects__grid--expanded {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .sector-project-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sector-process__steps {
    grid-template-columns: 1fr !important;
  }

  .estate-studio-hero--inner .estate-studio-hero__inner {
    min-height: auto;
    padding-block: clamp(5.5rem, 12vw, 7rem) clamp(1.5rem, 4vw, 2rem);
  }

  .estate-studio-hero--inner .estate-studio-hero__copy {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .about-values-grid,
  .two-column-grid,
  .journey-grid,
  .hero-grid,
  .split-section,
  .contact-grid,
  .project-grid,
  .feature-grid,
  .real-estate-grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Estate / project lists ---- */
  .estate-projects-page--luxury .estate-project-list-card,
  .estate-projects-page--luxury [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Tables: scroll if any wide table remains ---- */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* =======================================================================
     real-estate.html — inline page (link mobile-system last in <head>)
     ===================================================================== */
  body .hero-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body .hero {
    min-height: auto !important;
    padding-top: 5.5rem !important;
  }

  body .projects-grid,
  body .about-grid,
  body .about-features,
  body .about-features-row,
  body .re-why-grid,
  body .status-grid,
  body .stats-grid,
  body .re-stats-grid,
  body .modal-details {
    grid-template-columns: 1fr !important;
  }

  body .stats-grid {
    grid-template-columns: 1fr !important;
  }

  body [class*="grid"][style*="grid-template"] {
    min-width: 0;
  }

  body .hero-left-glow,
  body .hero-left-glow--one,
  body .hero-left-glow--two {
    animation: none !important;
  }

  /* =======================================================================
     Bayan project pages (inline CSS): common grid class names (b3/b4/b5…)
     ===================================================================== */
  body .story-grid,
  body .features-grid,
  body .stats-grid,
  body .warranties-grid,
  body .extras-grid,
  body .data-grid,
  body .sales-stats-grid,
  body .inventory-stats-grid,
  body .highlights-grid,
  body .b1p-strip,
  body .b1p-metrics,
  body .b1p-hero-grid,
  body .form-row {
    grid-template-columns: 1fr !important;
  }

  body .b1p-hero,
  body .b1p-hero-grid {
    height: auto !important;
    min-height: 0 !important;
  }

  body .b1p-media {
    min-height: 220px !important;
  }

  body .b1p-smart-features,
  body .b1p-signature-grid,
  body .estate-inventory-lab .estate-detail-layout {
    grid-template-columns: 1fr !important;
  }

  /* =======================================================================
     Sector pages — independent mobile hero: image strip + solid reading slab
     ===================================================================== */
  main.sector-page .estate-studio-hero--construction-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-top: clamp(4.85rem, 13vw, 5.85rem) !important;
    background-color: #061522 !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    height: clamp(160px, 28svh, 228px) !important;
    max-height: 240px !important;
    overflow: hidden !important;
    border-radius: 0 0 22px 22px !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-media__layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter:
      brightness(0.96) contrast(1.04) saturate(1.03) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25)) !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-media::after {
    background:
      linear-gradient(
        180deg,
        rgba(7, 18, 29, 0.05) 0%,
        rgba(7, 18, 29, 0.42) 100%
      ) !important;
    z-index: 2 !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-right-watermark {
    display: none !important;
  }

  main.sector-page .estate-studio-hero--construction-page .estate-studio-hero__inner {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-block:
      clamp(0.95rem, 4vw, 1.35rem)
      clamp(1.05rem, 4vw, 1.55rem) !important;
    padding-inline: clamp(1rem, 4vw, 1.35rem) !important;
    gap: 0.65rem !important;
    min-width: 0 !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-copy,
  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-copy--plain {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    justify-items: stretch !important;
    isolation: isolate;
    z-index: 3 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding:
      clamp(0.92rem, 4vw, 1.18rem)
      clamp(0.85rem, 3.8vw, 1.12rem)
      clamp(1rem, 4.2vw, 1.2rem)
      !important;
    border-radius: 18px !important;
    border: 1px solid rgba(236, 210, 145, 0.24) !important;
    background:
      linear-gradient(
        165deg,
        rgba(245, 250, 255, 0.98) 0%,
        rgba(232, 240, 248, 0.97) 55%,
        rgba(226, 237, 252, 0.98) 100%
      ) !important;
    box-shadow:
      0 12px 34px rgba(4, 12, 22, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.65);
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-copy::before,
  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-copy::after {
    content: none !important;
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-button {
    align-self: center !important;
    text-align: center !important;
    max-width: 100%;
    box-shadow:
      0 4px 14px rgba(7, 24, 40, 0.18),
      0 0 0 1px rgba(245, 220, 164, 0.35);
  }

  main.sector-page .estate-studio-hero--construction-page .construction-cinematic-paragraph {
    color: #102a43 !important;
    text-shadow: none !important;
    font-weight: 700 !important;
    font-size: clamp(0.92rem, 4vw, 1.05rem) !important;
    line-height: 1.55 !important;
    max-width: none !important;
    text-align: right !important;
    justify-self: stretch !important;
  }

  /* ---- Index «تنوعنا سر قوتنا» — readable stacked map (no absolute overlap on phones) ---- */
  .home-showcase-frame--value {
    overflow: visible !important;
    border-radius: 22px !important;
  }

  .home-showcase-panel__layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .home-showcase-panel__visual,
  .home-showcase-frame,
  .home-value-map {
    width: 100% !important;
    max-width: none !important;
  }

  .home-value-map {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.62rem !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: clamp(0.85rem, 3vw, 1.05rem) !important;
    position: relative !important;
  }

  .home-value-map::before {
    display: none !important;
    content: none !important;
  }

  .home-value-map__link {
    display: none !important;
  }

  .home-value-map__orb,
  .home-value-map__orb--core {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    --base-transform: none !important;
    --reveal-x: 0px !important;
    --reveal-y: 0px !important;
  }

  .home-value-map__orb--core {
    order: -1 !important;
    min-height: auto !important;
    padding: clamp(1rem, 3vw, 1.15rem) !important;
  }

  .home-value-map__orb:not(.home-value-map__orb--core) {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 0.72rem !important;
    text-align: right !important;
    min-height: auto !important;
    padding: 0.76rem 0.85rem !important;
    justify-items: stretch !important;
  }

  .home-value-map__orb:not(.home-value-map__orb--core) strong {
    justify-self: start !important;
    margin: 0 !important;
  }

  .home-value-map__orb:not(.home-value-map__orb--core) .home-value-map__icon {
    margin: 0 !important;
    justify-self: center !important;
  }

  .home-value-map.is-pending .home-value-map__orb,
  .home-value-map.is-pending .home-value-map__link,
  .home-value-map.is-revealed .home-value-map__orb,
  .home-value-map.is-revealed .home-value-map__link {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  .home-showcase-panel__points {
    gap: 0.72rem !important;
  }

  .home-showcase-panel__points article {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* ---- Index / home sections ---- */
  .hero-grid-home,
  .hero-grid-home-final,
  .footer-grid,
  .client-sectors-grid,
  .animated-stats-grid,
  .hero-stats,
  .stats-strip,
  .executive-highlights,
  .inventory-overview,
  .unit-row,
  .home-showcase-panel [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  .hover-zoom,
  .hover-zoom:hover {
    transform: none !important;
    transition: none !important;
  }

  body.contact-studio-page .contact-studio__layout,
  .contact-page--luxury .contact-studio__layout,
  .contact-studio-page .contact-presence__grid,
  .contact-page--luxury .contact-presence__grid {
    grid-template-columns: 1fr !important;
  }

  /* ---- Home hero (index inline animations) — stable text on small screens ---- */
  .estate-studio-hero--home .estate-studio-hero__copy > .estate-studio-hero__title,
  .estate-studio-hero--home .estate-studio-hero__copy > .hero-subtext--home,
  .estate-studio-hero--home .estate-studio-hero__copy > .hero-actions--hero,
  .estate-studio-hero--home .estate-studio-hero__copy > .hero-scroll-cue {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .hero-scroll-cue .explore-arrow-line {
    animation: none !important;
  }
}

@media (max-width: 960px) {
  /* About hero — ≤960px: same structural pattern as sector mobile heroes (desktop absolute layout breaks here) */
  body.about-page .about-hero-mobile-band {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(160px, 28svh, 228px) !important;
    max-height: 240px !important;
    margin: 0 !important;
    border-radius: 0 0 22px 22px !important;
    overflow: hidden !important;
    background-color: #061522 !important;
    background-image: var(--inner-hero-image) !important;
    background-size: cover !important;
    background-position: var(--inner-hero-mobile-position, 58% center) !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 -22px 40px rgba(5, 16, 28, 0.42) !important;
    isolation: isolate !important;
  }

  body.about-page .about-hero-mobile-band::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(7, 18, 29, 0.08), rgba(7, 18, 29, 0.38)) !important;
  }

  body.about-page .estate-studio-hero--about-page {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: clamp(4.75rem, 12vw, 5.85rem) !important;
    padding-bottom: 1.15rem !important;
    background-image: none !important;
    background-color: #061522 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    isolation: isolate !important;
  }

  body.about-page .estate-studio-hero--about-page::before,
  body.about-page .estate-studio-hero--about-page::after {
    content: none !important;
    display: none !important;
  }

  body.about-page .estate-studio-hero--about-page .estate-studio-hero__veil {
    display: none !important;
  }

  body.about-page .estate-studio-hero--about-page .about-hero-open-veil,
  body.about-page .estate-studio-hero--about-page .about-hero-gold-particles--subtle,
  body.about-page .hero-wall-panel__spotlight {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.about-page .estate-studio-hero--about-page .container.estate-studio-hero__inner {
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding-block: 0.65rem 0.15rem !important;
    padding-inline: clamp(1rem, 4vw, 1.35rem) !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 4 !important;
  }

  body.about-page .estate-studio-hero--about-page .estate-studio-hero__copy {
    min-height: 0 !important;
  }

  body.about-page .estate-studio-hero--about-page .estate-studio-hero__copy.estate-studio-hero__copy--inner {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    align-items: stretch !important;
  }

  body.about-page .estate-studio-hero--about-page .estate-studio-hero__copy::after {
    content: none !important;
    display: none !important;
  }

  body.about-page .estate-studio-hero--about-page > .about-bottom-values-strip {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    position: relative !important;
    z-index: 4 !important;
  }

  body.about-page .estate-studio-hero--about-page > .hero-scroll-cue--bottom {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    position: relative !important;
    z-index: 4 !important;
  }

  body.about-page .about-hero-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    justify-items: stretch !important;
  }

  body.about-page .about-hero-stage__wall.hero-wall-panel,
  body.about-page .hero-wall-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(1.15rem, 4vw, 1.55rem) !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 252, 245, 0.97),
        rgba(248, 244, 236, 0.98)
      ) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(184, 148, 87, 0.28) !important;
    box-shadow:
      0 22px 48px rgba(5, 18, 30, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: none !important;
    color: #1b2f42 !important;
    text-align: center !important;
  }

  body.about-page .about-hero-stage__wall::before {
    display: none !important;
    content: none !important;
  }

  body.about-page .about-hero-stage__brand-ar,
  body.about-page .estate-studio-hero--about-page h1.about-hero-stage__brand-ar {
    transform: none !important;
    margin: 0 !important;
    color: #0c2840 !important;
    font-size: clamp(1.75rem, 5.8vw, 2.05rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    background-clip: border-box !important;
  }

  body.about-page .about-hero-stage__brand-en,
  body.about-page .estate-studio-hero--about-page p.about-hero-stage__brand-en {
    transform: none !important;
    margin: 0.35rem 0 0 !important;
    color: rgba(12, 40, 64, 0.72) !important;
    text-shadow: none !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.14em !important;
  }

  body.about-page .about-hero-stage__subtitle,
  body.about-page .estate-studio-hero--about-page p.about-hero-stage__subtitle {
    transform: none !important;
    margin: 0.5rem 0 0 !important;
    max-width: none !important;
    color: rgba(23, 40, 55, 0.92) !important;
    text-shadow: none !important;
    font-size: clamp(0.95rem, 3.9vw, 1.06rem) !important;
    line-height: 1.65 !important;
    font-weight: 600 !important;
  }

  body.about-page .about-hero-stage__divider {
    opacity: 0.92 !important;
    margin-block: 0.5rem !important;
  }

  body.about-page .about-hero-stage__mini {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin-top: 0.35rem !important;
    transform: none !important;
  }

  body.about-page .about-hero-stage__mini-item {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
    padding: 0.72rem 0.82rem !important;
    margin: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(16, 42, 67, 0.1) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    justify-content: flex-start !important;
    text-align: right !important;
    box-shadow: 0 6px 16px rgba(10, 31, 51, 0.05) !important;
  }

  body.about-page .about-hero-stage__mini-icon {
    flex-shrink: 0 !important;
    color: #124060 !important;
    transform: none !important;
  }

  body.about-page .about-hero-stage__mini-item span:not(.about-hero-stage__mini-icon) {
    color: rgba(15, 40, 60, 0.95) !important;
    font-weight: 700 !important;
    font-size: 0.94rem !important;
  }

  body.about-page .about-hero-mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.about-page .values-wall-panel {
    display: grid !important;
    visibility: visible !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    transform-origin: center center !important;
    perspective: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(1rem, 3.8vw, 1.35rem) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(184, 148, 87, 0.3) !important;
    background: rgba(253, 250, 242, 0.96) !important;
    color: #0c2840 !important;
    box-shadow: 0 16px 36px rgba(5, 18, 30, 0.1) !important;
    gap: 0.65rem !important;
    filter: none !important;
    backface-visibility: visible !important;
  }

  body.about-page .values-wall-panel::before,
  body.about-page .values-wall-panel::after {
    display: none !important;
    content: none !important;
  }

  body.about-page .values-wall-panel h3 {
    font-size: 1.05rem !important;
    color: inherit !important;
    margin-bottom: 0.15rem !important;
    transform: none !important;
    text-shadow: none !important;
  }

  body.about-page .values-wall-panel ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  body.about-page .values-wall-panel li {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.6rem 0.65rem !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 42, 67, 0.08) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    font-weight: 600 !important;
    color: rgba(15, 40, 60, 0.95) !important;
    font-size: 0.9rem !important;
  }

  body.about-page .estate-studio-hero--about-page .estate-studio-hero__copy .values-wall-panel {
    display: grid !important;
    visibility: visible !important;
  }

  body.about-page .about-bottom-values-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    padding-block: 0.35rem 0 !important;
    padding-inline: clamp(1rem, 4vw, 1.35rem) !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
    max-width: none !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }

  body.about-page .about-bottom-values-strip::before,
  body.about-page .about-bottom-values-strip::after {
    display: none !important;
    content: none !important;
  }

  body.about-page .about-bottom-value-card {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    justify-self: stretch !important;
    min-height: auto !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 252, 245, 0.98),
        rgba(247, 242, 233, 0.98)
      ) !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(184, 148, 87, 0.28) !important;
    border-radius: 16px !important;
    padding: 0.7rem 0.82rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.65rem !important;
    color: rgba(23, 40, 55, 0.95) !important;
    box-shadow: 0 8px 20px rgba(5, 18, 30, 0.08);
  }

  body.about-page .about-bottom-value-card__icon svg {
    filter: none !important;
    stroke-width: 1.8;
  }

  body.about-page .about-bottom-value-card__icon {
    color: #124060 !important;
    flex-shrink: 0 !important;
    text-shadow: none !important;
  }

  body.about-page .about-bottom-value-card h4 {
    color: #0c2840 !important;
    margin: 0 !important;
    font-size: 0.93rem !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    text-align: right !important;
  }

  body.about-page .hero-scroll-cue--bottom {
    position: relative !important;
    margin-top: 0.85rem !important;
    inset: auto !important;
    justify-content: center !important;
    color: rgba(255, 250, 232, 0.95) !important;
    text-shadow: 0 2px 10px rgba(5, 18, 30, 0.45);
  }
}

/* Final mobile polish: keep the sticky header compact so it never veils content while scrolling. */
@media (max-width: 768px) {
  .site-header.site-header--home,
  .site-header.site-header--home.is-scrolled,
  body.about-page .site-header.site-header--home.is-scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    overflow: visible !important;
    background: rgba(6, 21, 34, 0.94) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 20px rgba(4, 14, 24, 0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .site-header--home::before,
  .site-header--home::after,
  .site-header.site-header--home.is-scrolled::before,
  .site-header.site-header--home.is-scrolled::after {
    content: none !important;
    display: none !important;
  }

  .site-header--home .nav-wrap,
  .site-header.site-header--home.is-scrolled .nav-wrap {
    min-height: 72px !important;
    height: 72px !important;
    padding-block: 0 !important;
    align-items: center !important;
  }

  .site-header--home .brand,
  .site-header.site-header--home.is-scrolled .brand {
    position: static !important;
    transform: none !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .site-header--home .brand img,
  .site-header--home .brand-full--home,
  .site-header.site-header--home.is-scrolled .brand-full--home {
    width: 92px !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }

  .site-header--home .nav-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
  }

  body.about-page .estate-studio-hero--about-page {
    padding-top: 72px !important;
  }

  body.about-page .about-hero-mobile-band {
    margin-top: 0 !important;
  }

  body.about-page .hero-scroll-cue--bottom {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 1rem !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
  }
}

/* ── Mobile Bottom Action Bar ─────────────────────────────────────────────── */
.bc-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .bc-mobile-bar {
    display: flex;
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--navy-dark);
    border-top: 1px solid rgba(197, 160, 89, 0.18);
    z-index: 300;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bc-mobile-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    padding-inline: 2px;
  }

  .bc-mobile-bar a:hover,
  .bc-mobile-bar a.active {
    color: var(--gold-light);
    background: rgba(197, 160, 89, 0.07);
  }

  .bc-mobile-bar a svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  body.has-mobile-bar {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 360px & 390px tight fixes ────────────────────────────────────────────── */
@media (max-width: 390px) {
  .container {
    padding-inline: 1rem !important;
  }

  .section-heading,
  .section-heading-tight {
    font-size: clamp(1.3rem, 7.5vw, 1.75rem) !important;
  }

  .estate-studio-hero__inner {
    padding-block: 5rem 1.5rem !important;
  }

  .estate-studio-hero__copy h1 {
    font-size: clamp(1.6rem, 9vw, 2.4rem) !important;
  }

  .estate-studio-hero__copy p {
    font-size: clamp(0.85rem, 4.2vw, 1rem) !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  .site-nav a {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 360px) {
  .bc-theme-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
  }

  .brand-stacked img {
    height: 44px !important;
  }
}

/* ── Phase 7: Comprehensive Responsive Enhancements ──────────────────────── */

/* 768px — Tablet ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Theme toggle visible & correctly sized on tablet */
  .bc-theme-toggle {
    width: 38px !important;
    height: 38px !important;
  }

  /* Nav wrap: prevent overflow */
  .nav-wrap {
    gap: 0.75rem !important;
    padding-inline: 1rem !important;
  }

  /* Home company panel - single column */
  .home-company-panel {
    grid-template-columns: 1fr !important;
  }

  /* Hero sections: prevent over-shrinking */
  .estate-studio-hero {
    min-height: 88vh !important;
  }

  /* Sector cards - ensure readable */
  .sector-project-card {
    min-height: auto !important;
  }

  /* About chairman portrait */
  .about-chairman-portrait {
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  /* Signature service cards */
  .signature-service-card {
    min-height: auto !important;
  }

  /* Services luxury cards */
  .services-luxury-cards {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Contact grid - single column */
  .contact-studio__grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer - single column at tablet */
  .site-footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding-block: 2rem 1.5rem !important;
  }

  /* section padding reduction */
  .section {
    padding-block: 3rem !important;
  }
}

/* 1024px — Small Laptop ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero content width */
  .estate-studio-hero__inner {
    max-width: 100% !important;
  }

  /* Showcase panel layout */
  .signature-showcase__frame {
    height: clamp(280px, 40vh, 480px) !important;
  }

  /* sector overview grid */
  .sector-overview__points {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Estate journey steps */
  .estate-journey {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 1440px+ — Large screens: prevent over-stretching ─────────────────────── */
@media (min-width: 1440px) {
  .container {
    max-width: 1340px !important;
  }

  .estate-studio-hero__inner {
    max-width: 1340px !important;
  }

  .site-footer .footer-grid {
    max-width: 1340px !important;
  }
}

/* Ultra-wide 1920px+ ────────────────────────────────────────────────────── */
@media (min-width: 1920px) {
  .container {
    max-width: 1560px !important;
  }

  .estate-studio-hero__copy h1 {
    font-size: clamp(2.8rem, 3.5vw, 5rem) !important;
  }

  .section-heading {
    font-size: clamp(2rem, 2.5vw, 3.5rem) !important;
  }
}

/* ── bc-theme-toggle visibility in nav-wrap ──────────────────────────────── */
@media (max-width: 760px) {
  /* Show theme toggle between hamburger and close, before the nav */
  .nav-wrap {
    display: grid !important;
    grid-template-columns: auto 1fr auto auto !important;
    grid-template-areas: "brand . toggle hamburger" !important;
    align-items: center !important;
  }

  .brand, .brand-stacked {
    grid-area: brand !important;
  }

  .bc-theme-toggle {
    grid-area: toggle !important;
  }

  .nav-toggle {
    grid-area: hamburger !important;
  }

  .site-nav {
    grid-column: 1 / -1 !important;
    grid-area: unset !important;
  }
}