/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* 1100px covers the common 1366x768/1280x800 laptop viewport band
   (~1140-1200 CSS px at typical 120-125% Windows display scaling). Left
   unhandled, these grids stayed at their full desktop column count, which
   read as "oversized/zoomed" on those laptops even though nothing was
   actually zoomed — see the matching fix already applied to the home2
   grids in home.css (keep the two breakpoints in sync). */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr; text-align:center;}
  .hero .lead{margin-inline:auto;}
  .hero-cta{justify-content:center;}
  .hero-stats{justify-content:center; text-align:start;}
  .coverage-panel{max-width:520px; margin-inline:auto;}

  .grid-3,.grid-4,.branch-grid,.gallery-grid{grid-template-columns:repeat(2,1fr);}
  .grid-5{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr;}
  .footer-grid .footer-col:last-child{grid-column:1 / -1;}
}

@media (max-width:991.98px){
  :root{--header-h:72px;}
  .nav-toggle{display:flex;}
  /* backdrop-filter on #site-header makes it a containing block for its
     position:fixed descendants (Chrome/Firefox spec behavior). .main-nav
     below becomes position:fixed at this breakpoint, so without this reset
     its top/bottom would resolve against the header's own short box
     instead of the viewport, squashing the open mobile menu into a sliver
     pinned to the header instead of covering the screen. */
  #site-header{backdrop-filter:none; -webkit-backdrop-filter:none;}
  .main-nav{
    position:fixed; inset-inline:0; top:var(--header-h); bottom:0;
    background:var(--c-surface); flex-direction:column; align-items:stretch;
    padding:20px 24px; gap:4px; transform:translateY(-12px);
    opacity:0; pointer-events:none; transition:all .3s var(--ease);
    overflow-y:auto; border-top:1px solid var(--c-line);
  }
  .main-nav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .main-nav a{padding:14px 12px; border-bottom:1px solid var(--c-line); border-radius:0; color:var(--c-ink);}
  .header-actions .btn-gold span.hide-mobile{display:none;}

  .grid-5{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
}

@media (max-width:767.98px){
  section{padding:64px 0;}
  .grid-3,.grid-4,.grid-5,.grid-2,.branch-grid,.gallery-grid{grid-template-columns:1fr;}
  .trust-strip .container{justify-content:center; text-align:center;}
  .footer-grid{grid-template-columns:1fr; gap:36px;}
  .footer-bottom{flex-direction:column; text-align:center;}
  .hero-stats{flex-direction:column; gap:18px;}
  .hero-stats .stat{padding-inline-end:0;}
  .step-row{grid-template-columns:52px 1fr;}
  .step-num{width:52px; height:52px; font-size:1rem;}
  .job-card{flex-direction:column; align-items:flex-start;}
  .job-card .btn{width:100%;}
  .floating-actions{right:16px; bottom:16px;}
  .fab{width:50px; height:50px;}
  .fab-mascot-owl{width:46px; height:46px;}
  .fab-teaser{max-width:150px; white-space:normal; font-size:.78rem; padding:8px 12px;}

  .chat-widget{right:16px; bottom:16px; width:360px;}
  .chat-widget.is-maximized{width:min(600px, calc(100vw - 32px));}

  /* Flow chart (complaintProcess.html): the skewed parallelogram and
     rotated diamond read fine at desktop width, but on narrow screens
     the skew eats into the already-tight text width and the diamond's
     rotated-square geometry wastes most of its bounding box on empty
     corners. Flatten both to plain boxes so the content stays legible. */
  .flow-parallelogram{transform:none;}
  .flow-parallelogram .flow-box-inner{transform:none;}
  .flow-diamond-wrap{width:100%; height:auto;}
  .flow-diamond{display:none;}
  .flow-diamond-content{
    position:relative; isolation:isolate; inset:auto; background:var(--c-surface);
    border:1px solid rgba(201,164,77,.32); border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm); padding:24px 22px;
  }
  .flow-diamond-content::before{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    border-radius:inherit; padding:1.5px;
    background:conic-gradient(from var(--flow-shine-angle),
      transparent 0deg, transparent 260deg,
      var(--c-gold) 300deg, var(--c-gold-light) 320deg, var(--c-gold) 340deg,
      transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    animation:flowShineChase 2.6s linear infinite;
  }
  @media (prefers-reduced-motion:reduce){
    .flow-diamond-content::before{display:none;}
  }
}

/* Chat widget: below tablet width, always fill the screen when open so the
   embedded chat has room to work. */
@media (max-width:575.98px){
  .chat-widget{
    inset:0; width:100vw; max-width:100vw; height:100vh; max-height:100vh;
    border-radius:0; border:none;
  }
  .chat-widget.is-maximized{width:100vw; height:100vh;}
}

@media (max-width:575.98px){
  .container{padding-inline:18px;}
  h1{font-size:2.1rem;}
  .btn{padding:12px 22px; font-size:.88rem;}
  .newsletter-form{flex-direction:column;}

  /* Header: brand and actions no longer fit on one row at phone widths
     (theme toggle + language switch + Request Quote + menu button ran off
     the right edge of the screen). Stack the brand on its own row and let
     the controls wrap onto a second row below it instead. */
  :root{--header-h:128px;}
  #site-header,
  #site-header.scrolled{height:auto; padding-block:14px;}
  .nav-wrap{flex-wrap:wrap; row-gap:14px;}
  .brand{flex:0 0 100%;}
  /* The chip normally hangs below the logo (style.css), but at this
     breakpoint the header is 2 rows tall and that would drop it
     straight onto the header-actions row underneath. Flow it inline
     next to the logo instead. */
  .brand-chip{position:static; margin-top:0;}
  .header-actions{flex:0 0 100%; flex-wrap:wrap; justify-content:space-between; gap:10px;}
  .header-actions .lang-switch{padding:7px 10px;}
  .header-actions .btn-sm{padding:10px 16px;}
}