/* ============================================================
   PEEPAL — SHARED RESPONSIVE / UI LAYER
   Loaded AFTER each page's inline <style>, so equal-specificity
   rules here win. Adds: smart sticky nav, mobile menu, rail
   reveal, and a responsive-image (breakpoint) utility system.
   ============================================================ */

/* ---------- Global safety nets ---------- */
/* Kill sideways scroll. `clip` rather than `hidden` because an ancestor with
   overflow:hidden silently breaks every position:sticky inside it — which is
   most of this site's chrome. Safari only learned `clip` in 16, so the older
   ones take `hidden`: a broken sticky header there is a smaller fault than a
   page that scrolls sideways. */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
img,svg,video,picture{max-width:100%}

/* ---------- The page's own scrollbar ----------
 * On a pointer machine the browser default is an unstyled classic scrollbar
 * wherever the OS is set to always-visible bars. It is ~19px wide and its
 * track paints the canvas; the canvas is white, because html has no
 * background of its own and so takes body's --paper. Beside the black hero
 * that is a white slab down the right of the first screen anybody sees.
 *
 * It cannot be coloured to match what is behind it: the page runs dark hero →
 * light folds → dark footer, and a scrollbar gets one colour for all of them.
 * So it is made quiet instead — thin, and a grey thumb that carries against
 * both ends of that range. The track stays transparent, so the canvas still
 * shows through it: the column beside the hero is still white, just half the
 * width and with a thumb that looks designed. Removing the white outright
 * means giving html a dark background of its own, and that only moves the
 * mismatch — a dark column beside the light folds in the middle instead.
 *
 * ---- Why this is now scoped to fine pointers ----
 *
 * The previous version of this comment said the always-visible case "includes
 * plenty of phones", and used that to justify running the block everywhere.
 * That reasoning had it backwards. A phone does not start with a classic bar
 * and get tidied up by these rules — it starts with an overlay bar that takes
 * no layout width and paints nothing until a scroll is in progress. Declaring
 * ::-webkit-scrollbar is itself the thing that opts the scroller out of
 * overlay behaviour in Blink and WebKit. So on a phone this block did not
 * quieten an existing bar; it created one.
 *
 * And the bar it created is the exact artefact the client reported: a
 * permanent strip down the right of every screen, white because the track is
 * transparent and the canvas behind it is --paper, with a grey thumb at the
 * top of it — rgba(125,125,125,.55), declared four lines below. Nothing else
 * on the page can produce a white strip: the two elements that do escape the
 * overflow net are the nav drawer (#0a0a0a) and its backdrop (black at .55),
 * and both are dark.
 *
 * A classic bar also eats layout width, which narrows the initial containing
 * block, which makes every vw-based clamp() on the site resolve a step
 * smaller — the "whole design steps down a size" half of the same report.
 *
 * Scoped to (hover:hover) and (pointer:fine) rather than to a width: the
 * thing that decides whether a scrollbar is overlay or classic is the input
 * device, not the size of the window. Matches the (hover:none) convention
 * already used at base.css and further down this file.
 *
 * Both syntaxes on purpose: Firefox reads scrollbar-width/-color, WebKit and
 * Blink read the pseudo-elements, and neither understands the other.
 */
@media (hover:hover) and (pointer:fine){
  html{
    scrollbar-width:thin;
    scrollbar-color:rgba(125,125,125,.55) transparent;
  }
  html::-webkit-scrollbar{width:9px;height:9px}
  html::-webkit-scrollbar-track{background:transparent}
  html::-webkit-scrollbar-thumb{background:rgba(125,125,125,.55);border-radius:9px}
  html::-webkit-scrollbar-thumb:hover{background:rgba(125,125,125,.8)}
}

/* ============================================================
   RESPONSIVE IMAGE / MEDIA UTILITIES
   "Breakpoints for image-adding variability" — drop an <img>,
   <picture>, <video> or <svg> inside .media and it scales to
   fill a fixed aspect box. Swap ratios with the modifier
   classes, or serve a different asset per breakpoint with the
   .only-* visibility helpers (or a native <picture> + srcset).

   Example:
     <div class="media media--16x9">
       <picture>
         <source media="(max-width:640px)" srcset="hero-mobile.jpg">
         <source media="(max-width:960px)" srcset="hero-tablet.jpg">
         <img src="hero-desktop.jpg" alt="">
       </picture>
     </div>
   Or the class approach:
     <img class="only-desktop" src="wide.jpg" alt="">
     <img class="only-mobile"  src="tall.jpg" alt="">
   ============================================================ */
.media{position:relative;width:100%;overflow:hidden;border-radius:inherit;background:var(--mist,#fafafa)}
.media>img,.media>video,.media>svg,.media>picture,.media>picture>img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.media[data-ar]{aspect-ratio:var(--ar,16 / 9)}
.media--16x9{aspect-ratio:16 / 9}
.media--3x2{aspect-ratio:3 / 2}
.media--4x3{aspect-ratio:4 / 3}
.media--1x1{aspect-ratio:1 / 1}
.media--21x9{aspect-ratio:21 / 9}
.media--portrait{aspect-ratio:4 / 5}

/* Per-breakpoint visibility — show a different asset per screen size */
.only-desktop{display:block}
.only-tablet{display:none}
.only-mobile{display:none}
@media(max-width:960px){
  .only-desktop{display:none}
  .only-tablet{display:block}
}
@media(max-width:640px){
  .only-tablet{display:none}
  .only-mobile{display:block}
}

/* ============================================================
   SMART STICKY NAV  (hide on scroll-down, show on scroll-up)
   Base nav stays transparent/absolute over the hero. JS adds
   .is-stuck once scrolled past the hero, and .is-hidden while
   scrolling down.
   ============================================================ */
.nav,.lp-header{
  transition:transform .38s cubic-bezier(.22,1,.36,1),
             background .3s ease, box-shadow .3s ease,
             padding .3s ease;
}
.nav.is-stuck,.lp-header.is-stuck{
  position:fixed;
  background:#0a0a0a;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-top:16px;padding-bottom:16px;
}
.nav.is-hidden,.lp-header.is-hidden{transform:translateY(-104%)}
/* never hide the bar while the mobile menu is open */
body.nav-open .nav.is-hidden{transform:none}

/* ============================================================
   HOMEPAGE RAIL — hidden until the Services section is reached
   (kept desktop-only by the page's own @media(max-width:900px)).
   ============================================================ */
.rail{
  opacity:0;visibility:hidden;transform:translateX(14px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s ease,padding .3s;
}
.rail.rail--on{opacity:1;visibility:visible;transform:translateX(0)}

/* Mobile-menu backdrop — fixed & hidden by default so it never
   participates in the desktop nav's flex layout. */
.nav-backdrop{
  position:fixed;inset:0;z-index:110;display:none;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}

/* ============================================================
   MOBILE NAV  (<=960px) — turn the existing .mainnav into a
   slide-in panel with tap-to-expand mega accordions.
   ============================================================
   960, not 760. The drawer used to end at 760px, but the six-item
   link bar does not actually fit beside the wordmark until about
   960: measured at 768 and at 820 the brand collapsed onto two
   lines, "About Us" and "Success Stories" each wrapped, and the
   gap between wordmark and menu was zero. That band is every iPad
   in portrait bar the Mini, and every half-screen desktop window.

   The number is kept in step with mqNav in assets/js/ui.js — the
   CSS decides what is shown, the JS decides whether tapping a
   top-level item expands it or follows its href, and the two
   disagreeing is what leaves a panel that cannot be opened.
   ============================================================ */
@media(max-width:960px){
  /* The bar's own metric, not a hero's — see --nav-h in base.css. */
  :root{--nav-pad-y:18px}

  .navtoggle{display:block;position:relative;z-index:130;line-height:1}

  .nav .mainnav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:0;right:0;bottom:0;
    width:min(86vw,360px);
    background:#0a0a0a;border-left:1px solid rgba(255,255,255,.08);
    padding:92px 22px 40px;
    transform:translateX(100%);
    transition:transform .36s cubic-bezier(.22,1,.36,1),box-shadow .36s ease;
    overflow-y:auto;overscroll-behavior:contain;
    z-index:120;
    /*
     * The shadow belongs to the *open* panel, and it is declared transparent
     * here rather than omitted so it fades with the slide instead of
     * vanishing the instant the menu is dismissed.
     *
     * It cannot be left switched on while the panel is parked. The shadow is
     * cast leftwards — -24px with a 60px blur — so although the panel itself
     * sits off the right edge, its shadow lands squarely back on the page: a
     * dark smudge down the right side of every mobile screen, which is what
     * the client reported. html and body carry overflow:clip, but that does
     * not contain it: this is position:fixed, and a fixed element is not
     * clipped by an ancestor's overflow.
     */
    box-shadow:-24px 0 60px rgba(0,0,0,0);
  }
  body.nav-open .nav .mainnav{
    transform:translateX(0);
    box-shadow:-24px 0 60px rgba(0,0,0,.5);
  }
  body.nav-open{overflow:hidden}

  /* backdrop only functions on mobile (menu is mobile-only) */
  .nav-backdrop{display:block}

  .nav .mainnav li{width:100%}
  .nav .mainnav>li+li{border-top:1px solid rgba(255,255,255,.08)}

  .nav .mainnav .navlink{
    display:flex;justify-content:space-between;align-items:center;
    padding:17px 26px 17px 2px;font-size:1.08rem;position:relative;
  }
  /*
   * The link is only as wide as its label. It used to be width:100%, which was
   * harmless while the whole row expanded the accordion, but now that it
   * navigates it would put a link across the full width of the row and swallow
   * taps meant for the button beside it.
   */
  .nav .mainnav .has-mega>.navlink{width:auto}
  /*
   * Expand control on mega parents.
   *
   * A button rather than a ::before on the link, so the row has two targets:
   * the label goes to the parent's own page, this expands the accordion. It is
   * 56px wide and the full height of the row — a comfortable tap target — with
   * the glyph itself sitting at the right edge, where the old indicator was.
   *
   * The row is a flex line: label, then button, then the panel wrapped onto a
   * line of its own. Laid out rather than positioned — the panel is a child of
   * the same li, so anything pinned to the li's edges grows with it when the
   * accordion opens.
   */
  .nav .mainnav .has-mega{display:flex;flex-wrap:wrap;align-items:center}
  .nav .mainnav .has-mega>.mega{flex:0 0 100%}
  .nav .mainnav .mega-toggle{
    display:flex;align-items:center;justify-content:flex-end;
    margin-left:auto;width:56px;align-self:stretch;
    background:none;border:0;padding:0 2px 0 0;cursor:pointer;
    color:var(--neon);font-family:var(--body);font-size:1.15rem;line-height:1;
  }
  .nav .mainnav .mega-toggle::before{content:"＋"}
  .nav .mainnav .has-mega.open>.mega-toggle::before{content:"–"}
  .nav .mainnav .navlink::after{display:none}   /* drop the desktop underline in panel */

  /* mega dropdown → inline accordion */
  .nav .mainnav .mega{
    position:static;top:auto;right:auto;padding-top:0;
    opacity:1;visibility:visible;transform:none;
    max-height:0;overflow:hidden;transition:max-height .34s ease;
  }
  .nav .mainnav .has-mega.open>.mega{max-height:1600px}
  .nav .mainnav .mega-inner{
    width:auto;max-width:none;background:transparent;border:0;border-radius:0;
    box-shadow:none;padding:2px 0 12px 8px;
  }
  .nav .mainnav .mrow{padding:11px 8px;white-space:normal}
  .nav .mainnav .mega-hook{white-space:normal}

  /* industries two-pane → stacked */
  .nav .mainnav .ind-mega{flex-direction:column;min-height:0}
  /*
   * One industry per row, not a wrapped inline flow.
   *
   * The list used to wrap: `flex-wrap:wrap` let as many names fit on a line as
   * happened to fit, so the column count changed from row to row with the
   * length of the words — BFSI and Manufacturing shared a line, Product and
   * Tech Hiring took one alone, Pharma and IT Services shared the next. Every
   * other list in the drawer is one item per row, and this one now reads the
   * same way whatever the industries are called.
   */
  .nav .mainnav .ind-left{
    width:auto;flex:none;border-right:0;padding-right:0;
    border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px;margin-bottom:10px;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
  }
  .nav .mainnav .ind-item{padding:12px 8px}
  /*
   * Industries carry the same → as the Insights rows below them.
   *
   * The arrow was being blanked here, and on the desktop panel it is hover
   * furniture anyway: it exists in the layout but sits at opacity:0 until the
   * pointer arrives. In the drawer there is no pointer, so it has to be shown
   * outright — otherwise the two lists in the same panel are marked up the
   * same way and only one of them looks like it leads anywhere.
   *
   * "Others" is exempt: it is a plain label with nowhere to go, and
   * `.ind-others::after{content:none}` in base.css keeps it that way.
   */
  .nav .mainnav .ind-item::after{opacity:1;color:#fff}

  .nav .mainnav .ind-right{padding:0}

  /*
   * The preview pane is hover furniture, and in the drawer it was worse than
   * useless: it cost a tap. Choosing an industry took two — the first was
   * swallowed swapping the pane, the second navigated.
   *
   * With no hover there is nothing to drive it, so it goes, and the industry
   * grid becomes what it should be on a phone: six links, one tap each. The
   * pane's own content is a preview of the page the link goes to, so nothing
   * is lost that the next screen does not show in full.
   *
   * Scoped to no-hover rather than to the width alone: a small window on a
   * laptop keeps the pane and the drawer both, which is the behaviour that
   * layout can actually support.
   */
  @media(hover:none){
    .nav .mainnav .ind-right{display:none}
    .nav .mainnav .ind-left{border-bottom:0;margin-bottom:0;padding-bottom:0}
  }
}

/* Slightly tighter page padding on the smallest screens */
@media(max-width:640px){
  :root{--pad:clamp(16px,5vw,24px)}
}