/* =========================================================================
   PT Arsindo — inner.css
   Loaded for every non-home page_type. §pages-redesign + §inner-edit-pass + §downloads.
   Generated 2026-05-07 by tools/split-css.php from public_html/style.css.
   Source line ranges: L3266-4955.
   Edit either the source or this bundle directly — both work, but if you
   re-run the splitter it consumes the source. Bump BUILD_VER on every edit.
   ========================================================================= */

/* ============================================================================
   §pages-redesign — apply home blueprint+editorial vocabulary site-wide.
   Targets every page that ISN'T home (hub|product|service|article|info|contact|legal).
   Added 2026-05-03 to unify design across all 158 pages.

   Vocabulary (CLAUDE.md §7):
     - Hairlines (1px) instead of card borders / box-shadows
     - Mono typography for numerals, labels, captions
     - Asymmetric layouts (photo left + text right)
     - Single accent: --signal (#3b8ced)
     - Sharp 2px button-radius
     - Numbered section ordinals before each h2
     - Dark CTA bands on --ink
   ========================================================================= */

body.page-hub,
body.page-product,
body.page-service,
body.page-article,
body.page-info,
body.page-contact,
body.page-legal,
body.page-archive {
  background: var(--paper);
  color: var(--ink);
}

body:not(.page-home) #main { scroll-margin-top: 5rem; }

/* Site header on non-home pages: solid white with hairline */
body:not(.page-home) .site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}
body:not(.page-home) .site-header .site-header__brand {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.015em;
}
body:not(.page-home) .site-header .site-nav > li > a[aria-current="page"] {
  color: var(--signal);
  border-bottom: 2px solid var(--signal);
  padding-bottom: 0.25rem;
}

body:not(.page-home) .site-main { padding-top: 0; }
body:not(.page-home) .site-main > .wrap {
  max-width: 1200px;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

/* Breadcrumb: mono, hairline-bordered band */
body:not(.page-home) .breadcrumb {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  color: var(--color-text-muted);
}
body:not(.page-home) .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
body:not(.page-home) .breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.75rem;
  color: var(--rule-strong);
}
body:not(.page-home) .breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
body:not(.page-home) .breadcrumb a:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}
body:not(.page-home) .breadcrumb [aria-current="page"] {
  color: var(--ink);
}

/* Page hero band: type-label kicker + headline + lede + hairline */
.page-hero {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.page-hero__kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--signal);
}
.page-hero__title {
  font-size: clamp(1.875rem, 4.5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 1rem;
  max-width: 22ch;
  color: var(--ink);
}
.page-hero__lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0;
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.page-hero__meta strong {
  color: var(--ink);
  font-weight: 600;
}

/* Hero band: photographic variant (when $hero_image present).
   Harmonized 2026-05-03 with home hero language: tucks under transparent
   header, full-bleed photo at near-full visibility, oversized headline at
   home-matching scale, soft top-fade gradient (no heavy bottom crush). */
.page-hero--photo {
  background: var(--ink);
  color: var(--paper);
  border-bottom-color: transparent;
  padding: clamp(7rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  /* Tuck the hero up under the transparent sticky header so the photo
     extends to the very top of the viewport, matching home's full-bleed feel. */
  margin-top: calc(-1 * var(--site-header-h, 64px));
  min-height: clamp(360px, 60vh, 640px);
  display: flex;
  align-items: flex-end;
}
.page-hero--photo .page-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
.page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-hero-image, none) center / cover no-repeat;
  z-index: -2;
}
.page-hero--photo::after {
  /* Soft scrim biased to bottom-left where text sits, photo stays vibrant.
     Mirrors home hero overlay weighting. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,19,34,.45) 0%, rgba(10,19,34,.10) 30%, rgba(10,19,34,.55) 75%, rgba(10,19,34,.88) 100%),
    linear-gradient(90deg, rgba(10,19,34,.55) 0%, rgba(10,19,34,.10) 60%);
  z-index: -1;
}
.page-hero--photo .page-hero__title {
  color: var(--paper);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 18ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.30);
}
.page-hero--photo .page-hero__lede {
  color: rgba(255,255,255,.86);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  max-width: 56ch;
  text-shadow: 0 1px 6px rgba(0,0,0,.40);
}
.page-hero--photo .page-hero__kicker {
  color: var(--signal-hover);
  font-size: 0.78rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.40);
}
.page-hero--photo .page-hero__kicker::before { background: var(--signal-hover); }
.page-hero--photo .page-hero__meta { color: rgba(255,255,255,.72); }
.page-hero--photo .page-hero__meta strong { color: var(--paper); }

/* Breadcrumb pinned over the photo (mono uppercase, white text + signal hovers).
   Replaces the standalone breadcrumb band that header.php suppresses when
   $has_photo_hero is true. */
.page-hero__breadcrumb {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 4px rgba(0,0,0,.40);
}
.page-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.75rem;
  color: rgba(255,255,255,.32);
}
.page-hero__breadcrumb a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.page-hero__breadcrumb a:hover {
  color: var(--signal-hover);
  border-bottom-color: var(--signal-hover);
}
.page-hero__breadcrumb [aria-current="page"] { color: rgba(255,255,255,.95); }

/* When body has photo-hero, the sticky header goes transparent over the
   photo, then JS (or scroll-position approximation via scroll-snap not
   available, so we use a soft inline gradient backdrop) keeps nav readable.
   This mirrors body.page-home .site-header treatment. */
body.has-photo-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
  position: sticky;
  top: 0;
  transition: background .28s ease, border-color .28s ease;
}
body.has-photo-hero .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem 0;
  background: linear-gradient(180deg, rgba(10,19,34,.62) 0%, rgba(10,19,34,.32) 55%, rgba(10,19,34,0) 100%);
  pointer-events: none;
  z-index: -1;
}
body.has-photo-hero .site-header .site-header__brand {
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.has-photo-hero .site-header .site-nav > li > a {
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.has-photo-hero .site-header .site-nav > li > a:hover { color: #fff; }
body.has-photo-hero .site-header .site-nav > li > a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--signal);
}
body.has-photo-hero .nav-toggle {
  color: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.32);
}
body.has-photo-hero .site-search button { color: rgba(255,255,255,.85); }
body.has-photo-hero .site-search button:hover { color: #fff; background: rgba(255,255,255,.10); }
body.has-photo-hero .site-search.is-open {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
body.has-photo-hero .site-search.is-open input { color: #fff; }
body.has-photo-hero .site-search.is-open input::placeholder { color: rgba(255,255,255,.55); }
body.has-photo-hero .site-search.is-open:focus-within {
  background: rgba(255,255,255,.95);
  border-color: var(--signal);
}
body.has-photo-hero .site-search.is-open:focus-within input { color: var(--ink); }
body.has-photo-hero .site-search.is-open:focus-within input::placeholder { color: var(--color-text-faint); }
body.has-photo-hero .site-search.is-open:focus-within button { color: var(--ink); }

/* Once user scrolls past the hero, JS adds .is-scrolled — solidify header.
   Inner-page footer.php JS is shared with home, which already toggles this. */
body.has-photo-hero .site-header.is-scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--rule);
}
body.has-photo-hero .site-header.is-scrolled::before { opacity: 0; }
body.has-photo-hero .site-header.is-scrolled .site-header__brand,
body.has-photo-hero .site-header.is-scrolled .site-nav > li > a {
  color: var(--ink);
  text-shadow: none;
}
body.has-photo-hero .site-header.is-scrolled .nav-toggle {
  color: var(--ink);
  border-color: var(--rule);
}
body.has-photo-hero .site-header.is-scrolled .site-search button { color: var(--color-text-muted); }
body.has-photo-hero .site-header.is-scrolled .site-search button:hover { color: var(--color-primary); background: rgba(15,28,46,.06); }
body.has-photo-hero .site-header.is-scrolled .site-search.is-open {
  background: var(--paper);
  border-color: var(--rule);
}
body.has-photo-hero .site-header.is-scrolled .site-search.is-open input { color: var(--ink); }
body.has-photo-hero .site-header.is-scrolled .site-search.is-open input::placeholder { color: var(--color-text-faint); }

/* Site main reset for photo-hero pages: no top padding, hero handles spacing */
body.has-photo-hero .site-main { padding-top: 0; }

/* Body article: editorial reading width + numbered h2 ordinals */
.page-body {
  max-width: 76ch;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  counter-reset: body-h2;
}
.page-body > * + * { margin-top: 1.25rem; }
.page-body p { margin: 0 0 1.25rem; }
.page-body p:last-child { margin-bottom: 0; }

.page-body h2 {
  counter-increment: body-h2;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 3.25rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  position: relative;
}
.page-body h2::before {
  content: counter(body-h2, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--signal);
  margin-bottom: 0.625rem;
  text-transform: uppercase;
}

.page-body h3 {
  font-size: clamp(1.1875rem, 1.9vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  margin: 2rem 0 0.625rem;
  color: var(--ink);
}
.page-body h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.75rem 0 0.5rem;
  color: var(--color-text-muted);
}

.page-body a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(transparent 60%, rgba(59,140,237,.18) 60%);
  border-bottom: 1px solid var(--signal);
  transition: background var(--t-fast), color var(--t-fast);
}
.page-body a:hover {
  color: var(--signal);
  background-image: linear-gradient(transparent 0, rgba(59,140,237,.18) 0);
}

.page-body em { color: var(--color-text); font-style: italic; }
.page-body strong { color: var(--ink); font-weight: 700; }

.page-body ul,
.page-body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4em;
}
.page-body ul li,
.page-body ol li { margin-bottom: 0.625rem; }
.page-body ul li::marker { color: var(--signal); }
.page-body ol li::marker { color: var(--signal); font-family: var(--mono); font-size: 0.875em; }

.page-body blockquote {
  margin: 2rem 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 3px solid var(--signal);
  background: var(--paper-soft);
  font-style: italic;
  color: var(--ink);
}

.page-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--paper-soft);
  padding: 0.125rem 0.375rem;
  border-radius: 2px;
  color: var(--ink);
}
.page-body pre {
  background: var(--ink);
  color: rgba(255,255,255,.92);
  padding: 1.25rem 1.5rem;
  border-radius: 2px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 1.5rem 0;
}
.page-body pre code { background: transparent; padding: 0; color: inherit; }

.page-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.page-body figure { margin: 2rem 0; }
.page-body figure img { margin: 0; }
.page-body figcaption {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
  text-transform: uppercase;
}

.page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9375rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.page-body table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rule);
}
.page-body table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.page-body table tr:last-child td { border-bottom: none; }

.page-body hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

/* Sharp 2px buttons, signal-blue primary */
body:not(.page-home) .btn,
body:not(.page-home) .cta a.btn {
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
body:not(.page-home) .btn--primary,
body:not(.page-home) .btn.btn--primary {
  background: var(--signal);
  color: var(--paper);
  border-color: var(--signal);
}
body:not(.page-home) .btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
body:not(.page-home) .btn--ghost,
body:not(.page-home) .btn.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
body:not(.page-home) .btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* CTA block: dark band with hairline + sharp buttons */
body:not(.page-home) .cta {
  background: var(--ink);
  color: var(--paper);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
}
body:not(.page-home) .cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.5rem;
}
body:not(.page-home) .cta__heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}
body:not(.page-home) .cta__sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  max-width: 60ch;
  margin: 0;
}
body:not(.page-home) .cta__actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
}
body:not(.page-home) .cta .btn--ghost {
  color: var(--paper);
  border-color: rgba(255,255,255,.32);
}
body:not(.page-home) .cta .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* Hub pages: leaf grid w/ hairlines (no shadows) */
.hub-grid {
  display: grid;
  gap: 0;
  margin: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid > * { border-right: 1px solid var(--rule); }
  .hub-grid > *:nth-child(2n) { border-right: none; }
}
@media (min-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(3, 1fr); }
  .hub-grid > * { border-right: 1px solid var(--rule); }
  .hub-grid > *:nth-child(2n) { border-right: 1px solid var(--rule); }
  .hub-grid > *:nth-child(3n) { border-right: none; }
}
.hub-grid__cell {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast);
  position: relative;
}
.hub-grid__cell:hover { background: var(--paper-soft); }
.hub-grid__cell:hover .hub-grid__title { color: var(--signal); }
.hub-grid__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
}
.hub-grid__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0.25rem 0 0;
  transition: color var(--t-fast);
}
.hub-grid__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
}
.hub-grid__arrow {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--signal);
  margin-top: auto;
  padding-top: 1rem;
  letter-spacing: 0.04em;
}

/* ── §hub-extras — filter chips, thumbnails, category badge, FAQ, related rail
   Added 2026-05-03 alongside hub_title/hub_desc/hub_category support.
   Engineering-blueprint vocabulary: hairlines, mono labels, single signal accent. */

.hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 -1px;
  border-bottom: 1px solid var(--rule);
  padding: 0 clamp(0.5rem, 2vw, 1.25rem);
}
.hub-chip {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.85rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.hub-chip:hover { color: var(--ink); }
.hub-chip.is-active {
  color: var(--ink);
  border-bottom-color: var(--signal);
}
.hub-chip__count {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0 0.45em;
  font-size: 0.62rem;
  background: var(--rule);
  color: var(--color-text-muted);
  border-radius: 2px;
  vertical-align: 1px;
}
.hub-chip.is-active .hub-chip__count {
  background: var(--signal);
  color: #fff;
}

.hub-grid__thumb {
  margin: -0.5rem 0 0.85rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-soft, #f4f6fa);
}
.hub-grid__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease;
}
.hub-grid__cell:hover .hub-grid__thumb img { transform: scale(1.03); }

.hub-grid__cat {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-top: 0.15rem;
}

/* Hide cells filtered out by chip (JS toggles [hidden] which just sets display:none).
   Use display:none directly on data-attribute for graceful no-JS fallback. */
.hub-grid__cell[hidden] { display: none; }

/* Related-services rail — 4-up at desktop, 2-up tablet, 1-up mobile.
   Mono label, single-line desc, signal arrow. */
.hub-related {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 1px solid var(--rule);
}
.hub-related__inner { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.hub-related__title {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.hub-related__grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .hub-related__grid { grid-template-columns: repeat(2, 1fr); }
  .hub-related__grid > * { border-right: 1px solid var(--rule); }
  .hub-related__grid > *:nth-child(2n) { border-right: none; }
}
@media (min-width: 1024px) {
  .hub-related__grid { grid-template-columns: repeat(4, 1fr); }
  .hub-related__grid > * { border-right: 1px solid var(--rule); }
  .hub-related__grid > *:nth-child(2n) { border-right: 1px solid var(--rule); }
  .hub-related__grid > *:nth-child(4n) { border-right: none; }
}
.hub-related__card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background var(--t-fast);
  position: relative;
}
.hub-related__card:hover { background: var(--paper-soft, #f4f6fa); }
.hub-related__label {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.hub-related__desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.hub-related__arrow {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-family: var(--mono);
  color: var(--signal);
  transition: transform var(--t-fast);
}
.hub-related__card:hover .hub-related__arrow { transform: translateX(3px); }

/* FAQ accordion — engineering-blueprint vocabulary: mono ordinal, signal +/-,
   hairlines, no shadows, no rounded corners. Mirrors home FAQ styling but
   scoped under .hub-faq so it can co-exist with home version. */
.hub-faq {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 1px solid var(--rule);
}
.hub-faq__inner { padding: clamp(1.75rem, 3.5vw, 3rem) 0; }
.hub-faq__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.hub-faq__title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  max-width: 42ch;
}
.hub-faq__list { border-top: 1px solid var(--rule); }
.hub-faq__item { border-bottom: 1px solid var(--rule); }
.hub-faq__item summary {
  display: grid;
  grid-template-columns: 3rem 1fr 1.5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  transition: color var(--t-fast);
}
.hub-faq__item summary::-webkit-details-marker { display: none; }
.hub-faq__item summary:hover { color: var(--signal); }
.hub-faq__num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
.hub-faq__q {
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.hub-faq__toggle {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--signal);
  text-align: right;
  line-height: 1;
  transition: transform var(--t-fast);
}
.hub-faq__item[open] .hub-faq__toggle { transform: rotate(45deg); }
.hub-faq__a {
  padding: 0 0.25rem 1.25rem 4rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 70ch;
}
.hub-faq__a p { margin: 0; }

/* ── §page-refs — verifiable references block (sources / citations).
   Rendered after FAQ on article + product + service pages whose frontmatter
   declares `references:`. Hairlines and mono ordinals consistent with the rest
   of the site vocabulary. */
.page-refs {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  border-top: 1px solid var(--rule);
}
.page-refs__inner { padding: clamp(1.75rem, 3.5vw, 3rem) 0; max-width: 76ch; }
.page-refs__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.page-refs__title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  font-weight: 700;
  color: var(--ink);
}
.page-refs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pageref;
}
.page-refs__item {
  counter-increment: pageref;
  position: relative;
  padding: 0.75rem 0 0.75rem 2.75rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
}
.page-refs__item::before {
  content: "[" counter(pageref, decimal-leading-zero) "]";
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-text-faint);
}
.page-refs__item:last-child { border-bottom: 0; }
.page-refs__item a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .12s ease;
}
.page-refs__item a:hover { border-bottom-color: var(--color-primary); }
.page-refs__src {
  color: var(--color-text-faint);
  font-family: var(--mono);
  font-size: 0.78rem;
  margin-left: 0.35rem;
}

/* ── §explainer — scroll-driven 3D scene for /products/anatomi-pompa-sentrifugal/
   Contained scene: the 3D experience lives inside .x-experience as a sticky
   section in the page body, NOT a full-viewport takeover. Site header/nav/
   breadcrumb/footer stay in their default styling so the page reads as a
   normal PT Arsindo article with one immersive section.
   Static fallback (.x-static) is shown when JS is off, reduced-motion is set,
   or the device is low-power (hardwareConcurrency < 4) / lacks WebGL. */

:root {
  --signal-explainer: var(--color-primary);
  --signal-explainer-hover: var(--color-primary-light);
}

/* Experience wrapper. Two-cell grid that overlaps the sticky canvas with the
   stack of chapter sections. Cell height = 8 × 100svh (one per chapter). */
.x-experience {
  display: grid;
  grid-template-columns: 1fr;
  background: #0a1322;
  color: #f4f6fa;
  position: relative;
  margin: clamp(2rem, 5vw, 3.5rem) calc(50% - 50vw) clamp(2.5rem, 6vw, 4rem);
  width: 100vw;
}

/* Sticky canvas pinned to top of viewport while user scrolls through chapters. */
.x-stage {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  display: block;
  background: #0a1322;
  z-index: 1;
}
body.x-no-scene .x-stage { visibility: hidden; }

/* Chapter cards stacked over the sticky canvas. */
.x-chapters {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
body.x-no-scene .x-chapters { display: none; }

.x-chapter {
  height: 100svh;
  display: flex; align-items: center;
  padding: 0 7vw;
  pointer-events: none;
}
.x-chapter__inner {
  max-width: 420px;
  pointer-events: auto;
  background: rgba(10,19,34,.45);
  backdrop-filter: blur(6px);
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--signal-explainer);
}
.x-chapter--right { justify-content: flex-end; text-align: right; }
.x-chapter--right .x-chapter__inner { border-left: none; border-right: 2px solid var(--signal-explainer); }
.x-chapter--center { justify-content: center; text-align: center; }
.x-chapter--center .x-chapter__inner { max-width: 540px; border-left: none; border-top: 2px solid var(--signal-explainer); }
.x-chapter__num {
  font: 600 11px/1 var(--mono);
  letter-spacing: .25em;
  color: var(--signal-explainer);
  margin-bottom: 14px;
}
.x-chapter__title {
  font: 700 clamp(1.4rem, 2.8vw, 2rem)/1.15 'Inter', sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: #f4f6fa;
}
.x-chapter__title em { color: var(--signal-explainer); font-style: normal; }
.x-chapter__body {
  font: 400 14.5px/1.55 'Inter', sans-serif;
  color: rgba(255,255,255,.72);
  margin: 0;
}

/* Static fallback — used when scene can't run. Inline within page-body width. */
.x-static {
  display: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #0a1322;
  color: #f4f6fa;
  border: 1px solid var(--color-border);
}
body.x-no-scene .x-static { display: block; }
.x-static__lede {
  font-size: 1rem; line-height: 1.6;
  color: rgba(255,255,255,.78); margin: 0 0 1.5rem; max-width: 64ch;
}
.x-static__steps { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.x-static__step {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
}
.x-static__num {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em;
  color: var(--signal-explainer); text-transform: uppercase;
}
.x-static__step h3 { font-size: 1.05rem; margin: 0 0 0.4rem; color: #f4f6fa; }
.x-static__step p { margin: 0; color: rgba(255,255,255,.7); font-size: 0.93rem; line-height: 1.55; }
.x-static__step h3 em { color: var(--signal-explainer); font-style: normal; }

/* Progress bar — only visible inside the experience. Anchored bottom-right
   of viewport while .x-experience is in view (handled by JS via body.x-active). */
.x-progress {
  position: fixed; right: 24px; bottom: 24px; z-index: 10;
  width: 180px; pointer-events: none;
  opacity: 0; transition: opacity 220ms;
}
body.x-active .x-progress { opacity: 1; }
.x-progress__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 10px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(0,0,0,.6);
}
.x-progress__pct { color: var(--signal-explainer); }
.x-progress__bar { height: 2px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.x-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--signal-explainer); transition: width 60ms linear; }

.x-power {
  position: fixed; left: 24px; bottom: 24px; z-index: 10;
  appearance: none; border: 1px solid rgba(255,255,255,.32);
  background: rgba(10,19,34,.7); color: #f4f6fa;
  font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 16px; border-radius: 2px; cursor: pointer; backdrop-filter: blur(8px);
  transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-base);
  opacity: 0; pointer-events: none;
}
body.x-active .x-power.is-ready { opacity: 1; pointer-events: auto; }
.x-power:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }
.x-power.is-on { background: var(--signal-explainer); border-color: var(--signal-explainer); }
.x-power.is-on:hover { background: var(--signal-explainer-hover); border-color: var(--signal-explainer-hover); }

@media (max-width: 720px) {
  .x-chapter { padding: 0 5vw; }
  .x-chapter__inner { max-width: 90%; padding: 1rem 1.15rem; }
  .x-progress { width: 140px; right: 14px; bottom: 14px; }
  .x-power { left: 14px; bottom: 14px; padding: 10px 14px; }
}

/* Reduced-motion: no scroll-driven scene at all. Force static fallback. */
@media (prefers-reduced-motion: reduce) {
  .x-experience { display: none !important; }
  .x-progress, .x-power { display: none !important; }
  .x-static { display: block !important; }
}

/* ─── Photo gallery: hairline-bordered tile grid (used on /products/photo-gallery/)
   Restored 2026-05-03 after the legacy /products/products-photo-gallery/ tree
   was 410'd. Tiles inherit the same blueprint vocabulary as .hub-grid:
   no card shadows, hairline dividers, mono labels, signal-blue arrows. */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid > * { border-right: 1px solid var(--rule); }
  .gallery-grid > *:nth-child(2n) { border-right: none; }
}
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid > * { border-right: 1px solid var(--rule); }
  .gallery-grid > *:nth-child(2n) { border-right: 1px solid var(--rule); }
  .gallery-grid > *:nth-child(3n) { border-right: none; }
}
.gallery-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast);
}
.gallery-tile:hover { background: var(--paper-soft); }
.gallery-tile picture,
.gallery-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
  border: none;
  border-radius: 0;
  transition: transform var(--t-base);
}
.gallery-tile:hover img { transform: scale(1.03); }
.gallery-tile__label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 1rem clamp(1rem, 2vw, 1.25rem) 0.25rem;
  transition: color var(--t-fast);
}
.gallery-tile:hover .gallery-tile__label { color: var(--signal); }
.gallery-tile__sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 clamp(1rem, 2vw, 1.25rem) 1.25rem;
}
.gallery-tile::after {
  content: "→";
  position: absolute;
  bottom: 1rem;
  right: clamp(1rem, 2vw, 1.25rem);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--signal);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.gallery-tile:hover::after { opacity: 1; transform: translateX(0); }

/* Override .page-body wrapper constraint when gallery-grid is inside it —
   gallery wants full editorial width, not 76ch reading column. */
.page-body .gallery-grid { max-width: none; }

/* Print: cleaner article rendering */
@media print {
  body:not(.page-home) .site-header,
  body:not(.page-home) .cta,
  body:not(.page-home) .breadcrumb { display: none; }
  body:not(.page-home) .page-body { max-width: none; }
  body:not(.page-home) .page-body a {
    color: var(--ink);
    background: none;
    border-bottom: none;
  }
  body:not(.page-home) .page-body a::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 0.8em;
    color: var(--color-text-muted);
  }
}

/* ── §pontoon-explainer — scroll-driven 3D pontoon assembly scene
   Mounted inside body content of /products/dewatering-pontoon/ as
   <section class="pontoon-experience">. The .pontoon-experience__sticky
   wrapper sticks to the viewport; chapter cards scroll past on top of it. */

.pontoon-experience {
  position: relative;
  margin: clamp(2.5rem, 5vw, 4rem) 0;
  /* Section is taller than viewport so chapters can scroll past the sticky stage.
     Each chapter takes ~100vh; 8 chapters → 800vh. Trim a touch to allow exit. */
  min-height: 720vh;
  background: #0a1322;
  color: #f4f6fa;
  isolation: isolate;
  contain: layout paint;
  /* Break out of the 76ch reading column so the scene fills viewport width */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: clip;
}
.pontoon-experience__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.pontoon-experience__sticky #pontoon-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.pontoon-experience__sticky #pontoon-stage:active { cursor: grabbing; }

/* HUD overlays inside the sticky stage */
.pontoon-experience__title {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 10;
  font: 600 11px/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  pointer-events: none;
}
.pontoon-experience__title strong {
  display: block;
  color: #f4f6fa;
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.pontoon-experience__legend {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  top: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 10;
  font: 500 11px/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.55);
  text-align: right;
  pointer-events: none;
}
.pontoon-experience__progress {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 10;
  width: 200px;
  pointer-events: none;
}
.pontoon-experience__progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}
.pontoon-experience__pct { color: #d9a319; }
.pontoon-experience__bar {
  height: 2px;
  background: rgba(255,255,255,.14);
  position: relative;
  overflow: hidden;
}
.pontoon-experience__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #d9a319;
  transition: width 60ms linear;
}
.pontoon-experience__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  transform: translateX(-50%);
  z-index: 10;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  pointer-events: none;
  transition: opacity 300ms ease;
}
.pontoon-experience__hint::after {
  content: '↓';
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0;
  animation: pontoon-bob 1.6s ease-in-out infinite;
}
.pontoon-experience__hint.is-hidden { opacity: 0; }
@keyframes pontoon-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* Chapter cards — overlaid on top of the sticky stage. Each chapter is
   100vh tall; together they total 800vh (8 chapters). Negative top margin
   on the chapters wrapper pulls them up to overlap the sticky stage. */
.pontoon-experience__chapters {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
  pointer-events: none;
}
.pontoon-chapter {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem, 7vw, 6rem);
  pointer-events: none;
}
.pontoon-chapter__inner {
  max-width: 440px;
  background: rgba(10, 19, 34, 0.86);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  padding: 1.5rem 1.75rem;
  border-left: 2px solid #d9a319;
  pointer-events: auto;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.pontoon-chapter__num {
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.25em;
  color: #d9a319;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.pontoon-chapter__title {
  font: 700 clamp(1.35rem, 2.6vw, 2rem)/1.2 'Inter', sans-serif;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.pontoon-chapter__title em {
  color: #f3c456;
  font-style: normal;
}
.pontoon-chapter__body {
  font: 400 16px/1.6 'Inter', sans-serif;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.pontoon-chapter--right {
  justify-content: flex-end;
  text-align: right;
}
.pontoon-chapter--right .pontoon-chapter__inner {
  border-left: 0;
  border-right: 2px solid #d9a319;
}
.pontoon-chapter--center {
  justify-content: center;
  text-align: center;
}
.pontoon-chapter--center .pontoon-chapter__inner {
  max-width: 540px;
  border-left: 0;
  border-top: 2px solid #d9a319;
  text-align: center;
}

@media (max-width: 720px) {
  .pontoon-experience { min-height: 680vh; }
  .pontoon-experience__legend { display: none; }
  .pontoon-experience__progress { width: 130px; bottom: clamp(0.875rem, 2vw, 1.25rem); }
  .pontoon-experience__title { font-size: 10px; max-width: 60vw; }
  .pontoon-chapter { padding: 0 1.25rem; align-items: flex-end; }
  .pontoon-chapter__inner {
    max-width: 100%;
    width: 100%;
    margin-bottom: clamp(4.5rem, 14vh, 7rem);
    padding: 1.1rem 1.25rem;
    background: rgba(10, 19, 34, 0.92);
  }
  .pontoon-chapter__title { font-size: 1.25rem; }
  .pontoon-chapter__body { font-size: 14.5px; line-height: 1.55; }
  .pontoon-chapter--right { align-items: flex-end; }
  .pontoon-chapter--right .pontoon-chapter__inner { text-align: left; border-right: 0; border-left: 2px solid #d9a319; }
  .pontoon-chapter--center .pontoon-chapter__inner { text-align: left; border-top: 0; border-left: 2px solid #d9a319; }
}

@media (prefers-reduced-motion: reduce) {
  .pontoon-experience { min-height: auto; }
  .pontoon-experience__sticky { position: static; height: 80vh; }
  .pontoon-experience__chapters { margin-top: 0; }
  .pontoon-chapter { height: auto; padding: 1.5rem clamp(1.5rem, 7vw, 6rem); }
  .pontoon-experience__hint { display: none; }
}

/* ============================================================================
   §inner-edit-pass — bring non-home pages into engineering-blueprint vocabulary
   parity with home (CLAUDE.md §7). Closes the visual gap noted 2026-05-03:
   inner pages were reading as a different website. This pass adds:
     - Italic signal-blue last-word accent on .page-hero__title (matches home)
     - Editorial scale bump on photo hero h1 (closer to home's 7.5vw clamp)
     - Hairline-bordered motto strip below hero (mirrors home __meta row)
     - Mono section ordinals (№01/№02) before each .page-body > h2
     - Lead-paragraph treatment on first body p
     - Full-bleed end CTA with photo backdrop + diagonal scrim (mirrors .h-end)
   wire.php emits the new <em> in h1 and <p class="page-hero__motto">; this
   block does the styling. Home is untouched (selectors all gate page-home off).
   ========================================================================= */

/* Hero h1: italic signal accent on last word */
.page-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--signal-hover);
  letter-spacing: -0.01em;
}
/* On photo heroes the accent reads against the dark scrim — slightly brighter */
.page-hero--photo .page-hero__title em {
  color: var(--signal-hover);
  text-shadow: 0 1px 6px rgba(0,0,0,.30);
}

/* Hero scale: lift photo h1 closer to home's editorial-display scale.
   Was clamp(2.25rem, 6vw, 4.5rem); home uses clamp(2.5rem, 7.5vw, 5.5rem). */
.page-hero--photo .page-hero__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.038em;
  max-width: 16ch;
}

/* Hero height: lift to home parity. Was clamp(360px, 60vh, 640px) which capped
   at 60vh and read as a "small banner." Home uses clamp(560px, 92vh, 880px).
   Match it so inner heroes feel like the same site, not a stripped-down banner.

   Also break out of the parent .wrap (max-width: 1200px) so the photo runs
   edge-to-edge of the viewport — without this, wide screens render the hero
   inside the 1200px column with white gutters on both sides. The wrap's
   constraint was preserving comfortable line-length for body copy; we
   restore that on .page-hero__inner via its own max-width: 1200px. */
.page-hero--photo {
  min-height: clamp(560px, 92vh, 880px);
  padding: clamp(6rem, 14vh, 9rem) 0 clamp(3rem, 7vh, 5rem);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Motto strip: mono caption row on photo heroes only.
   Mirrors .h-hero__meta — hairline above, italic motto + meta spans. */
.page-hero--photo .page-hero__motto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.75rem;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  max-width: 60ch;
}
.page-hero--photo .page-hero__motto em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.78);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.page-hero--photo .page-hero__motto span { white-space: nowrap; }
@media (max-width: 600px) {
  .page-hero--photo .page-hero__motto span:last-child { display: none; }
}

/* Body section ordinals: №01/№02 mono before each H2 + hairline rule above.
   Skips the very first H2 since the hero already establishes a strong divider.
   Wraps inside .page-body so legal/article/info/contact pages all get rhythm. */
body:not(.page-home) .page-body {
  counter-reset: page-body-h2;
  max-width: min(72ch, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.5rem) clamp(0, 1vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
}
body:not(.page-home) .page-body > h2 {
  counter-increment: page-body-h2;
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  letter-spacing: -0.022em;
  line-height: 1.18;
  color: var(--ink);
  margin: clamp(2.75rem, 5vw, 3.75rem) 0 1rem;
  padding-top: clamp(2.25rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule);
  position: relative;
}
body:not(.page-home) .page-body > h2::before {
  content: "№ " counter(page-body-h2, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  margin-bottom: 0.875rem;
}
/* Legal pages already number their sections in body copy ("1. Data ...");
   suppress the auto ordinal there to avoid double numbering. */
body.page-legal .page-body > h2::before { content: none; }
body.page-legal .page-body > h2 { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
body:not(.page-home) .page-body > h2:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(0.5rem, 1vw, 1rem);
}
body:not(.page-home) .page-body > h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.625rem;
  color: var(--ink);
}

/* Lead paragraph: oversized first body paragraph for editorial feel */
body:not(.page-home) .page-body > p:first-of-type {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 64ch;
}
body:not(.page-home) .page-body > p,
body:not(.page-home) .page-body > ul,
body:not(.page-home) .page-body > ol {
  max-width: 64ch;
}

/* End CTA: full-bleed photo backdrop + diagonal scrim (mirrors home .h-end).
   Each .cta variant can override --cta-image and --cta-label. The base lives
   on body:not(.page-home) .cta so it composes on top of the existing dark-band
   styles defined earlier in §pages-redesign without conflicts. */
body:not(.page-home) .cta {
  --cta-image: url('/images/home-hero/home-hero-hero-1200.jpg');
  --cta-label: "Langkah berikutnya";
  position: relative;
  /* Break out of the parent .wrap (max-width 1200px) so the photo + scrim
     run edge-to-edge of the viewport, mirroring home's .h-end full-bleed. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(4rem, 9vw, 6.5rem);
  padding: clamp(4rem, 9vw, 6.5rem) 0;
  border-top: 0;
  overflow: hidden;
  isolation: isolate;
}
body:not(.page-home) .cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--cta-image) center / cover no-repeat;
  filter: grayscale(.3) brightness(.55) contrast(1.05);
  z-index: -2;
  transition: transform 1.2s ease;
}
body:not(.page-home) .cta::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(10,19,34,.92) 0%, rgba(10,19,34,.72) 50%, rgba(10,19,34,.55) 100%);
  z-index: -1;
}
body:not(.page-home) .cta__inner {
  position: relative;
  display: grid;
  gap: 1.25rem;
  max-width: min(60rem, calc(1200px - 5rem));
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}
body:not(.page-home) .cta__inner::before {
  content: var(--cta-label);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-hover);
  font-weight: 600;
  margin: 0;
}
body:not(.page-home) .cta__heading {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 22ch;
}
body:not(.page-home) .cta__sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.55;
}
body:not(.page-home) .cta__actions {
  margin-top: 0.75rem;
}

/* Per-CTA differentiation by purpose label */
body:not(.page-home) .cta--quote     { --cta-label: "Langkah berikutnya"; }
body:not(.page-home) .cta--rental    { --cta-label: "Sewa cepat"; }
body:not(.page-home) .cta--consult   { --cta-label: "Tim engineering"; }
body:not(.page-home) .cta--emergency { --cta-label: "Respons darurat"; }

/* Hub-grid kicker: lift to signal-blue (was muted gray) so the editorial
   ordinal+kicker treatment matches home's kapabilitas card kickers. */
.hub-grid__cat {
  color: var(--signal);
  font-weight: 600;
}

/* Hub-grid ordinal: tighten to match home's __num treatment more closely */
.hub-grid__num {
  color: var(--color-text-faint);
  font-weight: 500;
}

/* §downloads — generic PDF/file download list used on /about/, /products/<slug>/,
   /services/<slug>/. Hairline rows, mono meta, signal-blue hover.
   Used by .page-body .downloads (inside generated content blocks). */
.page-body .downloads {
  list-style: none;
  margin: var(--sp-3) 0 var(--sp-5);
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.page-body .downloads > li { border-bottom: 1px solid var(--color-border); margin: 0; }
.page-body .downloads a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) 0;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  padding-right: 2.25rem;
  transition: color .15s, background .15s, padding-left .15s;
}
.page-body .downloads a::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233b8ced' stroke-width='1.6' stroke-linecap='square'><path d='M8 2v9'/><path d='M4 7l4 4 4-4'/><path d='M2 14h12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .6;
  transition: opacity .15s, transform .15s;
}
.page-body .downloads a:hover {
  color: var(--color-primary);
  background: var(--color-surface);
  padding-left: .5rem;
}
.page-body .downloads a:hover::after { opacity: 1; transform: translateY(2px); }
.page-body .downloads__title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.page-body .downloads__meta {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: .01em;
}