/* ==========================================================================
   Components
   ========================================================================== */

/* ---------- Buttons ----------
   White on orange is 3.5:1, which only passes AA as LARGE text, so button
   labels are 19px bold (WCAG large = 14pt bold). Do not shrink them.        */
.btn {
  --btn-bg: var(--ap-orange-500);
  --btn-fg: var(--ap-white);
  --btn-bd: var(--ap-orange-500);
  --btn-sweep: var(--ap-orange-600);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0.7rem 1.6rem;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Hover sweep, slanted at the logo's italic angle */
.btn::before {
  content: "";
  position: absolute;
  inset: 0 -20%;
  z-index: -1;
  background: var(--btn-sweep);
  transform: translateX(-110%) skewX(var(--slant));
  transition: transform 0.35s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(var(--slant)); }
.btn:hover { color: var(--btn-fg); }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ap-indigo-700);
  --btn-bd: var(--ap-indigo-700);
  --btn-sweep: var(--ap-indigo-700);
}
.btn--outline:hover, .btn--outline:focus-visible { color: var(--ap-white); }
/* Every dark background must be listed here, or the outline button is indigo-on-indigo
   (.page-hero was missing until 02/10/2026: 404's "Contact us" measured 1.5:1). */
.section--dark .btn--outline, .hero .btn--outline, .page-hero .btn--outline, .cta-band .btn--outline, .nav-panel .btn--outline {
  --btn-fg: var(--ap-white);
  --btn-bd: var(--ap-white);
  --btn-sweep: var(--ap-white);
}
.section--dark .btn--outline:hover, .hero .btn--outline:hover, .page-hero .btn--outline:hover, .cta-band .btn--outline:hover,
.section--dark .btn--outline:focus-visible, .hero .btn--outline:focus-visible, .page-hero .btn--outline:focus-visible, .cta-band .btn--outline:focus-visible {
  color: var(--ap-indigo-900);
}
.btn--whatsapp { --btn-bg: var(--ap-whatsapp); --btn-bd: var(--ap-whatsapp); --btn-sweep: var(--ap-indigo-900); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ap-indigo-700);
}
.link-arrow svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Eyebrow + weld-seam accent ---------- */
.eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ap-indigo-700);
}
.section--dark .eyebrow, .hero .eyebrow, .cta-band .eyebrow { color: var(--ap-orange-300); }
.center .eyebrow { align-items: center; }

.weld {
  position: relative;
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--ap-orange-500);
}
/* the glowing arc at the end of the bead */
.weld::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ap-white);
  box-shadow: var(--ap-glow);
}
.js .reveal .weld { transform-origin: left; transform: scaleX(0); transition: transform 0.9s 0.2s var(--ease); }
.js .reveal.is-visible .weld { transform: scaleX(1); }

.section-head { max-width: 760px; margin-bottom: var(--space-7); }
.section-head.center { margin-inline: auto; }
.section-head p { font-size: var(--fs-lead); line-height: 1.5; color: var(--ap-steel-700); }
.section--dark .section-head p { color: var(--ap-white-a70); }

/* ---------- Fine-line wave motif (letterhead), colour from tokens via mask ---------- */
.wave {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62%, 720px);
  pointer-events: none;
  background: var(--ap-steel-300);
  /* Second layer fades the lines out towards the bottom, so a tall section
     doesn't end on a hard-clipped band of diagonal hatching. */
  -webkit-mask:
    url("../img/illustrations/wave-lines.svg") right center / cover no-repeat,
    linear-gradient(to bottom, black 55%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask:
    url("../img/illustrations/wave-lines.svg") right center / cover no-repeat,
    linear-gradient(to bottom, black 55%, transparent 92%);
  mask-composite: intersect;
  opacity: 0.9;
  z-index: 0;
}
.wave--dark { background: var(--ap-indigo-500); opacity: 0.55; }
.wave--left { right: auto; left: 0; transform: scaleX(-1); }
.has-wave > .container { position: relative; z-index: 1; }
/* On phones the mask scales up and the lines crowd the text — keep it faint */
@media (max-width: 767px) {
  .wave { width: 100%; opacity: 0.35; }
  .wave--dark, .cta-band .wave, .site-footer .wave { opacity: 0.25; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ap-white);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--ap-shadow); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
  transition: height 0.3s var(--ease);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-small); }
.brand { display: block; flex: none; }
/* Logo enlarged 02/10/2026 (was 48px / 38px scrolled). Its size is what pushed the desktop
   nav breakpoint below up to 1200px: at 1080px the seven links plus this logo squeezed the
   header CTA onto two lines. */
.brand img { width: auto; height: 70px; transition: height 0.3s var(--ease); }
.site-header.is-scrolled .brand img { height: 54px; }
@media (min-width: 1024px) {
  .brand img { height: 86px; }
  .site-header.is-scrolled .brand img { height: 62px; }
}

.nav { display: none; }
.nav ul { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.nav a {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ap-indigo-700);
}
.nav a::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 3px;
  background: var(--ap-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--ap-indigo-100);
  border-radius: var(--radius);
  color: var(--ap-indigo-700);
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (min-width: 1024px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}

/* ---------- Mobile nav panel ---------- */
.nav-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  padding: var(--space-5) var(--gutter) var(--space-6);
  background: var(--ap-indigo-900);
  color: var(--ap-white);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  overflow-y: auto;
}
.nav-panel.is-open { transform: none; visibility: visible; transition: transform 0.35s var(--ease); }
.nav-panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
.nav-panel__top img { height: 40px; width: auto; }
.nav-panel .nav-close {
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ap-white);
  border: 2px solid var(--ap-white-a20); border-radius: var(--radius);
}
.nav-panel .nav-close svg { width: 26px; height: 26px; }
.nav-panel ul { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.nav-panel li + li { border-top: 1px solid var(--ap-white-a10); }
.nav-panel ul a {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ap-white);
}
.nav-panel ul a[aria-current="page"] { color: var(--ap-orange-300); }
.nav-panel__actions { display: grid; gap: var(--space-3); margin-top: auto; }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ap-scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
body.nav-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--ap-indigo-900);
  color: var(--ap-white-a70);
}
.hero h1 { color: var(--ap-white); margin-bottom: var(--space-5); }
.hero h1 .line,
.page-hero h1 .line { display: block; }
/* An inner-page heading set as explicit lines (Solutions: "Pressure part welding" / "Pick &
   place" / "Bevelling solution") keeps every line whole at every width - the client wants
   "Pressure part welding" on ONE line. The 18ch cap is lifted for it, and on phones the size
   scales with the screen (9vw) so the longest line still fits a 360px screen. */
.page-hero h1 .line { white-space: nowrap; }
.page-hero h1:has(.line) { max-width: none; font-size: min(var(--fs-h1), 9vw); }
/* Solutions hero in the Indian tricolour, top to bottom (client, 02/10/2026). */
.page-hero h1 .tri-saffron { color: var(--ap-flag-saffron); }
.page-hero h1 .tri-white { color: var(--ap-white); }
.page-hero h1 .tri-green { color: var(--ap-flag-green); }
.hero .hero__sub {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ap-white);
  max-width: 34ch;
}
.hero p { color: var(--ap-white-a70); }
.hero .btn-row { margin-top: var(--space-6); }
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--space-7); align-items: center; }
.hero__art { max-width: 620px; margin-inline: auto; width: 100%; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
}

/* Cover photo hero (home).
   - under 1200px: photo block on top (unshaded), then headline + buttons, then the intro;
   - from 1200px: the photo spans the full width, with the robotic welding cell, arc spark,
     limpet coil vessel, and prominent ADVANTAGE PLUS column logos fully clear on the left;
     the headline + buttons sit over the right side behind a see-through indigo tint.
     The intro paragraphs stay in a two-column band underneath. */
.hero--photo { padding-top: 0; }
.hero--photo .hero__media { margin-bottom: var(--space-7); }
/* max-height: at tablet width a full 16:9 photo filled the first screen and hid the headline */
.hero__photo { display: block; width: 100%; height: auto; max-height: 56vh; aspect-ratio: 16 / 9; object-fit: cover; object-position: left 55%; }
.hero__intro { margin-top: var(--space-6); }
.hero__intro p { max-width: var(--measure); text-align: justify; text-justify: inter-word; }
@media (min-width: 1200px) {
  .hero--photo {
    display: grid;
    grid-template-columns: 54% 46%;
    grid-template-rows: minmax(clamp(580px, 72vh, 800px), auto) auto;
    padding: 0;
  }
  .hero--photo .hero__media { grid-column: 1 / -1; grid-row: 1; margin: 0; position: relative; }
  .hero--photo .hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg,
      var(--ap-scrim-strong) 0%, var(--ap-scrim-text) 38%,
      var(--ap-scrim-fade) 52%, var(--ap-scrim-clear) 66%);
  }
  /* Original HD hero photo: anchored left so the robotic welding cell, arc spark,
     limpet coil vessel, and Advantage Plus column logos are prominent and fully visible;
     the text sits over the right side. */
  .hero--photo .hero__photo {
    position: absolute; top: 0; right: auto; bottom: 0; left: 0;
    width: 100%; height: 100%; max-height: none; aspect-ratio: auto;
    object-fit: cover; object-position: left 65%;
  }
  .hero__head { grid-column: 2; grid-row: 1; position: relative; z-index: 1; display: flex; align-items: center; padding-block: var(--space-7); }
  /* line the text up with the page container on the right side */
  .hero__head .container {
    max-width: none;
    margin: 0;
    padding-left: var(--space-7);
    padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
  .hero__head h1 { font-size: clamp(2.75rem, 1.2rem + 2.6vw, 3.75rem); }
  .hero__intro { grid-column: 1 / -1; grid-row: 2; margin: 0; padding-block: var(--space-7); border-top: 1px solid var(--ap-white-a10); }
  .hero__intro .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .hero__intro p { margin: 0; max-width: none; text-align: justify; text-justify: inter-word; }
}

/* Page hero (inner pages) */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: var(--ap-indigo-900);
  color: var(--ap-white-a70);
}
.page-hero h1 { color: var(--ap-white); max-width: 18ch; }
.page-hero .lead { color: var(--ap-white-a70); }
.page-hero .eyebrow { color: var(--ap-orange-300); }
.page-hero .container { position: relative; z-index: 1; }

/* Hero with a right-hand panel (Solutions: equipment logos). Below 1200px it stacks under the
   text. From 1200px it sits in the hero's RIGHT-HAND BAND - the area the wave decoration
   covers (right edge, up to 720px) - not in the centred container. The client asked for "right
   side" twice. It is absolutely placed against the viewport's right edge and centred
   vertically with flex, not transform, because .reveal animates transform. */
.page-hero__grid { display: grid; gap: var(--space-7); }
@media (min-width: 1200px) {
  .page-hero__grid { display: block; min-height: 30rem; }
  /* Text stops a gap short of the panel: panel left edge minus the container's own left edge.
     Without it the lead paragraph ran under the panel at 1200 and 1366px. */
  .page-hero__grid > .page-hero__main {
    max-width: calc(100vw - (var(--band-w) + var(--equip-w)) / 2 - var(--space-7) - max(0px, (100vw - var(--container)) / 2) - var(--gutter));
  }
  /* The intro paragraph stays on the dark blue: it ends a gap short of the right-hand band,
     not just of the panel (client: the trailing "and" sat on the lighter band). The h1 lines
     are nowrap and keep the cap above. */
  .page-hero__grid > .page-hero__main .lead {
    max-width: max(28ch, calc(100vw - var(--band-w) - var(--space-6) - max(0px, (100vw - var(--container)) / 2) - var(--gutter)));
  }
  .page-hero__grid > .equip {
    position: absolute; top: 0; bottom: 0;
    /* centred in the right-hand band (client: "make it center") */
    right: calc((100% - 100vw) / 2 + (var(--band-w) - var(--equip-w)) / 2);
    width: var(--equip-w);
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* ---------- "Powered by World-Class Equipment" logo panel ----------
   Each logo sits on its own white tile, so the panel reads the same on a dark band (here) or
   a light page. Logos are the brands' own files, never recoloured: grey at 70% by default,
   full colour on hover/focus. Not links. 3 per row (2 on phones), 9 brands = a full grid. */
/* Compact by half at the client's request (02/10/2026): 600 -> 300px wide, logos 56 -> 28px tall,
   gaps and text scaled down to match. --equip-w also caps the text column beside it. */
:root { --equip-w: min(300px, 20vw); --band-w: min(62vw, 720px); }   /* --band-w = the .wave band's width */
.equip { color: var(--ap-white-a70); max-width: 360px; }
.equip__title { color: var(--ap-white); font-size: 1.0625rem; margin-bottom: var(--space-1); }   /* client: "make small", then compact by 50% */
.equip__sub { margin: 0 0 var(--space-3); font-size: 0.8125rem; line-height: 1.45; }
.equip__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
@media (min-width: 600px) { .equip__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.equip__tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 2 / 1; padding: var(--space-1) var(--space-2);
  background: var(--ap-white); border: 1px solid var(--ap-steel-300); border-radius: var(--radius);
}
/* WeldNova publishes only a light-on-dark logo, so its tile is dark rather than the logo altered. */
.equip__tile--dark { background: var(--ap-indigo-900); border-color: var(--ap-white-a20); }
.equip__tile--link {
  cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.equip__tile--link:hover,
.equip__tile--link:focus-within {
  transform: translateY(-2px);
  border-color: var(--ap-orange-500);
  box-shadow: var(--ap-shadow-lg);
}
.equip__tile--link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.equip__tile img {
  display: block; width: 100%; height: 100%; max-height: 28px; object-fit: contain;
  filter: grayscale(1); opacity: 0.7;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}
.equip__tile:hover img, .equip__tile:focus-within img { filter: none; opacity: 1; }
@media (hover: none) { .equip__tile img { filter: none; opacity: 1; } }   /* no hover on touch: show colour */
.equip__legal { margin: var(--space-2) 0 0; font-size: 0.6875rem; line-height: 1.4; color: var(--ap-white-a70); }
/* On a light page the same panel needs dark text. */
.on-light .equip, .on-light .equip__legal { color: var(--ap-steel-700); }
.on-light .equip__title { color: var(--ap-indigo-700); }
.breadcrumb { margin-bottom: var(--space-5); font-size: var(--fs-sm); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--ap-white-a70); }
.breadcrumb a { color: var(--ap-white); }
.breadcrumb [aria-current] { color: var(--ap-white-a70); }

/* ---------- Capability strip ---------- */
.cap-strip { background: var(--ap-indigo-800); color: var(--ap-white); }
.cap-strip ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cap-strip li { position: relative; }
.cap-strip a {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ap-white);
  text-decoration: none;
  transition: background 0.2s var(--ease);
}
.cap-strip a:hover { background: var(--ap-indigo-700); color: var(--ap-white); }
/* 19px bold = WCAG large text: orange-500 on indigo-800 is 3.8:1 (3.1:1 on the indigo-700 hover); the step-nav variant uses orange-600, 4.6:1 on steel-100 */
.cap-strip .num { color: var(--ap-orange-500); font-size: 1.1875rem; }
/* slanted divider between items */
.cap-strip li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: var(--ap-white-a20);
  transform: skewX(var(--slant));
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ap-indigo-700);
  background: var(--ap-indigo-100);
  border-radius: var(--radius);
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--ap-orange-500);
  transform: skewX(var(--slant));
}
.section--dark .chip { color: var(--ap-white); background: var(--ap-white-a10); }

/* ---------- Specialisation feature blocks ---------- */
.spec-grid { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; } .spec--wide { grid-column: 1 / -1; } }
.spec {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ap-white);
  border: 1px solid var(--ap-steel-300);
  border-top: 4px solid var(--ap-indigo-700);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.spec:hover { box-shadow: var(--ap-shadow-lg); transform: translateY(-3px); border-top-color: var(--ap-orange-500); }
.spec__art { background: var(--ap-steel-100); padding: var(--space-5) var(--space-5) 0; border-bottom: 1px solid var(--ap-steel-300); }
.spec__art img { width: 100%; max-height: 300px; object-fit: contain; }
/* A real photo in place of an illustration: same 7:5 box (the SVGs are 560x400), so the cards
   in a row stay level. It fills the box, cropped, instead of letterboxing. */
.spec__art img.is-photo { display: block; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.spec__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); flex: 1; }
.spec__body h3 { margin: 0; }
.spec__body p { margin: 0; text-align: justify; text-justify: inter-word; }
.spec__body .link-arrow { margin-top: auto; padding-top: var(--space-2); }
.spec__tag {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-steel-700);
}
@media (min-width: 900px) {
  .spec--wide { flex-direction: row; }
  .spec--wide .spec__art { flex: 0 0 44%; padding: var(--space-5); border-bottom: 0; border-right: 1px solid var(--ap-steel-300); display: flex; align-items: center; }
}

/* ---------- Slanted number badge ---------- */
.badge-num {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 44px;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  font-style: italic;
  color: var(--ap-white);
  background: var(--ap-indigo-700);
  transform: skewX(var(--slant));
  border-radius: 3px;
}
.badge-num > span { transform: skewX(12deg); }

/* ---------- Process journey (5 connected steps) ---------- */
.process { position: relative; display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.process__step { position: relative; padding-left: 76px; }
.process__step .badge-num { position: absolute; left: 0; top: 0; z-index: 1; }
/* connecting weld line (vertical on mobile) */
.process__step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 44px;
  bottom: calc(-1 * var(--space-5));
  width: 3px;
  background: var(--ap-steel-300);
}
.process__step:last-child::before { display: none; }
.process__step h3 { font-size: var(--fs-h4); margin: var(--space-2) 0 var(--space-2); }
.process__step p { font-size: 1rem; margin: 0; color: var(--ap-steel-700); text-align: justify; text-justify: inter-word; hyphens: auto; }
.process__step .link-arrow { margin-top: var(--space-3); font-size: 1rem; }
/* weld line draws as it scrolls in */
.js .process.reveal .process__step::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 44px;
  width: 3px;
  height: 0;
  background: var(--ap-orange-500);
  transition: height 1.4s var(--ease);
}
.js .process.reveal.is-visible .process__step:not(:last-child)::after { height: calc(100% - 44px + var(--space-5)); }
@media (min-width: 1024px) {
  .process { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); }
  .process__step { padding-left: 0; padding-top: 72px; }
  .process__step .badge-num { top: 0; }
  .process__step::before { left: 56px; right: calc(-1 * var(--space-5)); top: 21px; bottom: auto; width: auto; height: 3px; }
  .js .process.reveal .process__step::after { left: 56px; top: 21px; width: 0; height: 3px; transition: width 0.6s var(--ease); }
  .js .process.reveal.is-visible .process__step:not(:last-child)::after { width: calc(100% - 56px + var(--space-5)); height: 3px; }
  .js .process.reveal.is-visible .process__step:nth-child(2)::after { transition-delay: 0.5s; }
  .js .process.reveal.is-visible .process__step:nth-child(3)::after { transition-delay: 1s; }
  .js .process.reveal.is-visible .process__step:nth-child(4)::after { transition-delay: 1.5s; }
}
.section--dark .process__step::before { background: var(--ap-white-a20); }
.section--dark .process__step p { color: var(--ap-white-a70); }

/* ---------- Icon feature list (Why us) ---------- */
.features { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--ap-white-a20);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.feature:hover { border-color: var(--ap-orange-500); background: var(--ap-white-a10); }
.feature h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); }
.feature p { margin: 0; font-size: 1rem; }
.section:not(.section--dark) .feature { border-color: var(--ap-steel-300); background: var(--ap-white); }
.section:not(.section--dark) .feature:hover { border-color: var(--ap-indigo-700); box-shadow: var(--ap-shadow); }

/* Icon tile */
.icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--ap-indigo-100);
  color: var(--ap-indigo-700);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.section--dark .icon { background: var(--ap-white-a10); color: var(--ap-white); }
.feature:hover .icon, .card:hover .icon { color: var(--ap-orange-500); }
.section:not(.section--dark) .feature:hover .icon, .card:hover .icon { color: var(--ap-orange-600); }

/* ---------- Cards (industries etc.) ---------- */
.cards { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards--5 { grid-template-columns: repeat(6, 1fr); } .cards--5 > * { grid-column: span 2; } .cards--5 > :nth-child(4) { grid-column: 2 / span 2; } }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--ap-white);
  border: 1px solid var(--ap-steel-300);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: var(--space-5);
  bottom: -1px;
  width: 48px;
  height: 4px;
  background: var(--ap-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.card:hover { border-color: var(--ap-indigo-700); box-shadow: var(--ap-shadow); }
.card:hover::after { transform: scaleX(1); }
.card h3 { font-size: var(--fs-h4); margin: 0; }

/* ---------- Client logos (index.html#clients) ----------
   Flex, not grid, so the last row of 7 sits centred. A card starts as .client--text (name
   only); once images/clients/<slug> loads, main.js adds the logo (name as its alt text),
   drops that class and removes the visible name, so a logo card shows the logo alone.
   Logos keep their own colours and proportions: contained, never stretched or cropped. */
.client-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.client {
  flex: 0 1 calc((100% - var(--space-5)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 9rem;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--ap-white);
  border: 1px solid var(--ap-steel-300);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.client:hover { border-color: var(--ap-indigo-700); box-shadow: var(--ap-shadow); }
.client__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 4.5rem; }
.client__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.client__name { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ap-steel-700); }
.client--text .client__logo { display: none; }
.client--text .client__name {
  font-family: var(--font-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ap-indigo-700);
}
@media (min-width: 640px) { .client { flex-basis: calc((100% - 2 * var(--space-5)) / 3); } }
@media (min-width: 1024px) { .client { flex-basis: calc((100% - 3 * var(--space-5)) / 4); } }
.card p { margin: 0; font-size: 1rem; color: var(--ap-steel-700); }

/* ---------- Figure / photo placeholder ---------- */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--ap-steel-300); }
.figure figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--ap-steel-700); }
.illus {
  padding: var(--space-5);
  background: var(--ap-steel-100);
  border: 1px solid var(--ap-steel-300);
  border-radius: var(--radius-lg);
}
.solution__art--photo {
  padding: 0;
  overflow: hidden;
}
.solution__art--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: var(--ap-indigo-700);
  color: var(--ap-white-a70);
}
.cta-band::before {
  /* slanted orange edge — motion slant */
  content: "";
  position: absolute;
  left: -40px;
  top: 0;
  bottom: 0;
  width: 90px;
  background: var(--ap-orange-500);
  transform: skewX(var(--slant));
}
.cta-band h2 { color: var(--ap-white); }
.cta-band p { color: var(--ap-white); font-size: var(--fs-lead); line-height: 1.5; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band .btn-row { margin-top: var(--space-6); }
.cta-band .wave { background: var(--ap-indigo-500); opacity: 0.6; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-8);
  background: var(--ap-indigo-900);
  color: var(--ap-white-a70);
  font-size: 1rem;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--space-6); padding-bottom: var(--space-7); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.5fr 0.8fr 1fr 1.4fr; } }
.footer-brand img { width: 220px; height: auto; margin-bottom: var(--space-4); }
.footer-brand p { max-width: 36ch; }
.footer-tagline { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ap-white); }
.site-footer h2 {
  margin-bottom: var(--space-4);
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ap-white);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--ap-white-a70); text-decoration: none; }
.site-footer a:hover { color: var(--ap-white); text-decoration: underline; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: var(--space-3); }
.contact-list svg { flex: none; width: 20px; height: 20px; margin-top: 4px; fill: none; stroke: var(--ap-orange-500); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.contact-list li + li { margin-top: var(--space-3); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid var(--ap-white-a10);
  font-size: var(--fs-sm);
}
.footer-bottom p { margin: 0; }
.site-footer .wave { background: var(--ap-indigo-500); opacity: 0.4; }

/* ---------- Mobile sticky call bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ap-indigo-900);
  box-shadow: var(--ap-shadow-up);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56px;
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ap-white);
  background: var(--ap-indigo-700);
}
.mobile-bar a.wa { background: var(--ap-whatsapp); }
.mobile-bar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body { padding-bottom: 56px; }
@media (min-width: 768px) { .mobile-bar { display: none; } body { padding-bottom: 0; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label, .field legend { font-weight: 600; color: var(--ap-steel-900); }
.field .req { color: var(--ap-indigo-700); font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.65rem 0.85rem;
  background: var(--ap-white);
  border: 1.5px solid var(--ap-steel-500);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ap-indigo-700);
  box-shadow: 0 0 0 3px var(--ap-orange-500);
}
.field [aria-invalid="true"] { border-color: var(--ap-orange-600); background: var(--ap-orange-100); }
.field .error { min-height: 1.3em; margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ap-orange-600); }
/* orange-600 is 4.9:1 on --ap-bg, but errors also sit on white and tinted panels; they carry
   an orange "!" + bold weight and are announced via aria-live, so the text itself stays dark: */
.field .error { color: var(--ap-steel-900); }
.field .error:not(:empty)::before { content: "! "; color: var(--ap-orange-600); font-weight: 800; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.radio-row label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.radio-row input { width: 20px; height: 20px; min-height: 0; accent-color: var(--ap-indigo-700); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { padding: var(--space-4) var(--space-5); border-radius: var(--radius); border-left: 4px solid var(--ap-orange-500); background: var(--ap-orange-100); color: var(--ap-steel-900); }
.form-status:empty { display: none; }
.form-success {
  padding: var(--space-7) var(--space-6);
  text-align: center;
  background: var(--ap-indigo-100);
  border-radius: var(--radius-lg);
}
.form-success .weld { margin: 0 auto var(--space-5); }

/* ---------- Contact person cards ---------- */
.person {
  padding: var(--space-5);
  border: 1px solid var(--ap-steel-300);
  border-left: 4px solid var(--ap-indigo-700);
  border-radius: var(--radius-lg);
  background: var(--ap-white);
}
.person h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.person .btn-row { gap: var(--space-2); margin-top: var(--space-4); }
.person .btn { min-height: 46px; padding: 0.5rem 1rem; }

/* ---------- Map facade ---------- */
.map {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ap-steel-300);
  background: var(--ap-indigo-100);
}
.map iframe { width: 100%; height: 100%; border: 0; }
.map__facade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  text-align: center;
  background:
    repeating-linear-gradient(-12deg, transparent 0 26px, var(--ap-indigo-a08) 26px 28px),
    var(--ap-indigo-100);
}
.map__facade svg { width: 44px; height: 44px; fill: none; stroke: var(--ap-orange-600); stroke-width: 1.75; }
.map__facade p { margin: 0; font-weight: 600; color: var(--ap-indigo-700); }