@charset "UTF-8";
/* ==========================================================================
   A One A Tree Care LTD — Responsive layer
   Mobile-first. style.css holds the base (< 640px). This file scales up.
   Breakpoints: 480 / 640 / 768 / 1024 / 1280
   ========================================================================== */

/* ---------- ≥ 480px : large phones ---------- */
@media (min-width:480px){
  .hero__actions{flex-direction:row;flex-wrap:wrap}
  .hero__actions .btn{flex:1 1 auto}
}

/* ---------- ≥ 640px : small tablets ---------- */
@media (min-width:640px){
  .ba-grid{grid-template-columns:repeat(2,1fr)}
  .loc-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .proc-grid{grid-template-columns:repeat(2,1fr);gap:var(--s-7)}
  .rev-track{grid-auto-columns:minmax(46%,1fr)}
  .exp__grid{grid-template-columns:repeat(2,1fr)}
  .exp__trust{gap:var(--s-3) var(--s-5)}
  .ft__top{grid-template-columns:1.4fr 1fr}
  .ft__nav{grid-template-columns:repeat(2,1fr)}
  .ba__cta-actions,.rev-cta__actions{flex-direction:row;justify-content:center;gap:var(--s-6)}
  .hide-sm{display:inline}
  .topbar__long{display:inline}

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

  .quote-form{padding:var(--s-6)}
  .hero__stats{margin-inline:var(--s-6);padding:var(--s-6) var(--s-4)}
  .stat{padding-inline:var(--s-4)}
}

/* ---------- ≥ 768px : tablets ---------- */
@media (min-width:768px){
  .loc-grid{grid-template-columns:repeat(3,1fr)}
  .rev-track{grid-auto-columns:minmax(32%,1fr)}
  .exp__grid{grid-template-columns:repeat(3,1fr)}
  .exp__lead{grid-template-columns:1.05fr .95fr;gap:var(--s-9)}
  .emergency__grid{grid-template-columns:.95fr 1.05fr;gap:var(--s-8)}
  .rev-head{grid-template-columns:auto 1fr;gap:var(--s-7)}
  .ft__cta-inner{grid-template-columns:1fr auto;gap:var(--s-7)}
  .ft__cta-actions{justify-content:flex-end;flex-wrap:nowrap}
  .ft__top{grid-template-columns:1.5fr 1fr 1.2fr;gap:var(--s-7)}
  .ft__nav{grid-template-columns:repeat(4,1fr);gap:var(--s-7)}
  .ft__bar-inner{
    grid-template-columns:1fr auto 1fr;align-items:center;
    justify-items:stretch;text-align:left;
  }
  .ft__areas{text-align:right}
  :root{--header-h:86px}

  .svc-head{grid-template-columns:62% 38%;gap:var(--s-7);align-items:center}
  .cmx__panel{grid-template-columns:58% 42%;gap:var(--s-8)}
  .cmx__media{min-height:400px}
  .final-cta__grid{grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
}

/* ---------- ≥ 1024px : desktop — nav goes horizontal ---------- */
@media (min-width:1024px){
  .ba-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .why-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  /* desktop: steps stack vertically inside each column and the rail turns
     horizontal, so the four steps read as one connected sequence */
  .proc-grid{grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
  .proc{padding-left:0;padding-top:0}
  .proc__n{position:static;margin-bottom:var(--s-5)}
  .proc:not(:last-child)::after{
    left:calc(44px + var(--s-3));right:calc(var(--s-6) * -1);
    top:21px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--brand-line),var(--brand-wash));
  }
  .proc h3{margin-top:0}
  .exp__lead{gap:var(--s-10)}
  .exp__grid{gap:var(--s-6)}

  /* Top bar scrolls away by design — only the header stays pinned, so the
     sticky chrome costs one bar of viewport instead of two. The 24/7 number
     stays reachable from the header CTA and the mobile action bar. */
  .site-header{top:0}
  html{scroll-padding-top:calc(var(--header-h) + 16px)}

  /* Mobile drawer chrome off */
  .nav-burger{display:none}
  .nav-scrim{display:none}
  body.nav-locked{overflow:auto}

  .nav{
    position:static;width:auto;transform:none;visibility:visible;
    background:transparent;box-shadow:none;overflow:visible;padding:0;
    flex:1;display:flex;justify-content:center;
  }
  .nav__list{flex-direction:row;align-items:center;gap:var(--s-1)}
  .site-header__inner{gap:var(--s-8)}
  .brand__mark{height:58px}
  .nav__item{border-bottom:0;position:static}

  .nav__link{
    min-height:44px;padding:var(--s-3) var(--s-4);
    font-size:var(--nav-link);font-weight:500;width:auto;
    white-space:nowrap;border-radius:var(--r);gap:6px;
    position:relative;letter-spacing:var(--tr-ui);
  }
  .nav__link:hover{background:var(--brand-wash);color:var(--brand-deep)}
  .nav__chev{width:15px;height:15px}

  /* Active / open indicator */
  .nav__link--toggle[aria-expanded="true"]{background:var(--brand-wash)}
  .nav__link[aria-current="page"]{color:var(--brand-deep);font-weight:600}
  .nav__link[aria-current="page"]::after,
  .nav__link--toggle[aria-expanded="true"]::after{
    content:"";position:absolute;left:var(--s-4);right:var(--s-4);bottom:-1px;
    height:2px;border-radius:2px 2px 0 0;background:var(--brand-deep);
  }

  /* ---- MEGA PANEL — full-width enterprise dropdown ---- */
  .mega{
    position:absolute;top:100%;left:0;right:0;z-index:130;
    background:var(--white);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 48px -12px rgba(4,39,14,.18),0 8px 16px -8px rgba(4,39,14,.10);
    border-radius:0 0 var(--r-lg) var(--r-lg);
    overflow:visible;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  }
  .mega[hidden]{display:block}                 /* JS toggles aria-expanded, CSS animates */
  .nav__link--toggle[aria-expanded="true"] + .mega{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  .mega__inner{
    width:100%;max-width:var(--wrap);margin-inline:auto;
    padding:var(--s-8) var(--s-6) var(--s-6);
  }
  /* Columns sized to their content, not equally — "Tree Stump Grinding Auckland"
     and "Grounds Maintenance" are the widest strings and were forcing wraps. */
  .mega__grid{
    display:grid;grid-template-columns:1fr 1fr 1.08fr 1.12fr;
    gap:var(--s-6);align-items:stretch;
  }
  .mega__grid--3{grid-template-columns:repeat(3,1fr);max-width:960px}

  .mega__col{padding:0;border:0;height:100%}
  .mega__col + .mega__col{border-top:0;border-left:1px solid var(--line);padding-left:var(--s-6)}

  .mega__head{gap:var(--s-3);margin-bottom:var(--s-3);align-items:center}
  .mega__icon{width:38px;height:38px}
  .mega__icon svg{width:20px;height:20px}
  .mega__title{font-size:var(--mega-title);white-space:nowrap}
  .mega__desc{
    margin-bottom:var(--s-4);font-size:.875rem;max-width:none;
    min-height:calc(2 * 1.6em);           /* level link lists across columns */
  }

  /* Children sit flush on desktop — the column itself carries the hierarchy */
  .mega__links{padding-left:0;margin-left:0;border-left:0;gap:1px;width:100%}
  .mega__links a{
    min-height:40px;padding:var(--s-2) var(--s-3);
    margin-left:calc(var(--s-3) * -1);
    white-space:nowrap;
  }
  /* auto margin pins every CTA to the bottom — all four align on one line */
  .mega__cta{
    margin-left:0;margin-top:auto;
    padding-top:var(--s-2);padding-bottom:var(--s-2);
    white-space:nowrap;align-self:flex-start;
  }
  .mega__links{margin-bottom:var(--s-5)}

  .mega__foot{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:var(--s-5);margin-top:var(--s-7);
    padding:var(--s-5) 0 0;
  }
  .mega__emergency{font-size:.875rem}

  /* Hero becomes a split — anti-center bias */
  .hero{padding-block:var(--s-8) var(--s-8)}
  .hero__grid{grid-template-columns:1.06fr .94fr;align-items:center;gap:var(--s-9)}
  .hero__img{height:clamp(360px,34vw,460px)}
  .hero__stats{margin-inline:var(--s-7);margin-top:calc(var(--s-7) * -1)}
  .stat{padding-inline:var(--s-5)}

  /* 4 columns x 3 rows — spans give the asymmetric masonry with no JS */
  .svc-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .svc-head{grid-template-columns:64% 36%;gap:var(--s-9)}
  /* hairline anchors the checklist so it reads as a deliberate column */
  .svc-head__aside{padding-left:var(--s-7);border-left:1px solid var(--line)}
  .cmx__panel{gap:var(--s-9)}
  .cmx__media{min-height:460px}


  .final-cta__grid{grid-template-columns:1.02fr .98fr;gap:var(--s-9)}
  .quote-form{padding:var(--s-7)}

  /* Mobile action bar not needed once header CTAs are always visible */
  .mobile-bar{display:none}
  body{padding-bottom:0}
}

/* ---------- ≥ 1280px : large desktop ---------- */
@media (min-width:1280px){
  .wrap{padding-inline:var(--s-6)}
  .nav__list{gap:var(--s-2)}
  .mega__inner{padding-inline:var(--s-8)}
  .hero__grid{gap:var(--s-10)}
  .section__head{margin-bottom:var(--s-8)}
}

/* ---------- Landscape phones: keep the hero usable ---------- */
@media (max-width:1023px) and (orientation:landscape) and (max-height:520px){
  .hero{padding-block:var(--s-5)}
  .hero__img{height:200px}
  .hero__stats{margin-top:calc(var(--s-5) * -1)}
  .site-header{position:static}
}

/* ---------- Fine-pointer only: suppress touch-irrelevant hover lift ---------- */
@media (hover:none){
  .svc:hover{transform:none}
  .svc:hover .svc__media img{transform:none}
}

/* ---------- Forced colours (Windows High Contrast) ---------- */
@media (forced-colors:active){
  .btn,.svc,.area,.why__item,.proc,.rev,.proj,.mega{border:1px solid CanvasText}
  .ico{fill:CanvasText}
}

/* ---- service page components ---- */
@media (min-width:480px){
  .field-row{grid-template-columns:1fr 1fr}
}
@media (min-width:640px){
  .signs__grid{grid-template-columns:repeat(2,1fr)}
  .signs__grid--2{grid-template-columns:repeat(2,1fr)}
  .cost__grid{grid-template-columns:repeat(2,1fr)}
  .blog__track{grid-auto-columns:minmax(48%,1fr)}
  .hero--svc__creds{grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-6)}
  .gal__track{grid-auto-columns:minmax(48%,1fr)}
  .outro__grid{grid-template-columns:repeat(2,1fr)}
  .signs__aside{grid-template-columns:auto 1fr auto;gap:var(--s-5)}
  .cost__note{grid-template-columns:1fr auto;gap:var(--s-7)}
  .gal__foot-actions{flex-direction:row;gap:var(--s-6)}
}
@media (min-width:768px){
  .hero--svc__grid{grid-template-columns:1fr 1fr;gap:var(--s-7)}
  .hero--svc__media{aspect-ratio:1/1}
  .quoteband__grid{grid-template-columns:1fr 1fr;gap:var(--s-8)}
  .consent__panel{grid-template-columns:1fr 1fr;gap:var(--s-8)}
  .steps__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .embar__inner{grid-template-columns:auto 1fr auto}
  .embar__call{grid-column:auto;justify-self:end}
}
@media (min-width:1024px){
  /* CTA appears only here — on mobile the sticky bottom bar already carries
     Call + Free Quote, and the tabs need the horizontal room */
  :root{--svcnav-h:60px}
  .svcnav .svcnav__cta{display:inline-flex}
  .svcnav__list{gap:var(--s-4)}
  .svcnav__list a{padding:0 var(--s-2)}

  .hero--svc{padding-bottom:var(--s-8)}
  /* tighter gap so the two columns read as one composition, and the form top
     lines up with the headline rather than the eyebrow above it */
  /* stretch, so the image runs the full height of the copy column
     instead of being capped by a fixed ratio */
  .hero--svc__grid{grid-template-columns:1.02fr .98fr;gap:var(--s-8);align-items:stretch}
  .hero--svc__media{aspect-ratio:auto;height:100%;min-height:clamp(460px,40vw,620px)}
  .quoteband__grid{grid-template-columns:1fr 460px;gap:var(--s-9)}
  .hero--svc__creds{grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
  .signs__grid{grid-template-columns:repeat(3,1fr)}
  .signs__grid--2{grid-template-columns:repeat(2,1fr)}
  /* four cards over three columns strand the last one at the left of its own
     row. Centre it. Only needed here: at 2-up four cards make a clean 2x2. */
  .signs__grid--4>:last-child{grid-column:2}
  .cost__grid{grid-template-columns:repeat(3,1fr)}
  /* two-up rather than three: the photos are the point of this section */
  .gal__track{grid-auto-columns:minmax(48%,1fr)}
}
@media (min-width:1280px){
  /* auto-fit so 4-step and 5-step pages both fill the row — a fixed
     5-column rail left an empty column on 4-step services */
  .steps__grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-5)}
}