/* ============================================================
   Nagesh Trading — MOBILE LAYER
   Loaded after styles.css. Everything here lives inside a
   max-width media query, so desktop renders exactly as before
   and the phone layout switches in on its own — no separate
   URL, no device sniffing, no JS toggle.

   What this layer changes, and why (all of it is conversion):
     1. A fixed bottom action bar — Call · WhatsApp · Quote.
        A fly-ash buyer on a phone rings or messages; making
        them find the contact page first loses the enquiry.
     2. The hero leads with the words. styles.css puts the
        powder visual above the headline below 860px, so the
        first screenful on a handset was decoration. Reversed.
     3. Thumb-sized targets everywhere: 48px minimum on form
        controls, 16px inputs so iOS does not zoom on focus.
     4. Tighter vertical rhythm — the desktop section padding
        costs about a screen and a half of scrolling per page.

   Breakpoints: 760px is the handset switch (matches the point
   where .quote-grid and the hero have already stacked); 400px
   is the small-handset trim.
   ============================================================ */

/* ============================================================
   1. BOTTOM ACTION BAR
   Markup sits on every page, hidden above 760px. Default state
   is visible: with JS off a phone user still gets the bar.
   ============================================================ */
.mbar{display:none}

@media(max-width:760px){

  .mbar{
    display:grid;
    grid-template-columns:1fr 1fr 1.3fr;
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:var(--carbon-2);
    border-top:1px solid var(--line-dk);
    box-shadow:0 -12px 34px -20px rgba(0,0,0,.85);
    padding-bottom:env(safe-area-inset-bottom);
    transform:none;
    transition:transform .3s ease;
  }
  /* JS drops the bar while the enquiry form's own buttons are on
     screen, so it never sits on top of the thing it points at. */
  .mbar.is-hidden{transform:translateY(115%)}

  .mbar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    min-height:56px;padding:9px 6px;
    font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
    line-height:1;color:var(--paper);
    border-left:1px solid var(--line-dk);
    -webkit-tap-highlight-color:transparent;
    transition:background .15s ease;
  }
  .mbar a:first-child{border-left:0}
  .mbar a:active{background:rgba(0,0,0,.22)}
  .mbar svg{width:19px;height:19px;flex:none}

  /* the paid action carries the accent, the two contact routes stay quiet */
  .mbar .mbar-cta{
    background:var(--amber);color:var(--amber-ink);
    font-weight:700;letter-spacing:.09em;border-left:0;
  }
  .mbar .mbar-cta:active{background:var(--amber-deep)}

  /* the bar is fixed, so the footer needs somewhere to end */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}

  /* one persistent action is enough — the pill and the bar were
     the same ask twice, in the same corner */
  .floating-cta{display:none}
}

/* light theme remaps --carbon-2 to a near-white, so the bar's
   text has to come back to ink or it vanishes into its own
   background (same flip footer already does) */
html[data-theme="light"] .mbar{color:var(--ink)}
html[data-theme="light"] .mbar a{color:var(--ink)}
html[data-theme="light"] .mbar .mbar-cta{color:var(--amber-ink)}
html[data-theme="light"] .mbar a:active{background:rgba(22,24,28,.06)}

/* ============================================================
   2. HERO — words first, offer visible without scrolling
   ============================================================ */
@media(max-width:760px){

  .hero{padding-top:24px}
  .hero-grid{gap:24px}

  /* styles.css lifts the visual above the copy at 860px. On a
     handset that buries the headline, the sub and both CTAs
     below the fold — put the pitch back on top. */
  .hero-visual{order:0}

  .eyebrow{
    font-size:10px;letter-spacing:.1em;line-height:1.5;
    align-items:flex-start;gap:8px;
  }
  .eyebrow .pulse{margin-top:5px}

  .hero-title{
    font-size:clamp(2.15rem,9.6vw,3rem);
    line-height:1;margin:16px 0 14px;
  }
  .hero-sub{font-size:1rem;line-height:1.5;max-width:100%}

  /* Quote takes the full width; WhatsApp and the reports share
     the row beneath it. Three stacked full-width buttons pushed
     the trust chips and the whole visual off the first screen. */
  .hero-cta{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin:22px 0 20px;
  }
  .hero-cta .btn{
    width:100%;padding:14px 12px;
    font-size:11px;letter-spacing:.06em;
    white-space:normal;line-height:1.35;text-align:center;
  }
  .hero-cta .btn:first-child{grid-column:1 / -1;padding:17px 20px;font-size:13px}
  /* the number is on the bar and the contact page already */
  .btn-num{display:none}

  .trust-chips{gap:8px 16px;padding-top:18px}
  .trust-chips li{font-size:11px}

  .hero-visual-note{margin-top:16px;font-size:10px}

  .hero-stats{margin-top:34px}
  .hero-stats .stat{padding:16px 0}
  .hero-stats .count,.hero-stats .stat b{font-size:1.6rem}
  .hero-stats .stat span{font-size:.78rem;margin-top:6px;line-height:1.45}
}

/* ============================================================
   3. VERTICAL RHYTHM
   Desktop padding on a 390px screen is roughly an extra screen
   and a half of scroll per page before anything is read.
   ============================================================ */
@media(max-width:760px){
  section{padding:clamp(44px,11vw,60px) 0}
  .sec-head{margin-bottom:28px}
  .sec-head h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .sec-head .sec-sub{font-size:.95rem;margin-top:12px}

  .page-hero{padding:26px 0 30px}
  .page-hero h1{font-size:clamp(1.85rem,8vw,2.5rem)}
  .page-hero .ph-sub{font-size:.98rem;margin-top:14px}
  .page-hero .ph-chips{gap:8px 16px;margin-top:18px;font-size:11px}

  .cta-band .cta-row{gap:10px}
  .cta-band h2{font-size:clamp(1.55rem,6.6vw,2.1rem)}
  .cta-band p{font-size:.95rem}

  /* wide data tables scroll in their own box rather than
     stretching the page sideways */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* the grade badge and its role label were sharing one flex row;
     at 390px that squeezed "Grade I" onto two lines inside its own
     chip. Stack them and let the chip keep its width. */
  .grade-top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
  .grade .ref{white-space:nowrap}
  .grade{padding:24px 20px}
  .grade h3{font-size:1.45rem}
}

/* ============================================================
   4. CONTACT LINES — tap targets, not text
   On the contact page these are the fastest route to an enquiry.
   ============================================================ */
@media(max-width:760px){
  .contact-lines a,.contact-lines span{
    font-size:1.05rem;padding:15px 0;min-height:52px;
  }
  .contact-lines a{
    display:flex;flex-direction:column;justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .contact-lines a:active{color:var(--amber-bright)}
  .contact-lines .lab{margin-bottom:4px}

  .quote-intro p{margin-bottom:22px}
  .quote-proof{margin-top:24px;padding-top:20px}
}

/* ============================================================
   5. ENQUIRY FORM
   Every input at 16px — anything smaller and iOS Safari zooms
   the viewport on focus, which on a long form reads as the page
   breaking. 48px minimum height on everything tappable.
   ============================================================ */
@media(max-width:760px){
  form{padding:20px 16px;gap:15px}

  .field label{font-size:10px;margin-bottom:7px}
  /* checkbox and radio inputs live inside .field too (the supply-mode
     fieldset carries both classes) — a 50px min-height turns each of
     those into a 50px square and doubles the row. Text controls only. */
  .field input:not([type="checkbox"]):not([type="radio"]),
  .field textarea,.field select{
    font-size:16px;padding:14px;min-height:50px;
  }
  .field textarea{min-height:96px}

  .check-grid label{padding:14px 13px;min-height:50px;font-size:12.5px}
  .check-grid input{width:18px;height:18px}

  .form-actions{grid-template-columns:1fr;gap:10px}
  .form-actions .btn{width:100%;padding:17px 20px;font-size:12.5px}
  .form-note{font-size:10.5px;line-height:1.6}
}

/* ---- the export block folds away on a handset ----
   Six of the eleven fields only matter to an export buyer. They
   stay in the DOM and stay open on desktop (summary hidden, so
   the desktop form is unchanged); main.js closes the fold below
   760px, which cuts the visible form roughly in half. With JS
   off it renders open — longer, never broken. */
.opt-fold{display:grid;gap:18px;border:0;padding:0}
.opt-fold>summary{display:none}

@media(max-width:760px){
  .opt-fold{gap:15px}
  .opt-fold>summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    list-style:none;cursor:pointer;
    background:var(--carbon-2);border:1px solid var(--line-dk);
    padding:15px 14px;min-height:50px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--mute-dk);
    -webkit-tap-highlight-color:transparent;
  }
  .opt-fold>summary::-webkit-details-marker{display:none}
  .opt-fold>summary::after{
    content:"+";font-size:16px;line-height:1;color:var(--amber-bright);flex:none;
  }
  .opt-fold[open]>summary{color:var(--paper);border-color:var(--amber-bright)}
  .opt-fold[open]>summary::after{content:"–"}
  html[data-theme="light"] .opt-fold[open]>summary{color:var(--ink)}
}

/* ============================================================
   6. HEADER
   ============================================================ */
@media(max-width:760px){
  .topbar{gap:12px}
  .mobnav a{padding:15px 0;font-size:15px;min-height:50px;display:flex;align-items:center}
  .mobnav a.btn{justify-content:center;padding:16px}
  .mobnav.open{max-height:640px}
}

/* ============================================================
   7. SMALL HANDSETS
   ============================================================ */
@media(max-width:400px){
  .hero-title{font-size:clamp(1.9rem,9.6vw,2.4rem)}
  .hero-cta .btn{font-size:10.5px;padding:13px 8px}
  .hero-cta .btn:first-child{font-size:12.5px;padding:16px}

  .contact-lines a,.contact-lines span{font-size:.98rem}
}

/* The bar labels hold their size on every mainstream handset (a 320px
   screen still fits "Get a quote"); only the very narrowest need a trim. */
@media(max-width:340px){
  .mbar{grid-template-columns:1fr 1fr 1.15fr}
  .mbar a{font-size:9px;letter-spacing:.06em;gap:4px}
  .mbar svg{width:17px;height:17px}
}

/* ============================================================
   8. MOTION
   The bar is a fixed element that moves on scroll; honour the
   system setting like the rest of the site does.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .mbar{transition:none}
}