/* ══════════════════════════════════════════════════════════════════
   Mobile / tablet only — everything here is inside a max-width query,
   so the desktop design is untouched.

   The problem it solves: pagePiling locks each section to 100vh and
   clips whatever does not fit. Measured at 375x812 that hid 1318px of
   the Services list, 988px of Advice and 575px of the Contact section —
   including the quote form. Below 992px the slider is switched off
   (see the script in index.html) and the page scrolls like any other.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px){

  /* ── release the locked slides ─────────────────────────────── */
  html.wfm-flow, html.wfm-flow body{
    overflow-x:hidden!important; overflow-y:auto!important;
    height:auto!important; position:static!important}
  html.wfm-flow .vlt-main,
  html.wfm-flow .vlt-fullpage-slider{overflow:visible!important;height:auto!important}
  html.wfm-flow .pp-section,
  html.wfm-flow .vlt-section{
    position:relative!important; height:auto!important; width:auto!important;
    transform:none!important; visibility:visible!important; opacity:1!important;
    overflow:visible!important;
    padding:52px 0!important; scroll-margin-top:76px}
  html.wfm-flow .vlt-section__vertical-align{
    display:block!important; height:auto!important; overflow:visible!important}
  html.wfm-flow .vlt-section__content{overflow:visible!important}
  html.wfm-flow body.animsition,html.wfm-flow .animsition{opacity:1!important}
  /* decorative layers must stay out of flow or they add dead height */
  html.wfm-flow .vlt-section__particles,
  html.wfm-flow .vlt-section__ken-burn-background{
    position:absolute!important; inset:0; z-index:0; overflow:hidden}
  html.wfm-flow .vlt-section__content{position:relative; z-index:2}
  /* slider furniture that no longer means anything */
  html.wfm-flow #pp-nav,
  .vlt-fullpage-slider-progress-bar,
  .vlt-fullpage-slider-numbers,
  .vlt-fixed-socials{display:none!important}
  html.wfm-flow .vlt-footer--fixed{position:static!important}

  /* ── carousels become stacked lists ───────────────────────────
     The timeline slide measured 970px inside a 340px container, so
     two thirds of every step was clipped. A phone has no room for a
     carousel here anyway — show all of it, stacked. */
  .vlt-timeline-slider .swiper-wrapper,
  .vlt-testimonial-slider .swiper-wrapper,
  .vlt-project-showcase-slider .swiper-wrapper{
    display:block!important; transform:none!important; height:auto!important}
  .vlt-timeline-slider .swiper-slide,
  .vlt-testimonial-slider .swiper-slide,
  .vlt-project-showcase-slider .swiper-slide{
    width:100%!important; margin:0 0 26px!important; height:auto!important}
  .vlt-timeline-slider .swiper-container,
  .vlt-testimonial-slider .swiper-container,
  .vlt-project-showcase-slider .swiper-container{overflow:visible!important}
  .vlt-timeline-slider-controls,
  .vlt-testimonial-slider-controls{display:none!important}
  .vlt-timeline-item{width:auto!important}
  .vlt-timeline-item__year{display:block;width:auto!important;margin-bottom:.35rem}
  .vlt-timeline-item__title{width:auto!important}

  /* the desktop hover showcase has no hover on a phone */
  .vlt-project-showcase.d-none{display:none!important}

  /* ── type and spacing ─────────────────────────────────────────── */
  .vlt-large-heading,
  .vlt-section h1{font-size:clamp(2rem,9vw,2.7rem)!important;line-height:1.08!important}
  .vlt-section h2{font-size:clamp(1.45rem,6vw,1.9rem)!important;line-height:1.18!important}
  .vlt-section h4,.vlt-section h5{font-size:1.06rem!important;line-height:1.3!important}
  .vlt-section p{font-size:1rem;line-height:1.68}
  .container{padding-inline:20px!important;width:100%!important;max-width:100%!important}
  .row{margin-inline:0!important}
  [class*="col-"]{padding-inline:0!important}
  .offset-lg-1,.offset-md-1{margin-left:0!important}
  /* the template's fixed gaps are tuned for a full screen */
  .vlt-gap-50,.vlt-gap-60,.vlt-gap-70,.vlt-gap-80{height:26px!important}
  .vlt-gap-30,.vlt-gap-40{height:18px!important}

  /* ── hero ─────────────────────────────────────────────────────── */
  .vlt-section[data-anchor="Home"]{
    min-height:82vh!important;display:flex!important;align-items:center}
  .vlt-section[data-anchor="Home"] .vlt-section__vertical-align{width:100%}
  .wfm-hero-video{display:none}          /* poster only — save the data */
  .vlt-section[data-anchor="Home"]{
    background-image:linear-gradient(140deg,rgba(13,48,32,.93),rgba(20,73,43,.66)),
      url(../video/office-poster.jpg)!important;
    background-size:cover!important;background-position:center!important}

  /* ── the 12 services ──────────────────────────────────────────
     The class is .vlt-services, not .vlt-services-item — my first
     attempt styled nothing, which is why the list came out as bare
     text separated by huge template gaps and looked unfinished. */
  .vlt-section[data-anchor="Services"] .vlt-animated-block{margin:0!important}
  .vlt-services{
    background:#fff;border:1px solid rgba(20,73,43,.12);
    border-left:3px solid var(--wfm-gold);
    border-radius:10px;padding:16px 16px 14px!important;margin-bottom:10px;
    box-shadow:0 1px 10px rgba(20,73,43,.05)}
  .vlt-services__title{margin:0 0 .28em!important}
  .vlt-services__title a{font-size:1.04rem!important;line-height:1.3;
    color:var(--wfm-green-deep)!important}
  .vlt-services p{font-size:.92rem!important;line-height:1.55;margin:0!important;
    color:#5C6A62}
  /* the template spaces columns for a full screen; on a phone it just
     leaves 60px holes between every item */
  .vlt-section[data-anchor="Services"] [class*="col-"]{margin-bottom:0!important}
  .vlt-section[data-anchor="Services"] .row{row-gap:0!important}

  /* ── process timeline ─────────────────────────────────────────── */
  .vlt-timeline-item__year{
    font-size:.78rem!important;letter-spacing:.14em;font-weight:700;
    color:var(--wfm-gold-ink)!important}
  .vlt-timeline-item{padding-bottom:18px!important;margin-bottom:18px!important;
    border-bottom:1px solid rgba(20,73,43,.12)}
  /* the ken-burns photo behind the copy washes out to near-white on a
     phone and makes the whole slide look faded. Drop it and use the
     cream ground instead — the copy is the point here, not the picture. */
  .vlt-section[data-anchor="Process"] .vlt-section__ken-burn-background{display:none!important}
  .vlt-section[data-anchor="Process"]{background:var(--wfm-cream)!important}

  /* ── contact: the form has to be usable with a thumb ─────────── */
  .vlt-section[data-anchor="Contact"] input,
  .vlt-section[data-anchor="Contact"] select,
  .vlt-section[data-anchor="Contact"] textarea{
    width:100%!important;
    font-size:16px!important;      /* under 16px iOS zooms the page on focus */
    min-height:52px;padding:14px 16px!important;
    border-radius:10px!important;box-sizing:border-box}
  .vlt-section[data-anchor="Contact"] textarea{min-height:120px}
  .vlt-section[data-anchor="Contact"] .col-md-6,
  .vlt-section[data-anchor="Contact"] .col-lg-6{width:100%!important;flex:0 0 100%!important}
  .vlt-section[data-anchor="Contact"] label{
    display:block;margin-bottom:6px;font-size:.86rem}
  .vlt-btn,.vlt-btn--primary,
  .vlt-section[data-anchor="Contact"] button,
  .vlt-section[data-anchor="Contact"] input[type=submit]{
    min-height:52px!important;width:100%!important;
    font-size:1rem!important;border-radius:99px!important}
  /* phone and email in the contact column are the whole point on a phone */
  .vlt-section[data-anchor="Contact"] a[href^="tel:"],
  .vlt-section[data-anchor="Contact"] a[href^="mailto:"]{
    font-size:1.06rem;font-weight:600;word-break:break-word}

  /* ── header ───────────────────────────────────────────────────── */
  .vlt-navbar-inner{min-height:64px}
  .vlt-navbar-logo svg{width:132px;height:auto}
  /* the header's inline phone/email crowd a 375px bar */
  .vlt-navbar-inner--center{display:none!important}
  .vlt-offcanvas-menu a{padding:13px 0!important;font-size:1.12rem!important}

  /* every tap target at least 44px, per the platform guidance */
  a,button,summary,[role=button]{min-height:44px}
  .wfm-topbar a,.vlt-navbar-logo,.wfm-crumbs a{min-height:0}
}

/* ── inner pages (services / about / contact / privacy) ─────────── */
@media (max-width: 991px){
  /* pages.css pins the inner-page header with position:fixed and clears it
     with 80-96px of padding on .wfm-main. Cutting that padding for mobile
     slid the breadcrumb underneath the header and it collided with the logo.
     Sticky keeps the header on screen while scrolling AND leaves it in flow,
     so no clearance is needed at all. */
  /* The bar is .vlt-navbar and it is position:fixed, so .vlt-header measures
     ZERO height and everything after it starts at y=0 — which is why the
     breadcrumb printed straight over the logo. Put the navbar back in flow;
     the header then has real height and can stick on its own. */
  .wfm-page .vlt-navbar,
  .wfm-page .vlt-navbar--fixed,
  .vlt-navbar,.vlt-navbar--fixed{position:static!important}
  .wfm-page .vlt-header{position:sticky!important;top:0;z-index:80;
    background:var(--wfm-cream)}
  .wfm-main{padding-top:12px}
  .wfm-hero{padding:18px 0 14px}
  .wfm-hero::after{margin-top:16px}
  .wfm-sec{padding:28px 0}
  .wfm-split{gap:26px}
  .wfm-split__side{position:static;padding:20px 18px}
  .wfm-grid{grid-template-columns:1fr;gap:12px}
  .wfm-card{padding:20px 18px}
  .wfm-page h1{font-size:clamp(1.95rem,8.5vw,2.5rem)}
  .wfm-page h2{font-size:clamp(1.35rem,5.6vw,1.7rem)}
  .wfm-lede{font-size:1.02rem}
  .wfm-contact li{flex-direction:column;gap:3px}
  .wfm-contact li>span:first-child{flex:none;font-size:.72rem}
  .wfm-contact a{font-size:1.05rem;font-weight:600}
  .wfm-freq{flex-direction:column;gap:4px}
  .wfm-freq strong{flex:none}
  .wfm-docs,.wfm-proofrow,.wfm-stats{grid-template-columns:1fr}
  .wfm-cta{padding:34px 0;margin-top:30px}
  .wfm-cta__row{flex-direction:column}
  .wfm-cta__row .wfm-btn{width:100%;text-align:center}
  .wfm-btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center}
  .wfm-foot{padding-top:34px}
  .wfm-crumbs{font-size:.78rem}
}

@media (max-width: 420px){
  .wfm-tags li{font-size:.78rem;padding:5px 10px}
  .wfm-page h1{font-size:clamp(1.8rem,8vw,2.2rem)}
}

/* ══════════════════════════════════════════════════════════════════
   Phantom whitespace + depth
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px){

  /* ── the actual cause of the huge gaps ─────────────────────────
     The template's entrance animations are fired by pagePiling when a
     slide becomes active. With the slider off, 10 blocks were left on
     opacity:0 — invisible but still occupying 3,526px between the
     sections. Everything is visible by default now; the reveal below
     is an enhancement layered on top, never a prerequisite. */
  .vlt-animated-block,
  [class*="vlt-fade-in"],
  [class*="vlt-zoom-in"],
  [class*="vlt-slide-in"]{
    opacity:1!important; visibility:visible!important;
    transform:none!important; animation:none!important}

  /* ── scroll reveal (enhancement only) ─────────────────────────
     JS adds .wfm-rv to a block, then .wfm-in when it scrolls into
     view. If the script never runs, nothing is ever hidden. */
  .wfm-rv{opacity:0!important;transform:translate3d(0,22px,0)!important;
    transition:opacity .55s cubic-bezier(.25,.8,.28,1),
               transform .55s cubic-bezier(.25,.8,.28,1)}
  .wfm-rv.wfm-in{opacity:1!important;transform:none!important}
  @media (prefers-reduced-motion:reduce){
    .wfm-rv,.wfm-rv.wfm-in{opacity:1!important;transform:none!important;transition:none}
  }

  /* ── depth ─────────────────────────────────────────────────────
     Two-tier shadows read as real elevation on a phone screen; a
     single flat shadow just looks grey. */
  .vlt-services{
    background:linear-gradient(168deg,#fff 0%,#FDFCF7 100%)!important;
    box-shadow:0 1px 2px rgba(20,73,43,.07),
               0 6px 16px -4px rgba(20,73,43,.10)!important;
    transition:transform .22s cubic-bezier(.25,.8,.28,1),box-shadow .22s}
  .vlt-services:active{
    transform:translateY(1px) scale(.995);
    box-shadow:0 1px 2px rgba(20,73,43,.10)!important}

  /* the hero gains depth from a vignette rather than a flat wash */
  .vlt-section[data-anchor="Home"]::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(ellipse 120% 80% at 50% 22%,
      rgba(255,255,255,.09) 0%,transparent 55%),
      radial-gradient(ellipse 100% 70% at 50% 108%,
      rgba(0,0,0,.36) 0%,transparent 60%)}
  .vlt-section[data-anchor="Home"] .vlt-section__vertical-align{
    position:relative;z-index:2}

  /* the hero stat tiles lift off the video instead of sitting flat on it */
  .vlt-counter-up-small,.vlt-counter-up{
    background:rgba(255,255,255,.10)!important;
    border:1px solid rgba(255,255,255,.20)!important;
    border-radius:14px!important;
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    box-shadow:0 8px 24px -8px rgba(0,0,0,.42),
               inset 0 1px 0 rgba(255,255,255,.16)!important}

  /* section seams get a hairline + soft glow so blocks feel layered */
  .vlt-section[data-brightness="light"] + .vlt-section[data-brightness="light"]{
    box-shadow:inset 0 1px 0 rgba(20,73,43,.09)}

  /* headings sit on a subtle gold rule for structure */
  .vlt-section h1::after,
  .vlt-section h4::after{
    content:"";display:block;width:44px;height:3px;border-radius:2px;
    background:linear-gradient(90deg,var(--wfm-gold),rgba(201,162,47,0));
    margin-top:14px}
  .vlt-section[data-anchor="Home"] h1::after{display:none}
}