/* ================================================================
   RESPONSIVE STYLESHEET — rem-based sizing
   Base: 1rem = 16px (browser default)

   Breakpoints:
     Phone:   ≤ 37.4375rem  (599px)
     Tablet:  ≤ 52.4375rem  (839px)
     Desktop: > 52.4375rem
     Large:   ≥ 75rem       (1200px)
     XLarge:  ≥ 100rem      (1600px)
   ================================================================ */

/* ── Global — all screen sizes ──────────────────────────────── */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
main {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.content-body {
  overflow: visible !important;
  height: auto !important;
  flex: 1 1 auto !important;
}
/* Footer sticks to bottom when content is short */
main {
  display: flex !important;
  flex-direction: column !important;
}
footer, .mdc-mega-footer {
  margin-top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}
.mdc-mega-footer .footer-container {
  padding: 0.5rem 0.5rem !important;
}
.mdc-mega-footer .mdc-mega-footer__bottom-section {
  padding: 0.5rem 1.5rem !important;
}
/* Fix SPA layout — keep scroll but footer at end of content */
.um-layout {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}
main {
  overflow-y: auto !important;
  flex: 1 !important;
}

/* Fix SPA scroll container — use normal page scroll on mobile */
@media (max-width: 52.4375rem) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;
  }
  body > .um-layout {
    position: static !important;
    height: auto !important;
  }
  main {
    overflow: visible !important;
    height: auto !important;
    flex: none !important;
  }
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}
.section {
  visibility: visible !important;
}
.invisible {
  visibility: visible !important;
  height: auto !important;
}

/* ── Tab content ────────────────────────────────────────────── */
.tab-content { display: none; }
.tab-content.is-active { display: block; }

/* ── Drawer header — green background for logo visibility ──── */
.nav-drawer .drawer__header {
  background-color: #00484f !important;
}
.nav-drawer .drawer__close {
  color: #fff !important;
}

/* ── Drawer close button fix (via JS in mobile.css won't work, adding inline) ── */

/* ── WhatsApp floating button — fixed on screen ────────────── */
.social-media.floating.no-follow {
  position: fixed !important;
  bottom: 1rem !important;
  right: 1rem !important;
  z-index: 9999 !important;
}
.social-media.floating.no-follow .social-btn {
  display: block !important;
  width: 3rem !important;
  height: 3rem !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.social-media.floating.no-follow .social-btn.whatsapp {
  background-image: url(/images/whatsapp_floating.png) !important;
}

/* ── Map mobile label — hidden on desktop ──────────────────── */
.map-mobile-label { display: none; }

/* ── Swiper slides always visible but contained ────────────── */
.swiper-slide { visibility: visible !important; }
.swiper { overflow: hidden !important; }
/* Full-width sections should not be constrained */
.section.tb,
.section.testimonials-panel,
.section.social-media {
  max-width: 100%;
  width: 100%;
}

/* ── Text overlay positioning (replaces stripped inline styles) */
.text-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.text-overlay-wrapper {
  position: absolute;
  right: 0; bottom: 0;
  pointer-events: auto;
}
.text-overlay-content {
  position: relative;
}

/* ── Text panel swiper fix (single-slide) — mobile only ─────── */
@media (max-width: 52.4375rem) {
  .text-panel .swiper:not(.swiper-autoheight) {
    overflow: visible !important;
    height: auto !important;
  }
  .text-panel .swiper:not(.swiper-autoheight) .swiper-wrapper {
    transform: none !important;
    height: auto !important;
    display: block !important;
  }
  .text-panel .swiper:not(.swiper-autoheight) .swiper-slide {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    transform: none !important;
  }
}
/* Autoheight swipers in text panels should behave normally */
.text-panel .swiper.swiper-autoheight {
  overflow: hidden !important;
}

/* ================================================================
   DESKTOP (> 52.4375rem)
   Ensure consistent sizing across different desktop widths
   ================================================================ */
@media (min-width: 52.5rem) {

  /* ── Magnific Popup lightbox — fullscreen overlay ─────────── */
  .mfp-bg {
    z-index: 10000 !important;
    opacity: 0.95 !important;
  }
  .mfp-wrap {
    z-index: 10001 !important;
  }
  .mfp-container {
    padding: 0 !important;
  }
  .mfp-img {
    max-height: 90vh !important;
    width: auto !important;
    height: 80vh !important;
    object-fit: contain !important;
  }
  .mfp-figure::after {
    box-shadow: none !important;
    background: transparent !important;
  }
  .mfp-counter {
    color: #fff !important;
    font-size: 0.875rem !important;
  }
  .mfp-close {
    font-size: 2rem !important;
    color: #fff !important;
  }
  .mfp-arrow {
    opacity: 0.8 !important;
  }

  /* ── Typography scales with viewport on large screens ────── */
  .panel-name {
    font-size: clamp(1.25rem, 1.5vw, 2rem);
  }
  .rich-text-content {
    font-size: clamp(0.875rem, 0.9vw, 1.125rem);
    line-height: 1.6;
  }
  .rich-text-content h1 { font-size: clamp(1.75rem, 2vw, 2.5rem); }
  .rich-text-content h2 { font-size: clamp(1.5rem, 1.6vw, 2rem); }
  .rich-text-content h3 { font-size: clamp(1.125rem, 1.2vw, 1.5rem); }

  /* ── Cards scale gracefully ──────────────────────────────── */
  .mdc-card {
    border-radius: 0.5rem;
  }
  .mdc-card__title-text {
    font-size: clamp(0.875rem, 1vw, 1.25rem);
  }

  /* ── Carousel text overlay — fluid sizing ────────────────── */
  .text-overlay-content strong,
  .text-overlay-content .heading {
    font-size: clamp(1.5rem, 2.5vw, 3rem);
  }
  .text-overlay-content p,
  .text-overlay-content .sub-heading {
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    letter-spacing: 0.05em;
  }

  /* ── Footer consistent sizing ────────────────────────────── */
  .mdc-mega-footer {
    font-size: clamp(0.8rem, 0.85vw, 1rem);
  }

  /* ── Map minimum height scales with viewport ─────────────── */
  .map {
    min-height: clamp(25rem, 40vw, 50rem);
  }

  /* ── Buttons ─────────────────────────────────────────────── */
  .mdc-button {
    font-size: clamp(0.75rem, 0.85vw, 1rem);
    padding: 0.5rem 1rem;
  }
}

/* ── Large desktops (≥ 75rem / 1200px) ──────────────────────── */
@media (min-width: 75rem) {
  .mdc-layout-grid {
    padding-left: clamp(1.5rem, 3vw, 4rem);
    padding-right: clamp(1.5rem, 3vw, 4rem);
  }
}

/* ── Extra-large screens (≥ 100rem / 1600px) ────────────────── */

/* ================================================================
   TABLET + PHONE (≤ 52.4375rem / 839px)
   ================================================================ */
@media (max-width: 52.4375rem) {

  /* ── Navigation ──────────────────────────────────────────── */
  .mdc-top-app-bar__navigation-icon.hide { display: flex !important; }
  .horizontal-menu-wrapper { display: none !important; }
  .drawer__account.sign-in { display: none !important; }

  /* Hamburger — far left, vertically centered with logo */
  .mdc-top-app-bar__navigation-icon {
    position: absolute !important;
    left: 0.25rem !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
  }
  .mdc-top-app-bar__row.toolbar {
    padding-left: 2.5rem !important;
    padding-right: 0.25rem !important;
  }

  /* ── Layout grid — single column ─────────────────────────── */
  .mdc-layout-grid {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-x: hidden !important;
  }
  .mdc-layout-grid__inner {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .mdc-layout-grid__cell {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .mdc-layout-grid__cell[class*="hide-tablet"],
  .mdc-layout-grid__cell[class*="hide-phone"] {
    display: none !important;
  }

  /* ── Sections & panels ───────────────────────────────────── */
  .section {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .panel.text-panel {
    padding: 1rem !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  [class*="AA0030"].panel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Hero carousel ───────────────────────────────────────── */
  .tb-carousel .carousel__media {
    aspect-ratio: 1/1 !important;
  }

  /* ── Text overlay on carousel ────────────────────────────── */
  .swiper-slide .text-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    pointer-events: none;
  }
  .swiper-slide .text-overlay-wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    pointer-events: auto;
  }
  .swiper-slide .text-overlay-content {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    color: #fff !important;
  }
  .swiper-slide .text-overlay-content * { color: #fff !important; }
  .swiper-slide .text-overlay-content strong,
  .swiper-slide .text-overlay-content strong *,
  .swiper-slide .text-overlay-content .heading,
  .swiper-slide .text-overlay-content .heading * {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    display: inline !important;
  }
  .swiper-slide .text-overlay-content strong {
    display: block !important;
  }
  .swiper-slide .text-overlay-content p,
  .swiper-slide .text-overlay-content p *,
  .swiper-slide .text-overlay-content .sub-heading,
  .swiper-slide .text-overlay-content .sub-heading * {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .swiper-slide .text-overlay-content p {
    display: block !important;
    margin-top: 0.375rem !important;
  }

  /* ── Article section (READ ARTICLE) ──────────────────────── */
  .ar-12-5,
  .carousel__media[style*="aspect-ratio:12/5"],
  .carousel__media[style*="aspect-ratio: 12/5"],
  #AA00304A4DafJHg .carousel__media {
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
  }
  #AA00304A4DafJHg .carousel__media img {
    object-fit: cover !important;
  }
  #AA00304A4DafJHg .cta-wrapper,
  #AA00304A4DafJHg .on-image {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: auto !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.6)) !important;
    padding: 1.25rem !important;
    text-align: center !important;
  }
  #AA00304A4DafJHg .cta-wrapper *,
  #AA00304A4DafJHg .on-image * { color: #fff !important; }
  #AA00304A4DafJHg .visual.swiper-slide,
  #AA00304A4DafJHg .swiper {
    position: relative !important;
    overflow: hidden !important;
  }
  #AA00304A4DafJHg.panel.image-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── Portfolio grid — single column ──────────────────────── */
  .items .mdc-layout-grid__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .items a.item { width: 100% !important; max-width: 100% !important; }

  /* ── Text content — full width ───────────────────────────── */
  .rich-text-content,
  .tab-content,
  .text-panel .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .tab-content {
    margin: 0 !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
  }

  /* ── Tables inside rich text — stack vertically on mobile ── */
  .rich-text-content table {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .rich-text-content tbody,
  .rich-text-content tr {
    display: block !important;
    width: 100% !important;
  }
  .rich-text-content td {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 0 !important;
    box-sizing: border-box !important;
  }
  /* Override ONLY inline font sizes inside tables (not all rich text) */
  .rich-text-content table h1,
  .rich-text-content table h1 * {
    font-size: 1.375rem !important;
  }
  .rich-text-content table [style*="font-size:35px"],
  .rich-text-content table [style*="font-size:30px"],
  .rich-text-content table [style*="font-size: 35px"],
  .rich-text-content table [style*="font-size: 30px"] {
    font-size: 1.375rem !important;
  }
  .rich-text-content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Images & media ──────────────────────────────────────── */
  table { max-width: 100% !important; overflow-x: auto; display: block; }
  .footer-container { overflow: hidden !important; }

  /* ── Footer: Useful Links & Legal side by side ─────────── */
  .footer-sections.mdc-layout-grid__inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .footer-sections > .mdc-layout-grid__cell {
    flex: 1 1 45% !important;
    width: auto !important;
    min-width: 8rem !important;
  }
  .footer-container .mdc-layout-grid {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* ── Contact form rows — stack on mobile ───────────────────── */
  .cf-row-email,
  .cf-row-name {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cf-row-email > span {
    text-align: center;
    padding: 0.25rem 0 !important;
  }

  /* ── Map ──────────────────────────────────────────────────── */
  .map { min-height: 18.75rem !important; position: relative !important; }
  .map-mobile-label {
    display: block !important;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-family: Montserrat, sans-serif;
    color: #333;
    line-height: 1.4;
    max-width: 70%;
    pointer-events: none;
  }

  /* ── Tabs — horizontal scroll like original ───────────────── */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs .tab { white-space: nowrap; flex-shrink: 0; }
  .mdc-tab-bar { overflow: hidden !important; }
  .mdc-tab-scroller { overflow: hidden !important; }
  .mdc-tab-scroller__scroll-area { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mdc-tab-scroller__scroll-content { flex-wrap: nowrap !important; }
  .mdc-tab { flex-shrink: 0 !important; white-space: nowrap !important; }
  .tab-bar-left-button,
  .tab-bar-right-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    z-index: 5;
    /* visibility controlled by is-active class from JS */
  }

  /* ── Portfolio gallery card titles smaller ─────────────────── */
  .items .mdc-card__title-text {
    font-size: 1rem !important;
  }
  .items .mdc-card__subtitle-text {
    font-size: 0.8rem !important;
  }

  /* ── CTA wrapper no overflow ─────────────────────────────── */
  .cta-wrapper { max-width: 100% !important; overflow: hidden !important; height: auto !important; }

  /* ── Our Process / text-panel content — readable text ────── */
  .panel.text-panel .swiper-slide *,
  .panel.text-panel .rich-text-content * {
    max-width: 100% !important;
  }
  .panel.text-panel [style*="font-size:12px"],
  .panel.text-panel [style*="font-size: 12px"],
  .panel.text-panel [style*="font-size:11px"],
  .panel.text-panel [style*="font-size:10px"],
  .panel.text-panel [style*="font-size:13px"] {
    font-size: 0.875rem !important;
  }
  .panel.text-panel [style*="font-size:20px"],
  .panel.text-panel [style*="font-size:18px"],
  .panel.text-panel [style*="font-size: 20px"],
  .panel.text-panel [style*="font-size: 18px"] {
    font-size: 1.125rem !important;
  }

  /* ── Testimonials: full-width image on mobile ──────────────── */
  .testimonials-panel {
    background-image: none !important;
    padding: 0 !important;
  }
  .testimonials-panel .testimonials-panel-wrapper {
    padding: 0 !important;
  }
  .testimonials-panel .layer-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .testimonials-panel .layer-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 30% center !important;
    min-height: 22rem;
  }
  .testimonials-panel .testimonials {
    padding: 1rem !important;
  }
  .testimonials-panel .testimonial-panel-name {
    padding: 1rem 1rem 0.5rem !important;
  }

  /* ── Portfolio Why Choose Us text — no slider ─────────────── */
  #AA0030FiCABoqAk {
    overflow: visible !important;
    height: auto !important;
  }
  #AA0030FiCABoqAk .no-swiper-portfolio-text,
  #AA0030FiCABoqAk .portfolio-text-inner,
  #AA0030FiCABoqAk .rich-text-content {
    height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #AA0030FiCABoqAk .mdc-fab,
  #AA0030FiCABoqAk .swiper-pagination {
    display: none !important;
  }

  /* ── Portfolio banner video — square on mobile ─────────────── */
  #AA0030jDac2yFv .carousel__media {
    aspect-ratio: 1/1 !important;
  }
  #AA0030jDac2yFv video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── Gap before video section + proper aspect ratio ──────── */
  #AA00305OCEiNgbw {
    margin-top: 1rem !important;
  }
  #AA00305OCEiNgbw .carousel__media {
    aspect-ratio: 1/1 !important;
  }
  #AA00305OCEiNgbw video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── Process video — square on mobile ──────────────────────── */
  #AA00305OCEiNgbw .carousel__media {
    aspect-ratio: 1/1 !important;
  }
  #AA00305OCEiNgbw video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── Hero/banner images full width on mobile ──────────────── */
  #AA0030QXmgxoo0S,
  .section.panel.image-panel:first-of-type,
  .section.tb {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.panel.image-panel:first-of-type .carousel__media,
  #AA0030QXmgxoo0S .carousel__media {
    width: 100% !important;
  }

  /* ── About page: About Us text — no slider, full height ──── */
  #AA0030SMKxauMMv {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #AA0030SMKxauMMv .no-swiper-about,
  #AA0030SMKxauMMv .swiper,
  #AA0030SMKxauMMv [class*="no-swiper"] {
    overflow: visible !important;
    height: auto !important;
  }
  #AA0030SMKxauMMv .swiper-wrapper {
    height: auto !important;
    transform: none !important;
    display: block !important;
  }
  #AA0030SMKxauMMv .swiper-slide,
  #AA0030SMKxauMMv .rich-text-content {
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    position: relative !important;
  }
  #AA0030SMKxauMMv .swiper-button-prev,
  #AA0030SMKxauMMv .swiper-button-next,
  #AA0030SMKxauMMv .swiper-pagination,
  #AA0030SMKxauMMv .mdc-fab {
    display: none !important;
  }

  /* ── About page: Our Promise — 2x2 with icon+label paired ── */
  #AA0030ewDlxBsXX table {
    width: 100% !important;
    display: block !important;
  }
  #AA0030ewDlxBsXX tbody {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  #AA0030ewDlxBsXX tr {
    display: contents !important;
  }
  /* Title row td spans both columns */
  #AA0030ewDlxBsXX tr:first-child td {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  /* Icons row: icon1 col1, icon2 col2, icon3 col1, icon4 col2 */
  #AA0030ewDlxBsXX tr:nth-child(2) td:nth-child(1) { grid-column: 1; grid-row: 2; }
  #AA0030ewDlxBsXX tr:nth-child(2) td:nth-child(2) { grid-column: 2; grid-row: 2; }
  #AA0030ewDlxBsXX tr:nth-child(2) td:nth-child(3) { grid-column: 1; grid-row: 4; }
  #AA0030ewDlxBsXX tr:nth-child(2) td:nth-child(4) { grid-column: 2; grid-row: 4; }
  /* Labels row: label1 under icon1, label2 under icon2, etc */
  #AA0030ewDlxBsXX tr:nth-child(3) td:nth-child(1) { grid-column: 1; grid-row: 3; }
  #AA0030ewDlxBsXX tr:nth-child(3) td:nth-child(2) { grid-column: 2; grid-row: 3; }
  #AA0030ewDlxBsXX tr:nth-child(3) td:nth-child(3) { grid-column: 1; grid-row: 5; }
  #AA0030ewDlxBsXX tr:nth-child(3) td:nth-child(4) { grid-column: 2; grid-row: 5; }
  #AA0030ewDlxBsXX td {
    text-align: center !important;
    padding: 0.25rem !important;
    width: auto !important;
  }
  #AA0030ewDlxBsXX td img {
    max-width: 3rem !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Labels only — skip first row (title) */
  #AA0030ewDlxBsXX tr:nth-child(3) td,
  #AA0030ewDlxBsXX tr:nth-child(3) td span,
  #AA0030ewDlxBsXX tr:nth-child(3) td * {
    font-size: 0.7rem !important;
  }

  /* ── About page: Team — photo then bio, stacked vertically ─ */
  #AA0030ca-LNxwbn table {
    width: 100% !important;
  }
  #AA0030ca-LNxwbn tr {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  #AA0030ca-LNxwbn td {
    width: 100% !important;
    text-align: center !important;
  }
  /* Hide spacer tds (empty   cells) */
  #AA0030ca-LNxwbn tr:nth-child(3) { display: none !important; } /* spacer row */
  #AA0030ca-LNxwbn td:nth-child(odd):not(:nth-child(1)) {
    /* odd tds in data rows are spacers (td0, td2, td4 in 5-col rows) */
  }
  /* In row 2 (photos): td0=spacer, td1=photo1, td2=spacer, td3=photo2, td4=spacer */
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(1),
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(3),
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(5) {
    display: none !important;
  }
  /* In row 4 (bios): same pattern */
  #AA0030ca-LNxwbn tr:nth-child(4) td:nth-child(1),
  #AA0030ca-LNxwbn tr:nth-child(4) td:nth-child(3),
  #AA0030ca-LNxwbn tr:nth-child(4) td:nth-child(5) {
    display: none !important;
  }
  /* Reorder: photo1, bio1, photo2, bio2 */
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(2) { order: 1; } /* photo1 */
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(4) { order: 3; } /* photo2 */
  /* Bios need to interleave — but they're in a different row */
  /* Combine rows 2 and 4 using display:contents on tr */
  #AA0030ca-LNxwbn tbody {
    display: flex !important;
    flex-direction: column !important;
  }
  #AA0030ca-LNxwbn tr:nth-child(1),
  #AA0030ca-LNxwbn tr:nth-child(2),
  #AA0030ca-LNxwbn tr:nth-child(4) {
    display: contents !important;
  }
  /* Now all tds are direct flex children of tbody */
  /* Row 1: td0=spacer, td1=title, td2=spacer */
  #AA0030ca-LNxwbn tr:nth-child(1) td:nth-child(1),
  #AA0030ca-LNxwbn tr:nth-child(1) td:nth-child(3) { display: none !important; }
  #AA0030ca-LNxwbn tr:nth-child(1) td:nth-child(2) { order: 0; } /* title */
  /* Row 2 photos - reorder */
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(2) { order: 1; padding-top: 1rem !important; } /* photo1 */
  #AA0030ca-LNxwbn tr:nth-child(2) td:nth-child(4) { order: 3; padding-top: 1rem !important; } /* photo2 */
  /* Row 4 bios - reorder */
  #AA0030ca-LNxwbn tr:nth-child(4) td:nth-child(2) { order: 2; padding: 0.5rem 0 1.5rem !important; } /* bio1 */
  #AA0030ca-LNxwbn tr:nth-child(4) td:nth-child(4) { order: 4; padding: 0.5rem 0 1.5rem !important; } /* bio2 */
  /* Photos sizing */
  #AA0030ca-LNxwbn img {
    max-width: 12rem !important;
    height: auto !important;
    border-radius: 0.5rem;
    margin: 0 auto;
    display: block;
  }

  /* ── Logo ─────────────────────────────────────────────────── */
  .business-logo-wrapper img { max-width: 10rem; }
}

/* ================================================================
   PHONE ONLY (≤ 37.4375rem / 599px)
   ================================================================ */
@media (max-width: 37.4375rem) {
  .mdc-layout-grid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .panel-name { font-size: 1.125rem !important; }
  .map { min-height: 15rem !important; }
  .business-logo-wrapper img { max-width: 9rem; }

  /* ── Phone spacing ──────────────────────────────────────── */
  .panel.text-panel { padding: 1.25rem !important; }
  [class*="AA0030"].panel {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}