/* ==========================================================================
   AKSEL Technical — V6 "Bento Modern"
   Light modular surface: #F6F7F9 ground, white tiles, big friendly radii,
   soft hairline borders, lime as a FILL (never as text), violet as the
   secondary accent. Type: Outfit, 400–800.

   ------------------------------------------------------------------------
   CLASS GUIDE FOR CONTENT PAGES  (this stylesheet is complete — content
   agents must NOT add or edit CSS; compose pages from the classes below)
   ------------------------------------------------------------------------
   LAYOUT      .container | .container--wide
               .section | .section--tight | .section--wash | .section--navy
               .split > .split__aside + .split__main
               .prose (measure-limited running text)
               .stack | .stack--sm  (vertical rhythm inside a block)
               .grid-2 | .grid-3    (equal card columns)
   HEADINGS    .page-header > .page-header__mesh (decorative svg)
                             + .page-header__inner.container
               .eyebrow | .eyebrow--plain | .lead | .small | .rule (hr)
   BUTTONS     .btn | .btn--ghost | .btn--light | .btn--ghost-on-navy
               .btn-row | .link-arrow (with inline .chev svg)
   CARDS       .cards | .cards--wide > .card > .stack
               .card__badge | .card__badge--award | .card__desc | .card__tagline
               .card-list > .card-row > .card-row__icon
                            + .card-row__body(.card-row__title,.card-row__text)
                            + .card-row__chev
               .category > .category__intro (.eyebrow--plain + h3 +
                            .category__desc) + cards  (a product category
                            block)
               .chipnav > a[href="#id"]   (sticky category sub-nav; JS marks
                                           the current one with .is-current)
   PRODUCT     .tag-row > .tag
               .check-list > li
               .spec-list > .spec-list__row > dt + dd
               .fact-row > .fact-row__item
   FIGURES     .stats > .stat > .stat__value + .stat__label
               .stats--compact (smaller numbers, e.g. inside a card)
               .steps > .step > .step__num + .step__body(.step__title,.step__text)
               .pill-row > .pill
               .icon-badge | .icon-badge--success | .contact-point
   CTA         .panel > .panel__mesh + .panel__inner
   FORMS       form.card > .form-grid > .field(.field--full,.field--error)
               label + input/select/textarea + .field-error
               .field__required | .form-alert | .form-success | .hp-field
   HOME ONLY   .bento > .tile(--hero,--stat,--sector,--about,--process,--cta)
               .kinetic > .k-word/.k-mark | .dotmap | .ticker
   MOTION      add .reveal to any block to fade it in on scroll;
               style="--delay:.08s" staggers it.
   ANCHORS     the root's scroll-padding keeps any #anchor clear of the fixed
               navbar (do not add scroll-margin on top — it doubles).
   ON DARK     inside .section--navy and .panel, headings, body copy, links,
               buttons, pills, icon badges and fact rows re-tint themselves —
               do not hand-colour anything; a .card dropped in a dark band
               keeps its own ink automatically.

   Contents
   01 Tokens            08 Site header (floating pill nav)   15 Panel / CTA
   02 Reset & base      09 Site footer                       16 Page header
   03 Typography        10 Bento grid & tiles                17 Chip sub-nav
   04 Layout            11 Ticker marquee                    18 Forms
   05 Marks             12 Stats                             19 Icon badges
   06 Buttons & links   13 Steps                             20 Responsive
   07 Motion            14 Cards & product blocks            21 Safety net
                                                                 22 Process plants page
   ========================================================================== */

/* 01 Tokens =============================================================== */

:root {
  /* Core identity */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --ink: #0B0D12;
  --muted: #5A6172;
  --lime: #A3E635;
  --violet: #6D28D9;

  /* Derived. Lime is a FILL only — at 1.5:1 on white it can never carry
     text, so accent type uses --lime-ink (7.1:1 on white, 5.8:1 on lime). */
  --lime-ink: #3F6212;
  --lime-deep: #365314;
  --lime-wash: #F0FBDC;
  --violet-wash: #F2ECFE;
  --line: #E6E8EE;
  --line-strong: #D5DAE3;
  --ink-soft: #171B24;
  --on-dark: #FFFFFF;
  --on-dark-muted: #A7AEBE;

  --error: #B3261E;
  --error-wash: #FCF1F0;

  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1240px;

  /* Fluid type — one ratio, no surprises. */
  --fs-display: clamp(2.4rem, 1.5rem + 3.9vw, 4.4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --fs-h3: clamp(1.125rem, 1.03rem + 0.4vw, 1.35rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;
  --fs-stat: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem);

  /* Spacing (names kept stable across versions for inline overrides) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem; --s7: 5.5rem; --s8: 7.5rem;
  --gutter: clamp(1.15rem, 3.6vw, 2.75rem);
  --section-y: clamp(3.5rem, 6.5vw, 6rem);
  --nav-h: 68px;
  --gap: clamp(0.75rem, 1.1vw, 1rem);

  /* Big friendly radii */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
  --shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.04), 0 2px 8px -4px rgba(11, 13, 18, 0.08);
  --shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 14px 34px -18px rgba(11, 13, 18, 0.22);
  --shadow-lg: 0 2px 4px rgba(11, 13, 18, 0.04), 0 26px 60px -26px rgba(11, 13, 18, 0.3);
}

/* 02 Reset & base ========================================================= */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, canvas { max-width: 100%; display: block; }
img { height: auto; }

/* Link colour travels as a custom property so a dark band can re-tint its
   own links without out-specifying every component that sets its own ink. */
a { color: var(--link, var(--lime-ink)); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

::selection { background: var(--lime); color: var(--ink); }

main { padding-top: calc(var(--nav-h) + 22px); }


.skip-link {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--ink);
  color: var(--on-dark);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 14px; text-decoration: none; }

/* 03 Typography =========================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

p { margin: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.small { font-size: var(--fs-small); line-height: 1.55; }

strong, b { font-weight: 600; color: var(--ink); }

/* 04 Layout =============================================================== */

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1440px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.section--wash {
  background: #EDEFF4;
  border-block: 1px solid var(--line);
}

.section--navy {
  background: var(--ink);
  color: var(--on-dark);
  --link: var(--lime);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--on-dark); }
.section--navy .lead, .section--navy p { color: var(--on-dark-muted); }
.section--navy .eyebrow { color: var(--lime); }
.section--navy .eyebrow::before { background: var(--lime); }
/* A solid button on a dark band flips to the accent fill; a white surface
   dropped into the band keeps its own ink and its own link colour. */
.section--navy .btn { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.section--navy .btn:hover { background: #B5EF5B; color: var(--ink); }
.section--navy .btn--ghost, .section--navy .btn--ghost-on-navy {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.34);
}
.section--navy .btn--ghost:hover, .section--navy .btn--ghost-on-navy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
}
.section--navy .card, .section--navy .tile, .section--navy .form-success {
  color: var(--ink);
  --link: var(--lime-ink);
}
.section--navy .card h2, .section--navy .card h3, .section--navy .card h4,
.section--navy .tile h2, .section--navy .tile h3 { color: var(--ink); }
.section--navy .card p, .section--navy .card .lead,
.section--navy .tile p, .section--navy .tile .lead { color: var(--muted); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.split__aside { position: sticky; top: calc(var(--nav-h) + 34px); }
.split__main { min-width: 0; }

.prose {
  max-width: 74ch;
  margin-inline: auto;
}
.prose p { color: var(--muted); }
.prose p + p { margin-top: var(--s2); }

.stack { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.stack--sm { gap: var(--s2); }
.stack > * { max-width: 100%; }

.grid-2, .grid-3 { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* 05 Marks ================================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--lime);
  flex: none;
}
.eyebrow--plain { color: var(--ink); }
.eyebrow--plain::before { width: 10px; height: 10px; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink);
}
.section--wash .pill { background: var(--surface); }
.section--navy .pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--on-dark);
}

/* 06 Buttons & links ====================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid var(--ink);
  transition: transform 0.22s var(--ease), background 0.22s var(--ease),
              box-shadow 0.22s var(--ease), color 0.22s var(--ease);
  text-align: center;
}
.btn:hover {
  background: var(--ink-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.btn--light {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
}
.btn--light:hover { background: #B5EF5B; color: var(--ink); }

.btn--ghost-on-navy {
  background: transparent;
  color: var(--on-dark);
  border-color: rgba(255, 255, 255, 0.34);
}
.btn--ghost-on-navy:hover { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
  padding: 8px 16px 8px 18px;
  border-radius: var(--r-pill);
  background: var(--lime-wash);
  border: 1px solid #DBF2AE;
  transition: gap 0.22s var(--ease), background 0.22s var(--ease);
}
.link-arrow:hover { gap: 0.85em; background: var(--lime); text-decoration: none; }
.link-arrow .chev { flex: none; }

/* 07 Motion =============================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease) var(--delay, 0s),
              transform 0.65s var(--ease) var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: none; }

/* 08 Site header — floating pill nav ====================================== */

.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 60;
  pointer-events: none;
}

.header-inner {
  pointer-events: auto;
  position: relative;
  width: min(100% - (2 * var(--gutter)), var(--max));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 7px 8px 7px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(11, 13, 18, 0.07);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled .header-inner {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.logo { display: block; flex: none; border-radius: 10px; }
.logo:hover { text-decoration: none; }
.logo img { width: 104px; height: auto; }  /* same mark, same size as V3 */

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.site-nav a {
  padding: 9px 13px;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav a:hover { background: rgba(11, 13, 18, 0.06); color: var(--ink); text-decoration: none; }
.site-nav a.active { background: var(--lime); color: var(--ink); font-weight: 600; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: var(--r-pill);
  place-content: center;
  gap: 5px;
  background: var(--ink);
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-dark);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nine destinations only fit the pill at full padding above ~1320px; below
   that the links tighten a little, and under 1200px they fold into the sheet. */
@media (max-width: 1320px) {
  .site-nav a { padding-inline: 11px; }
}

@media (max-width: 1199px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--nav-h) - 40px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
                visibility 0s linear 0.24s;
  }
  .site-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .site-nav a { padding: 13px 16px; font-size: 0.9375rem; border-radius: var(--r-sm); }
}

/* 09 Site footer ========================================================== */

.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: var(--section-y);
  --link: var(--lime);
}
.footer-inner {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 4rem) var(--gutter) clamp(2rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.footer-brand img { height: 40px; width: auto; }
.footer-brand p {
  margin-top: var(--s2);
  color: var(--on-dark-muted);
  font-size: var(--fs-small);
  max-width: 42ch;
}
.footer-nav, .footer-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-nav__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 2px;
}
.footer-nav a, .footer-meta a {
  color: #E9ECF3;
  font-size: var(--fs-small);
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover, .footer-meta a:hover { color: var(--lime); }
.footer-meta span:last-child {
  color: var(--on-dark-muted);
  font-size: 0.875rem;
  margin-top: auto;
  padding-top: var(--s2);
}

/* 10 Bento grid & tiles (home) ============================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  padding: clamp(1.25rem, 2.1vw, 1.9rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tile__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem); }
.tile > .link-arrow, .tile > .btn, .tile .tile__go, .tile > .tile__icon { align-self: flex-start; }

/* Hero ------------------------------------------------------------------ */
.tile--hero {
  grid-column: span 8;
  grid-row: span 2;
  justify-content: space-between;
  gap: var(--s4);
  padding: clamp(1.6rem, 3vw, 3rem);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--lime-wash) 0%, rgba(255, 255, 255, 0) 55%),
    var(--surface);
}
.tile--hero .btn-row { margin-top: var(--s1); }
/* Inside a tile the display size is held back a step: the headline has to
   share the module with a map, not own a whole viewport. */
.tile--hero h1 { font-size: clamp(2.2rem, 1.45rem + 2.7vw, 3.4rem); }

.hero-copy { position: relative; z-index: 2; max-width: min(100%, 34rem); }
.hero-copy h1 { max-width: 15ch; }
.hero-copy .lead { max-width: 44ch; margin-top: var(--s3); }

.dotmap {
  position: absolute;
  inset: auto -4% -6% 26%;
  width: 78%;
  height: 78%;
  z-index: 1;
  touch-action: pan-y;
  --dot-sea: #E4E8EF;
  --dot-land: #B0B9C9;
  --dot-hub: #A3E635;
  --dot-ring: #6D28D9;
  /* Fades out towards the copy so the headline and lead never sit on a
     busy field — the map is atmosphere on the right, nothing on the left. */
  -webkit-mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.22) 32%, #000 66%);
  mask-image: linear-gradient(96deg, transparent 4%, rgba(0, 0, 0, 0.22) 32%, #000 66%);
}

/* Kinetic headline ------------------------------------------------------ */
.kinetic { display: block; }
.k-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  animation: k-rise 0.72s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.075s + 0.08s);
}
@keyframes k-rise { to { opacity: 1; transform: none; } }

.k-mark {
  position: relative;
  display: inline-block;
  z-index: 0;
  padding-inline: 0.12em;
}
.k-mark::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.04em 0.06em;
  z-index: -1;
  border-radius: 8px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  animation: k-sweep 0.66s var(--ease) forwards;
  animation-delay: 0.62s;
}
@keyframes k-sweep { to { transform: scaleX(1); } }

/* Stat tiles ------------------------------------------------------------ */
.tile--stat {
  grid-column: span 2;
  justify-content: center;
  gap: 3px;
}
.tile--stat .stat__value { font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.5rem); }

/* Sector tiles ---------------------------------------------------------- */
.tile--sector {
  grid-column: span 4;
  color: var(--ink);
  gap: var(--s2);
  justify-content: space-between;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease),
              opacity 0.65s var(--ease) var(--delay, 0s);
  will-change: transform;
}
/* The cursor sheen sits under the copy, never over it — hover must not cost
   the text any contrast. */
.tile--sector > * { position: relative; z-index: 1; }
.tile--sector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(163, 230, 53, 0.22), rgba(163, 230, 53, 0) 62%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.tile--sector:hover, .tile--sector:focus-visible {
  text-decoration: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
}
.tile--sector:hover::after, .tile--sector:focus-visible::after { opacity: 1; }
.tile--sector .tile__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--lime-wash);
  color: var(--lime-ink);
  border: 1px solid #DDF3B4;
  transition: background 0.35s var(--ease);
}
.tile--sector:hover .tile__icon { background: var(--lime); color: var(--ink); }
.tile--sector .tile__icon svg { width: 24px; height: 24px; }
.tile--sector p { color: var(--muted); font-size: var(--fs-small); }
.tile--sector .tile__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lime-ink);
}
.tile--sector:hover .tile__go { gap: 0.75em; }
.tile--sector .tile__go svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }

/* About / process / CTA tiles ------------------------------------------- */
/* Story and method share one row as equal halves (the steps sit 2 × 2), so
   neither tile is left with a tall empty foot beside the other. */
.tile--about { grid-column: span 6; }
.tile--about > .link-arrow { margin-top: auto; }
.tile--about p { color: var(--muted); font-size: var(--fs-small); }

.tile--process { grid-column: span 6; }
.tile--process .mini-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s3);
  margin-top: var(--s2);
}
.mini-step { display: flex; flex-direction: column; gap: 6px; }
.mini-step__num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.8125rem;
  font-weight: 700;
}
.mini-step h3 { font-size: 1rem; }
.mini-step p { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.mini-step:nth-child(1) .mini-step__num { background: var(--lime); color: var(--ink); }

.tile--cta {
  grid-column: span 4;
  background: var(--lime);
  border-color: #93D42B;
  justify-content: space-between;
  gap: var(--s3);
}
.tile--cta h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
.tile--cta p { color: var(--lime-deep); font-size: var(--fs-small); }
.tile--cta .tile__label { color: var(--lime-deep); }
.tile--cta .btn { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.tile--cta .btn:hover { background: var(--ink-soft); }

/* The invitation as a closing band across the full grid: copy left, the
   action right. It stacks back into a column on phones (section 20). */
.tile--band {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.tile__copy { display: flex; flex-direction: column; gap: var(--s2); max-width: 62ch; }
.tile__copy p { text-wrap: pretty; }

/* 11 Ticker marquee ======================================================= */

.ticker {
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: 15px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-slide 46s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__group { display: flex; align-items: center; }
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline: 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.ticker__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}
.ticker__item--alt::after { background: var(--violet); }
@keyframes ticker-slide { to { transform: translateX(-50%); } }

/* 12 Stats ================================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: var(--gap);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.stat__value {
  font-size: var(--fs-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--muted);
  font-weight: 500;
}
.stats--compact { gap: var(--s2); }
.stats--compact .stat { padding: 0; background: none; border: 0; }
.stats--compact .stat__value { font-size: 1.6rem; }
.stats--compact .stat__label { font-size: 0.875rem; }
.tile .stat, .card .stat { padding: 0; background: none; border: 0; }
.section--navy .stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--navy .stat__value { color: var(--lime); }
.section--navy .stat__label { color: var(--on-dark-muted); }

/* 13 Steps ================================================================ */

.steps { display: grid; gap: var(--gap); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.step:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--on-dark);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.step:first-child .step__num { background: var(--lime); color: var(--ink); }
.step__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.step__title { font-size: var(--fs-h3); }
.step__text { color: var(--muted); font-size: var(--fs-small); }

/* 14 Cards & product blocks =============================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--gap);
  align-items: start;
}
.cards--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
/* Every card in the set takes the tallest card's size — rows included. */
.cards--equal { align-items: stretch; grid-auto-rows: 1fr; }

.card {
  position: relative;
  padding: clamp(1.25rem, 2.1vw, 1.9rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.cards .card:hover, .card-list .card:hover {
  box-shadow: var(--shadow);
  border-color: var(--line-strong);
  transform: translateY(-3px);
}
.card > .stack { gap: var(--s2); align-items: flex-start; }
.card h3 { text-wrap: pretty; }
.card__desc { color: var(--muted); font-size: var(--fs-small); }
.card__tagline {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lime-ink);
}
.card__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.card__badge--award {
  background: var(--violet);
  color: var(--on-dark);
}

/* Category blocks (long sector pages) ------------------------------------ */
.category + .category { margin-top: clamp(2.5rem, 5vw, 4rem); }
/* A divider between two products inside one category gets room on both
   sides, so neither block appears glued to it. */
.category > .rule { margin-block: clamp(2.5rem, 5vw, 4rem); }
.category__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.category__intro p { color: var(--muted); }
/* The one-line summary directly under a category's eyebrow + h3 (not inside
   a .card) — same muted/small treatment as .card__desc, distinct token so
   markup matches what it actually is. */
.category__desc { font-size: var(--fs-small); }

/* Card rows (compact link list) ------------------------------------------ */
.card-list { display: grid; gap: var(--gap); }
.card-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  padding: clamp(1rem, 1.6vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.card-row:hover {
  text-decoration: none;
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.card-row__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--lime-wash);
  border: 1px solid #DDF3B4;
  color: var(--lime-ink);
  flex: none;
}
.card-row:hover .card-row__icon { background: var(--lime); color: var(--ink); }
.card-row__icon svg { width: 26px; height: 26px; }
.card-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-row__title { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.card-row__text { color: var(--muted); font-size: var(--fs-small); }
.card-row__chev { color: var(--muted); flex: none; transition: transform 0.3s var(--ease); }
.card-row:hover .card-row__chev { transform: translateX(4px); color: var(--ink); }

/* Tags ------------------------------------------------------------------- */
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: #F1F3F7;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

/* Check lists ------------------------------------------------------------ */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.check-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 7px;
  background: var(--lime);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.section--navy .check-list li { color: var(--on-dark-muted); }

/* Spec lists ------------------------------------------------------------- */
.spec-list {
  margin: 0;
  padding: var(--s2);
  border-radius: var(--r);
  background: #F5F6FA;
  border: 1px solid var(--line);
  display: grid;
  gap: 2px;
}
.spec-list__row {
  display: grid;
  grid-template-columns: minmax(38%, auto) minmax(0, 1fr);
  gap: var(--s2);
  padding: 7px 8px;
  border-radius: 8px;
}
.spec-list__row:nth-child(odd) { background: rgba(255, 255, 255, 0.75); }
.spec-list dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.spec-list dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

/* Fact row --------------------------------------------------------------- */
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fact-row__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.fact-row__item svg { width: 17px; height: 17px; color: var(--lime-ink); flex: none; }
.section--navy .fact-row__item {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--on-dark);
}
.section--navy .fact-row__item svg { color: var(--lime); }

/* 15 Panel / CTA ========================================================== */

.panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(2rem, 4.5vw, 3.75rem);
  --link: var(--lime);
}
.panel__mesh {
  position: absolute;
  right: -8%;
  top: 50%;
  translate: 0 -50%;
  width: min(52%, 420px);
  height: auto;
  color: var(--lime);
  opacity: 0.28;
  pointer-events: none;
}
.panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 58ch;
}
.panel h2, .panel h3 { color: var(--on-dark); }
.panel .lead, .panel p { color: var(--on-dark-muted); }
.panel .eyebrow { color: var(--lime); }
.panel .btn { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.panel .btn:hover { background: #B5EF5B; }
.panel .btn--ghost-on-navy { background: transparent; color: var(--on-dark); border-color: rgba(255, 255, 255, 0.34); }

/* 16 Page header (interior banner) ======================================== */

.page-header {
  position: relative;
  margin-block: var(--s2) 0;
}
.page-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: clamp(2.25rem, 5vw, 4rem);
}
.page-header__inner:not(.container) {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* The content box IS the card box (the ::before below), padded from inside,
   so the copy keeps clear of the card's edge at every width — the plain
   .container measure only lined up with the card on screens wider than
   the measure plus both gutters. */
.page-header__inner.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  max-width: none;
  padding-inline: clamp(1.25rem, 4vw, 2.75rem);
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0 var(--gutter);
  max-width: var(--max);
  margin-inline: auto;
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 120% at 92% 8%, var(--lime-wash) 0%, rgba(255, 255, 255, 0) 60%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.page-header__inner > * { position: relative; }
.page-header h1 { max-width: 20ch; }
.page-header .lead { max-width: 62ch; }
.page-header__mesh {
  position: absolute;
  right: max(var(--gutter), calc(50% - (var(--max) / 2) + var(--gutter)));
  top: 50%;
  translate: 0 -50%;
  width: min(34%, 300px);
  height: auto;
  color: var(--ink);
  opacity: 0.07;
  z-index: 0;
  pointer-events: none;
}

/* 17 Chip sub-nav (long sector pages) ===================================== */

.chipnav {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  z-index: 40;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px;
  margin-bottom: var(--s4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
}
.chipnav::-webkit-scrollbar { display: none; }
.chipnav a {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.chipnav a:hover { background: #F0F2F6; color: var(--ink); text-decoration: none; }
.chipnav a.is-current { background: var(--lime); color: var(--ink); font-weight: 600; }

/* 18 Forms ================================================================ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
/* The submit row always stands clear of the last field, in every form. */
.form-grid + .btn-row { margin-top: var(--s3); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.field__required { color: var(--error); font-weight: 700; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink);
  background: #FAFBFC;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235A6172' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #B9C0CD; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

.field--error input,
.field--error select,
.field--error textarea {
  border-color: var(--error);
  background: var(--error-wash);
}
.field--error input:focus,
.field--error select:focus,
.field--error textarea:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}
.field-error {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--error);
}

.form-alert {
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  border-radius: var(--r);
  background: var(--error-wash);
  border: 1px solid #EFC9C6;
  color: #8C1D18;
  font-size: var(--fs-small);
}
.form-alert a { color: #8C1D18; text-decoration: underline; }

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  border-color: #C9E88A;
  background:
    radial-gradient(90% 130% at 100% 0%, var(--lime-wash) 0%, rgba(255, 255, 255, 0) 62%),
    var(--surface);
}

.hp-field { position: absolute; left: -9999px; }

/* 19 Icon badges & contact points ========================================= */

.icon-badge {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 15px;
  background: var(--lime-wash);
  border: 1px solid #DDF3B4;
  color: var(--lime-ink);
}
.icon-badge svg { width: 25px; height: 25px; }
.icon-badge--success { background: var(--lime); border-color: #93D42B; color: var(--ink); }
.section--navy .icon-badge {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--lime);
}

.contact-point {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
  color: var(--muted);
}
.contact-point a { color: var(--ink); font-weight: 600; }
.contact-point a:hover { color: var(--lime-ink); }

/* 20 Responsive =========================================================== */

@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile--hero { grid-column: span 6; grid-row: span 1; }
  .tile--stat { grid-column: span 3; }
  .tile--sector { grid-column: span 3; }
  .tile--sector.tile--wide { grid-column: span 6; }
  .tile--about, .tile--process, .tile--cta { grid-column: span 6; }
  .dotmap {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: 240px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 719px) {
  :root { --nav-h: 62px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile--hero, .tile--stat, .tile--sector, .tile--sector.tile--wide,
  .tile--about, .tile--process, .tile--cta { grid-column: 1 / -1; }
  .tile--stat { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--s2); }
  .tile--band { flex-direction: column; align-items: stretch; }
  .hero-copy { max-width: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .spec-list__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .spec-list dd { text-align: left; }
  .card-row { grid-template-columns: auto minmax(0, 1fr); }
  .card-row__chev { display: none; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .logo img { width: 100px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .small { text-align: center; }
}

@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;
  }
  .reveal { opacity: 1; transform: none; }
  .k-word { opacity: 1; transform: none; }
  .k-mark::before { transform: scaleX(1); }
  .ticker__track { animation: none; }
  .tile--sector { transform: none; }
  .tile--sector:hover { transform: none; }
}

/* 21 Safety net =========================================================== */

.container, .container--wide, .footer-inner, .header-inner { max-width: min(100%, var(--max)); }
.container--wide { max-width: min(100%, 1440px); }
.header-inner { max-width: min(100% - (2 * var(--gutter)), var(--max)); }

pre, code, table { max-width: 100%; overflow-x: auto; }
.spec-list dd, .card-row__text, .card__desc, .category__desc, .check-list li { overflow-wrap: anywhere; }
h1, h2, h3, .stat__value { overflow-wrap: break-word; }

/* 22 Process plants page ================================================== */

/* process-plants.php only. Everything else on that page is composed from
   the classes above; the .pp-* rules below cover what the shared system has
   no part for: photo tiles, the bento hero's scope tile, the dark delivery
   modules, the route explorer, the flow figure, the equipment art panels and
   the two-tile brief close.

   Photos always sit inside a rounded tile or panel (which clips them) and
   any type set on a photo sits on an ink scrim dense enough to keep it at
   WCAG AA even over the brightest pixel of the image. */

.pp-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section head: label + heading on the left, standfirst on the right. */
.pp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s3) clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.pp-head > div { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.pp-head h2 { max-width: 18ch; }
.pp-head .lead { max-width: 52ch; }

/* Hero bento ------------------------------------------------------------- */
.pp-hero__tile {
  justify-content: flex-end;
  min-height: 560px;
  background: var(--ink);
  border-color: transparent;
  color: var(--on-dark);
  --link: var(--lime);
}
.pp-hero__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11, 13, 18, 0.93) 0%, rgba(11, 13, 18, 0.85) 60%, rgba(11, 13, 18, 0.4) 100%),
    linear-gradient(0deg, rgba(11, 13, 18, 0.6) 0%, rgba(11, 13, 18, 0) 55%);
}
.pp-hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 36rem;
}
.pp-hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3.35rem); max-width: 17ch; color: var(--on-dark); }
/* On the photo lime may carry type: the scrim makes it an ink ground. */
.pp-hero__accent { color: var(--lime); }
.pp-hero__tile .eyebrow { color: var(--lime); }
.pp-hero__tile .lead { max-width: 46ch; color: #F1F3F7; }
.pp-hero__tile .btn-row { margin-top: var(--s1); }
.pp-hero__tile .btn:not(.btn--ghost-on-navy) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pp-hero__tile .btn:not(.btn--ghost-on-navy):hover { background: #B5EF5B; }

.pp-scope { grid-column: span 4; grid-row: span 2; gap: var(--s1); }
.pp-scope__list { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; grid-auto-rows: 1fr; }
.pp-scope__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.35;
}
.pp-scope__list li:first-child { border-top: 0; }
.pp-scope__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: #F1F3F7;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  font-weight: 700;
}
.pp-scope__list li:first-child .pp-scope__num { background: var(--lime); border-color: #93D42B; }

.pp-hero .tile--stat { grid-column: span 3; }
.pp-hero .stat__value { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.35rem); white-space: nowrap; }
.pp-hero .stat__value em { font-style: normal; color: var(--lime-ink); }
.pp-hero .stat__label { font-size: var(--fs-small); color: var(--muted); font-weight: 500; }

/* Intro ------------------------------------------------------------------ */
.pp-intro {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  align-items: center;
}
.pp-intro__media {
  min-height: 480px;
  justify-content: flex-end;
  padding: clamp(0.85rem, 1.5vw, 1.25rem);
  background: var(--ink);
}
.pp-tagcard {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: rgba(11, 13, 18, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.pp-tagcard strong { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--lime); }
.pp-tagcard span { font-size: var(--fs-small); line-height: 1.5; color: #E9ECF3; }

.pp-intro__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.pp-intro__text h2 { max-width: 16ch; }
.pp-intro__text > p:not(.eyebrow) { color: var(--muted); }
.pp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 24px; width: 100%; margin-top: var(--s1); }
.pp-checks li { color: var(--ink); font-weight: 500; }

/* Integrated delivery (on .section--navy) -------------------------------- */
.pp-delivery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pp-dcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(1.4rem, 2.3vw, 2rem);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease),
              opacity 0.65s var(--ease) var(--delay, 0s);
}
.pp-dcard.reveal { transition: border-color 0.35s var(--ease), transform 0.65s var(--ease) var(--delay, 0s), opacity 0.65s var(--ease) var(--delay, 0s); }
.pp-dcard:hover { border-color: rgba(163, 230, 53, 0.5); }
.pp-dcard--feature {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(163, 230, 53, 0.16) 0%, rgba(163, 230, 53, 0) 60%),
    rgba(255, 255, 255, 0.06);
  border-color: rgba(163, 230, 53, 0.55);
}
.pp-dcard__key {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 6px;
}
.pp-dcard p { font-size: var(--fs-small); }
.pp-dcard ul {
  list-style: none;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  gap: 7px;
}
.pp-dcard li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #D5DAE3;
}
.pp-dcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--lime);
}

/* Industries: photo entry tiles ------------------------------------------ */
.pp-ind { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pp-ind__tile {
  min-height: 360px;
  justify-content: space-between;
  gap: 0;
  padding: 0;
  background: var(--ink);
  border-color: transparent;
  color: var(--on-dark);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              opacity 0.65s var(--ease) var(--delay, 0s);
  will-change: transform;
}
.pp-ind__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.2) 0%, rgba(11, 13, 18, 0.66) 26%,
              rgba(11, 13, 18, 0.9) 52%, rgba(11, 13, 18, 0.95) 100%);
}
.pp-ind__tile .pp-photo { transition: transform 0.7s var(--ease); }
.pp-ind__tile:hover, .pp-ind__tile:focus-visible {
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px);
}
.pp-ind__tile:hover .pp-photo, .pp-ind__tile:focus-visible .pp-photo { transform: scale(1.06); }
.pp-ind__icon {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--on-dark);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pp-ind__icon svg { width: 24px; height: 24px; }
.pp-ind__tile:hover .pp-ind__icon { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pp-ind__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}
.pp-ind__body .tile__label { color: #E9ECF3; }
.pp-ind__body h3 { color: var(--on-dark); }
.pp-ind__body p { font-size: var(--fs-small); line-height: 1.5; color: #E3E7EE; }
.pp-ind__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 4px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lime);
  transition: gap 0.3s var(--ease);
}
.pp-ind__tile:hover .pp-ind__go { gap: 0.75em; }

/* Route explorer --------------------------------------------------------- */
.pp-tabs {
  display: flex;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 7px;
  margin-bottom: var(--s3);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tab {
  flex: none;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.pp-tab:hover { background: #F0F2F6; color: var(--ink); }
.pp-tab[aria-selected="true"] { background: var(--ink); color: var(--on-dark); font-weight: 600; }

.pp-route {
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pp-route__chips {
  padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.15rem, 2.6vw, 2rem);
  background: #F5F6FA;
  border-bottom: 1px solid var(--line);
}
.pp-route__chips-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 14px;
}
.pp-route__chips-head h3 { font-size: 1.0625rem; }
.pp-route__chips-head span { font-size: var(--fs-small); color: var(--muted); }
.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.pp-chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.pp-chip[aria-pressed="true"] { background: var(--lime); border-color: #93D42B; font-weight: 600; }

.pp-route__detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.pp-route__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border-right: 1px solid var(--line);
}
.pp-route__code {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.pp-route__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.12; }
.pp-route__desc { color: var(--muted); }
.pp-route__meta { margin: var(--s1) 0 0; display: grid; gap: 8px; width: 100%; }
.pp-route__meta div {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: #F5F6FA;
  border: 1px solid var(--line);
}
.pp-route__meta dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-route__meta dd { margin: 2px 0 0; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }

.pp-route__steps { padding: clamp(1.4rem, 3vw, 2.5rem); }
.pp-route__steps-title {
  margin-bottom: var(--s2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
}
.pp-steps__num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.875rem;
  font-weight: 700;
}
.pp-steps li:first-child .pp-steps__num { background: var(--lime); color: var(--ink); }
.pp-steps strong { display: block; font-size: 1rem; line-height: 1.35; }
.pp-steps__text { display: block; margin-top: 2px; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }

.pp-route__detail.is-swapping .pp-route__text,
.pp-route__detail.is-swapping .pp-route__steps { animation: pp-swap 0.35s var(--ease); }
@keyframes pp-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Flow figure ------------------------------------------------------------ */
.pp-flow {
  margin: 0;
  padding: clamp(0.75rem, 1.6vw, 1.25rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pp-flow__scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle, #E3E7EE 1px, transparent 1.2px) 0 0 / 22px 22px,
    #FAFBFC;
  border: 1px solid var(--line);
}
.pp-flow__scroll:focus-visible { outline-offset: 3px; }
.pp-flow__scroll svg { min-width: 900px; width: 100%; height: auto; }
.pp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--s2) 4px 2px;
}
.pp-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  background: #F5F6FA;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.pp-legend__item i { display: block; width: 26px; border-top: 3px solid var(--ink); border-radius: 2px; }
.pp-legend__item--recycle i { border-top-color: var(--lime-ink); border-top-style: dashed; }
.pp-legend__item--thermal i { border-top-color: var(--violet); }
.pp-legend__item--control i { border-top: 2px dashed #9AA3B5; }
/* Flow motion. Decorative only: lime "material" travels along the product
   and recycle lines, heat oil climbs the jacket line, agitators turn, the
   extruder screw runs and control signals drop from the DCS bar. It runs
   while the figure is on screen (process-plants.js adds .is-paused when it
   is not) and is removed entirely for visitors who prefer reduced motion. */
.pp-anim-flow__main path { stroke-dasharray: 5 23; animation: pp-flow-28 1.1s linear infinite; }
.pp-anim-flow__recycle path { stroke-dasharray: 4 16; animation: pp-flow-20 1.5s linear infinite; }
.pp-anim-flow__heat path { stroke-dasharray: 4 14; animation: pp-flow-18 1.3s linear infinite; }
.pp-anim-signal line { animation: pp-flow-7 1.2s linear infinite; }
.pp-anim-screw { animation: pp-flow-12 0.7s linear infinite; }
.pp-anim-impeller {
  transform-box: fill-box;
  transform-origin: center;
  animation: pp-impeller 0.9s ease-in-out infinite;
}
.pp-anim-impeller--b { animation-duration: 1.05s; }
.pp-anim-impeller--c { animation-duration: 0.8s; animation-delay: -0.3s; }
.pp-anim-status { animation: pp-blink 1.8s ease-in-out infinite; }
@keyframes pp-flow-28 { to { stroke-dashoffset: -28; } }
@keyframes pp-flow-20 { to { stroke-dashoffset: -20; } }
@keyframes pp-flow-18 { to { stroke-dashoffset: -18; } }
@keyframes pp-flow-12 { to { stroke-dashoffset: -12; } }
@keyframes pp-flow-7 { to { stroke-dashoffset: -7; } }
@keyframes pp-impeller { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.12); } }
@keyframes pp-blink { 50% { opacity: 0.3; } }
.pp-flow.is-paused [class*="pp-anim"],
.pp-flow.is-paused [class*="pp-anim"] path,
.pp-flow.is-paused [class*="pp-anim"] line { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pp-anim-flow { display: none; }
  .pp-flow [class*="pp-anim"],
  .pp-flow [class*="pp-anim"] path,
  .pp-flow [class*="pp-anim"] line { animation: none !important; }
}

.pp-flow__hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Core equipment --------------------------------------------------------- */
.pp-equip-banner {
  display: flex;
  align-items: flex-end;
  min-height: 320px;
  margin-bottom: var(--gap);
}
.pp-equip-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgba(11, 13, 18, 0.95) 0%, rgba(11, 13, 18, 0.87) 58%, rgba(11, 13, 18, 0.35) 100%);
}
.pp-equip-banner h2 { max-width: 22ch; }
.pp-equip-banner .lead { color: #D5DAE3; }
.pp-equip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.pp-equip + .category { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pp-eq {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 10px 10px clamp(1.15rem, 1.8vw, 1.5rem);
}
.pp-eq:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-3px); }
/* .card's own transition list would drop .reveal's fade; restate both. */
.pp-eq.reveal, .pp-why .card.reveal {
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.65s var(--ease) var(--delay, 0s),
              opacity 0.65s var(--ease) var(--delay, 0s);
}
.pp-eq__art {
  display: grid;
  place-items: center;
  height: 176px;
  border-radius: calc(var(--r-xl) - 8px);
  background: #F5F6FA;
  border: 1px solid var(--line);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pp-eq:hover .pp-eq__art { background: var(--lime-wash); border-color: #DDF3B4; }
.pp-eq__art svg { width: 76%; height: 80%; overflow: visible; }

/* Equipment motion. A drawing "switches on" while its card carries
   .is-running — set by process-plants.js on mouse hover, and on touch
   screens for ~2 s when the card first scrolls into view or is tapped.
   Animations exist only while running, so a machine always returns to its
   drawn pose; the added overlays (flows, smoke) fade in only while running.
   Nothing moves for visitors who prefer reduced motion. */
.pp-eq .eqa-overlay { opacity: 0; transition: opacity 0.3s var(--ease); }
.pp-eq.is-running .eqa-overlay { opacity: 1; }

.eqa-spin, .eqa-paddles, .eqa-rotor, .eqa-flame, .eqa-pulse, .eqa-puff {
  transform-box: fill-box;
  transform-origin: center;
}
.eqa-flame { transform-origin: 50% 100%; }
.pp-eq.is-running .eqa-spin { animation: eqa-spin 0.9s ease-in-out infinite; }
.pp-eq.is-running .eqa-spin--fast { animation-duration: 0.6s; }
.pp-eq.is-running .eqa-paddles { animation: eqa-paddles 1.2s ease-in-out infinite; }
.pp-eq.is-running .eqa-rumble { animation: eqa-rumble 0.5s ease-in-out infinite; }
.pp-eq.is-running .eqa-glow { animation: eqa-glow 1.4s ease-in-out infinite; }
.pp-eq.is-running .eqa-glow--alt { animation-delay: 0.7s; }
.pp-eq.is-running .eqa-drum { animation: eqa-dash-14 0.9s linear infinite; }
.pp-eq.is-running .eqa-tubes path { animation: eqa-dash-10 0.8s linear infinite; }
.pp-eq.is-running .eqa-out { animation: eqa-dash-10 0.5s linear infinite; }
.pp-eq.is-running .eqa-pipes { animation: eqa-dash-14 0.8s linear infinite; }
.pp-eq.is-running .eqa-rotor { animation: eqa-rotate 0.7s linear infinite; }
.pp-eq.is-running .eqa-flame { animation: eqa-flame 0.5s ease-in-out infinite; }
.pp-eq.is-running .eqa-puff { animation: eqa-puff 1.8s ease-out infinite; }
.pp-eq.is-running .eqa-puff--2 { animation-delay: 0.6s; }
.pp-eq.is-running .eqa-puff--3 { animation-delay: 1.2s; }
.pp-eq.is-running .eqa-pulse { animation: eqa-pulse 0.8s ease-in-out infinite; }

@keyframes eqa-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.12); } }
@keyframes eqa-paddles { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-40deg); } }
@keyframes eqa-rumble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(0.8px); } }
@keyframes eqa-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes eqa-dash-14 { to { stroke-dashoffset: -14; } }
@keyframes eqa-dash-10 { to { stroke-dashoffset: -10; } }
@keyframes eqa-rotate { to { transform: rotate(360deg); } }
@keyframes eqa-flame { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(0.9, 1.14); } 70% { transform: scale(1.06, 0.94); } }
@keyframes eqa-puff { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 25% { opacity: 0.75; } 100% { transform: translateY(-18px) scale(1.5); opacity: 0; } }
@keyframes eqa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

@media (prefers-reduced-motion: reduce) {
  .pp-eq [class*="eqa-"], .pp-eq .eqa-tubes path { animation: none !important; }
  .pp-eq .eqa-overlay { display: none; }
}
.pp-eq__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-inline: clamp(0.5rem, 1vw, 0.85rem);
}
.pp-eq__num {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding-inline: 8px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* How we work ------------------------------------------------------------ */
.pp-how__photo {
  width: 100%;
  margin-top: var(--s2);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: #E6E8EE;
}
.pp-how__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-timeline .tag-row { margin-top: 8px; }
.pp-timeline .tag { background: #F5F6FA; }

/* Why AKSEL -------------------------------------------------------------- */
.pp-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.pp-why .card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pp-why .card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-3px); }
.pp-why .card h3 { margin-top: 6px; }

/* Project brief ---------------------------------------------------------- */
.pp-brief {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: stretch;
}
.pp-brief__panel { display: flex; flex-direction: column; min-height: 420px; }
.pp-brief__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.93) 0%, rgba(11, 13, 18, 0.86) 62%, rgba(11, 13, 18, 0.3) 100%);
}
.pp-brief__panel .pp-photo { object-position: 50% 100%; }
.pp-brief__panel .lead { color: #D5DAE3; }
.pp-brief__panel .btn { white-space: nowrap; }
.pp-brief__main { min-width: 0; }
.pp-brief__form > h3 { margin-bottom: var(--s3); }
.pp-brief .form-success { height: 100%; justify-content: center; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1180px) {
  .pp-equip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-ind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-ind__tile { min-height: 320px; }
}

@media (max-width: 1023px) {
  .pp-head, .pp-intro, .pp-brief { grid-template-columns: minmax(0, 1fr); }
  .pp-head { align-items: start; }
  .pp-scope { grid-column: span 6; grid-row: auto; }
  .pp-scope__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s3); }
  .pp-scope__list li:nth-child(2) { border-top: 0; }
  .pp-hero__tile { min-height: 520px; }
  .pp-hero__tile::after {
    background:
      linear-gradient(90deg, rgba(11, 13, 18, 0.92) 0%, rgba(11, 13, 18, 0.86) 70%, rgba(11, 13, 18, 0.55) 100%),
      linear-gradient(0deg, rgba(11, 13, 18, 0.6) 0%, rgba(11, 13, 18, 0) 55%);
  }
  .pp-delivery, .pp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-route__detail { grid-template-columns: minmax(0, 1fr); }
  .pp-route__text { border-right: 0; border-bottom: 1px solid var(--line); }
  .pp-intro__media { min-height: 380px; }
  .pp-how__photo { max-width: 560px; }
  .pp-equip-banner::after {
    background: linear-gradient(90deg, rgba(11, 13, 18, 0.95) 0%, rgba(11, 13, 18, 0.88) 75%, rgba(11, 13, 18, 0.62) 100%);
  }
}

@media (max-width: 959px) {
  .pp-flow__hint { display: inline-flex; }
}

@media (max-width: 719px) {
  .pp-hero .tile--stat, .pp-scope { grid-column: 1 / -1; }
  .pp-hero .tile--stat { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pp-hero__tile { min-height: 0; }
  .pp-hero__tile::after {
    background: linear-gradient(0deg, rgba(11, 13, 18, 0.9) 0%, rgba(11, 13, 18, 0.82) 60%, rgba(11, 13, 18, 0.6) 100%);
  }
  .pp-ind__tile { min-height: 380px; }
  .pp-scope__list { grid-template-columns: minmax(0, 1fr); }
  .pp-scope__list li:nth-child(2) { border-top: 1px solid var(--line); }
  .pp-delivery, .pp-why, .pp-ind, .pp-equip, .pp-checks { grid-template-columns: minmax(0, 1fr); }
  .pp-intro__media { min-height: 360px; }
  .pp-tagcard { padding: 16px 18px; }
  .pp-steps li { padding: 12px; gap: 12px; }
  .pp-brief__panel .btn { white-space: normal; }
  .pp-flow__hint { margin-left: 0; }
  .pp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--r-lg); }
  .pp-tab { white-space: normal; line-height: 1.25; text-align: center; padding-inline: 10px; }
  .pp-equip-banner { min-height: 0; }
  .pp-equip-banner::after { background: rgba(11, 13, 18, 0.84); }
}