/*
 * Shared iPhone, Android and tablet compatibility layer.
 * This file is intentionally loaded last and keeps the existing brand colours.
 */

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

*,
*::before,
*::after { box-sizing: border-box; }

main,
section,
header,
footer,
nav,
div,
figure,
form { min-width: 0; }

img,
video,
iframe,
canvas,
svg { max-width: 100%; }

img,
video { height: auto; }

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

button,
a,
label,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }

p,
li,
a,
h1,
h2,
h3,
h4,
figcaption,
label { overflow-wrap: break-word; }

.header .top-bar {
  gap: 0.55rem 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.header .top-bar .contact-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  min-width: 0;
}

.header .top-bar .contact-info a {
  min-width: 0;
  margin-right: 0;
}

.header .top-bar .social-links {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header .top-bar .social-links a {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin-left: 0.25rem;
  place-items: center;
}

.navbar {
  gap: 1rem;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

.navbar .logo,
.navbar ul.nav-links { min-width: 0; }

.navbar .logo { line-height: 1.15; }

.navbar .hamburger {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.navbar .hamburger span {
  width: 24px;
  flex: 0 0 3px;
}

.navbar .hamburger:focus-visible,
.navbar a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.gallery-card:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}

.hero-container,
.our-story-inner,
.founder-container,
.why-wrapper,
.process-container,
.quote-container,
.approach-shell,
.clean-hero__inner,
.meet-founder__container,
.testimonial-feature,
.service-video-shell,
.contact-container,
.footer-content,
.terms-container { width: 100%; }

.hero-right,
.hero-features,
.portrait-video-card,
.testimonial,
.review,
.card,
.value-box,
.cred,
.summary-card,
.quick-contact,
.terms-grid li {
  min-width: 0;
  max-width: 100%;
}

.contact-form input,
.contact-form textarea,
.contact-form select,
.qf-field input,
.qf-field textarea,
.qf-field select {
  min-height: 44px;
  font-size: 16px;
}

textarea { min-height: 7rem; }

.footer-contact a,
.footer-brand p,
.quick-contact a { overflow-wrap: anywhere; }

/*
 * Tablet layout.
 * 1200px deliberately includes iPad Air landscape (1180px) and every iPad
 * portrait size, so the full desktop navigation never collides with the logo.
 */
@media (max-width: 1200px) {
  /*
   * Keep the complete header anchored to the viewport on touch layouts.
   * JavaScript supplies the measured header height so switching from the
   * normal sticky flow to fixed positioning never covers page content.
   */
  html.nav-fixed .header {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    z-index: 5000;
    isolation: isolate;
  }

  html.nav-fixed body {
    padding-top: var(--site-header-height, 0px);
  }

  .navbar {
    position: relative;
    min-height: 68px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .navbar .logo {
    max-width: calc(100% - 60px);
    font-size: clamp(1.05rem, 3.5vw, 1.45rem);
  }

  .navbar .hamburger { display: flex; }
  .navbar .hamburger span { background: #fff; }

  .navbar ul.nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1200;
    display: flex;
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    background: var(--primary-dark);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease, transform 0.3s ease, visibility 0.3s;
  }

  .navbar input#toggle:checked ~ ul.nav-links {
    max-height: 70vh;
    max-height: min(70dvh, 34rem);
    padding-top: 0.6rem;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .navbar ul.nav-links > li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .navbar ul.nav-links > li:last-child { border-bottom: 0; }

  .navbar ul.nav-links a,
  .navbar ul.nav-links .cta-button {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.75rem 0.8rem;
    color: #fff;
    border-radius: 6px;
  }

  .navbar ul.nav-links .cta-button {
    justify-content: center;
    margin-top: 0.45rem;
  }

  .navbar ul.nav-links li.dropdown ul.dropdown-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.45rem;
    padding: 0 0 0 0.75rem;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  /* A tap can leave :hover active on iPadOS and mobile browsers. The explicit
     open class must be the only state that reveals the touch submenu. */
  .navbar ul.nav-links li.dropdown:not(.open) ul.dropdown-menu { display: none; }

  .navbar ul.nav-links li.dropdown.open ul.dropdown-menu { display: block; }

  .navbar ul.nav-links li.dropdown ul.dropdown-menu li {
    width: 100%;
    margin: 0;
  }

  .navbar ul.nav-links li.dropdown ul.dropdown-menu li a {
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    white-space: normal;
  }

  .navbar li.dropdown.open > a .fa-chevron-down { transform: rotate(180deg); }
  .navbar .fa-chevron-down { transition: transform 0.2s ease; }

  /* Do not lock the root scroller while the menu is open. On iOS/iPadOS that
     can detach a sticky header until the page is returned to the top. */

  .hero-left .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.85rem, 2.4vw, 1.25rem);
  }

  .hero-container {
    flex-direction: column;
    justify-content: center;
    padding: clamp(3.5rem, 8vw, 5rem) 1.25rem;
    text-align: center;
  }

  .hero-left,
  .hero-right {
    width: 100%;
    max-width: 720px;
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
  }

  .hero-right {
    flex-basis: auto;
    margin-top: 2rem;
  }

  .hero-feature-card {
    border-radius: 28px;
    transform: none;
  }

  .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .why-wrapper,
  .our-story-inner,
  .founder-story .founder-container,
  .approach-shell,
  .meet-founder__container { grid-template-columns: minmax(0, 1fr); }

  .why-wrapper { flex-direction: column; }

  .why-images {
    width: 100%;
    min-width: 0;
  }

  .approach,
  .why-choose-us { overflow: hidden; }

  .quote-container,
  .terms-summary,
  .terms-grid { grid-template-columns: minmax(0, 1fr); }

  /* Keep the home-page story artwork centred after its grid collapses. */
  .our-story-inner {
    grid-template-areas:
      "content"
      "visual";
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  .our-story-visual { justify-content: center; }

  .founder-story .founder-container {
    grid-template-areas:
      "text"
      "image";
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  .meet-founder__container,
  .approach-shell,
  .quote-container {
    gap: clamp(2rem, 5vw, 3.5rem);
  }

  /* Flexible plans: do not leave a narrow text column beside a tall video. */
  .flexible-plans-section .process-container.process-with-video {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 760px) !important;
    align-items: start !important;
    gap: 2.25rem !important;
  }

  .flexible-plans-section .process-header {
    text-align: center !important;
  }

  .flexible-plans-section .process-header p {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .flexible-plans-section .process-video-col {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    height: auto !important;
    justify-self: center !important;
  }

  .flexible-plans-section .portrait-video-card {
    width: 100% !important;
    height: auto !important;
  }

  .flexible-plans-section .portrait-video-card video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }

  /* Reviews: iPad Air/Pro portrait always receives the balanced stacked view. */
  .testimonials > .testimonial-feature,
  .testimonial-feature {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: min(100%, 760px) !important;
    gap: 2.125rem !important;
  }

  .testimonials .testimonial-video-card,
  .testimonial-video-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    height: auto !important;
  }

  .testimonials .testimonial-video-card video,
  .testimonial-video-card video {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }

  .testimonials .testimonial-quotes,
  .testimonial-quotes {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-rows: none !important;
    width: 100% !important;
    gap: 1.125rem !important;
  }

  /* Residential/commercial videos use the same tablet-safe reading order. */
  .service-video-section > .service-video-shell,
  .service-video-section--reverse > .service-video-shell,
  .service-video-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: min(100%, 760px) !important;
    gap: 2.125rem !important;
  }

  .service-video-section .service-video-media,
  .service-video-section--reverse .service-video-media,
  .service-video-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    justify-self: center !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
  }

  .service-video-section .service-video-copy,
  .service-video-section--reverse .service-video-copy,
  .service-video-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* About-page interactive window needs more room than a split tablet card. */
  .clean-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 3rem);
    padding: clamp(2rem, 5vw, 3.5rem);
  }

  .clean-copy {
    width: 100%;
    flex-basis: auto;
    text-align: center;
  }

  .clean-desc {
    margin-right: auto;
    margin-left: auto;
  }

  .clean-stats,
  .clean-cta-row { justify-content: center; }

  .plans-video-shell {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 760px);
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .header .top-bar {
    justify-content: center;
    text-align: center;
  }

  .header .top-bar .contact-info {
    flex: 1 1 100%;
    justify-content: center;
  }

  .header .top-bar .social-links { justify-content: center; }

  .hero { min-height: 0; }

  .hero-title,
  .page-header h1,
  .gallery-hero h1,
  .contact-hero h1,
  .about-hero h1,
  .terms-hero h1,
  .residential-hero h1,
  .commercial-hero h1 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.08;
  }

  .page-header,
  .residential-hero,
  .commercial-hero,
  .terms-hero { padding: clamp(3.25rem, 12vw, 4.5rem) 1rem; }

  .our-story,
  .services,
  .founder,
  .why-choose-us,
  .process-section,
  .quote-form-section,
  .before-after-section,
  .testimonials,
  .service-video-section,
  .contact-section,
  .image-gallery,
  .terms-wrapper,
  .approach,
  .meet-founder,
  .clean-hero {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .founder-container {
    padding-right: 0;
    padding-left: 0;
  }

  .founder-image {
    width: 100%;
    min-height: 0;
  }

  .founder-image img {
    height: auto;
    min-height: 0;
    border-radius: 12px;
  }

  .founder-text {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .founder-text h2,
  .process-header h2,
  .qf-title,
  .faq__heading,
  .testimonials h2,
  .service-video-copy h2 {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
    line-height: 1.12;
  }

  .process-left-col { gap: 0.85rem; }

  .step-number {
    min-width: 48px;
    font-size: 2.65rem;
  }

  .qf-card,
  .contact-form,
  .contact-info-box { padding: clamp(1.2rem, 5vw, 2rem); }

  .contact-form,
  .contact-info-box { flex-basis: 100%; }

  .contact-form .checkbox-group,
  .contact-form .property-type {
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
  }

  .faq {
    width: 100%;
    padding: 3.5rem 1rem;
  }

  .faq__question {
    min-height: 48px;
    padding: 1.15rem 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links ul li { justify-content: center; }

  .service-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .header .top-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "contact social";
    align-items: start;
    justify-content: stretch;
    gap: 0 0.35rem;
    padding-top: 0.5rem;
    padding-right: max(0.65rem, env(safe-area-inset-right));
    padding-bottom: 0.5rem;
    padding-left: max(0.65rem, env(safe-area-inset-left));
    text-align: left;
  }

  .header .top-bar .contact-info {
    grid-area: contact;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-content: start;
    gap: 0.35rem;
    width: auto;
    min-width: 0;
  }

  .header .top-bar .contact-info a {
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    gap: 0.35rem;
    font-size: clamp(0.55rem, 2.35vw, 0.72rem);
    line-height: 1.25;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .header .top-bar .contact-info a i {
    flex: 0 0 1.05rem;
    width: 1.05rem;
    font-size: 0.95rem;
    text-align: center;
  }

  .header .top-bar .social-links {
    grid-area: social;
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
    gap: 0.1rem;
    min-width: 0;
  }

  .header .top-bar .social-links a {
    width: clamp(1.45rem, 6.5vw, 1.8rem);
    height: clamp(1.45rem, 6.5vw, 1.8rem);
    margin: 0;
    font-size: clamp(0.95rem, 4.6vw, 1.25rem);
  }

  .navbar {
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
  }

  .navbar .logo { font-size: clamp(0.96rem, 4.7vw, 1.2rem); }

  .hero-container { padding: 3.25rem 1rem; }

  .hero-title { font-size: clamp(2rem, 10.5vw, 2.55rem); }

  .hero-left .hero-actions { margin-top: 1.5rem; }

  .hero-left .hero-actions a {
    width: min(100%, 20rem);
    min-width: 0;
    min-height: 46px;
  }

  .hero-features { min-height: 0; }

  .hero-feature-card {
    padding: 0.8rem 1rem;
    font-size: 0.88rem;
  }

  .service-cards,
  .service-gallery-grid,
  .gallery-grid,
  .qi-cards,
  .promise-list { grid-template-columns: minmax(0, 1fr); }

  .card { height: clamp(255px, 82vw, 340px); }

  .why-choose-us {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .why-content h2 { margin-bottom: 1.8rem; }

  .why-images { height: 300px; }
  .why-images::before { right: -0.75rem; }
  .why-images::after { left: -0.5rem; }

  .reason { align-items: flex-start; }

  .icon-circle {
    width: 46px;
    height: 46px;
    min-width: 46px;
  }

  .flexible-plans-section .process-container.process-with-video { width: 100% !important; }
  .flexible-plans-section .process-left-col { gap: 0.75rem; }

  .testimonials,
  section.service-video-section {
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
  }

  .testimonials .testimonial-quotes .testimonial { padding: 1.5rem 1.25rem !important; }

  .portrait-video-card,
  .service-video-section .service-video-media,
  .testimonial-video-card { width: min(100%, 390px) !important; }

  .clean-hero {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .clean-hero__inner {
    width: 100%;
    padding: 2rem 1rem;
    border-radius: 22px;
  }

  .clean-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.6rem;
  }

  .clean-divider { display: none; }
  .clean-stat-item { text-align: center; }
  .clean-stat-num { font-size: 1.35rem; }
  .clean-stat-label { font-size: 0.58rem; }

  .window-side,
  .window-outer,
  .clean-track { width: min(100%, 280px); }

  .window-outer {
    height: auto;
    aspect-ratio: 280 / 340;
  }

  .approach-visual {
    min-height: 255px;
    padding: 1.25rem 0 0;
    transform: none;
  }

  .approach-visual::before {
    left: -1.75rem;
    width: 60%;
    height: 90%;
  }

  .approach-visual::after { left: -1rem; }

  .approach-item {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 0.85rem;
  }

  .approach-icon {
    width: 48px;
    height: 48px;
  }

  .testimonial-feature,
  .service-video-shell { width: 100% !important; }

  .testimonial-video-card video,
  .service-video-section .service-video-media video,
  .flexible-plans-section .portrait-video-card video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
  }

  .parallax-cta { background-attachment: scroll; }

  .faq__search-wrap { gap: 0.75rem; }

  .faq__search {
    min-width: 0;
    flex: 1 1 auto;
  }

  .faq__search input {
    width: 100%;
    min-width: 0;
  }

  .popup-box { width: min(calc(100% - 2rem), 300px); }

  .summary-card,
  .quick-contact,
  .terms-grid li,
  .terms-note {
    padding: 1.35rem;
    border-radius: 18px;
  }
}

@media (max-width: 360px) {
  .hero-title { font-size: 1.9rem; }

  .step-number {
    min-width: 42px;
    font-size: 2.3rem;
  }

  .qf-card,
  .contact-form,
  .contact-info-box { padding: 1rem; }

  .clean-hero__inner {
    padding-right: 0.7rem;
    padding-left: 0.7rem;
  }

  .clean-copy h2 { font-size: 1.85rem; }

  .testimonial-wide,
  .testimonials .testimonial-quotes .testimonial { padding: 1.3rem 1rem !important; }
}

@media (hover: none), (pointer: coarse) {
  .card:hover img,
  .img-grid > div:hover img,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-cta:hover,
  .btn-founder:hover { transform: none; }

  .gallery-card.is-revealed .img-before { filter: none; }

  .gallery-card.is-revealed .img-after { opacity: 1; }

  .gallery-card.is-revealed .badge-before { opacity: 0; }

  .gallery-card.is-revealed .badge-after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}