/* ==========================================================================
   MOBILE PASS (30 Oct, SHAHEEN-MOBILE-PASS-SPRINT.md — Bhavana 29 Oct on her phone).
   Sitewide, enqueued LAST. Everything here is inside a max-width query below 1024 px,
   so desktop (>=1024) is unchanged by construction. Transform/opacity only for motion.
   ========================================================================== */

/* ---------- 2 · HEADER: compact 64 px bar on phones, solid once scrolled ----------
   Was 96 px (80 px lockup) and rgba + 12 px backdrop blur, so content showed through.
   Every hero already pads by --hdr-h, so they follow the token. The lockup is a STACKED
   square (no horizontal variant exists); 60 px is the largest that fits a 64 px bar. */
@media (max-width:767px){
  :root{--hdr-h:64px;--logo-h:60px}
  .hdr .in{height:calc(var(--hdr-h) - 1px)}   /* the bar's 1px bottom border included: 64 total */
  .hdr.scrolled[data-scene="light"]{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr.scrolled[data-scene="dark"]{background:#0C0D0F;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mnav{padding-top:76px}
}

/* ---------- 4 · WHATSAPP: 48 px, 16 px from the edges on phones. --wa-lift is set by
   app.js only when the button would sit on a link or button; it rises above it. ---------- */
@media (max-width:767px){
  .v2-wa{width:48px;height:48px;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
    transform:translateY(var(--wa-lift,0px))}
  .v2-wa:hover{transform:translateY(var(--wa-lift,0px))}
  .v2-wa svg{width:24px;height:24px}
  /* the page end: 48 + 16 + 24 clear, so the last footer line is never under the button */
  .foot{padding-bottom:88px}
}

/* ============================== NEW HOMEPAGE (.hp-*) ============================== */

/* ---------- 6 · HERO on phones: text ABOVE the imagery. The slideshow becomes a 4:3 band
   under the copy (same slides, same modes), the tab bar sits under it in flow. Buttons are
   full width. Nothing overlays the copy, so it needs no scrim. ---------- */
@media (max-width:767px){
  .hp-hero{min-height:0;justify-content:flex-start;padding-top:calc(var(--hdr-h) + 28px);padding-bottom:0}
  .hp-hero-in{order:1}
  .hp-hero-media{order:2;position:relative;inset:auto;width:100%;aspect-ratio:4/3;margin-top:32px}
  .hp-hero-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,9,10,.55) 0%,rgba(8,9,10,0) 22%,rgba(8,9,10,0) 78%,rgba(8,9,10,.6) 100%)}
  .hp-slide img{object-position:50% 50%;transform-origin:50% 50%}
  .hp-hero-scrim{display:none}
  .hp-show-bar{order:3;position:relative;bottom:auto;padding-top:18px;padding-bottom:22px}
  .hp-actions{flex-direction:column;align-items:stretch;gap:12px}
  .hp-btn{justify-content:space-between;min-height:54px;padding:0 18px;font-size:1rem}
  .hp-h1{font-size:clamp(2.25rem,10.4vw,2.75rem)}
}

/* ---------- 1 · DIVISIONS: no horizontal scroller below 1024 px.
   768-1023: 2 x 2 grid. <768: compact stacked cards, 16:10 image, Explore directly under
   the text (the desktop margin-top:auto opened a 47-71 px gap). ---------- */
@media (max-width:1023px){
  .hp-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;overflow:visible;
    scroll-snap-type:none;padding-bottom:0;max-width:var(--hp-max);padding-inline:var(--hp-gut)}
  .hp-panel{flex:none}
  .hp-panel-media{aspect-ratio:4/3}
}
@media (max-width:767px){
  .hp-band{grid-template-columns:minmax(0,1fr);gap:36px}
  .hp-panel-media{aspect-ratio:16/10}
  .hp-panel-text{padding-top:16px}
  .hp-divs .hp-panel h3{margin-top:6px;font-size:1.25rem}
  .hp-divs .hp-panel p{margin-top:8px;font-size:.9375rem;line-height:1.55}
  .hp-panel .hp-link{margin-top:4px;padding-top:0}
}

/* ---------- 5 · INDUSTRIES 2-up compact; customer marquee on its own compositor layer ---------- */
@media (max-width:767px){
  .hp-inds-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hp-inds .hp-ind h3{left:12px;right:12px;bottom:10px;font-size:.9375rem}
  .hp-inds .hp-sec-head{align-items:flex-start;flex-direction:column;gap:6px}
  .hp-logo{height:72px;padding-inline:22px}
  .hp-logo-box{height:30px}
}
@media (max-width:1023px){
  .motion .hp-marquee-track{will-change:transform;backface-visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.motion .hp-marquee-track{will-change:auto}}

/* ---------- 3 · REVEAL on phones/tablets: shorter fade so a fast fling never lands on a
   half-faded (dark, empty-looking) block; home-preview.js also starts it 60% of a screen early. */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  .hp-ready .hp-rv{transition-duration:.35s,.35s;transition-delay:calc(var(--d,0) * 40ms),calc(var(--d,0) * 40ms)}
  .hp-ready .hp-rv:not(.in){transform:translateY(16px)}
}

/* ============================== SITEWIDE PHONE SWEEP (390 / 360 / 768) ==============================
   Found by tools/mp-sweep.mjs on every sitemap page + all 25 posts; each rule re-measured after deploy.
   Tap targets: 44 px minimum. Body-size text: 14 px minimum. Padding / sizing only, no copy change. */
@media (max-width:1023px){
  /* breadcrumb "Home" was 37 x 45 (phones) and 37 x 21 (768): every inner page */
  .crumb a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  /* footer columns at 768 were 34 px tall; footer note 13.8 px and CR line 12.2 px */
  .foot-col ul a{display:flex;align-items:center;min-height:44px}
  .foot-note{font-size:.875rem}
  .foot .foot-cr{font-size:14px}
  /* Capabilities: the card titles are links (21 px tall); grow the hit area, not the layout */
  .v2-card .v2-h3 a{display:inline-block;padding-block:12px;margin-block:-12px}
  /* Contact: email / phone links 35 px; enquiry form labels 12.8 px */
  .v2-cd a{display:flex;align-items:center;min-height:44px}
  .enq-form label{font-size:.875rem}
  /* related-article links on the 25 posts were 42 px */
  .v2-related a{min-height:44px;display:inline-flex;align-items:center}
  /* gallery / tool captions were 11-12.5 px */
  .eframe-cap{font-size:14px}
  /* new homepage: facility caption 13 px */
  main .hp-who-fig figcaption{font-size:.875rem}
}
@media (max-width:767px){
  /* new homepage tab bar: the 92 px right reserve for the WhatsApp button squeezed the four
     tabs to 41 px at 360. The button now lifts itself off any link (app.js), so the bar
     uses the normal gutter and each tab is ~67 px wide. */
  .hp-show-bar{padding-right:var(--hp-gut)}
}

/* Engineering Insights (/blog/) on phones: 25 full-width cards made a 13,000 px page, and
   Falcon's wide banner images sat letterboxed in tall 16:10 frames (a band of empty tint
   above and below each). Below 640 px every card after the lead is a compact row: the image
   whole (contain) in a 4:3 thumbnail on the left, tag / division / title / date on the right.
   Same markup, same text, nothing hidden. */
@media (max-width:639px){
  .o25-posts{gap:12px}
  .o25-post:not(.is-lead) .o25-post-a{flex-direction:row;align-items:stretch}
  .o25-post:not(.is-lead) .o25-post-media{flex:0 0 34%;aspect-ratio:auto;min-height:104px;display:flex;align-items:center}
  .o25-post:not(.is-lead) .o25-post-media img{height:auto;aspect-ratio:4/3}
  .o25-post:not(.is-lead) .o25-post-b{flex:1;min-width:0;gap:6px;padding:12px 14px}
  .o25-post:not(.is-lead) .o25-post-t{font-size:.9375rem;line-height:1.3}
  .o25-post:not(.is-lead) .o29-fg-tag{align-self:flex-start}
  .o25-post-m{font-size:.875rem}
}

/* /precision-machining/ (and any .svc-grid.c4): v2.css holds four cards at TWO columns down
   to 360 px (~170 px cards, text cramped) because .svc-grid.c4 (0,2,0) outranks the sitewide
   one-column rule for .svc-grid below 560 px. Restated here at equal specificity, later file. */
@media (max-width:559px){.svc-grid.c4{grid-template-columns:minmax(0,1fr)}}

/* WhatsApp steps aside (app.js adds .wa-away) only while it would sit on a form field that
   rising cannot clear (stacked fields on the enquiry form). Opacity/visibility only. */
@media (max-width:767px){
  .v2-wa.wa-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}
}

/* Re-measured after deploy: three of the sweep rules above were inert (cascade misses).
   Restated at the specificity that actually wins:
   - .foot-col.contact li a{display:inline} (app.css, 0,2,2) kept the footer phone / email at 31 px on 768
   - .enq-form .field label (v2.css, 0,2,1) kept the enquiry labels at 12.8 px
   - .p-gallery .eframe-cap (pages.css, 0,2,0) and .p-gallery.sq .eframe-cap at <=400 (v2.css, 11 px) */
@media (max-width:1023px){
  .foot .foot-col.contact li a:not(.soc){display:inline-flex;align-items:center;min-height:44px}
  .enq-form .field label{font-size:.875rem}
  .p-gallery .eframe-cap,.p-gallery.sq .eframe-cap{font-size:14px;letter-spacing:.03em}
}
@media (max-width:1023px){
  /* the link now carries the 44 px itself, so its list item drops the phone padding (no taller footer) */
  .foot .foot-col.contact li:has(> a:not(.soc)){padding-block:0}
}