/* =========================================================
   MOBILE.CSS
   Every rule in this file lives inside @media (max-width: 768px).
   Desktop views are mathematically untouched — if you only edit
   inside the media query, you cannot affect desktop.

   Utility classes:
     .desktop-only   — visible on desktop, hidden on mobile
     .mobile-only    — hidden on desktop, visible on mobile
   ========================================================= */

/* Desktop default for the utility classes (outside the media query) */
.mobile-only { display: none !important; }
.desktop-only { display: revert; }

/* iOS / Safari sometimes substitutes its own emoji for arrow / symbol
   characters. Force text presentation everywhere so the icons render
   identically across iPhone, Android, and desktop. */
* { font-variant-emoji: text; }

/* iOS auto-styles phone numbers, emails, and addresses with its system
   blue link color. The format-detection meta tags suppress detection,
   and this rule guarantees inherited color even if a stray <a tel:>
   slips in. */
a[href^="tel:"], a[href^="mailto:"], a[href^="sms:"] {
  color: inherit !important;
  text-decoration: inherit !important;
}

/* =========================================================
   CARD IMAGE POPUP GALLERY
   Full-screen swipeable popup of all card images, used on
   services / living / kitchen / 3d-previews. These rules live
   OUTSIDE the mobile media query so the popup works on every
   screen size. Slides are built by each page's inline script. */
.pg-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.92);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pg-track {
  display: flex;
  width: 100%;
  height: 78%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pg-track::-webkit-scrollbar { display: none; }
.pg-slide {
  min-width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
.pg-caption {
  margin-top: 16px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 16px;
}
.pg-slide img {
  width: 100%;
  height: 450px;
  object-fit: cover;       /* same crop as the card */
  border-radius: 4px;
}
.pg-close {
  position: absolute;
  top: 12px;
  right: 18px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  z-index: 2;
  cursor: pointer;
  padding: 0;
}
.pg-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 20px;
}
.pg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 0.2s ease;
}
.pg-dot.active { background: #fff; }
.pg-counter {
  margin-top: 18px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
}
.pg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  padding: 0;
}
.pg-arrow:hover { background: rgba(0,0,0,0.6); }
.pg-prev { left: 10px; }
.pg-next { right: 10px; }

/* Desktop: show the whole image contained (not a wide full-bleed crop),
   and give the arrows a comfortable click target. */
@media (min-width: 769px) {
  .pg-slide img {
    width: auto;
    height: auto;
    max-width: 80vw;
    max-height: 74vh;
    object-fit: contain;
  }
  .pg-arrow { width: 52px; height: 52px; font-size: 32px; }
  .pg-prev { left: 28px; }
  .pg-next { right: 28px; }
  .pg-caption { font-size: 18px; margin-top: 22px; }
}

@media (max-width: 768px) {

  /* Utility class toggles */
  .desktop-only { display: none !important; }
  .mobile-only  { display: revert !important; }
  .mobile-only.flex { display: flex !important; }
  .mobile-only.grid { display: grid !important; }
  .mobile-only.block { display: block !important; }
  .mobile-only.inline-block { display: inline-block !important; }

  /* Prevent horizontal scroll caused by oversized desktop sections */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body { -webkit-text-size-adjust: 100%; }

  img, video { max-width: 100% !important; height: auto; }
  iframe { max-width: 100% !important; }

  /* ---------- HEADER BANNER (shared header.js & interiors-header.js) ---------- */
  .absolute.top-0.left-0.w-full.z-50 > div:first-child {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
  .absolute.top-0.left-0.w-full.z-50 > div:first-child > div {
    gap: 8px !important;
  }
  .absolute.top-0.left-0.w-full.z-50 > div:first-child p {
    font-size: 8px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .absolute.top-0.left-0.w-full.z-50 > div:first-child a {
    padding: 4px 8px !important;
    font-size: 8px !important;
    flex-shrink: 0;
  }

  /* ---------- DESKTOP NAV: hidden on mobile (replaced by hamburger) ---------- */
  header > nav { display: none !important; }

  /* Mobile hamburger bar (added by header.js / interiors-header.js)
     Layout: [hamburger]  [centered logo]  [spacer]  via 1fr-auto-1fr grid */
  .mobile-nav-bar {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background-color: #686058B3;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
  }
  .mobile-nav-toggle-wrap { position: static; justify-self: end; }
  .mobile-logo { justify-self: center; display: inline-flex; }
  .mobile-logo img { height: 44px !important; width: auto; display: block; }
  .mobile-nav-spacer { width: 38px; height: 1px; justify-self: start; }

  .mobile-nav-toggle {
    background: transparent;
    border: none;
    color: #a19c90;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 70; /* stay above the full-screen dropdown so the X can close it */
  }
  .mobile-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #a19c90;
    position: relative;
    transition: background 0.2s ease;
  }
  .mobile-nav-toggle span::before,
  .mobile-nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #a19c90;
    transition: transform 0.25s ease, top 0.25s ease;
  }
  .mobile-nav-toggle span::before { top: -7px; }
  .mobile-nav-toggle span::after  { top:  7px; }

  /* When dropdown is open, morph hamburger into an X */
  .mobile-nav-toggle-wrap:has(.mobile-nav-dropdown.open) .mobile-nav-toggle span {
    background: transparent;
  }
  .mobile-nav-toggle-wrap:has(.mobile-nav-dropdown.open) .mobile-nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .mobile-nav-toggle-wrap:has(.mobile-nav-dropdown.open) .mobile-nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* Full-screen dropdown overlay — starts just below the header bar.
     `top` and `height` are set inline by the toggle handler (the <header>
     is a transformed containing block, so we size it explicitly to fill the
     viewport below the nav bar regardless of header height). */
  .mobile-nav-dropdown {
    position: fixed;
    left: 0;
    width: 100vw;
    background: #686461;
    display: none;
    z-index: 60;
    overflow-y: auto;
  }
  .mobile-nav-dropdown.open {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 40px 24px 48px;
    transform-origin: top center;
    animation: navDropdownIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes navDropdownIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* Stagger each link in just after the panel appears */
  .mobile-nav-dropdown.open a {
    animation: navLinkIn 0.32s ease both;
  }
  .mobile-nav-dropdown.open a:nth-child(1) { animation-delay: 0.07s; }
  .mobile-nav-dropdown.open a:nth-child(2) { animation-delay: 0.11s; }
  .mobile-nav-dropdown.open a:nth-child(3) { animation-delay: 0.15s; }
  .mobile-nav-dropdown.open a:nth-child(4) { animation-delay: 0.19s; }
  .mobile-nav-dropdown.open a:nth-child(5) { animation-delay: 0.23s; }
  .mobile-nav-dropdown.open a:nth-child(6) { animation-delay: 0.27s; }
  .mobile-nav-dropdown.open a:nth-child(7) { animation-delay: 0.31s; }
  .mobile-nav-dropdown.open a:nth-child(8) { animation-delay: 0.35s; }
  @keyframes navLinkIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .mobile-nav-dropdown a {
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 26px;
    padding: 10px 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mobile-nav-dropdown a:hover { background: rgba(255,255,255,0.06); }

  /* ---------- HERO VIDEO/IMG sections ----------
     On mobile we always let the asset's natural width/aspect drive the
     section height — never crop. Works whether the page has a .mobile-only
     alt or only the desktop asset. */
  #home {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #home > video:not(.desktop-only),
  #home > img:not(.desktop-only) {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Interiors page hero: no mobile-only alt, so crop the wide desktop
     video into a square mobile hero (matches the homepage main video). */
  #home:has(> video > source[src*="interiors-main-video"]) {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  #home:has(> video > source[src*="interiors-main-video"]) > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* interior-contact.html hero: crop the wide image L/R into a square mobile hero */
  #home:has(> img[src*="contact-page-main-image"]) {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  #home:has(> img[src*="contact-page-main-image"]) > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Interior subsite company-logo strip: 3 logos on row 1, 2 centered on row 2.
     6-col grid so the bottom pair can sit centered without overlapping. */
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 18px 14px !important;
  }
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img {
    height: 44px !important;
    max-width: 100%;
  }
  /* Row 1 — 3 logos, each spanning 2 of 6 cols */
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img:nth-child(1) { grid-column: 1 / span 2; }
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img:nth-child(2) { grid-column: 3 / span 2; }
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img:nth-child(3) { grid-column: 5 / span 2; }
  /* Row 2 — 2 logos centered (cols 2–3 and 4–5) */
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img:nth-child(4) { grid-column: 2 / span 2; }
  .flex.flex-wrap:not(.desktop-only):has(> img[src*="company logo"]) > img:nth-child(5) { grid-column: 4 / span 2; }

  /* interiors.html "Our Locations" heading */
  .locations-heading { font-size: 22px !important; }

  /* interior-about.html intro text — equal space above and below on mobile.
     The image section below contributes its own 96px (py-24) top gap, so the
     text's bottom padding is 0 and its top padding matches that 96px. */
  .intro-text { padding-top: 96px !important; padding-bottom: 0 !important; }


  /* interiors.html contact section — show form above the image on mobile,
     with a gap between them */
  .contact-flip-mobile { flex-direction: column-reverse !important; gap: 28px; }
  /* make the bottom image span the full page width (edge to edge) on mobile.
     The flex container is items-center, so a 100vw child auto-centers full-bleed. */
  #contact .contact-flip-mobile > .flex-shrink-0 {
    width: 100vw !important;
    height: auto !important;
  }
  #contact .contact-flip-mobile > .flex-shrink-0 img {
    height: auto !important;
  }

  /* interiors.html company-logo strip → auto-sliding marquee */
  .logo-marquee { overflow: hidden; width: 100%; }
  .logo-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logoMarquee 16s linear infinite;
  }
  .logo-marquee-track img {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin: 0 22px;
    flex: 0 0 auto;
  }
  @keyframes logoMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ---------- HERO PILL (hero-pill.js) ---------- */
  .fixed.bottom-6.right-6 {
    bottom: 12px !important;
    right: 12px !important;
    left: auto !important;
    padding: 12px 18px !important;
    border-radius: 9999px !important; /* pill shape */
  }
  .fixed.bottom-6.right-6 p { font-size: 11px !important; margin-bottom: 8px !important; }
  .fixed.bottom-6.right-6 a { font-size: 10px !important; padding: 6px 10px !important; }
  .fixed.bottom-6.right-6 a img { width: 16px !important; height: 16px !important; }

  /* ---------- GENERIC SECTION PADDING ---------- */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  section.py-24, section.py-20, section.py-16 { padding-top: 40px !important; padding-bottom: 40px !important; }
  section.py-12 { padding-top: 28px !important; padding-bottom: 28px !important; }
  section.pt-32 { padding-top: 40px !important; }
  section.pt-20 { padding-top: 36px !important; }
  section.pb-24, section.pb-20 { padding-bottom: 36px !important; }

  /* ---------- TYPOGRAPHY ---------- */
  h1, .text-6xl, .text-5xl { font-size: 26px !important; line-height: 1.15 !important; }
  h2, .text-4xl { font-size: 21px !important; line-height: 1.2 !important; }
  h3, .text-3xl { font-size: 18px !important; line-height: 1.25 !important; }
  .text-2xl { font-size: 17px !important; }
  .text-xl  { font-size: 16px !important; }
  .text-lg  { font-size: 15px !important; }

  /* ---------- GRIDS: stack to one column ---------- */
  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3,
  .grid.md\:grid-cols-4,
  .grid.lg\:grid-cols-2,
  .grid.lg\:grid-cols-3,
  .grid.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .grid.grid-cols-3 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl { max-width: 100% !important; }

  /* ---------- SERVICE CIRCLES (index.html) ---------- */
  #services { padding: 40px 16px !important; }
  #services .max-w-6xl { gap: 22px !important; }
  #services .w-72 { width: 66% !important; max-width: 255px !important; min-height: 148px !important; padding: 30px 16px !important; display: flex !important; flex-direction: column; justify-content: center; }
  #services .w-72 h3 { font-size: 17px !important; color: #595959 !important; }
  #services .w-72 span { font-size: 12px !important; color: #90867e !important; text-transform: none !important; }

  /* ---------- EXTENSION TYPES SLIDER (index.html) ---------- */
  .ex-viewport { height: 440px !important; }
  .ex-card { width: 260px !important; height: 280px !important; margin-left: -130px !important; top: 30px !important; }
  .ex-arrow { top: 170px !important; font-size: 28px !important; padding: 8px 10px !important; }
  .ex-arrow.ex-left  { left: 16px !important; }
  .ex-arrow.ex-right { left: auto !important; right: 16px !important; transform: translate(50%, -50%) !important; }
  .ex-info .ex-name { font-size: 16px !important; }
  /* Circle + dots scaled to the smaller mobile carousel.
     Use a viewport-relative size so it never overflows narrow phones. */
  .ex-circle { width: min(290px, 82vw) !important; height: min(290px, 82vw) !important; top: 170px !important; }
  .ex-dots { top: 342px !important; }
  .ex-name-label { top: 372px !important; font-size: 16px !important; white-space: normal !important; padding: 0 16px; }

  /* ---------- TESTIMONIALS SLIDER (index.html) ---------- */
  #about { padding: 30px 0 !important; }
  #about .max-w-6xl { padding: 0 8px !important; }
  /* Client feedback image 20% smaller — kept centered in each 100%-wide slide
     (10% margin each side) so the slider's translateX steps still line up. */
  #fb-track-mobile img { width: 80% !important; margin-left: 10% !important; margin-right: 10% !important; }
  /* Pull the slider arrows inward, closer to the (now narrower) image */
  #fb-prev { left: 6% !important; }
  #fb-next { right: 6% !important; }

  /* ---------- CONTACT SECTION (index.html) ---------- */
  #contact { padding: 36px 16px !important; }
  #contact .max-w-7xl { grid-template-columns: 1fr !important; gap: 20px !important; }
  #contact form { padding: 40px 14px !important; }
  #contact form > * + * { margin-top: 12px !important; }
  #contact form h3 { font-size: 18px !important; margin-bottom: 0 !important; }
  #contact form input,
  #contact form textarea {
    max-width: 260px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
  }
  #contact form #hc-status { min-height: 0 !important; font-size: 12px !important; margin-top: 8px !important; }
  #contact form .pt-2 { padding-top: 0 !important; margin-top: 12px !important; }
  #contact form button { padding: 9px 28px !important; font-size: 13px !important; }
  /* Keep the get-in-touch image grid in 3 columns on mobile (just smaller) */
  #contact .grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }

  /* ---------- PROJECT GALLERY (index.html) ---------- */
  #gallery { padding: 40px 16px !important; }
  #gallery .grid { gap: 14px !important; justify-items: center; }
  #gallery .grid > a { width: 86% !important; max-width: 360px !important; }
  /* Card heights match desktop (450px / 400px) — left untouched intentionally */

  /* ---------- PROJECTS.HTML cards ---------- */
  main section.max-w-5xl { padding: 18px !important; border-radius: 18px !important; }
  /* Keep thumbnail strip on one row (override the global 3-cols → 2-cols collapse) */
  .grid.grid-cols-3:has(> .proj-thumb) { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .proj-thumb { height: 56px !important; }
  /* Card text block: centered, balanced spacing, no justify-between gap */
  main section.max-w-5xl .text-white.flex {
    text-align: center !important;
    padding: 16px 6px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  main section.max-w-5xl .text-white h2 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    white-space: normal !important;
  }
  main section.max-w-5xl .text-white h3 {
    font-size: 17px !important;
    margin-bottom: 18px !important;
    white-space: normal !important;
  }
  main section.max-w-5xl .text-white p {
    text-align: center !important;
    font-size: 14.5px !important;
    margin-top: 0 !important;
  }

  /* ---------- SERVICES.HTML / generic .h-[450px] cards ---------- */
  section .grid > div.h-\[450px\],
  section .grid > a.h-\[450px\],
  section .grid > div.h-\[400px\],
  section .grid > a.h-\[400px\] { width: 86% !important; max-width: 360px !important; margin-left: auto !important; margin-right: auto !important; }
  section .grid:has(> .h-\[450px\]),
  section .grid:has(> .h-\[400px\]) { justify-items: center; }
  /* Balance heading→cards gap with the surrounding section padding (40px)
     so the heading isn't visibly closer to the cards than to the top section. */
  section .max-w-5xl > h2.mb-24 { margin-bottom: 40px !important; }
  section .max-w-5xl > h2.mt-24 { margin-top: 40px !important; }
  /* Long whitespace-nowrap headings overflow on mobile — let them wrap & shrink */
  h2.whitespace-nowrap,
  h3.whitespace-nowrap {
    white-space: normal !important;
  }
  section .grid h3.whitespace-nowrap,
  section .grid h3 {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
    padding: 0 8px;
    line-height: 1.25 !important;
    text-align: center !important;
  }
  section .max-w-5xl > h2 { font-size: 19px !important; padding: 0 6px; }
  /* Services page section headings — keep on a single line, shrink to fit any screen */
  section .max-w-5xl h2.services-fit-heading {
    white-space: nowrap !important;
    font-size: clamp(10px, 4.2vw, 19px) !important;
    padding: 0 4px;
  }

  /* ---------- INTERIORS.HTML round image+cards ---------- */
  .max-w-6xl[style*="margin-top"] { margin-top: -60px !important; gap: 40px !important; }
  .w-80.h-80 { width: 240px !important; height: 240px !important; }
  .w-72, .w-56 { width: 280px !important; }
  /* Banner image above the round-image cards: edge-to-edge & cropped square */
  section:has(> div > .max-w-6xl[style*="margin-top"]) { padding-left: 0 !important; padding-right: 0 !important; }
  section:has(> div > .max-w-6xl[style*="margin-top"]) > img {
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    display: block;
  }
  /* Last full-width image below the round-image cards (interior-services): crop to square */
  section.block:has(> img[src*="last-image-in-services-page"]) { padding: 0 !important; }
  section.block > img[src*="last-image-in-services-page"] {
    width: 100vw !important;
    max-width: 100vw !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    display: block;
  }

  /* ---------- INTERIOR-CONTACT.HTML "Have a project in mind?" text block ----------
     Override the desktop pl-10 / pr-32 / py-10 paddings that leave a big
     empty right-hand strip on mobile, and center everything. */
  section:has(> div > .text-white.pl-10.pr-32) > div > .text-white.pl-10.pr-32 {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 48px !important;
    padding-bottom: 0 !important;
    text-align: center !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) > div > .text-white.pl-10.pr-32 h2 {
    white-space: normal !important;
    margin-bottom: 14px !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) > div > .text-white.pl-10.pr-32 p {
    margin-bottom: 12px !important;
  }
  /* Equal spacing around the form: tighten the gap above it (24px) and add
     matching space below (24px) — left/right already 24px from the section px-6 */
  section:has(> div > .text-white.pl-10.pr-32) > div {
    gap: 24px !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) {
    padding-bottom: 24px !important;
  }
  /* interior-contact.html contact form — smaller fields & squarer overall shape */
  section:has(> div > .text-white.pl-10.pr-32) form {
    padding: 22px 18px !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form > * + * {
    margin-top: 9px !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form h3 {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form input,
  section:has(> div > .text-white.pl-10.pr-32) form textarea {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 13px !important;
    width: 84% !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form #hc-status {
    margin-top: 0 !important;
    min-height: 0 !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form .pt-2 {
    padding-top: 0 !important;
  }
  section:has(> div > .text-white.pl-10.pr-32) form button {
    padding: 8px 26px !important;
    font-size: 12px !important;
  }

  /* ---------- INTERIOR-ABOUT.HTML "Book a specialised appointment" card ---------- */
  /* Full-width, with the sides cropped a little so the card sits a bit taller */
  section:has(> div > div[style*="D4D4D4C7"]) { padding-left: 0 !important; padding-right: 0 !important; }
  section:has(> div > div[style*="D4D4D4C7"]) > div {
    aspect-ratio: 3 / 2 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }
  section:has(> div > div[style*="D4D4D4C7"]) > div > div h2 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }
  section:has(> div > div[style*="D4D4D4C7"]) > div > div p {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }
  section:has(> div > div[style*="D4D4D4C7"]) > div > div a {
    padding: 6px 18px !important;
    font-size: 10px !important;
  }

  /* ---------- ABOUT.HTML image banner (between team and value cards) ----------
     Make the banner square-ish on mobile by cropping the wide image's sides. */
  section.aspect-video:has(> img[src*="about-page-image"]) {
    aspect-ratio: 1 / 1 !important;
  }

  /* ---------- ABOUT.HTML value cards (under team) ---------- */
  /* Pull the section up only enough so the FIRST card overlaps the image
     above by half its height (~card height 160px → -80px margin). */
  section[style*="margin-top: -110px"] {
    margin-top: -80px !important;
  }
  section[style*="margin-top: -110px"] .grid {
    justify-items: center;
    gap: 16px !important;
  }
  section[style*="margin-top: -110px"] .grid > div {
    width: 76% !important;
    max-width: 280px !important;
    padding: 38px 16px !important;
  }
  section[style*="margin-top: -110px"] .grid > div h3 { font-size: 20px !important; margin-bottom: 8px !important; color: #665e5a !important; }
  section[style*="margin-top: -110px"] .grid > div p { font-size: 13px !important; line-height: 1.5 !important; color: #665e5a !important; }

  /* ---------- ABOUT.HTML team slider ---------- */
  .tm-viewport { height: 500px !important; }
  .tm-card { width: 200px !important; height: 360px !important; margin-left: -100px !important; top: 30px !important; }
  .tm-arrow { top: 210px !important; font-size: 28px !important; }
  .tm-arrow.tm-left  { left: 16px !important; }
  .tm-arrow.tm-right { left: auto !important; right: 16px !important; transform: translate(50%, -50%) !important; }
  .tm-info .tm-name { font-size: 16px !important; white-space: normal !important; }
  .tm-info .tm-role { font-size: 11px !important; white-space: nowrap !important; padding: 0 6px; }
  /* widen the info block beyond the card so long roles fit on one line,
     while keeping it centered under the card (which sits at screen-center) */
  .tm-info {
    width: 280px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* ---------- FOOTER ---------- */
  footer { padding: 28px 40px 120px !important; } /* extra bottom space so the hero-pill doesn't overlap copyright/menu */
  footer hr { border-color: rgba(255,255,255,0.45) !important; }
  footer .text-xs { font-size: 10px !important; }
  footer .max-w-7xl > div:last-child {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px;
    text-align: center;
  }

  /* Mobile footer stacked: contact info on top, social + hamburger below (centered) */
  .footer-mobile-bar {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    position: relative;
  }
  .footer-mobile-spacer { display: none; }
  .footer-mobile-contact {
    text-align: center;
    font-size: 18px;
    line-height: 1.4;
    color: rgba(255,255,255,0.9);
    position: relative;
    width: 100%;
    min-height: 290px; /* tall enough that the menu card fits all 8 items */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .footer-mobile-contact p { margin: 0 0 2px; }
  .footer-mobile-contact p:last-child { margin-bottom: 0; }
  .footer-mobile-contact .footer-address,
  .footer-mobile-contact .footer-hours { margin-top: 14px; }

  .footer-mobile-right {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 6px;
    position: relative;
  }
  .footer-mobile-toggle-wrap { margin-left: auto; }
  .footer-social-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: #686058;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .footer-social-icon:hover { background: #f1f0e8; }

  .footer-mobile-toggle-wrap { position: relative; }
  .footer-mobile-toggle {
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .footer-mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #a19c90;
    position: relative;
    transition: background 0.2s ease;
  }
  .footer-mobile-toggle span::before,
  .footer-mobile-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: #a19c90;
    transition: transform 0.25s ease, top 0.25s ease;
  }
  .footer-mobile-toggle span::before { top: -6px; }
  .footer-mobile-toggle span::after  { top:  6px; }

  /* Footer menu covers the full contact-info area when open */
  .footer-mobile-menu {
    position: absolute;
    inset: 0;
    background: #d4d4d4;
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px;
    z-index: 60;
  }
  .footer-mobile-menu.open {
    display: flex;
    transform-origin: bottom right;
    animation: footerMenuIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes footerMenuIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Stagger each footer link in */
  .footer-mobile-menu.open a {
    animation: footerLinkIn 0.32s ease both;
  }
  .footer-mobile-menu.open a:nth-child(1) { animation-delay: 0.09s; }
  .footer-mobile-menu.open a:nth-child(2) { animation-delay: 0.13s; }
  .footer-mobile-menu.open a:nth-child(3) { animation-delay: 0.17s; }
  .footer-mobile-menu.open a:nth-child(4) { animation-delay: 0.21s; }
  .footer-mobile-menu.open a:nth-child(5) { animation-delay: 0.25s; }
  .footer-mobile-menu.open a:nth-child(6) { animation-delay: 0.29s; }
  .footer-mobile-menu.open a:nth-child(7) { animation-delay: 0.33s; }
  .footer-mobile-menu.open a:nth-child(8) { animation-delay: 0.37s; }
  @keyframes footerLinkIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .footer-mobile-menu a {
    display: block;
    color: #2E2E2E;
    text-decoration: none;
    font-size: 18px;
    padding: 3px 18px;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
  }
  .footer-mobile-menu a:hover { color: #686461; }

  /* Morph footer hamburger into X when open (menu lives in a different
     subtree now, so use the .footer-mobile-bar level for :has). */
  .footer-mobile-bar:has(.footer-mobile-menu.open) .footer-mobile-toggle span {
    background: transparent;
  }
  .footer-mobile-bar:has(.footer-mobile-menu.open) .footer-mobile-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .footer-mobile-bar:has(.footer-mobile-menu.open) .footer-mobile-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* ---------- QUOTE FORM ---------- */
  #quote-app-container-v2 { padding: 12px !important; }
  /* Drop the fixed 700px min-height so the form is only as tall as its content */
  #quote-app-container-v2 .q2-form { min-height: 0 !important; }
  #quote-app-container-v2 .q2-wrap { padding: 24px 16px !important; }
  #quote-app-container-v2 .q2-title { font-size: 28px !important; }
  /* .q2-step-title.q2-step-title — doubled class beats the page's own !important heading rule */
  #quote-app-container-v2 .q2-step-title.q2-step-title { font-size: 18px !important; margin-bottom: 14px !important; }
  #quote-app-container-v2 .q2-subtitle { font-size: 15px !important; }
  #quote-app-container-v2 .q2-section-title { font-size: 16px !important; }
  #quote-app-container-v2 .q2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  #quote-app-container-v2 .q2-card { padding: 12px 8px !important; }
  #quote-app-container-v2 .q2-card span { font-size: 12px !important; }
  /* .q2-btn.q2-btn — doubled class beats the page's own !important button rule */
  #quote-app-container-v2 .q2-btn.q2-btn {
    font-size: 10px !important;
    padding: 5px 11px !important;
    min-width: 0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
  }
  #quote-app-container-v2 .q2-nav { flex-wrap: nowrap !important; gap: 7px !important; }
  #quote-app-container-v2 .q2-pill { width: 100% !important; max-width: 100% !important; padding: 11px 22px !important; font-size: 14px !important; }
  #quote-app-container-v2 .q2-date-row { flex-direction: column !important; }
  #quote-app-container-v2 .q2-progress { padding: 0 8px !important; }
  #quote-app-container-v2 .q2-node { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  /* Re-center the progress line on the smaller mobile nodes (was top:18px for 38px nodes → 11.5px for 26px nodes) */
  #quote-app-container-v2 .q2-progress-line { top: 11.5px !important; }

  /* ---------- INTERIOR CONTACT FORM (interiors.html, kitchen.html, living.html) ----------
     The image+form row has hardcoded pixel widths (460px / 620px) that push
     the form past the viewport on phones. Force fluid widths on mobile. */
  #contact > div > div.flex-shrink-0 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }
  #contact > div > div[style*="width: 620px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  #contact-app-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  #contact-app-container .form-container {
    padding: 32px 16px !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #contact-app-container .fields-group {
    width: 100% !important;
    max-width: 100% !important;
  }
  #contact-app-container .field-wrap {
    flex-wrap: wrap !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
  }
  #contact-app-container h2 { font-size: 26px !important; }
  #contact-app-container .btn-primary { padding: 12px 32px !important; font-size: 15px !important; }
  #contact-app-container .btn-secondary { padding: 10px 22px !important; font-size: 13px !important; }
  #contact-app-container .footer-nav { gap: 10px !important; flex-wrap: wrap; }
  #contact-app-container .landing-text { font-size: 14px !important; margin-bottom: 24px !important; }

  /* ---------- BEFORE-AFTER PAGE ----------
     Push the hero below the header (which is position: absolute and would
     otherwise overlap the top of the before/after slider on mobile). */
  #home:has(#ba-wrap) { margin-top: 100px !important; }
  #ba-handle { gap: 10px !important; }
  #ba-handle svg { width: 10px !important; height: 22px !important; }
  .vm-modal-content video { max-height: 70vh !important; }

  /* ---------- SCROLL TRACK (logos strip) ---------- */
  .scroll-track img { height: 40px !important; }
}

/* Tablet and small-desktop tweaks (keeps phones unaffected) */
@media (min-width: 769px) and (max-width: 1023px) {
  .grid.md\:grid-cols-3 { gap: 18px; }
  section { padding-left: 24px; padding-right: 24px; }
}