/* ==========================================================
   RESPONSIVE
   Mobile is designed intentionally: headline → copy → CTA →
   imagery → supporting content. No arbitrary collapsing.
   ========================================================== */

/* ---- 1024px: nav collapses, grids simplify, depth system scales down ---- */
@media (max-width:1024px){
  .service-areas-list{grid-template-columns:repeat(2,1fr);}
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .mobile-nav{display:block;}
  .header-actions .btn-primary{display:none;} /* CTA lives inside the mobile menu itself */
  .header-actions{gap:6px;}
  .testimonials-grid{grid-template-columns:repeat(2,1fr);}
  .header-client-link{
    width:38px;height:38px;
    padding:0;
    border:none;
    justify-content:center;
    color:var(--navy);
  }
  .header-client-link .client-label{display:none;}
  .header-client-link svg{width:20px;height:20px;}

  .hero-copy{grid-column:1 / 13;}
  .hero-visual{grid-column:1 / 13;order:2;margin-top:var(--space-block);}
  .hero-photo{aspect-ratio:16/10;}

  .introduction-statement{grid-column:1 / 13;margin-bottom:var(--space-block);}
  .introduction-body{grid-column:1 / 13;}

  .service--commercial .service-visual,
  .service--commercial .service-copy,
  .service--residential .service-copy,
  .service--residential .service-visual{grid-column:1 / 13;}
  .service--residential .service-copy{order:1;}
  .service--residential .service-visual{order:2;}

  .about-visual{grid-column:1 / 13;position:static;}
  .about-visual::after{display:none;} /* overlap trick is a desktop-only refinement */
  .about-photo{height:clamp(280px,60vw,420px);}
  .about-copy{grid-column:1 / 13;margin-top:var(--space-block);}
  .about-copy h2,.about-lead{max-width:none;}

  .process-intro{grid-column:1 / 13;margin-bottom:var(--space-block);position:static;}
  .process-steps{grid-column:1 / 13;}

  .portal-showcase{grid-template-columns:1fr;}
  .portal-showcase-text{margin-top:var(--space-block);}

  .faq-intro{grid-column:1 / 13;margin-bottom:var(--space-block);position:static;}
  .faq-list{grid-column:1 / 13;}

  .areas-copy{grid-column:1 / 13;}
  .areas-visual{grid-column:1 / 13;margin-top:var(--space-block);}
  .areas-copy h2{max-width:none;}

  .final-cta-copy{grid-column:1 / 13;}

  .footer-brand{grid-column:1 / 13;margin-bottom:var(--space-block);}
  .footer-services{grid-column:1 / 5;}
  .footer-company{grid-column:5 / 9;}
  .footer-contact{grid-column:9 / 13;}

  /* Depth system: reduce, don't remove — mobile still feels visually rich */
  .arch-grid{background-size:44px 44px !important; opacity:.5;}
  .arch-mesh{opacity:.32;}
  .corner-frame{width:64px;height:64px;}

  /* ---- About / Contact internal pages ---- */
  .about-hero-copy{grid-column:1 / 13;}
  .about-hero-visual{grid-column:1 / 13;order:2;margin-top:var(--space-block);}
  .about-hero-photo{aspect-ratio:16/10;}
  .about-hero-copy h1{max-width:none;}
  .contact-hero h1{max-width:none;}

  .about-intro-statement{grid-column:1 / 13;margin-bottom:var(--space-block);}
  .about-intro-body{grid-column:1 / 13;}

  .value-title{grid-column:1 / 13;margin-bottom:10px;}
  .value-copy{grid-column:1 / 13;max-width:none;}

  .trust-grid{grid-template-columns:repeat(2, 1fr);}
  .trust-item:nth-child(2n){border-right:none;}
  .trust-item:not(:last-child){border-right:1px solid rgba(44,85,120,.2);}

  .page-cta-copy{grid-column:1 / 13;}

  .contact-info{grid-column:1 / 13;margin-bottom:var(--space-block);}
  .contact-form-col{grid-column:1 / 13;}

  .project-grid{grid-template-columns:repeat(2, 1fr);}

  /* Sticky contact: swap the desktop floating CTA for a full-width bar */
  .sticky-fab{display:none;}
  .sticky-contact-bar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;
    z-index:90;
    background:var(--navy);
    border-top:1px solid rgba(246,247,245,.12);
    padding:10px clamp(12px,3vw,20px);
    padding-bottom:max(10px, env(safe-area-inset-bottom));
    gap:10px;
  }
  .sticky-contact-bar a{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 12px;
    font-size:14px;font-weight:600;
    border-radius:var(--radius);
  }
  .sticky-contact-bar .sb-call{
    background:transparent;
    border:1px solid rgba(246,247,245,.3);
    color:var(--white);
  }
  .sticky-contact-bar .sb-whatsapp{
    background:var(--accent);
    color:var(--navy);
  }
  .sticky-contact-bar svg{flex-shrink:0;}

  /* Keep the bottom bar from covering the last bit of page content */
  body{padding-bottom:64px;}
}

/* ---- 768px: tighten type, spacing ---- */
@media (max-width:768px){
  .hero-h1{max-width:none;}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:18px;}

  .introduction-list li{font-size:19px;}

  .about-intro-checks,.about-intro-checks.cols-3{grid-template-columns:repeat(2, 1fr);row-gap:24px;}
  .service-copy p,.about-lead,.areas-copy p{max-width:none;}

  .process-steps{padding-left:26px;}
  .process-step::before{left:-26.5px;}
  .process-step p{max-width:none;}

  .hero-meta-line{margin-top:var(--space-block);}

  /* min-height, not height — .storytelling-content (the text) keeps
     its own min-height:clamp(420px, 60vw, 640px) from pages.css at
     every width, so a fixed/shorter height here just clips the copy
     against the parent's overflow:hidden once the text runs longer
     than ~2 lines (which the editable Page Text field now allows). */
  .storytelling{min-height:clamp(320px, 70vw, 460px);}
  .form-row{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .project-grid{grid-template-columns:1fr;}
  .trust-item{border-right:none !important;}
}

/* ---- 640px: single column throughout, no cramped buttons ----
   (service-areas-list is the one exception — its items are short
   single words/short city names, so 2 columns still reads cleanly
   and avoids an unnecessarily long scroll on the Service Areas page) */
@media (max-width:640px){
  .service-areas-list{grid-template-columns:repeat(2,1fr);}
  .about-intro-checks,.about-intro-checks.cols-3{grid-template-columns:1fr;row-gap:12px;}
  .testimonials-grid{grid-template-columns:1fr;gap:var(--space-block);}
  .header-inner{padding-top:14px;padding-bottom:14px;}
  .logo-word{font-size:16px;}

  .portal-lightbox{padding:56px 12px;}
  .portal-lightbox-nav{width:38px;height:38px;}
  .portal-lightbox-prev{left:8px;}
  .portal-lightbox-next{right:8px;}
  .portal-lightbox-close{top:-44px;}

  .hero{padding-top:88px;padding-bottom:40px;}
  .hero-h1{font-size:clamp(38px,11vw,52px);}

  /* Same fix as the home hero: the desktop clamp's floor (34–60px) is
     still too wide relative to these long phrases on a narrow phone,
     forcing a word-per-line wrap. A steeper vw scale lets each intended
     line (split by the single <br> in the markup) actually fit. */
  .about-hero-copy h1{font-size:clamp(28px,9vw,38px);}
  .contact-hero h1{font-size:clamp(28px,9vw,38px);}

  .final-cta-copy .btn{width:100%;justify-content:center;}

  .footer-services,.footer-company,.footer-contact{grid-column:1 / 13;}
  .footer-company,.footer-contact{margin-top:8px;}
  .footer-bottom{flex-direction:column;}

  /* Motifs simplify further: smaller grid cell, thinner mesh, no crosshair clutter */
  .arch-grid{background-size:32px 32px !important;opacity:.35;}
  .arch-mesh{opacity:.2;}
  .corner-frame{width:44px;height:44px;}
  .crosshair{display:none;}
  .hero-meta-line .label{white-space:normal;}
}

/* ---- 375–430px fine tuning ---- */
@media (max-width:390px){
  :root{--outer-margin:18px;}
  .btn{padding:14px 24px;font-size:14px;}
  .corner-frame{width:32px;height:32px;}
}