/* =============================================================================
   ZAS Petrochemicals — Shared Stylesheet
   Single stylesheet for all pages. Mobile-first. Theming is driven entirely by
   CSS custom properties (:root = light, [data-theme="dark"] = dark override).
   No color is ever hard-coded in a component rule.
   Sections: 1 Tokens · 2 Reset/Base · 3 Typography · 4 Layout · 5 Buttons ·
   6 Header/Nav · 7 Hero · 8 Stat bar · 9 Cards · 10 Products · 11 CTA bands ·
   12 Forms/Contact · 13 Footer · 14 Floating UI · 15 Motion · 16 Utilities ·
   17 Responsive · 18 Print
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. FONTS (self-hosted)
   Previously two render-blocking requests to fonts.googleapis.com + a second
   connection to fonts.gstatic.com before first paint — worst-case exactly on the
   slow connections this site targets. These are the same Google-built variable
   woff2 files, served from our own origin. One file per family covers the whole
   weight range, and latin-ext only downloads if such a character is used, so a
   typical English page pulls ~72KB.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(assets/fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(assets/fonts/sora-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (see PRD §3.2) */
  --zas-navy: #0b2545;
  --zas-navy-deep: #081a33;
  --zas-green: #1e7a34;
  --zas-amber: #c97a1e;
  --ink: #1a1f26;
  --slate: #5b6470;
  --cloud: #f5f7fa;
  --white: #ffffff;

  /* Semantic tokens — LIGHT THEME */
  --bg: var(--white);
  --bg-alt: var(--cloud);
  --surface: var(--white);
  --surface-2: var(--cloud);
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --text: var(--ink);
  --text-muted: var(--slate);
  --text-on-brand: #ffffff;

  --header-bg: var(--zas-navy);
  --header-text: #eaf0f8;
  --header-border: rgba(255, 255, 255, 0.1);

  --brand: var(--zas-navy);
  --brand-hover: #0e2e57;
  --accent: var(--zas-amber);
  --accent-hover: #bd7219;
  /* Near-black label on amber — white (3.3:1) fails AA; this clears 4.5:1 on
     the amber base and its hover, in both light and dark themes. */
  --accent-contrast: #160f00;
  /* Amber as TEXT on a light surface needs to be darker than the brand amber:
     #c97a1e is only 3.34:1 on white. This is 4.87:1 on white / 4.54:1 on Cloud.
     Amber text on DARK surfaces overrides back to the light amber (see .hero). */
  --accent-text: #a3620e;
  --success: var(--zas-green);
  --success-hover: #196a2c;

  --focus-ring: #2f80ed;
  --danger: #c0392b;

  --shadow-sm:
    0 1px 2px rgba(11, 37, 69, 0.08), 0 1px 3px rgba(11, 37, 69, 0.06);
  --shadow-md:
    0 4px 12px rgba(11, 37, 69, 0.1), 0 2px 4px rgba(11, 37, 69, 0.06);
  --shadow-lg:
    0 12px 32px rgba(11, 37, 69, 0.16), 0 4px 8px rgba(11, 37, 69, 0.08);
  --overlay-navy: linear-gradient(
    to top,
    rgba(8, 26, 51, 0.92) 0%,
    rgba(8, 26, 51, 0.55) 40%,
    rgba(8, 26, 51, 0.15) 75%,
    rgba(8, 26, 51, 0) 100%
  );

  /* Type */
  --font-head: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Structure */
  --container: 1280px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --header-h: 68px;
  --section-y: 56px; /* mobile rhythm; desktop overrides below */
  --tap: 44px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition: 150ms var(--ease);
}

/* Semantic tokens — DARK THEME (not a pure inversion, see PRD §3.8) */
[data-theme="dark"] {
  --bg: var(--zas-navy-deep);
  --bg-alt: #0a1420;
  --surface: #0f1d31;
  --surface-2: #0a1420;
  --border: rgba(231, 236, 243, 0.12);
  --border-strong: rgba(231, 236, 243, 0.22);

  --text: #e7ecf3;
  --text-muted: #9fb0c4;
  --text-on-brand: #ffffff;

  --header-bg: var(--zas-navy-deep);
  --header-text: #e7ecf3;
  --header-border: rgba(255, 255, 255, 0.08);

  --brand: #2e5c92;
  --brand-hover: #35689f;
  /* accents lightened ~+8% luminance to hold WCAG AA on the dark canvas */
  --accent: #e0954a;
  --accent-hover: #eaa662;
  --accent-contrast: #160f00;
  /* Dark canvas: the light amber is already 7.1:1 on it, so text can use it directly. */
  --accent-text: #e0954a;
  --success: #37a253;
  --success-hover: #3fb35d;

  --focus-ring: #6ea8fe;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
    --section-y: 96px;
  }
}

/* -----------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition:
    background-color 200ms var(--ease),
    color 200ms var(--ease);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  transition: color var(--transition);
}
/* Generic link color is a ZERO-specificity default (via :where) so that any
   component that sets its own color — .btn, .nav-link, footer/mega links —
   always wins, in every theme. A bare `[data-theme="dark"] a` selector (0,1,1)
   would otherwise beat `.btn` (0,1,0) and repaint button labels link-blue. */
:where(a) {
  color: var(--brand);
}
:where([data-theme="dark"]) :where(a) {
  color: #8fb6e6;
}
a:hover {
  text-decoration: underline;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

/* Inline-SVG icon base (paths inherit stroke/fill from here) */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--fill {
  fill: currentColor;
  stroke: none;
}
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 1.2rem + 3vw, 2.5rem); /* 30 → 40 */
}
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 1.875rem); /* 24 → 30 */
  font-weight: 600;
}
h3 {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* 19 → 22 */
  font-weight: 600;
}

p {
  margin: 0 0 var(--sp-4);
}
p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--text-muted);
  line-height: 1.6;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.tabular {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* -----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) {
  .container {
    padding-inline: var(--sp-6);
  }
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: calc(var(--section-y) * 0.66);
}
.section--alt {
  background: var(--bg-alt);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--sp-12);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  color: var(--text-muted);
}

.grid {
  display: grid;
  gap: var(--sp-6);
}
.grid--2 {
  grid-template-columns: 1fr;
}
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--sp-3);
}

/* Decorative hexagon/molecule texture behind section headers (subtle brand cue) */
.texture {
  position: relative;
  isolation: isolate;
}
.texture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%230b2545' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z'/%3E%3Cpath d='M28 0v16M0 50l28 16 28-16'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .texture::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='1.5'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66z'/%3E%3Cpath d='M28 0v16M0 50l28 16 28-16'/%3E%3C/g%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--text-on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  max-width: 100%;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.1;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background-color var(--transition),
    border-color var(--transition);
  white-space: nowrap;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
}
.btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
}
.btn--primary:hover {
  background: var(--accent-hover);
}
.btn--secondary {
  --btn-bg: var(--brand);
  --btn-fg: var(--text-on-brand);
}
.btn--secondary:hover {
  background: var(--brand-hover);
}
/* Fixed brand green in BOTH themes: white label clears 4.5:1 (5.4:1 base,
   6.7:1 hover). The theme-lightened --success token is for green *text* on a
   dark canvas, and is too light to sit behind white button text. */
.btn--success {
  --btn-bg: #1e7a34;
  --btn-fg: #ffffff;
}
.btn--success:hover {
  background: #196a2c;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover {
  background: rgba(127, 127, 127, 0.12);
  box-shadow: none;
}
.btn--on-dark {
  color: #fff;
}
.btn--lg {
  min-height: 52px;
  padding: 15px 28px;
  font-size: 1rem;
}
.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--accent-text);
}
/* Amber text sitting on a dark surface flips back to the light amber (7.1:1 on
   navy); the darker --accent-text is tuned for light backgrounds only. */
.hero .eyebrow,
.page-hero .eyebrow,
.cat-section__banner .eyebrow,
.cat-section__banner .link-arrow {
  color: #e0954a;
}
.link-arrow .icon {
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}
.link-arrow:hover {
  text-decoration: none;
}
.link-arrow:hover .icon {
  transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  flex: 0 1 auto;
  min-width: 0; /* allow the name to shrink/ellipsize instead of overflowing */
  min-height: 44px; /* tap target — the logo alone is only 30px tall on phones */
}
.brand:hover {
  text-decoration: none;
}
.brand-logo {
  /* The mark is a navy-background emblem cropped from the master lockup, so the
     badge carries that same navy (#011333) and clips the art with overflow:hidden.
     No frame or border — the emblem sits flush on the navy header/footer, and the
     art itself supplies all the brand color (white ZAS + green + blue droplet), so
     it stays highly legible against the dark chrome. */
  background: #011333;
  border-radius: 11px;
  overflow: hidden;
  display: inline-flex;
  flex: none;
}
.brand-logo img {
  height: 46px;
  width: auto;
  display: block;
}
.brand-name {
  display: block;
  line-height: 1.15;
  min-width: 0;
}
.brand-name strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--header-text);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Smallest phones: trim the logo + gap a touch so the full name fits on one
   line down to ~350px (it ellipsizes gracefully below that, never overflows). */
/* Smallest phones: the emblem is wider than a square chip, so trim it a touch and
   tighten the gap — this keeps the full "ZAS Petrochemicals" wordmark on one line
   down to ~375px (it ellipsizes gracefully, never overflows, below that). The
   emblem stays clearly legible (refinery + ZAS + droplet), unlike the old thumbnail. */
@media (max-width: 479px) {
  .brand {
    gap: 6px;
  }
  .brand-logo img {
    height: 30px;
  }
}
.brand-name span {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
/* Header only (not the mobile drawer): hide the tagline on small screens so the
   company name fits; the name itself now stays visible at every width. */
.header-inner .brand-name span {
  display: none;
}
@media (min-width: 480px) {
  .brand-name strong {
    font-size: 1.125rem;
    letter-spacing: 0.02em;
  }
}
/* The tagline is the widest element in the brand block (~313px) and competes with
   the header CTA + primary nav. It only fits without truncating at the full 1280px
   content width, so reveal it there (slightly tighter tracking buys a safety
   margin); below that the "ZAS Petrochemicals" name carries the header on its own. */
@media (min-width: 1280px) {
  .header-inner .brand-name span {
    display: block;
    letter-spacing: 0.1em;
  }
}

.primary-nav {
  display: none;
}
@media (min-width: 1024px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
  }
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  min-height: var(--tap);
  color: var(--header-text);
  font-weight: 500;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition),
    color var(--transition);
}
.nav-link:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
}
.nav-link[aria-current="page"] {
  color: #fff;
}
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
}
.nav-link.is-active-page {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* Icon button (theme toggle, hamburger) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--header-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--header-text);
  border-radius: var(--radius-sm);
  transition:
    background-color var(--transition),
    border-color var(--transition);
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.icon-btn .icon {
  width: 20px;
  height: 20px;
}
.theme-toggle .icon-moon {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}
.header-cta {
  display: none;
}
@media (min-width: 560px) {
  .header-cta {
    display: inline-flex;
  }
}
.nav-toggle {
  display: inline-grid;
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Products mega-menu-lite (desktop) */
.has-mega {
  position: relative;
}
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(680px, 90vw);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background-color var(--transition);
}
.mega-item:hover {
  text-decoration: none;
  background: var(--bg-alt);
}
.mega-item .icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex: none;
  margin-top: 2px;
}
.mega-item strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--text);
}
.mega-item small {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* -----------------------------------------------------------------------------
   Mobile navigation drawer
   -------------------------------------------------------------------------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 26, 51, 0.55);
  backdrop-filter: blur(2px);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease),
    visibility 200ms var(--ease);
}
.nav-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(340px, 86vw);
  background: var(--zas-navy);
  color: #eaf0f8;
  z-index: 160;
  transform: translateX(100%);
  transition: transform 260ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .mobile-drawer {
  background: var(--zas-navy-deep);
}
.mobile-drawer.is-open {
  transform: translateX(0);
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-3);
  color: #eaf0f8;
  font-weight: 500;
  font-size: 1.0625rem;
  border-radius: var(--radius-sm);
}
.drawer-nav a:hover {
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
}
.drawer-nav .drawer-sub {
  padding-left: var(--sp-6);
  font-size: 0.9375rem;
  color: rgba(234, 240, 248, 0.8);
  min-height: 40px;
}
.drawer-foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

/* -----------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  color: #fff;
  background: var(--zas-navy-deep);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pause control for the looping background video (WCAG 2.2.2 Pause, Stop, Hide).
   main.js only unhides it when the video actually loads; the poster-only path has
   no motion to pause.

   The client asked for no visible controls over the hero, so it is visually hidden
   until focused — but it must stay in the DOM and stay keyboard-reachable: WCAG
   2.2.2 (Level A) requires a mechanism to pause motion that starts automatically
   and runs >5s alongside other content. Tabbing to it restores it at full size.
   Do NOT replace this with display:none / [hidden] — that removes the mechanism
   entirely and fails Level A. */
.hero__motion {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(8, 26, 51, 0.65);
  color: #fff;
  cursor: pointer;
}
.hero__motion[hidden] {
  display: none; /* beats display:grid above */
}
/* Visually hidden until focused — see note above. Kept clipped rather than
   display:none so it stays focusable and announced to assistive tech.
   Deliberately :focus, not :focus-visible — the resting state sets
   pointer-events:none, so a mouse can never focus this; only a keyboard can. That
   makes :focus equivalent here, without depending on the browser's focus-visible
   heuristic (which does not match programmatic .focus() and would strand the
   control invisible). */
.hero__motion:not(:focus) {
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
}
.hero__motion:hover {
  background: rgba(8, 26, 51, 0.9);
}
.hero__motion .icon {
  width: 18px;
  height: 18px;
}
.hero__motion .icon-play {
  display: none;
}
.hero__motion.is-paused .icon-play {
  display: block;
}
.hero__motion.is-paused .icon-pause {
  display: none;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(8, 26, 51, 0.92),
    rgba(8, 26, 51, 0.72) 55%,
    rgba(8, 26, 51, 0.6)
  );
}
.hero__inner {
  padding-block: clamp(72px, 12vw, 132px);
  max-width: 760px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3rem);
  margin-bottom: var(--sp-4);
}
.hero .eyebrow {
  color: #f2c98a;
}
.hero .eyebrow::before {
  background: #f2c98a;
}
.hero__sub {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--sp-8);
  max-width: 60ch;
}

/* Compact page hero (About / Products / Contact) */
.page-hero {
  position: relative;
  color: #fff;
  background: var(--zas-navy);
  isolation: isolate;
  overflow: hidden;
}
.page-hero img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    rgba(8, 26, 51, 0.94) 0%,
    rgba(8, 26, 51, 0.8) 45%,
    rgba(8, 26, 51, 0.55) 100%
  );
}
.page-hero__inner {
  padding-block: clamp(56px, 9vw, 92px);
  max-width: 720px;
}
.page-hero h1 {
  color: #fff;
}
.page-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.0625rem;
  max-width: 60ch;
  margin-bottom: 0;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--sp-4);
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  /* 44px tap target (PRD rule) — the link text alone is only ~16px tall. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.4);
}

/* -----------------------------------------------------------------------------
   8. STAT BAR
   -------------------------------------------------------------------------- */
.stat-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .stat-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.stat:nth-child(2n) {
  border-right: 0;
}
@media (min-width: 768px) {
  .stat {
    border-bottom: 0;
  }
  .stat:nth-child(2n) {
    border-right: 1px solid var(--border);
  }
  .stat:last-child {
    border-right: 0;
  }
}
.stat__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* Category card */
.cat-card {
  color: var(--text);
}
.cat-card:hover {
  text-decoration: none;
}
.cat-card__media {
  position: relative;
  aspect-ratio: 512 / 341;
  overflow: hidden;
}
.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.cat-card:hover .cat-card__media img {
  transform: scale(1.05);
}
.cat-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-navy);
  opacity: 0.85;
}
.cat-card__body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.cat-card__body h3 {
  margin-bottom: var(--sp-2);
}
.cat-card__body p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-4);
}
.cat-card__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Value / feature card */
.value-card {
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
  height: 100%;
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.value-card__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: rgba(30, 122, 52, 0.1);
  color: var(--success);
  margin-bottom: var(--sp-4);
}
[data-theme="dark"] .value-card__icon {
  background: rgba(55, 162, 83, 0.15);
}
.value-card__icon.is-amber {
  background: rgba(201, 122, 30, 0.12);
  color: var(--accent);
}
.value-card__icon.is-navy {
  background: rgba(11, 37, 69, 0.09);
  color: var(--brand);
}
[data-theme="dark"] .value-card__icon.is-navy {
  background: rgba(142, 182, 230, 0.14);
  color: #9fc0ea;
}
.value-card__icon .icon {
  width: 26px;
  height: 26px;
}
.value-card h3 {
  font-size: 1.125rem;
  margin-bottom: var(--sp-2);
}
.value-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
}

/* Simple check list (mission etc.) */
.check-list {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
}
.check-list li {
  position: relative;
  padding-left: 38px;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(30, 122, 52, 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e7a34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
[data-theme="dark"] .check-list li::before {
  background-color: rgba(55, 162, 83, 0.18);
}

/* Media + text split */
.split {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
  }
  .split--media-first .split__media {
    order: -1;
  }
}
.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   10. PRODUCTS PAGE
   -------------------------------------------------------------------------- */
.filter-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-4);
  display: none; /* search/filter is a JS enhancement — hidden without it */
}
.js .filter-bar {
  display: block;
}
.filter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .filter-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.search-field {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.search-field .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 40px 10px 42px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 122, 30, 0.18);
}
/* suppress the browser's native search clear — we render our own */
.search-field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: 50%;
  display: none;
  place-items: center;
}
.search-clear.is-visible {
  display: grid;
}
.search-clear:hover {
  background: var(--bg-alt);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  min-height: 44px; /* tap target (PRD rule) — these are primary filter controls */
  padding: 7px 15px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: all var(--transition);
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--accent);
  color: var(--text);
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.result-meta {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--sp-6);
}

/* Category section on Products page */
.cat-section {
  scroll-margin-top: calc(var(--header-h) + 80px);
}
.cat-section + .cat-section {
  margin-top: var(--sp-16);
}
.cat-section__banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  margin-bottom: var(--sp-6);
  isolation: isolate;
}
.cat-section__banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cat-section__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(8, 26, 51, 0.92),
    rgba(8, 26, 51, 0.7) 60%,
    rgba(8, 26, 51, 0.5)
  );
}
.cat-section__banner-inner {
  padding: clamp(24px, 5vw, 40px);
  max-width: 640px;
}
.cat-section__banner h2 {
  color: #fff;
  margin-bottom: var(--sp-3);
}
.cat-section__banner p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--sp-4);
  font-size: 0.9375rem;
}
.cat-section__banner .count-badge {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
/* The category CTA labels are long ("Request a Quote for Stimulation
   Chemicals"); allow them to wrap so they never clip or overflow on narrow
   screens (base .btn is white-space:nowrap). */
.cat-section__banner .btn {
  white-space: normal;
  text-align: center;
}

.cat-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.disclosure-btn {
  display: none;
}

/* Product grid/list */
.product-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
@media (min-width: 560px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .product-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.product-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  transition:
    border-color var(--transition),
    background-color var(--transition),
    transform var(--transition);
}
.product-item:hover {
  border-color: var(--accent);
  transform: translateX(3px);
}
.product-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.product-item mark {
  background: rgba(201, 122, 30, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

.empty-state {
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.empty-state .icon {
  width: 40px;
  height: 40px;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.empty-state strong {
  color: var(--text);
  display: block;
  font-family: var(--font-head);
  font-size: 1.125rem;
  margin-bottom: var(--sp-2);
}

/* -----------------------------------------------------------------------------
   11. CTA BANDS
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--zas-navy);
  overflow: hidden;
}
.cta-band--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-band--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 26, 51, 0.94),
    rgba(8, 26, 51, 0.78)
  );
}
.cta-band__inner {
  padding-block: var(--section-y);
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  text-align: center;
}
@media (min-width: 860px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    text-align: left;
  }
}
.cta-band h2 {
  color: #fff;
  margin: 0;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--sp-3);
  margin-bottom: 0;
}
.cta-band .btn-row {
  justify-content: center;
}
@media (min-width: 860px) {
  .cta-band .btn-row {
    justify-content: flex-end;
  }
}

.tagline-band {
  background: var(--accent);
  color: var(--accent-contrast);
  text-align: center;
}
.tagline-band .container {
  padding-block: var(--sp-12);
}
.tagline-band p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
  line-height: 1.3;
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
  text-wrap: balance;
}

/* -----------------------------------------------------------------------------
   12. FORMS / CONTACT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--sp-12);
}
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-16);
  }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(20px, 4vw, 36px);
}
.field {
  position: relative;
  margin-bottom: var(--sp-6);
}
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--text);
}
.field .req {
  color: var(--danger);
}
[data-theme="dark"] .field .req {
  color: #f28b82;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}
.field textarea {
  min-height: 130px;
  resize: vertical;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201, 122, 30, 0.18);
}
.field input:user-invalid,
.field textarea:user-invalid,
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}
.field__error {
  display: none;
  color: var(--danger);
  font-size: 0.8125rem;
  margin-top: 6px;
  font-weight: 500;
}
[data-theme="dark"] .field__error {
  color: #f28b82;
}
.field.has-error .field__error {
  display: block;
}
.field-row {
  display: grid;
  gap: var(--sp-6);
}
@media (min-width: 560px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Honeypot — visually and programmatically hidden from humans */
.hp-field {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--sp-4);
}
.form-status {
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-weight: 500;
  display: none;
}
.form-status.is-visible {
  display: block;
}
.form-status--success {
  background: rgba(30, 122, 52, 0.12);
  border: 1px solid var(--success);
  color: var(--success);
}
.form-status--error {
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
}
[data-theme="dark"] .form-status--error {
  color: #f28b82;
}
/* Backend-less RFQ hand-off: the email / WhatsApp actions offered after a valid
   submit. They stack on narrow phones and share the row from ~380px up. */
.form-status p {
  margin: var(--sp-2) 0 0;
  font-weight: 400;
}
.send-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.send-choice .btn {
  flex: 1 1 12rem;
}

/* Contact detail cards */
.contact-info {
  display: grid;
  gap: var(--sp-4);
}
.contact-line {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* "contact@zaspetrochemicals.com" is a single 236px-wide unbreakable token. With
     the icon + padding it set a 330px min-content, which forced the contact grid
     track wider than the 288px available at 320px and scrolled the page sideways.
     Let it break instead. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.contact-line a {
  overflow-wrap: anywhere;
  /* 44px tap target (PRD rule) — phone/email links were only ~18px tall. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contact-line__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(11, 37, 69, 0.08);
  color: var(--brand);
  flex: none;
}
[data-theme="dark"] .contact-line__icon {
  background: rgba(142, 182, 230, 0.14);
  color: #9fc0ea;
}
.contact-line__icon .icon {
  width: 22px;
  height: 22px;
}
.contact-line h3 {
  font-size: 0.9375rem;
  margin: 0 0 2px;
}
.contact-line a,
.contact-line p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin: 0;
}
.contact-line a:hover {
  color: var(--accent);
}

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.placeholder-flag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(201, 122, 30, 0.12);
  border: 1px dashed var(--accent);
  border-radius: 4px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* -----------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--zas-navy-deep);
  color: #c8d3e2;
  font-size: 0.9375rem;
}
.footer-main {
  display: grid;
  gap: var(--sp-8);
  padding-block: var(--sp-16);
}
@media (min-width: 640px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .footer-main {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--sp-12);
  }
}
.footer-brand .brand-logo {
  margin-bottom: var(--sp-4);
}
.footer-brand .brand-logo img {
  height: 56px;
}
.footer-brand p {
  color: #9fb0c4;
  max-width: 34ch;
}
.footer-col h3 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}
/* 44px minimum tap target (PRD design rule) — these links were only 19px tall.
   The target padding now supplies the rhythm, so the plain link lists drop their
   gap and the block ends up roughly the same height as before. */
.footer-col ul:not(.footer-contact) {
  gap: 0;
}
.footer-col ul:not(.footer-contact) a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer-col a {
  color: #c8d3e2;
}
.footer-col a:hover {
  color: #fff;
}
.footer-contact li {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  color: #c8d3e2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.footer-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The email pair is the only place two links stack. Padding each out to 44px put
   them 44px apart — ~25px of dead space that read as two stray links rather than
   one block. Their natural 24.75px line box still clears WCAG 2.5.8 (AA), which
   asks for 24x24, so drop the min-height here only; single links (phone) keep 44px.
   Must stay AFTER .footer-contact a / .contact-line a — equal specificity, so
   source order is what wins. */
.email-stack {
  display: grid;
}
.email-stack a {
  display: block;
  min-height: 0;
}
.footer-contact .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}
/* Rows whose value runs to more than one line (the address, the email pair) were
   centring the icon against the WHOLE block, so it floated between the two lines
   — 13px low on the address, 22px on the emails. Pin those to the top and centre
   the glyph on the first line box instead. Single-line rows keep align-items:center,
   where centring already lands on the only line.
   1.65em = the 24.75px line box (15px x 1.65); retune if that line-height changes.
   :has() failing on an old browser degrades to today's centred behaviour. */
.footer-contact li:has(br),
.footer-contact li:has(.email-stack) {
  align-items: flex-start;
}
.footer-contact li:has(br) > .icon,
.footer-contact li:has(.email-stack) > .icon {
  margin-top: calc((1.65em - 18px) / 2);
}
.social-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.social-row a {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
  color: #dbe4f0;
  transition: background-color var(--transition);
}
.social-row a:hover {
  background: rgba(255, 255, 255, 0.16);
}
.social-row .icon {
  width: 20px;
  height: 20px;
}
.footer-certs {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  color: #9fb0c4;
  font-size: 0.8125rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  align-items: center;
  color: #8497ad;
  font-size: 0.8125rem;
}
.footer-bottom a {
  color: #8497ad;
}
.footer-bottom a:hover {
  color: #fff;
}

/* -----------------------------------------------------------------------------
   14. FLOATING UI (WhatsApp + back-to-top)
   -------------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 58px;
  width: 58px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: #1e7a34;
  color: #fff;
  box-shadow: 0 8px 24px rgba(30, 122, 52, 0.45);
  overflow: hidden;
  transition:
    width 220ms var(--ease),
    background-color var(--transition),
    box-shadow var(--transition);
}
.whatsapp-fab:hover {
  text-decoration: none;
  background: #196a2c;
}
.whatsapp-fab__icon {
  flex: none;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
}
.whatsapp-fab__icon .icon {
  width: 30px;
  height: 30px;
}
.whatsapp-fab__label {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9375rem;
  padding-right: 22px;
  opacity: 0;
  transition: opacity var(--transition);
}
@media (min-width: 768px) and (hover: hover) {
  .whatsapp-fab:hover {
    width: 210px;
  }
  .whatsapp-fab:hover .whatsapp-fab__label {
    opacity: 1;
  }
}

.to-top {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: calc(clamp(16px, 4vw, 28px) + 68px);
  z-index: 89;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top .icon {
  width: 22px;
  height: 22px;
}

/* -----------------------------------------------------------------------------
   15. MOTION (scroll reveal)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] {
  transition-delay: 80ms;
}
[data-reveal-delay="2"] {
  transition-delay: 160ms;
}
[data-reveal-delay="3"] {
  transition-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.no-scroll {
  overflow: hidden;
}
.text-center {
  text-align: center;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
[hidden] {
  display: none !important;
}

/* When JS is available we may collapse product lists; default (no-JS) is open. */
.js .is-collapsible[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   17. RESPONSIVE — mobile disclosure for product categories
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .js .disclosure-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    padding: 8px 14px;
    border: 1.5px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .js .disclosure-btn .icon {
    width: 18px;
    height: 18px;
    transition: transform var(--transition);
  }
  .js .disclosure-btn[aria-expanded="false"] .icon {
    transform: rotate(-90deg);
  }
}

/* -----------------------------------------------------------------------------
   18. PRINT (procurement-friendly product list)
   -------------------------------------------------------------------------- */
@media print {
  .site-header,
  .filter-bar,
  .whatsapp-fab,
  .to-top,
  .cta-band,
  .tagline-band,
  .site-footer,
  .page-hero img,
  .disclosure-btn,
  .hero__media,
  .btn {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
  }
  .page-hero,
  .page-hero::after {
    background: none !important;
    color: #000;
  }
  .page-hero h1,
  .page-hero p {
    color: #000;
  }
  .cat-section__banner {
    color: #000;
  }
  .cat-section__banner img,
  .cat-section__banner::after {
    display: none;
  }
  .cat-section__banner h2,
  .cat-section__banner p {
    color: #000;
  }
  .product-item,
  .card,
  .value-card {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .is-collapsible[hidden] {
    display: block !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}