/* =========================================================
   Mwembeshi Chemicals Limited
   Design system — industrial, mobile-first, polished with subtle depth
   Restrained palette, tactile surfaces, purposeful motion.
   ========================================================= */

:root {
  /* Brand palette */
  --ink:        #0b1622;   /* primary text, near-black */
  --navy:       #13294b;   /* brand primary */
  --navy-700:   #1b3760;
  --navy-600:   #274a78;
  --steel:      #56657a;   /* muted text */
  --steel-300:  #8593a5;
  --line:       #e4e8ee;   /* hairlines / borders */
  --mist:       #f4f6f9;   /* section background */
  --mist-200:   #eaeef3;
  --paper:      #ffffff;
  --amber:      #c07b2c;   /* single accent — used sparingly */
  --amber-700:  #a2661f;

  /* Type */
  --font-head: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --container: 1180px;
  --gutter: 20px;
  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 5px 14px rgba(11, 22, 34, .07);
  --shadow-md: 0 14px 34px rgba(11, 22, 34, .12);
  --shadow-lg: 0 22px 55px rgba(11, 22, 34, .15);
  --shadow-xl: 0 34px 86px rgba(11, 22, 34, .2);
  --glow-amber: 0 18px 34px rgba(192, 123, 44, .26);
  --blueprint-line: rgba(255,255,255,.075);

  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background:
    linear-gradient(180deg, #fff 0%, #f9fbfd 44%, #fff 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }

::selection { background: var(--navy); color: #fff; }

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

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding: 56px 0;
}
.section--tight { padding: 40px 0; }
.section--mist {
  background:
    linear-gradient(180deg, #f7f9fc 0%, var(--mist) 100%);
}
.section--navy { background: var(--navy); color: #fff; }
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: #fff; }

@media (min-width: 768px) {
  .section { padding: 84px 0; }
  .section--tight { padding: 60px 0; }
}

.eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin: 0 0 14px;
  display: inline-block;
}
.section--navy .eyebrow { color: #e0a865; }

.lead {
  font-size: 1.075rem;
  color: var(--steel);
  max-width: 60ch;
}
.section--navy .lead { color: #c4d0e0; }

.h-section {
  font-size: clamp(1.6rem, 2.08rem, 2.4rem);
  letter-spacing: 0;
}
.text-muted { color: var(--steel); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease),
              box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(135deg, var(--amber) 0%, #d18c3b 100%);
  color: #fff;
  border-color: color-mix(in srgb, var(--amber) 78%, #fff);
  box-shadow: 0 10px 22px rgba(192, 123, 44, .22);
}
.btn--primary:hover {
  background: linear-gradient(135deg, var(--amber-700) 0%, var(--amber) 100%);
  border-color: var(--amber-700);
  box-shadow: var(--glow-amber);
  transform: translateY(-2px);
}

.btn--navy {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-600) 100%);
  color: #fff;
  border-color: var(--navy);
  box-shadow: 0 12px 24px rgba(19, 41, 75, .16);
}
.btn--navy:hover {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy) 100%);
  border-color: var(--navy-700);
  box-shadow: 0 18px 34px rgba(19, 41, 75, .22);
  transform: translateY(-2px);
}

.btn--onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--onDark:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  box-shadow: 0 16px 34px rgba(255,255,255,.18);
  transform: translateY(-2px);
}

.btn--block { width: 100%; }

/* Pending state. The contact form posts and navigates away, so the button has
   to look busy until the browser leaves the page, and must refuse the second
   click that would file a duplicate enquiry. js/nav.js drives the classes. */
.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}
.btn.is-pending { opacity: .88; }
.btn.is-pending .btn__icon { display: none; }
.btn.is-pending .btn__spinner {
  display: block;
  animation: btnSpin .8s linear infinite;
}
.btn:disabled {
  pointer-events: none;
  transform: none;
}
.form.is-submitting { cursor: progress; }

@keyframes btnSpin { to { transform: rotate(360deg); } }

/* The global reduced-motion rule already stops the spin, which would leave a
   ring sitting still. Drop it instead and let the "Sending" label carry the
   state. */
@media (prefers-reduced-motion: reduce) {
  .btn.is-pending .btn__spinner { display: none; }
}

.tlink {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .92rem;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tlink svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.tlink:hover { color: var(--amber-700); }
.tlink:hover svg { transform: translateX(4px); }

/* =========================================================
   Header / Navigation  (CSS-only mobile menu, no JS required)
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}
/* Set by js/nav.js once the page is scrolled — lifts the header off the page. */
.site-header.is-scrolled {
  background: rgba(255,255,255,.98);
  border-bottom-color: rgba(19,41,75,.08);
  box-shadow: 0 12px 34px rgba(11,22,34,.11);
}
.brand__logo { transition: height .25s var(--ease); }
@media (min-width: 861px) {
  .site-header.is-scrolled .brand__logo { height: 42px; }
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__logo { width: auto; height: 46px; flex: 0 0 auto; display: block; }

.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-right: -10px;
  cursor: pointer;
}
.nav-toggle-label span {
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-menu a {
  position: relative;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .95rem;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--radius);
  display: inline-block;
  transition: color .2s var(--ease), background-color .2s var(--ease),
              transform .2s var(--ease);
}
.nav-menu a:not(.btn):hover { color: var(--navy); background: var(--mist); transform: translateY(-1px); }
.nav-menu a[aria-current="page"] { color: var(--navy); }

/* Desktop: an amber underline that slides open on hover / for the active page.
   Absolutely positioned so it animates without nudging the layout. */
@media (min-width: 861px) {
  .nav-menu a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: var(--amber);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s var(--ease);
  }
  .nav-menu a:not(.btn):hover::after,
  .nav-menu a:not(.btn):focus-visible::after,
  .nav-menu a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
}
.nav-cta { margin-left: 8px; }
.nav-cta .btn { transition: transform .18s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.nav-cta .btn:hover { transform: translateY(-2px); }

/* Mobile */
@media (max-width: 860px) {
  .nav-toggle-label { display: inline-flex; }
  .brand__logo { height: 40px; }
  .nav-menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 8px var(--gutter) 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .3s var(--ease), opacity .2s var(--ease);
  }
  .nav-menu li {
    width: 100%;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-menu a {
    padding: 14px 6px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  /* Items fade + slide in one after another when the menu opens. */
  .nav-toggle:checked ~ .nav-menu li { opacity: 1; transform: translateY(0); }
  .nav-toggle:checked ~ .nav-menu li:nth-child(1) { transition-delay: .06s; }
  .nav-toggle:checked ~ .nav-menu li:nth-child(2) { transition-delay: .12s; }
  .nav-toggle:checked ~ .nav-menu li:nth-child(3) { transition-delay: .18s; }
  .nav-toggle:checked ~ .nav-menu li:nth-child(4) { transition-delay: .24s; }
  .nav-toggle:checked ~ .nav-menu li:nth-child(5) { transition-delay: .30s; }
  .nav-menu a[aria-current="page"]::after { display: none; }
  .nav-menu a[aria-current="page"] { color: var(--amber-700); }
  .nav-cta { margin: 16px 0 0; }
  .nav-cta .btn { width: 100%; }

  .nav-toggle:checked ~ .nav-menu {
    max-height: 460px;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  background: var(--navy) url("../images/hero-plant.jpg") center center / cover no-repeat;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,16,28,.84) 0%, rgba(8,16,28,.72) 47%, rgba(8,16,28,.52) 100%),
    linear-gradient(180deg, rgba(9, 17, 28, .2) 0%, rgba(9, 17, 28, .78) 100%);
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    repeating-linear-gradient(90deg, transparent 0 78px, var(--blueprint-line) 78px 79px),
    repeating-linear-gradient(0deg, transparent 0 78px, var(--blueprint-line) 78px 79px),
    linear-gradient(115deg, transparent 0 58%, rgba(224,168,101,.18) 58.2% 58.8%, transparent 59%);
  opacity: .54;
  transform: translate3d(0,0,0);
  animation: blueprintDrift 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hero__container {
  position: relative;
  z-index: 2;
}
.hero__copy {
  position: relative;
  max-width: 720px;
  padding: 56px 0 60px;
}
.hero__copy::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 62px;
  bottom: 72px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--amber), rgba(224,168,101,0));
  box-shadow: 0 0 30px rgba(224,168,101,.38);
}
.hero h1,
.hero p { text-shadow: 0 1px 18px rgba(0, 0, 0, .28); }
.hero__eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e0a865;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hero__eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--amber);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.15rem, 3.05rem, 3.7rem);
  line-height: 1.03;
  letter-spacing: 0;
  font-weight: 800;
  margin-bottom: 20px;
  max-width: 15ch;
}
.hero p {
  color: #c4d0e0;
  font-size: 1.08rem;
  max-width: 52ch;
  margin-bottom: 30px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__stats {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stacked rows */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
  margin-top: 26px;
  overflow: hidden;
}
.hero__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.hero__stat:hover {
  background: rgba(255,255,255,.08);
}
/* Direct-child selectors so the bare-figure strip (e.g. the About stats band)
   keeps its styling without bleeding into the home hero's icon/body markup. */
.hero__stat > b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0;
}
.hero__stat > span {
  font-size: .82rem;
  color: #97a7bd;
  letter-spacing: .02em;
  text-align: right;
}

/* Home hero: round icon badge beside the figure (matches the page heroes) */
.hero .hero__stat {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
}
.hero .page-hero__stat-body b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0;
  min-height: 0;
}
.hero .page-hero__stat-body span {
  font-size: .8rem;
  color: #c4d0e0;
  letter-spacing: .01em;
  text-align: left;
}

@media (min-width: 600px) {
  .hero__stats { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
  .hero__stat {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 22px 18px;
    border-bottom: 0;
  }
  .hero__stat > b { font-size: 1.7rem; min-height: 2.1em; line-height: 1.05; }
  .hero__stat > span { text-align: left; }
  .hero .hero__stat {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    padding: 20px 18px 20px 20px;
    border-left: 1px solid rgba(255,255,255,.16);
  }
}

@media (min-width: 900px) {
  .hero__copy { padding: 92px 0 96px; }
  .hero__stats { margin-top: 52px; }
  .hero__stat > b { font-size: 2rem; }
}

.section--navy .hero__stats {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.hero__eyebrow,
.hero h1,
.hero__copy > p,
.hero__actions,
.hero__stats {
  animation: heroLift .72s var(--ease) both;
}
.hero h1 { animation-delay: .08s; }
.hero__copy > p { animation-delay: .16s; }
.hero__actions { animation-delay: .24s; }
.hero__stats { animation-delay: .34s; }

@keyframes heroLift {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blueprintDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(80px,40px,0); }
}

@media (max-width: 560px) {
  .hero__copy::before { display: none; }
}

/* Trust bar */
.trustbar {
  position: relative;
  background:
    linear-gradient(90deg, var(--navy) 0%, var(--navy-700) 52%, #203f6d 100%);
  color: #c4d0e0;
  overflow: hidden;
}
.trustbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(224,168,101,.16) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: railSweep 7s var(--ease) infinite;
  pointer-events: none;
}
.trustbar__inner {
  position: relative;
  display: grid;                       /* mobile: tidy 2x2 grid */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 14px 18px;
  padding: 16px 0;
  font-family: var(--font-head);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trustbar__inner span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.trustbar__inner svg {
  width: 16px;
  height: 16px;
  color: #e0a865;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.18));
}
.trustbar__inner span:hover {
  color: #fff;
  transform: translateY(-1px);
}

@media (min-width: 700px) {
  .trustbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
    padding: 18px 0;
  }
  .trustbar__inner span { white-space: nowrap; }
}

@keyframes railSweep {
  0%, 52% { transform: translateX(-100%); opacity: 0; }
  62% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* =========================================================
   Generic grid / cards
   ========================================================= */
.section-head {
  max-width: 62ch;
  margin-bottom: 40px;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 940px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Value / feature card */
.feature {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--amber));
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.feature:hover {
  border-color: color-mix(in srgb, var(--navy-600) 48%, var(--line));
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}
.feature:hover::before { transform: scaleX(1); }
.feature__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 8%, #fff);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.feature:hover .feature__icon {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 14px 30px rgba(19,41,75,.22);
  transform: rotate(-3deg) scale(1.04);
}
.feature__icon svg { width: 25px; height: 25px; }
.feature h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feature p { color: var(--steel); font-size: .95rem; margin: 0; }

/* Icon-based category tile (home) */

/* =========================================================
   Products page — category blocks
   ========================================================= */
/* Category quick-nav — a white card of icon tiles overlapping the hero base */
.pcat-nav {
  position: relative;
  z-index: 5;
  margin-top: -30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), var(--paper));
  border-top: 1px solid rgba(255,255,255,.8);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -12px 38px rgba(11,22,34,.11);
}
.pcat-nav__inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 22px 4px 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pcat-nav__inner::-webkit-scrollbar { display: none; }
/* Narrow screens keep one swipeable row. The scrollbar is hidden, so fade the
   trailing edge — otherwise the row just reads as cut off. */
.pcat-nav::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--paper));
  pointer-events: none;
  border-top-right-radius: var(--radius-lg);
}
@media (min-width: 620px) {
  .pcat-nav__inner {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    row-gap: 14px;
  }
  .pcat-nav::after { content: none; }
}
.pcat-nav a {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
  text-align: center;
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  border-radius: var(--radius);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.pcat-nav__ic {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--c, var(--navy)) 13%, #fff);
  color: var(--c, var(--navy));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pcat-nav__ic svg { width: 28px; height: 28px; }
.pcat-nav a:hover {
  color: var(--c, var(--navy));
  transform: translateY(-2px);
}
.pcat-nav a:hover .pcat-nav__ic {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--c, var(--navy)) 32%, transparent);
}
@media (max-width: 560px) {
  .pcat-nav { margin-top: -18px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .pcat-nav a { width: 84px; font-size: .7rem; }
  .pcat-nav__ic { width: 52px; height: 52px; }
}

/* Category bands — alternating full-width sections */
.pcat-band {
  padding: 52px 0 60px;
  scroll-margin-top: 88px;
}
.pcat-band--mist { background: var(--mist); }
@media (min-width: 768px) {
  .pcat-band { padding: 72px 0 80px; }
}

.pcat { scroll-margin-top: 88px; }

/* Category header — navy title band that caps the slideshow below it.
   It carries no photo of its own: every category's header shot is already a
   frame in that category's slider, so a photo here rendered the same image
   twice in a row. Up to 979px the band and the slider are the same width, so
   they are joined into one card (square seam, shadow moved to the slider). */
.pcat__head {
  position: relative;
  /* Paints above the slider's shadow, which would otherwise smudge the seam
     (the shadow's 34px blur reaches ~20px back up past its 14px offset). */
  z-index: 1;
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  margin-bottom: 0;
  isolation: isolate;
}
.pcat__head::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(255,255,255,.045) 64px 65px),
    linear-gradient(115deg, transparent 0 68%, rgba(224,168,101,.2) 68.2% 68.6%, transparent 69%);
  pointer-events: none;
  z-index: 0;
}
.pcat__head-copy {
  position: relative;
  z-index: 1;
  padding: 30px 26px 32px;
}
.pcat__head-copy h2 {
  color: #fff;
  font-size: clamp(1.5rem, 1.82rem, 2.05rem);
  letter-spacing: 0;
  margin: 0 0 16px;
  padding-bottom: 15px;
  position: relative;
}
.pcat__head-copy h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  border-radius: 2px;
  background: var(--amber);
}
.pcat__head .pcat__desc {
  color: #c4d0e0;
  max-width: 54ch;
  margin: 0;
  font-size: .98rem;
}

@media (min-width: 820px) {
  .pcat__head-copy { padding: 46px 40px; }
}

.pcat h2 { font-size: clamp(1.4rem, 1.68rem, 1.9rem); margin: 4px 0 6px; }
.pcat__desc { color: var(--steel); max-width: 62ch; margin: 0; }

/* Category body: product list beside a sticky slideshow */
.pcat__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}
.pcat__slidewrap { margin: 0; order: -1; }
.pcat__single-image {
  display: block;
  width: 100%;
  /* Neutralises the height="" presentational attribute, which would otherwise
     be an explicit height and override aspect-ratio. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  /* Square top corners: the navy title band sits flush on top of this. */
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--mist);
  box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease), filter .45s var(--ease), box-shadow .2s var(--ease);
}
.pcat__slides {
  position: relative;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow-md);
}
.pcat__slidewrap:hover .pcat__single-image {
  transform: translateY(-3px);
  filter: saturate(1.07) contrast(1.03);
  box-shadow: var(--shadow-lg);
}
.pcat__slidewrap:hover .pcat__slides { box-shadow: var(--shadow-lg); }
.pcat__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 35%),
    linear-gradient(0deg, rgba(11,22,34,.18), transparent 42%);
  pointer-events: none;
}
/* Slideshows made of portrait product shots keep 4/5 framing at every width.
   The default 8/5 mobile box would crop a tall product to its middle band. */
.pcat__slides--product { aspect-ratio: 4 / 5; }
.pcat__slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: pcatFade 15s infinite;
}
.pcat__slides img:nth-child(1) { animation-delay: 0s; }
.pcat__slides img:nth-child(2) { animation-delay: 5s; }
.pcat__slides img:nth-child(3) { animation-delay: 10s; }
/* Two-image slideshow variant for sections that only need two frames. */
.pcat__slides--two img { animation: pcatFadeTwo 10s infinite; }
.pcat__slides--two img:nth-child(1) { animation-delay: 0s; }
.pcat__slides--two img:nth-child(2) { animation-delay: 5s; }
@keyframes pcatFade {
  0%      { opacity: 0; }
  4%      { opacity: 1; }
  33.33%  { opacity: 1; }
  40%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes pcatFadeTwo {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  50%  { opacity: 1; }
  58%  { opacity: 0; }
  100% { opacity: 0; }
}
/* The cross-fade is opacity-only (no movement), so it stays on for
   reduced-motion users too — just at half speed. !important + higher
   specificity so it survives the global reduced-motion kill switch. */
@media (prefers-reduced-motion: reduce) {
  .pcat__slides img { animation: pcatFade 30s infinite !important; }
  .pcat__slides img:nth-child(2) { animation-delay: 10s !important; }
  .pcat__slides img:nth-child(3) { animation-delay: 20s !important; }
  .pcat__slides--two img { animation: pcatFadeTwo 20s infinite !important; }
  .pcat__slides--two img:nth-child(1) { animation-delay: 0s !important; }
  .pcat__slides--two img:nth-child(2) { animation-delay: 10s !important; }
}
/* Landscape framing for wide-scene sliders on mobile/tablet only
   (prevents tall portrait crops on narrow viewports). Declared before the
   desktop block so the desktop override actually wins — media queries add
   no specificity, so source order decides. */
.pcat__slides--wide { aspect-ratio: 3 / 2; }

@media (min-width: 980px) {
  /* Desktop: the slider leads each category block as a left-aligned 500 x 500
     square, with wider screens placing it beside the product groups. */
  .pcat__body { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pcat__slidewrap {
    order: -1;
    position: static;
    width: 500px;
    max-width: 100%;
    margin-inline: 0;
  }
  /* Every slider frame renders 500 x 500. The --wide and --product
     variants are mobile-only framings and collapse into the square here. */
  .pcat__slides,
  .pcat__slides--wide,
  .pcat__slides--product { aspect-ratio: 1 / 1; }
  /* The single static image (plastics) shares the slot, so it matches. */
  .pcat__single-image { aspect-ratio: 1 / 1; }
  /* The slider narrows here while the title band stays full width,
     so the two can no longer be joined — separate them back into two cards. */
  .pcat__head {
    border-radius: var(--radius-lg);
    margin-bottom: 28px;
    box-shadow: var(--shadow-md);
  }
  .pcat__slides,
  .pcat__single-image {
    width: 500px;
    height: 500px;
    max-width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: none;
  }
}

@media (min-width: 1120px) {
  /* Slider column first, so every category image sits on the left. */
  .pcat__body {
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 38px;
  }
  .pcat__products {
    grid-column: 2;
    min-width: 0;
  }
  .pcat__slidewrap {
    grid-column: 1;
    order: -1;
    justify-self: start;
    position: sticky;
    top: 112px;
    margin-inline: 0;
  }
}

/* Product form glyph */
.prod__ic {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-600);
  opacity: .85;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.prod__ic svg { width: 21px; height: 21px; }
.prod:hover .prod__ic {
  color: var(--amber-700);
  transform: scale(1.08);
}

/* Denser product columns inside the narrower products column */
.pcat__products .prod-list { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .pcat__products .prod-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

/* Category intro: image placeholder alongside the heading */
@media (min-width: 900px) {
}

.pcat__sub {
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-700);
  margin: 36px 0 15px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* First functional group sits tight under the band header; the extra top
   margin only belongs between one group and the next. */
.pcat__products > .pcat__sub:first-child { margin-top: 0; }
.pcat__sub::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--amber);
}

.prod-list {
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .prod-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .prod-list { grid-template-columns: repeat(3, 1fr); } }

.prod {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 16px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.prod:hover {
  border-color: var(--navy-600);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.pcat-band--mist .prod { background: var(--paper); }
.pcat-band--mist .prod:hover { border-color: var(--navy-600); }
.pcat-band--mist .pcat__sub { border-bottom-color: #d8dee7; }
.prod b { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--ink); }
.prod small { display: block; color: var(--steel); font-size: .8rem; font-weight: 400; }

/* =========================================================
   Split content (image + text)
   ========================================================= */
.split {
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 60px; }
  .split--reverse .split__media { order: 2; }
}
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
  box-shadow: var(--shadow-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(0deg, rgba(11,22,34,.16), transparent 45%);
  pointer-events: none;
}
.split__media:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.split__media img,
.split__media svg {
  width: 100%;
  height: auto;
  display: block;
}
.split__media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .55s var(--ease), filter .55s var(--ease);
}
.split__media:hover img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}

/* Mission / Vision cards */
.mv {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.mv--vision { border-left-color: var(--amber); }
.mv:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.mv__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 8%, #fff);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mv--vision .mv__icon { color: var(--amber-700); }
.mv__icon svg { width: 24px; height: 24px; }
.mv h3 { font-size: 1.3rem; margin-bottom: 10px; }
.mv p { color: var(--steel); margin: 0; }

/* Values list */
.values { list-style: none; display: grid; gap: 2px; }
.value-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  border-radius: var(--radius);
  transition: background-color .2s var(--ease), padding-inline .2s var(--ease);
}
.value-row:hover {
  background: color-mix(in srgb, var(--mist) 72%, #fff);
  padding-inline: 12px;
}
.value-row__n {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--amber-700);
}
.value-row h3 { font-size: 1.1rem; margin-bottom: 4px; }
.value-row p { color: var(--steel); margin: 0; font-size: .95rem; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 48px; }
}

.info-list { list-style: none; display: grid; gap: 4px; }
.info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  border-radius: var(--radius);
  transition: background-color .2s var(--ease), padding-inline .2s var(--ease);
}
.info-item:first-child { border-top: 0; }
.info-item:hover {
  background: color-mix(in srgb, var(--mist) 68%, #fff);
  padding-inline: 12px;
}
.info-item__ic {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: var(--mist);
  border: 1px solid var(--line);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.info-item__ic svg { width: 20px; height: 20px; }
.info-item:hover .info-item__ic {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 12px 24px rgba(19,41,75,.18);
  transform: scale(1.04);
}
.info-item h3 {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 2px 0 4px;
  font-weight: 600;
}
.info-item p, .info-item a { margin: 0; font-size: 1.02rem; color: var(--ink); }
.info-item a:hover { color: var(--amber-700); }

/* Form */
.form {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--amber), var(--navy-600));
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(19,41,75,.10), 0 10px 24px rgba(11,22,34,.06);
}
.field textarea { resize: vertical; min-height: 130px; }
.form__row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__note { font-size: .82rem; color: var(--steel); margin: 6px 0 0; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band {
  position: relative;
  background:
    linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 58%, #203f6d 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.055) 76px 77px),
    linear-gradient(112deg, transparent 0 60%, rgba(224,168,101,.18) 60.3% 61%, transparent 61.3%);
  pointer-events: none;
  z-index: 0;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 1fr;
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 2.04rem, 2.3rem); margin: 0 0 8px; }
.cta-band p { color: #c4d0e0; margin: 0; max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 860px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; gap: 40px; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background:
    linear-gradient(180deg, #0b1622 0%, #09111d 100%);
  color: #aab6c6;
  padding-top: 56px;
}
.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
.footer-about { font-size: .92rem; line-height: 1.7; margin: 18px 0 0; max-width: 34ch; color: #93a1b3; }

.footer-col h4 {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e0a865;
  margin: 0 0 16px;
  font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a, .footer-col p { color: #aab6c6; font-size: .94rem; margin: 0; }
.footer-col a {
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.footer-col a:hover {
  color: #fff;
  transform: translateX(3px);
}
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: #e0a865; flex: 0 0 auto; margin-top: 3px; }

/* The whole card is a single link to the company's Google Maps location. */
.footer-map {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0e1a29;
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.footer-map:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
.footer-map:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.footer-map iframe {
  width: 100%;
  height: 190px;
  border: 0;
  display: block;
  pointer-events: none;
  filter: grayscale(1) invert(.92) contrast(.9);
  transition: filter .35s var(--ease);
}
.footer-map:hover iframe { filter: grayscale(.65) invert(.84) contrast(.98); }
.footer-map__cap {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  font-size: .84rem;
  color: #aab6c6;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-map__cap svg { width: 15px; height: 15px; flex: none; color: #e0a865; }
.footer-map__cap .footer-map__go {
  margin-left: auto;
  color: #8c9bb0;
  transition: color .2s var(--ease);
}
.footer-map:hover .footer-map__go { color: #e0a865; }

/* Full-width map (Contact page) — click anywhere to open Google Maps. */
.map-embed {
  position: relative;
  display: block;
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.map-embed iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
  pointer-events: none;
}
.map-embed__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  text-decoration: none;
}
.map-embed__link:focus-visible { outline: 2px solid var(--amber); outline-offset: -4px; }
.map-embed__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.map-embed__pill svg { width: 16px; height: 16px; flex: none; color: var(--amber); }
.map-embed__link:hover .map-embed__pill {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--mist-200);
}
@media (max-width: 640px) {
  .map-embed iframe { height: 320px; }
  .map-embed__pill { padding: 12px 18px; font-size: .85rem; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: .84rem;
  color: #7f8da0;
}
.footer-bottom a { color: #93a1b3; }
.footer-bottom a:hover { color: #fff; }

/* =========================================================
   Breadcrumb / page header
   ========================================================= */
.page-hero {
  background:
    linear-gradient(180deg, #f7f9fc, var(--mist));
  border-bottom: 1px solid var(--line);
}
.page-hero__inner { padding: 42px 0 46px; }
.breadcrumb {
  font-size: .82rem;
  color: var(--steel);
  margin-bottom: 16px;
  font-family: var(--font-head);
}
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb span { color: var(--steel-300); margin: 0 8px; }
.page-hero h1 { font-size: clamp(2rem, 2.58rem, 3rem); letter-spacing: 0; margin-bottom: 14px; }
.page-hero p { color: var(--steel); max-width: 60ch; font-size: 1.05rem; margin: 0; }

@media (min-width: 768px) { .page-hero__inner { padding: 60px 0 64px; } }

/* Image-backed page hero — shared by products, about & contact.
   The photo is set inline (background-image) so each page picks its own. */
.page-hero--image {
  position: relative;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Products hero photo — mobile-first responsive background (small file on phones). */
.page-hero--warehouse { background-image: url("../images/hero-warehouse-800.jpg"); }
@media (min-width: 800px) {
  .page-hero--warehouse { background-image: url("../images/hero-warehouse.jpg"); }
}
.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,17,28,.76) 0%, rgba(9,17,28,.66) 52%, rgba(9,17,28,.48) 100%),
    linear-gradient(180deg, rgba(9,17,28,.22) 0%, rgba(9,17,28,.78) 100%);
  z-index: 0;
}
.page-hero--image::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    repeating-linear-gradient(90deg, transparent 0 80px, var(--blueprint-line) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 80px, var(--blueprint-line) 80px 81px);
  opacity: .42;
  animation: blueprintDrift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.page-hero--image .page-hero__inner { position: relative; z-index: 2; }
.page-hero--image h1 {
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 18px rgba(0,0,0,.28);
}
.page-hero--image p {
  color: #c4d0e0;
  text-shadow: 0 1px 14px rgba(0,0,0,.24);
}

.page-hero__eyebrow {
  font-family: var(--font-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e0a865;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.page-hero__eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--amber);
}

/* Dark-background breadcrumb variant */
.breadcrumb--onDark { color: #aebdd0; }
.breadcrumb--onDark a { color: #fff; }
.breadcrumb--onDark a:hover { color: #e0a865; }
.breadcrumb--onDark span { color: #7f92ab; }

/* Range stats — signal breadth of catalogue */
.page-hero__stats {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  max-width: 640px;
}
.page-hero__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.page-hero__stat b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0;
}
.page-hero__stat span { font-size: .82rem; color: #97a7bd; text-align: right; }

@media (min-width: 600px) {
  .page-hero__stats {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 34px;
    border-top: 0;
  }
  .page-hero__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 2px 0 2px 18px;
    border-bottom: 0;
    border-left: 1px solid rgba(255,255,255,.18);
  }
  /* Reserve two lines so a wrapping value (e.g. "Local & Export") keeps its
     label aligned with the single-line stats beside it. */
  .page-hero__stat b { font-size: 1.75rem; min-height: 2.15em; line-height: 1.05; }
  .page-hero__stat span { text-align: left; }
}

/* === Image hero (products, about & contact): full photo background under a
   dark overlay, with icon stats — consistent with the home hero === */
.page-hero--curve { border-bottom: 0; }
.page-hero--curve .page-hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: 66px;
}
/* Give short heroes (e.g. Contact) enough height to feel like a hero and
   centre their copy vertically over the photo. */
@media (min-width: 768px) {
  .page-hero--curve { min-height: 360px; display: flex; align-items: center; }
  .page-hero--curve > .container { width: 100%; }
}

.page-hero--curve::before {
  background:
    linear-gradient(90deg, rgba(9,17,28,.72) 0%, rgba(9,17,28,.62) 52%, rgba(9,17,28,.46) 100%),
    linear-gradient(180deg, rgba(9,17,28,.18) 0%, rgba(9,17,28,.72) 100%);
}

/* Stats: round icon badge beside the figure */
.page-hero--curve .page-hero__stat {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
}
.page-hero__stat-ic {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2f6fc4;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(20,70,150,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.page-hero__stat-ic svg { width: 24px; height: 24px; }
.page-hero__stat-body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.page-hero--curve .page-hero__stat-body { text-align: left; }
.page-hero--curve .page-hero__stat-body b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0;
  min-height: 0;
}
.page-hero--curve .page-hero__stat-body span {
  font-size: .8rem;
  color: #c4d0e0;
  text-align: left;
}
@media (min-width: 600px) {
  .page-hero--curve .page-hero__stats { max-width: 660px; }
  .page-hero--curve .page-hero__stat {
    flex-direction: row;
    align-items: center;
    padding: 4px 0 4px 20px;
  }
}
.page-hero__stat:hover .page-hero__stat-ic,
.hero__stat:hover .page-hero__stat-ic {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(20,70,150,.42);
}

/* Progressive reveal: JS adds these classes after load, so content remains
   visible when scripting is unavailable. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.split__media.reveal,
.pcat__slidewrap.reveal {
  transform: translateY(22px) scale(.985);
}
.split__media.reveal.is-visible,
.pcat__slidewrap.reveal.is-visible {
  transform: translateY(0) scale(1);
}

img.img-fallback {
  object-position: center;
  filter: saturate(.96) contrast(1.02);
}

/* Utilities */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   Policy / legal prose
   ========================================================= */
.prose { max-width: 74ch; }
.prose__meta {
  font-family: var(--font-head);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: 26px;
}
.prose h2 {
  font-size: 1.35rem;
  margin: 38px 0 12px;
}
.prose h3 {
  font-size: 1.05rem;
  margin: 26px 0 8px;
}
.prose p, .prose li { color: var(--steel); }
.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 1rem;
  display: block;
}
.prose li { margin-bottom: 8px; }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--amber-700); }
.prose strong { color: var(--ink); }

/* =========================================================
   Cookie notice banner
   ========================================================= */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  background: var(--navy);
  color: #c4d0e0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(11, 22, 34, .35);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: .92rem; line-height: 1.55; }
.cookie-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner a:hover { color: #e0a865; }
.cookie-banner .btn { padding: 11px 22px; font-size: .88rem; }

@media (min-width: 720px) {
  .cookie-banner {
    left: auto;
    right: 24px;
    bottom: 24px;
    max-width: 480px;
  }
}

/* =========================================================
   Sub-group cards (details/summary accordions, icon + description)
   ========================================================= */
.pcat-group {
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--paper);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease),
              transform .2s var(--ease);
}
.pcat-group:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pcat-group[open] {
  border-left-color: var(--amber);
  box-shadow: var(--shadow-lg);
}
.pcat-group__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "ic title count chev"
    "ic desc  count chev";
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color .2s var(--ease);
}
.pcat-group__summary::-webkit-details-marker { display: none; }
.pcat-group__summary:hover { background: linear-gradient(90deg, var(--mist), #fff); }

.pcat-group__ic {
  grid-area: ic;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f8ecdd;
  color: var(--amber-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(192,123,44,.12);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pcat-group__ic svg { width: 26px; height: 26px; }
.pcat-group:hover .pcat-group__ic,
.pcat-group[open] .pcat-group__ic {
  background: var(--amber);
  color: #fff;
  box-shadow: 0 12px 24px rgba(192,123,44,.22);
  transform: scale(1.04);
}

.pcat-group__title {
  grid-area: title;
  align-self: end;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--navy);
}
.pcat-group__desc {
  grid-area: desc;
  align-self: start;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--steel);
}
.pcat-group__count {
  grid-area: count;
  align-self: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  color: var(--amber-700);
  white-space: nowrap;
}
.pcat-group__chev {
  grid-area: chev;
  align-self: center;
  width: 20px;
  height: 20px;
  color: var(--amber);
  transform: rotate(-90deg);   /* points right when collapsed */
  transition: transform .25s var(--ease);
}
.pcat-group[open] > .pcat-group__summary { border-bottom: 1px solid var(--line); }
.pcat-group[open] > .pcat-group__summary .pcat-group__chev { transform: rotate(0deg); }
.pcat-group > .prod-list { padding: 16px 18px; }

/* Hide the description on very narrow screens so the card header stays tidy */
@media (max-width: 400px) {
  .pcat-group__summary { column-gap: 12px; }
  .pcat-group__desc { display: none; }
  .pcat-group__summary { grid-template-areas: "ic title count chev"; }
}

/* Cards inside a group container are always mist-on-white, on both band colours */
.pcat-group .prod,
.pcat-band--mist .pcat-group .prod { background: var(--mist); }
.pcat-group .prod:hover,
.pcat-band--mist .pcat-group .prod:hover { background: var(--paper); border-color: var(--navy-600); }

/* =========================================================
   Floating WhatsApp button (all pages)
   ========================================================= */
.to-top-float {
  position: fixed;
  right: 24px;
  bottom: 90px;
  z-index: 120;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy-900);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(11, 22, 34, .2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
  visibility: visible;
  opacity: 1;
  transform: translateZ(0);
}
.to-top-float svg { width: 20px; height: 20px; }
.to-top-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(11, 22, 34, .3);
  background: var(--mist);
}
.to-top-float:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 121;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(11, 22, 34, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  visibility: visible;
  opacity: 1;
  transform: translateZ(0);
}
.wa-float svg { width: 32px; height: 32px; }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  z-index: -1;
  animation: waPulse 2.4s cubic-bezier(.2, .6, .2, 1) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { opacity: 0; }
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 30px rgba(11, 22, 34, .34);
}
.wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (min-width: 720px) {
  .to-top-float { right: 34px; bottom: 102px; width: 46px; height: 46px; }
  .wa-float { right: 26px; bottom: 26px; width: 60px; height: 60px; }
  .wa-float svg { width: 34px; height: 34px; }
}