/* ==========================================================================
   NIVAD PHARMED SALAMAT — Mobile experience
   --------------------------------------------------------------------------
   Loaded with media="(max-width: 900px)", so it never applies on desktop and
   never blocks desktop rendering. The desktop design is deliberately left
   exactly as it is; this file is a separate, phone-first treatment of the same
   content, built around four ideas:

     1. COST.  A phone renders the same page on a fraction of the power budget.
        Full-viewport backdrop blurs, 60vw blurred aurora layers, permanent
        compositor layers and infinite box-shadow animations are the expensive
        parts of this design system, and they buy almost nothing at 390px wide.
        They are switched off here rather than merely scaled down.

     2. REACH.  Phones are held one-handed. Controls grow to a 44px minimum,
        primary actions go full width, and nothing important hides behind hover.

     3. READING.  Persian at small sizes needs more line-height and less
        letter-spacing than the desktop scale gives it. Headline clamps are
        retuned for a narrow column instead of inheriting a viewport-width
        formula designed for 1440px.

     4. HONESTY ABOUT THE VIEWPORT.  Mobile browser chrome makes 100vh lie.
        Everything full-height here uses dvh with a vh fallback, and fixed
        elements respect the safe-area insets on notched devices.

   Ordering note: this file loads after style.css and landing.css, so plain
   specificity is enough almost everywhere and !important is used only where
   landing.css itself used it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COST — switch off the expensive ambience
   -------------------------------------------------------------------------- */

/* Backdrop blur on a fixed, full-width header is the single most expensive
   rule for scroll performance: the compositor must re-sample and re-blur the
   page behind it every frame. Solid surfaces read better on a small screen
   anyway. */
.header,
.header.transparent,
.header.scrolled,
.dropdown,
.mobile-nav,
.assist-panel,
.btn-ghost,
.hero-tag,
.eyebrow,
.play-btn,
.prod-card,
.contact-card,
.news-card,
.b-card,
.quality-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header.transparent,
.header.scrolled {
  background: rgba(4, 18, 26, .94);
  border-bottom: 1px solid rgba(234, 244, 246, .10);
}
html:not([data-theme="dark"]) .header.transparent,
html:not([data-theme="dark"]) .header.scrolled {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
}

/* ...and because it is now solid white, the bar must stop using the light-on-
   dark treatment that the "transparent" state assumes.

   On desktop, .header.transparent floats over the dark hero photo, so
   style.css paints the logo pure white (filter: brightness(0) invert(1)) and
   makes the buttons and the hamburger white too. The rule above replaces that
   backdrop with an opaque white bar for scroll performance — which left white
   artwork on a white bar. On the home page in light mode the entire header was
   invisible until the first scroll flipped it to .scrolled.

   The fix is to give the transparent state the same foreground the scrolled
   state already uses in light mode. Dark mode is untouched: there the bar
   really is dark, and white is correct. */
html:not([data-theme="dark"]) .header.transparent .logo img {
  filter: none;
}
html[lang="en"]:not([data-theme="dark"]) .header.transparent .logo-img[data-logo-en] {
  /* style.css brightens the English logo for a dark backdrop, with
     !important — so undoing it needs the same weight. */
  filter: none !important;
}
html:not([data-theme="dark"]) .header.transparent .tool-btn {
  color: var(--petrol);
  background: rgba(18, 166, 166, .08);
  border-color: rgba(18, 166, 166, .22);
  box-shadow: none;
}
html:not([data-theme="dark"]) .header.transparent .menu-toggle {
  color: var(--petrol);
}

/* The aurora layers are three 40-46vw elements under a 60px blur. At phone
   width they are a full-screen blur pass per frame for a soft glow that is
   barely perceptible. A flat gradient gives the same impression for free. */
.aurora { display: none !important; }

/* Decorative atmosphere layers never reserve space or paint on a phone. */
.features-mesh,
.features-glow,
.grain::after { display: none !important; }

/* Permanent compositor layers cost GPU memory on devices that have little of
   it. Nothing here animates on mobile, so none of them are needed. */
.anim,
.anim.visible,
.aurora span,
.hero-photo,
.prod-card,
.hub-ring { will-change: auto !important; }

/* Entrance animations move vertically only.

   The sideways variants offset by 40px along the inline axis, and this document
   is RTL, so `reveal-right`'s translateX(-40px) pushes the element PAST THE
   RIGHT EDGE of a phone screen. That widens the document to 413px on a 390px
   viewport, and because the transform is only cleared when the element scrolls
   into view, any section sitting below the fold leaves the whole page shifted
   and horizontally scrollable — which is what happened on the about and careers
   pages. A 40px sideways slide has nowhere to go on a narrow screen in any
   case; entering from below reads better and costs the same. */
.anim.from-s,
.anim.reveal-left,
.anim.reveal-right { transform: translateY(34px); }
.anim.from-s.visible,
.anim.reveal-left.visible,
.anim.reveal-right.visible { transform: translateY(0); }

/* Infinite glow/pulse animations run forever, on every page, and repaint each
   frame because they animate box-shadow and filter rather than transform or
   opacity. On a phone that is a background battery drain with no payoff. */
.assist-btn,
.assist-widget,
.eyebrow,
.section-tag,
.hero-tag .dot,
.cta .btn,
.hub-orbit-link {
  animation: none !important;
}

/* Heavy shadows are a paint cost and look muddy on a small dark screen. */
.prod-card,
.contact-card,
.news-card,
.service-card,
.quality-item,
.form-wrap,
.jobvision-cta {
  box-shadow: var(--shadow-sm);
}

/* Deck mode never engages below 761px, but be explicit — a phone must always
   get a normal scrolling document. */
html.home-snap { scroll-snap-type: none; }
.snap-section { scroll-snap-align: none; }

/* Several home sections are pinned to a full viewport so they can act as deck
   slides. Off the deck they are just tall empty boxes on a phone. Let content
   decide the height instead. */
.about-preview.snap-section,
.products.snap-section,
.partners.snap-section,
.cta.snap-section {
  min-height: 0;
  height: auto;
  display: block;
  padding-block: 52px;
}

/* The quick-access section is built as an absolutely-positioned composition
   centred in a full viewport: the container, the heading and the hub are each
   `position: absolute`. Releasing the height alone would collapse it to zero,
   so the whole composition is returned to normal flow here. */
.features.snap-section,
.features {
  min-height: 0;
  height: auto;
  display: block;
  overflow: visible;
  padding-block: 48px;
}
.features > .container,
.features .hub,
.features .section-head.section-head--hub {
  position: static;
  inset: auto;
  transform: none;
  width: auto;
  margin: 0 auto;
}
.features .section-head.section-head--hub { margin-bottom: 22px; }
.features .hub { display: block; }
.features .hub-ring { width: 100%; margin: 0; }

/* --------------------------------------------------------------------------
   2. READING — retuned type scale for a narrow column
   -------------------------------------------------------------------------- */
body {
  font-size: 16px;          /* never below 16px: iOS zooms the page otherwise */
  line-height: 2.05;        /* Persian needs more leading than Latin at this size */
}

h1, .hero h1 {
  font-size: clamp(27px, 7.6vw, 36px);
  line-height: 1.5;
  letter-spacing: 0;
}
.section-title,
h2 {
  font-size: clamp(21px, 5.6vw, 27px);
  line-height: 1.6;
}
h3 { font-size: 17px; line-height: 1.7; }

.section-lead,
.section-sub,
.hero p {
  font-size: 15px;
  line-height: 2;
}

/* The desktop gutter is 24px each side of a 1240px column. On a phone that
   leaves too little text width, and the content edge feels cramped. */
.container { width: calc(100% - 36px); }

/* --------------------------------------------------------------------------
   3. HEADER — compact, solid, thumb-friendly
   -------------------------------------------------------------------------- */
:root { --header-h: 62px; }

.header-inner {
  height: var(--header-h);
  gap: 8px;
  padding-inline: 4px;
}
.logo-img { height: 34px; }

/* The desktop nav is hidden on mobile; the drawer replaces it. */
.nav { display: none; }

.header-tools { gap: 6px; }
.tool-btn,
.menu-toggle {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
}

/* The view switch is the third circle in a toolbar that also carries the
   hamburger, so on a phone the menu it opens is pinned to the header rather
   than hung off the button — at 360px there is not enough room beside it. */
.view-menu {
  position: fixed;
  top: calc(var(--header-h) + 8px);
  inset-inline-end: 14px;
  inset-inline-start: auto;
  min-width: 210px;
  max-width: calc(100vw - 28px);
}
.view-opt { padding: 12px 12px; font-size: 14px; }
.view-opt .view-ico { width: 19px; height: 19px; }

/* Remove the blue tap flash; the buttons have their own pressed state. */
a, button, .btn, .tool-btn, .menu-toggle, .assist-btn {
  -webkit-tap-highlight-color: transparent;
}
.btn:active, .tool-btn:active, .menu-toggle:active { transform: scale(.97); }

/* --------------------------------------------------------------------------
   4. DRAWER NAVIGATION
   The drawer is the only way to navigate on a phone, so it gets real space:
   full height, generous rows, safe-area padding, and a clear active state.
   -------------------------------------------------------------------------- */
.mobile-nav {
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  height: calc(100vh - var(--header-h));
  padding: 14px 18px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-900);
  border-top: 1px solid rgba(234, 244, 246, .10);
}
html:not([data-theme="dark"]) .mobile-nav { background: var(--surface); }

.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;              /* comfortably above the 44px target minimum */
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
}
.mobile-nav a i {
  width: 22px;
  text-align: center;
  font-size: 15px;
  color: var(--cyan-400);
  opacity: .95;
}
.mobile-nav a:active { background: rgba(34, 211, 197, .12); }
.mobile-nav a.active,
.mobile-nav a[aria-current="page"] {
  background: rgba(34, 211, 197, .14);
  border-color: rgba(34, 211, 197, .34);
  color: var(--cyan-300);
}
html:not([data-theme="dark"]) .mobile-nav a.active,
html:not([data-theme="dark"]) .mobile-nav a[aria-current="page"] { color: var(--petrol); }

/* --------------------------------------------------------------------------
   5. HERO
   The desktop hero centres a block in a full viewport. On a phone that pushed
   the headline into the lower half behind a mostly-empty top, so the first
   thing on screen was nothing. Anchor the content lower-but-filled, cap the
   height, and let the photo be a backdrop rather than the subject.
   -------------------------------------------------------------------------- */
.hero {
  min-height: auto;
  height: auto;
  padding-top: calc(var(--header-h) + 34px);
  padding-bottom: 52px;
}
.hero-inner { align-items: flex-start; }
.hero-content { max-width: 100%; text-align: start; }

.hero-photo img { object-position: 62% center; }
.hero-veil { background: linear-gradient(180deg, rgba(4,18,26,.86) 0%, rgba(4,18,26,.72) 45%, rgba(4,18,26,.94) 100%); }

.hero-tag { font-size: 12.5px; padding: 7px 14px; }

/* Primary action first and full width — the most common single tap. */
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}
.hero-cta .btn {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 15px;
}

/* The scroll cue and the section-rail both compete for the bottom edge on a
   phone, and neither is useful when the page scrolls normally. */
.hero-scroll,
.section-guide { display: none !important; }

/* --------------------------------------------------------------------------
   6. PAGE HEROES (subpages)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-top: calc(var(--header-h) + 30px);
  padding-bottom: 34px;
  min-height: auto;
}
.page-hero h1 { margin-bottom: 10px; }
.breadcrumb { font-size: 13px; flex-wrap: wrap; row-gap: 4px; }

/* --------------------------------------------------------------------------
   7. SECTION RHYTHM
   Desktop section padding assumes a large screen; on a phone the same values
   produce long empty stretches between blocks, which reads as "unfinished".
   -------------------------------------------------------------------------- */
section { padding-block: 52px; }
.section-head, .section-header { margin-bottom: 28px; }
.marquee { display: none; }          /* infinite scroller, no pause control */

/* --------------------------------------------------------------------------
   8. CARDS AND GRIDS — one column, full-bleed touch targets
   -------------------------------------------------------------------------- */
.prod-grid,
.prod-grid--five,
.partner-row,
.partner-row--four,
.contact-grid,
.news-grid,
.services-grid,
.careers-cols,
.facilities-grid,
.quality-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Partner logos read fine two-up and would waste a lot of height stacked. */
.partner-row,
.partner-row--four { grid-template-columns: repeat(2, 1fr); }
.partner-card { padding: 18px; }
.partner-card img { max-height: 44px; }

.prod-card { border-radius: var(--r); }
.prod-thumb--logo { padding: 22px; }
.prod-thumb--logo img { max-height: 58px; }
.prod-body { padding: 18px; }
.prod-body h3 { font-size: 17px; }
.prod-body p { font-size: 14.5px; line-height: 1.95; }

/* Make the whole card's action reachable without precision. */
.prod-link { display: inline-flex; min-height: 44px; align-items: center; }

/* The orbital hub is a 500x500 desktop composition; below 900px it collapses
   into overlapping labels. A simple two-column tile grid says the same thing. */
.hub-ring {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}
.hub-orbit, .hub-core { display: none; }
.hub-node {
  position: static;
  transform: none;
  display: flex;
}
.hub-node-anim {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 112px;
  padding: 18px 12px;
  border-radius: var(--r);
  background: rgba(234, 244, 246, .05);
  border: 1px solid rgba(234, 244, 246, .12);
}
html:not([data-theme="dark"]) .hub-node-anim {
  background: var(--surface);
  border-color: var(--line);
}
.hub-node-bubble { width: 46px; height: 46px; font-size: 18px; }
.hub-node-label { font-size: 13.5px; text-align: center; white-space: normal; }

/* --------------------------------------------------------------------------
   9. PRODUCT DETAIL PAGE
   -------------------------------------------------------------------------- */
.product-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.product-chips { flex-wrap: wrap; gap: 8px; }
.product-text p { font-size: 14.5px; line-height: 1.95; }
.product-img-wrap { order: -1; }     /* image first, then the prose */
.product-img-wrap--logo img { max-height: 72px; }

/* --------------------------------------------------------------------------
   10. FORMS
   The careers form is the only transactional surface on the site, so it gets
   the most attention: no iOS zoom on focus, one field per row, a file target
   big enough to hit, and a submit button that is always reachable.
   -------------------------------------------------------------------------- */
.form-wrap { padding: 20px 16px; border-radius: var(--r); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.form-group { margin-bottom: 16px; }

.form-control {
  font-size: 16px;      /* below 16px, iOS Safari zooms in on focus and the
                           user is left scrolled sideways on a form */
  min-height: 50px;
  padding: 13px 15px;
  border-radius: var(--r-xs);
}
textarea.form-control { min-height: 128px; line-height: 1.9; }

label { font-size: 14.5px; margin-bottom: 7px; display: block; }

.file-drop {
  min-height: 128px;
  padding: 22px 16px;
  border-radius: var(--r-sm);
  gap: 10px;
}
.file-drop i { font-size: 26px; }
.file-drop span { font-size: 13.5px; line-height: 1.8; text-align: center; }
/* Drag-and-drop does not exist on a phone — say "tap", not "drag". */
.file-drop .file-drop-desktop-hint { display: none; }

.form-submit { margin-top: 26px; }
.form-submit .btn { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }
.form-note { font-size: 14px; line-height: 1.9; }
.field-error { font-size: 13px; }

/* --------------------------------------------------------------------------
   11. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-card { padding: 16px; gap: 14px; }
.cc-icon { width: 44px; height: 44px; font-size: 17px; }
.cc-body h3 { font-size: 15px; }
.cc-body p, .cc-body a { font-size: 14.5px; line-height: 1.9; }
/* Phone and email are tap-to-act on a phone — give them a real target. */
.cc-body a[href^="tel:"],
.cc-body a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--cyan-300);
}
html:not([data-theme="dark"]) .cc-body a[href^="tel:"],
html:not([data-theme="dark"]) .cc-body a[href^="mailto:"] { color: var(--petrol); }

.map-wrap { height: 280px; border-radius: var(--r); overflow: hidden; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   12. INNOVATION / VIDEO BAND
   main.js strips the video source on this class of device, so the poster is
   what shows. Keep the band short so a still image does not dominate.
   -------------------------------------------------------------------------- */
.innovation { min-height: auto; padding-block: 62px; }
.innovation video { display: none; }
.innovation .play-btn { display: none; }
.innovation-text { max-width: 100%; }

/* --------------------------------------------------------------------------
   13. CTA BAND
   -------------------------------------------------------------------------- */
.cta { padding-block: 56px; }
.cta h2 { font-size: clamp(20px, 5.4vw, 26px); }
.cta .btn { width: 100%; justify-content: center; min-height: 50px; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer { padding-top: 46px; }
.footer-grid {
  grid-template-columns: 1fr;
  gap: 30px;
  text-align: start;
}
.footer-brand p { font-size: 14.5px; }
.footer-col h3 { margin-bottom: 14px; }
.footer-col li { margin-bottom: 2px; }
.footer-col li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14.5px;
}
.footer-contact li { font-size: 14px; line-height: 1.9; align-items: flex-start; }
.social-links { gap: 12px; margin-top: 16px; }
.social-link { width: 44px; height: 44px; }

.footer-bottom {
  flex-direction: column;
  gap: 8px;
  text-align: center;
  font-size: 12.5px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   15. FLOATING CONTROLS
   Two fixed buttons on a 390px screen can cover a third of the reading column
   and, at the page bottom, sit on top of the footer links. Shrink them, pin
   them clear of the home indicator, and keep them out of each other's way.
   -------------------------------------------------------------------------- */
.assist-widget {
  inset-inline-end: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
}
.assist-btn { width: 52px; height: 52px; font-size: 19px; }

/* The panel has to fit its own contents, or the questions end up below its
   clip line: tapping one then lands on the page behind and the assistant looks
   broken. Measured on a 360x640 phone, the intro plus a ONE-column shortcut
   grid plus five questions came to 706px inside a 446px box — every question
   was unreachable. Two columns and a taller ceiling bring it to 554px, which
   fits on both a 360x640 and a 390x844 screen with all five questions
   visible and nothing removed. */
.assist-panel {
  width: min(320px, calc(100vw - 28px));
  max-height: calc(100dvh - 84px);
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r);
}
/* Beats style.css's one-column rule below 560px, by loading later at equal
   specificity. The shortcuts are short labels; they read fine two-up. */
.assist-quick { grid-template-columns: 1fr 1fr; }
.assist-chip { min-height: 52px; }
.assist-faq-chip { min-height: 40px; font-size: 13px; }

.scroll-top {
  width: 44px;
  height: 44px;
  inset-inline-start: 14px;
  inset-inline-end: auto;          /* opposite corner from the assistant */
  bottom: calc(14px + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------------------
   16. NO HOVER ON TOUCH
   Every hover-only affordance needs a non-hover equivalent, or it is simply
   unavailable. These are the ones that carried meaning rather than polish.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  /* Cursor-tracked glow and tilt are pointer effects with no touch analogue;
     main.js already skips them, this removes the leftover CSS state. */
  .prod-card::after,
  .contact-card::after,
  .news-card::after,
  .b-card::after { display: none; }

  /* Hover-revealed labels must be visible by default instead. */
  .hub-node-label { opacity: 1; visibility: visible; transform: none; }
}

/* --------------------------------------------------------------------------
   17. SMALL PHONES (<=380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .container { width: calc(100% - 28px); }
  .logo-img { height: 30px; }
  .tool-btn, .menu-toggle { width: 38px; height: 38px; min-width: 38px; }
  .header-tools { gap: 4px; }
  .view-ico { width: 16px; height: 16px; }
  .hub-ring { grid-template-columns: 1fr; }
  .partner-row, .partner-row--four { grid-template-columns: 1fr; }
  h1, .hero h1 { font-size: clamp(24px, 7.4vw, 30px); }
}

/* --------------------------------------------------------------------------
   18. LANDSCAPE PHONES
   Short viewports must never use full-height sections, or the header alone
   eats a third of the screen.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 30px; }
  section { padding-block: 36px; }
  .mobile-nav { height: calc(100dvh - var(--header-h)); }
}

/* --------------------------------------------------------------------------
   19. REDUCED MOTION
   landing.css re-declares several infinite animations with !important and
   higher specificity than the global reduced-motion guard in style.css, so
   they survive it. Cancel them here, where this file loads last.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .page-home .assist-widget,
  .page-home .assist-btn,
  .page-home .assist-btn::before,
  .page-home .assist-btn::after,
  .page-home .hero-tag,
  .page-home .eyebrow { animation: none !important; }
}