/* ============================================================
   AVREA — phone / tablet refinements (v29)
   Loaded AFTER v27.css so these rules win. Scoped ENTIRELY to
   small viewports via media queries — desktop layout untouched.
   Uses the site's --gutter for side spacing so edges line up.
   ============================================================ */

/* ---- Hero brand-bar action cluster -------------------------
   .hactions wraps the "Let's talk" button + burger. On desktop
   display:contents makes the wrapper vanish from layout, so the
   button sits exactly where it always did (no desktop change). */
.hactions{ display:contents; }
.hburger{ display:none; }
.mnav{ display:none; }

/* ============================================================
   1. NAV — real hamburger menu on phones / small tablets (≤760px)
   ============================================================ */
@media (max-width:760px){
  /* hide the floating pill nav; the burger + drawer replace it */
  .hnav{ display:none !important; }

  .hactions{ display:flex; align-items:center; gap:10px; }

  .hburger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; box-sizing:border-box;
    background:rgba(255,255,255,0.05); border:1px solid var(--line);
    border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .hburger span{ display:block; width:22px; height:2px; border-radius:2px; background:#fff;
    transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
  .hburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hburger.is-active span:nth-child(2){ opacity:0; }
  .hburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* drawer */
  .mnav{ display:block; position:fixed; inset:0; z-index:2000; visibility:hidden;
    transition:visibility 0s linear .34s; }   /* on CLOSE: stay visible until the panel/scrim finish animating out */
  .mnav.is-open{ visibility:visible; transition:visibility 0s; }   /* on OPEN: show immediately */
  .mnav-scrim{ position:absolute; inset:0; background:rgba(6,6,6,0.62);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .3s ease; }
  .mnav.is-open .mnav-scrim{ opacity:1; }
  .mnav-panel{
    position:absolute; top:0; right:0; height:100%; width:min(84vw,360px); box-sizing:border-box;
    background:#0d0d0d; border-left:1px solid var(--line);
    display:flex; flex-direction:column; gap:2px;
    padding:calc(env(safe-area-inset-top,0px) + 88px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
  }
  .mnav.is-open .mnav-panel{ transform:translateX(0); }
  .mnav-close{
    position:absolute; top:calc(env(safe-area-inset-top,0px) + 22px); right:var(--gutter);
    width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid var(--line);
    color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .mnav-close svg{ width:20px; height:20px; }
  .mnav-link{
    display:flex; align-items:center; min-height:54px;
    font-family:var(--sans); font-size:20px; font-weight:450; letter-spacing:-0.02em;
    color:#f3f3f3; border-bottom:1px solid var(--line);
  }
  .mnav-link:active{ color:var(--muted); }
  .mnav-cta{ margin-top:24px; width:100%; min-height:54px; justify-content:center; }
}
@media (max-width:760px) and (prefers-reduced-motion: reduce){
  /* reduced motion: open AND close are instant (no slide/fade) */
  .mnav, .mnav.is-open{ transition:none; }
  .mnav-scrim, .mnav.is-open .mnav-scrim,
  .mnav-panel, .mnav.is-open .mnav-panel{ transition:none; }
}

/* ============================================================
   HERO — phone reflow & rhythm (≤640px)
   ============================================================ */
@media (max-width:640px){
  .hero-card{ padding:18px 16px 22px; }
  .hbody { order:3; }
  .hcorner{ order:4; }

  .htop .hbrand{ font-size:19px; }
  .hbook{ padding:11px 16px; font-size:13px; min-height:44px; }

  .hbody{ padding:clamp(26px,9vw,52px) 0 clamp(18px,5vw,30px); }
  .hsub{ margin-top:26px; }

  .hcorner{ gap:22px; margin-top:8px; }
  .hwedo-list{ font-size:18px; max-width:100%; }
  .hintro-line{ font-size:14px; max-width:100%; }
}
@media (max-width:380px){
  .htop{ gap:12px; }
  .hbook svg{ display:none; }
  .hheadline{ font-size:31px; }
}

/* ============================================================
   2. WHAT WE DO — side gutter so cards never touch the edge
   ============================================================ */
@media (max-width:860px){
  /* the section is .shell, but the ≤480 vertical-padding rule below would
     otherwise zero the horizontal gutter — keep the grid inset on its own. */
  .svc-grid{ padding-inline:var(--gutter); box-sizing:border-box; }
  /* drop the GPU-layer promotion on cards: the desktop hover-lift never fires on
     touch, and the promoted layer fails to repaint when a card collapses (the
     row-gap looks collapsed until a scroll). Normal painting reflows instantly. */
  .scard{ will-change:auto; }
}

/* ============================================================
   3 + 4. WORK CARDS — content-height, media-on-top, clear gaps
   ============================================================ */
@media (max-width:820px){
  /* kill the desktop full-screen band height (incl. the reduced-motion
     .work .work-scroll .band{min-height:100svh} rule) so cards fit content */
  .work .band,
  .work .work-scroll .band{ min-height:auto; height:auto; }

  /* ISSUE 3 — Vulcan (.band.full) is a desktop full-bleed card (media absolute
     behind an overlaid body). On mobile, make it stack like every other band:
     media on top in normal flow, body below, no overlay, no overlap. */
  .work .band.full .band-media{ position:relative; inset:auto; aspect-ratio:16/10; order:1; }
  .work .band.full .band-media::after{ display:none; }   /* drop the text-over-photo gradient */
  .work .band.full .band-body{ position:relative; min-height:auto; justify-content:flex-start; order:2; }

  /* ISSUE 1 — clear vertical separation between stacked project blocks.
     Must match the specificity of v27.css `.work .work-scroll .band{margin:0}`
     (inside the no-preference media query) or it gets overridden to zero. */
  .work .work-scroll .band{ margin-bottom:clamp(44px,12vw,76px); }
  .work .work-scroll .band:last-child{ margin-bottom:0; }

  /* ISSUE 2 — keep testimonial cards off the screen edges (matches other sections) */
  .testi.shell{ padding-left:var(--gutter); padding-right:var(--gutter); }
}
@media (max-width:640px){
  .work .band-body{ padding:clamp(22px,6vw,30px); gap:14px; }
  .work .band-title{ font-size:clamp(30px,8vw,42px); }
  .work .band-cap{ font-size:15px; max-width:100%; }
}

/* ============================================================
   5. FAQ — side gutter (restored; the ≤480 rule below would zero it)
   ============================================================ */
@media (max-width:820px){
  .faq.shell{ padding-left:var(--gutter); padding-right:var(--gutter); }
}

/* ============================================================
   6. AUDIT — pricing height, stats, overflow, section rhythm
   ============================================================ */
@media (max-width:640px){
  /* pricing cards follow their content, comfortably padded */
  .pricing .pcard{ min-height:auto; padding:clamp(26px,6vw,34px) clamp(22px,5.5vw,30px); }
}

/* Section vertical rhythm on phones — restore the --gutter side padding
   that the shorthand would otherwise drop to 0 for .shell sections. */
@media (max-width:480px){
  .svc{ padding:64px var(--gutter) 26px; }
  .about{ padding:84px 0; }
  .work{ padding:34px 0 56px; }
  .pricing{ padding:70px var(--gutter); }
  .testi{ padding:70px var(--gutter); }
  .faq{ padding:54px var(--gutter) 72px; }

  .scard-body{ padding:22px 20px; }
}

/* Kill any horizontal overflow on phones (big decorative wordmarks, wide media) */
@media (max-width:860px){
  body{ overflow-x:hidden; }
}

/* ---- Footer bar: stack the legal line + back-to-top -------- */
@media (max-width:560px){
  .foot-bar{ flex-direction:column; align-items:flex-start; gap:14px; }
  .foot-bar span{ font-size:12.5px; }
}

/* ---- Touch targets: comfortable tap areas ----------------- */
@media (hover:none){
  .hsoc-ic a{ width:40px; height:40px; }
  .foot-col a, .foot-col .fline{ padding:9px 0; }
}