/* ============================================================================
   WINWEB DIGITAL — responsive.css
   All layout adaptations live here so style.css stays readable.
   Breakpoints: 1280 / 1100 / 980 / 860 / 700 / 560 / 400
   ========================================================================== */

/* ---------- Large desktop ---------- */
@media (max-width:1280px){
  :root{ --section-y:84px; }
  .why__grid{ gap:14px; }
  .industry-grid{ gap:14px; }
}

/* ---------- Small desktop / large laptop ---------- */
@media (max-width:1100px){
  .nav__list{ gap:18px; }
  .nav__link{ font-size:14px; }
  .header__cta span{ display:none; }        /* icon-only CTA to save space */
  .header__cta{ padding:12px 14px; }
  .why__grid{ grid-template-columns:repeat(3,1fr); }
  .industry-grid{ grid-template-columns:repeat(3,1fr); }
  .strip__list{ gap:14px; }
  .strip__list li{ font-size:13.5px; }
}

/* ---------- Tablet landscape: hero stacks, mobile nav ---------- */
@media (max-width:980px){
  :root{ --section-y:72px; }

  /* Navigation becomes a slide-down panel */
  .nav-toggle{ display:flex; }
  .header__cta{ display:none; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0; z-index:95;
    flex-direction:column; align-items:stretch; gap:6px;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    padding:18px var(--gutter) 26px;
    border-top:1px solid var(--line);
    box-shadow:0 22px 40px rgba(11,27,51,.16);
    transform:translateY(-14px);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{
    display:block; padding:14px 6px; font-size:16px;
    border-bottom:1px solid var(--line);
  }
  .nav__link::after{ display:none; }
  .nav__cta{ display:flex; margin-top:16px; }

  /* Hero */
  .hero{ padding-top:calc(var(--header-h) + 34px); padding-bottom:56px; }
  .hero__inner{ grid-template-columns:1fr; gap:46px; }
  .hero__text{ max-width:none; }
  .hero__visual{ min-height:auto; max-width:560px; margin-inline:auto; width:100%; }
  .laptop{ width:88%; margin-top:54px; }

  /* Sections */
  .problem__inner,
  .faq-booking__inner,
  .contact__inner{ grid-template-columns:1fr; gap:36px; }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .results__panel{ padding:48px 28px; }
  .final-cta__panel{ padding:38px 30px; }
  .footer__inner{ grid-template-columns:repeat(2,1fr); gap:32px; }

  /* Capability strip scrolls horizontally, scrollbar hidden */
  .strip__list{
    justify-content:flex-start; overflow-x:auto; scrollbar-width:none;
    -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
    gap:26px; padding-inline:2px;
  }
  .strip__list::-webkit-scrollbar{ display:none; }

  /* Process becomes a vertical timeline */
  .steps{ grid-template-columns:1fr; gap:0; margin-top:38px; }
  .steps::before{
    top:10px; bottom:10px; left:31px; right:auto; width:2px; height:auto;
    background:repeating-linear-gradient(180deg,#C3D4EC 0 8px, transparent 8px 16px);
  }
  .step{ display:flex; gap:18px; text-align:left; padding-bottom:28px; }
  .step:last-child{ padding-bottom:0; }
  .step__icon{ margin:0; width:62px; }
  .step p{ margin-inline:0; max-width:none; }
}

/* ---------- Tablet portrait ---------- */
@media (max-width:860px){
  .industry-grid{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:repeat(2,1fr); }
  .section-head{ align-items:flex-start; }
  .float-card--google{ right:8%; }
}

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .pt-header{ padding-top:calc(var(--header-h) + 30px) !important; }
}

@media (max-width:700px){
  :root{ --section-y:58px; --gutter:18px; }
  .pt-header{ padding-top:calc(var(--header-h) + 22px) !important; }
  .legal-content p{ font-size:15px; }

  body{ padding-bottom:72px; }               /* room for the mobile CTA bar */

  .h2{ font-size:clamp(25px,6.2vw,32px); }
  .lead{ font-size:15.5px; }

  .hero{ padding-bottom:44px; }
  .hero__title{ font-size:clamp(30px,8.4vw,40px); }
  .hero__actions .btn{ width:100%; }
  .tag-row{ gap:9px 16px; }
  .laptop{ width:94%; margin-top:64px; }
  .mobile-mock{ width:104px; right:-4px; }
  .float-card{ min-width:130px; padding:9px 11px; }
  .float-card__value{ font-size:12.5px; }
  .float-card--meta{ left:-6px; }
  .float-card--google{ right:2%; }
  .float-card--traffic{ top:16%; right:-6px; }
  .orbit{ width:38px; height:38px; }

  .grid--3{ grid-template-columns:1fr; }
  .funnel{ grid-template-columns:repeat(2,1fr); }
  .funnel__step:not(:last-child)::after{ display:none; }
  .why__grid{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .metric{ padding:20px 12px; }
  .results__panel{ padding:38px 18px; border-radius:20px; }

  .enquiry-form{ grid-template-columns:1fr; }
  .contact__form-wrap{ padding:24px 20px; }
  .booking{ padding:28px 22px; }
  .booking__chat{ justify-content:center; }

  .final-cta__panel{ padding:32px 22px; text-align:center; flex-direction:column; }
  .final-cta__panel p{ margin-inline:auto; }
  .final-cta__actions{ width:100%; flex-direction:column; }
  .final-cta__actions .btn{ width:100%; }

  .section-head .btn--outline{ width:100%; }
  .filters{ width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
  .filters::-webkit-scrollbar{ display:none; }
  .filter{ white-space:nowrap; }

  .footer{ padding-top:48px; }
  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .footer__bottom{ flex-direction:column; text-align:center; gap:10px; }

  /* Floating button sits above the mobile CTA bar */
  .whatsapp-float{ width:54px; height:54px; right:16px; bottom:84px; }
  .whatsapp-float__tip{ display:none; }

  .mobile-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:94;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .mobile-bar .btn{ padding:14px 18px; }
}

/* ---------- Small mobile ---------- */
@media (max-width:560px){
  .funnel{ grid-template-columns:1fr; }
  .industry-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .card{ padding:24px 20px; }
  .acc-btn{ font-size:14.5px; padding:15px 16px; }
  .step{ gap:14px; }
  .step__icon{ width:54px; height:54px; }
  .contact__brand{ font-size:23px; }
}

@media (max-width:400px){
  .metrics{ grid-template-columns:1fr; }
  .mobile-mock{ width:92px; }
  .float-card--google{ display:none; }   /* avoid crowding on very small screens */
  .hero__trust{ flex-wrap:wrap; }
}