/* ==========================================================
   Ampionic Design System — "Industrial Editorial"
   Built on Bootstrap 5 grid/utilities + bespoke components.
   ========================================================== */

:root {
  color-scheme: light;
  --ink: #15130f;
  --ink-2: #211d17;
  --paper: #faf7f1;
  --paper-2: #f1ead9;
  --line: #e6ddc9;
  --line-strong: #d7c7a4;
  --brand: #fa5e07;
  --brand-dark: #d94e00;
  --brand-soft: rgba(250, 94, 7, .12);
  --muted: #7d7566;
  --muted-2: #a89d8a;
  --font-display: 'Unbounded', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'Inter', 'Unbounded', sans-serif;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --shadow-soft: 0 16px 34px -20px rgba(21, 19, 15, .35);
}

* { box-sizing: border-box; }

html, body { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Safety net: no matter what overflows inside a flex/grid child on mobile,
     the page itself never grows sideways — any wide content (like tables)
     must scroll inside its own local wrapper instead of widening the body. */
  overflow-x: hidden;
  max-width: 100vw;
}

a { color: inherit; }

/* ---------------- Initial application loader ---------------- */
.app-loader { position: fixed; inset: 0; z-index: 100000; overflow: hidden; display: grid; place-items: center; padding: 1.5rem; background: var(--ink); color: #fff; opacity: 1; visibility: visible; transition: opacity .25s ease, visibility .25s ease; }
.app-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loader-grid { position: absolute; inset: 0; opacity: .28; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle at center, #000 10%, transparent 70%); }
.app-loader::before, .app-loader::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.app-loader::before { width: min(78vw, 760px); aspect-ratio: 1; border: 1px solid rgba(250,94,7,.26); animation: loader-orbit 5s linear infinite; }
.app-loader::after { width: min(50vw, 480px); aspect-ratio: 1; border: 1px dashed rgba(255,255,255,.14); animation: loader-orbit 10s linear infinite reverse; }
.app-loader-content { position: relative; z-index: 1; width: min(100%, 520px); text-align: center; }
.app-loader-mark { width: 72px; height: 72px; margin: 0 auto 1.6rem; border: 1px solid rgba(250,94,7,.55); border-radius: 22px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 15px; background: linear-gradient(145deg, rgba(250,94,7,.2), rgba(255,255,255,.03)); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.app-loader-mark span { display: block; width: 7px; border-radius: 999px; background: var(--brand); animation: loader-bars 1s ease-in-out infinite; }
.app-loader-mark span:nth-child(1) { height: 20px; animation-delay: -.2s; }
.app-loader-mark span:nth-child(2) { height: 34px; }
.app-loader-mark span:nth-child(3) { height: 14px; animation-delay: .2s; }
.app-loader-eyebrow, .app-loader-status { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.app-loader-eyebrow { color: #ffb27a; margin: 0 0 .85rem; }
.app-loader-title { font-family: var(--font-display); font-size: clamp(1.7rem, 6vw, 2.85rem); font-weight: 800; line-height: 1.15; margin: 0; }
.app-loader-copy { max-width: 420px; margin: 1rem auto 1.5rem; color: #c9c0b1; font-size: .9rem; line-height: 1.7; }
.app-loader-progress { width: min(100%, 330px); height: 4px; overflow: hidden; margin: 0 auto .8rem; border-radius: 999px; background: rgba(255,255,255,.12); }
.app-loader-progress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--brand), #ffb27a); animation: loader-progress 1.35s ease-in-out infinite; }
.app-loader-status { color: #a89d8a; margin: 0; font-size: .62rem; }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-bars { 50% { transform: translateY(-7px); opacity: .65; } }
@keyframes loader-progress { from { transform: translateX(-130%); } to { transform: translateX(330%); } }
@media (prefers-reduced-motion: reduce) { .app-loader::before, .app-loader::after, .app-loader-mark span, .app-loader-progress span { animation: none; } }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ---------------- Layout helpers ---------------- */
.bg-paper { background: var(--paper); }
.bg-tint { background: var(--paper-2); }
.bg-ink { background: var(--ink); color: #f4efe6; }
.bg-ink a { color: #fff; }
.text-brand { color: var(--brand) !important; }
.text-muted-2 { color: var(--muted-2); }
.border-top { border-top: 1px solid var(--line) !important; }
.border-bottom { border-bottom: 1px solid var(--line) !important; }
.border-white-10 { border-color: rgba(255,255,255,.1) !important; }

.section { padding: 5rem 0; }
.section-sm { padding: 3.25rem 0; }
/* Defer layout/paint work for sections below the first viewport. The browser
   keeps their intrinsic space while postponing expensive shadows, grids, and
   animation setup until the visitor scrolls near them. */
.section:not(.hero-band), .footer-brand-strip, .site-footer {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}
@media (max-width: 768px) {
  .section { padding: 3.25rem 0; }
  .section-sm { padding: 2.5rem 0; }
}

.display-headline {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.12;
}

.lede {
  font-family: var(--font-body);
  color: var(--muted);
  line-height: 1.75;
  font-size: .95rem;
}
.bg-ink .lede { color: #c9c0b1; }

.fw-lead-mono {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-dark);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.eyebrow.on-dark { color: #ffb27a; }

.mono-caption { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.mono-caption-dark { font-family: var(--font-mono); font-size: .7rem; color: #a89d8a; }

hr.rule { border: 0; border-top: 1px solid var(--line); }

/* ---------------- Buttons ---------------- */
.btn-brand, .btn-ink, .btn-outline {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
}
.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #000; color: #fff; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }
.bg-ink .btn-outline, .page-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.25); }
.page-hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm-pill { padding: .55rem 1rem; font-size: .65rem; min-height: 36px; }
.btn-brand:disabled, .btn-ink:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.link-more, .link-quote, .link-danger {
  background: none; border: none; padding: 0; font-family: var(--font-mono);
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
}
.link-more { color: var(--ink); }
.link-more:hover { color: var(--brand); }
.link-quote { color: var(--muted); }
.link-danger { color: #c8402a; }
.link-danger:hover { color: #9d2f1c; }

/* ---------------- Cards & chips ---------------- */
.card-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: all .22s ease; }
.card-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-3px); }

.tag-chip {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; padding: .3rem .65rem; border-radius: 999px; background: var(--paper-2); color: var(--ink);
}
.tag-chip.brand { background: var(--brand); color: #fff; }

.benefit-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.benefit-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------------- Watermark & ribbons ---------------- */
.watermark {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-weight: 800; color: transparent;
  -webkit-text-stroke: 1.5px rgba(21,19,15,.07); white-space: nowrap; pointer-events: none; user-select: none; z-index: 0;
}

/* The home "Spare Parts" treatment is intentionally a separate marquee rather
   than a static watermark: its continuous leftward motion makes the section
   feel alive while the translucent outlined lettering stays behind the content. */
.home-parts-marquee {
  position: absolute; inset: 0 0 auto; z-index: 0; overflow: hidden; height: clamp(4.4rem, 11vw, 7.6rem);
  display: flex; align-items: center; pointer-events: none; user-select: none;
  background: linear-gradient(90deg, rgba(250,247,241,.96), rgba(255,255,255,.32) 18%, rgba(255,255,255,.32) 82%, rgba(250,247,241,.96));
}
.home-parts-marquee-track {
  display: flex; align-items: center; flex: none; width: max-content; white-space: nowrap;
  will-change: transform; animation: home-parts-marquee-scroll 22s linear infinite;
}
.home-parts-marquee-track span:not(.home-parts-marquee-dot) {
  display: inline-block; margin-inline: clamp(1rem, 3vw, 2.8rem);
  font-family: var(--font-display); font-size: clamp(2.1rem, 7vw, 5.9rem); font-weight: 900;
  font-style: italic; letter-spacing: -.07em; line-height: .88; color: rgba(250,94,7,.08);
  -webkit-text-stroke: 1px rgba(21,19,15,.24); text-shadow: 2px 2px 0 rgba(250,94,7,.2);
}
.home-parts-marquee-dot { color: var(--brand); font-size: clamp(.9rem, 2.2vw, 1.4rem); opacity: .9; }
@keyframes home-parts-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .home-parts-marquee-track { animation: none; } }

/* Two angled marquee bands that cross each other in a true X pattern. Both strips
   share the exact same center point (top: 50%, translateY(-50%)) and are rotated in
   opposite directions, so they visually overlap/stack directly on top of one another
   at the crossing point instead of sitting as two separate parallel stripes. The wrap
   is tall enough (scales with viewport width) that the full diagonal excursion of
   each band stays inside the visible frame — no clipped gaps at the left/right edges,
   and the crossing point is always clearly visible with one band layered over the other. */
.ribbon-wrap { position: relative; overflow: hidden; height: clamp(190px, 24vw, 250px); }
.ribbon-strip {
  position: absolute; left: -25%; right: -25%; top: 50%; height: 74px;
  display: flex; align-items: center; box-shadow: 0 14px 30px -12px rgba(21,19,15,.55);
}
.ribbon-strip-ink { background: var(--ink); transform: translateY(-50%) rotate(-8deg); z-index: 2; }
.ribbon-strip-brand { background: var(--brand); transform: translateY(-50%) rotate(8deg); z-index: 3; box-shadow: 0 14px 30px -10px rgba(217,78,0,.55); }
.ribbon-track {
  display: flex; gap: 0; white-space: nowrap; font-family: var(--font-mono); font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: .9rem 0;
  animation: marquee 26s linear infinite; width: max-content; will-change: transform;
}
.ribbon-track > span { flex: 0 0 auto; }
/* Six identical text runs are rendered in each strip. Moving exactly one run
   (1/6 of the track) makes the reset frame visually identical, so the angled
   ribbons never reveal an empty section at the loop boundary. */
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-16.6666667%, 0, 0); } }
@media (max-width: 575px) {
  .ribbon-strip { height: 54px; }
  .ribbon-track { font-size: .64rem; }
}

/* ---------------- Hero ---------------- */
.hero-band { position: relative; overflow: hidden; }
.search-shell {
  display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .4rem .4rem .4rem 1rem; max-width: 440px;
}
.search-shell-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.search-shell-dark .search-input { color: #fff; }
.search-shell-dark .search-input::placeholder { color: rgba(255,255,255,.5); }
.search-icon { display: flex; color: var(--muted); flex: none; }
.search-input {
  border: none; outline: none; background: transparent; flex: 1; font-family: var(--font-mono);
  font-size: .82rem; padding: .5rem 0; min-width: 0;
}
.quick-suggest { font-size: .78rem; }
.quick-label { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; }
.badge-search-suggest {
  background: none; border: none; font-family: var(--font-mono); font-weight: 700; font-size: .72rem;
  color: var(--brand); cursor: pointer; padding: 0;
}
.badge-search-suggest:hover { text-decoration: underline; }

.call-chip {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem 1rem; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.call-chip:hover, .call-chip:focus-visible {
  border-color: var(--brand); box-shadow: 0 8px 16px -12px rgba(250,94,7,.7); transform: translateY(-1px); text-decoration: none;
}
.call-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.call-chip-label { font-family: var(--font-mono); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.call-chip-value { font-family: var(--font-mono); font-weight: 700; font-size: .82rem; color: var(--brand); }

.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-soft); height: 420px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Home hero artwork is presented as a matching editorial panel opposite the
   sourcing controls: a quiet technical frame gives the image the same visual
   weight as the text column without competing with the primary action. */
.hero-factory-illustration {
  position: relative;
  width: min(100%, 650px);
  min-height: 400px;
  margin: 0 auto;
  padding: .55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 22px 42px -30px rgba(21,19,15,.52);
}
.hero-factory-illustration::before,
.hero-factory-illustration::after {
  display: none;
}
.hero-factory-illustration .factory-svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 370px;
  object-fit: contain;
  filter: none;
}
@media (min-width: 992px) {
  .hero-factory-illustration { margin-left: auto; margin-right: .25rem; }
}
@media (max-width: 575px) {
  .hero-factory-illustration {
    width: min(100%, 390px);
    min-height: 270px;
    padding: .4rem;
    border-radius: 20px;
  }
  .hero-factory-illustration .factory-svg { height: 260px; }
}
.watch-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 118px; height: 118px;
  background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.watch-badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 12s linear infinite; }
.watch-badge-play {
  width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: 0 8px 20px rgba(250,94,7,.4);
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.gear-spin { animation: spin 40s linear infinite; }

/* ---------------- Split cards (services preview) ---------------- */
.split-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; height: 100%; min-height: 230px; }
.split-card-text { flex: 1; padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.split-card-text h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.split-card-text p { font-size: .8rem; color: var(--muted); line-height: 1.6; }
.split-card-media { flex: 1; background-size: cover; background-position: center; min-height: 180px; }
@media (max-width: 575px) { .split-card { flex-direction: column; } }

/* ---------------- FAQ accordion ---------------- */
.faq-accordion .accordion-item { background: transparent; border: none; border-bottom: 1px solid var(--line); }
.faq-accordion .accordion-button {
  background: transparent; box-shadow: none; padding: .95rem 0; font-family: var(--font-mono); font-weight: 700;
  font-size: .78rem; color: var(--ink); border: none;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--brand-dark); background: transparent; }
.faq-accordion .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.faq-accordion .accordion-body { padding: 0 0 1.1rem; font-size: .82rem; color: var(--muted); line-height: 1.7; }

.quote-block {
  font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.5rem; line-height: 1.45;
  margin: 1rem 0;
}

/* ---------------- Contact CTA ---------------- */
.contact-card { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-soft); }
.contact-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-bottom: .35rem; }
.contact-card-sub { font-size: .75rem; color: var(--muted); margin-bottom: 1.25rem; }

.legal-card-dark { z-index: 1; }
.legal-card-watermark {
  position: absolute; top: -18%; right: -12%; width: 190px; height: 190px;
  opacity: .07; filter: brightness(0) invert(1); pointer-events: none; user-select: none;
  transform: rotate(8deg); z-index: 0;
}
.legal-icon-badge {
  width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
  margin-bottom: .9rem; position: relative; z-index: 1;
}
.legal-icon-badge img { width: 22px; height: 22px; filter: brightness(0) invert(1); }

.legal-panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.5rem; }
.legal-panel-title { font-family: var(--font-mono); color: var(--brand); text-transform: uppercase; font-size: .72rem; font-weight: 700; margin-bottom: .75rem; }
.legal-panel-name { font-weight: 700; margin-bottom: .2rem; }
.legal-panel-line { font-size: .78rem; color: #c9c0b1; margin-bottom: .3rem; }
.legal-panel-contacts { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.1); }
.legal-panel-contacts a { color: var(--brand); text-decoration: none; }

.map-strip { height: 380px; border-top: 1px solid var(--line); }
.map-pin-card {
  position: absolute; left: 1.25rem; bottom: 1.25rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .9rem 1rem; box-shadow: var(--shadow-soft); max-width: 260px; z-index: 2;
}
.map-pin-card h5 { font-family: var(--font-mono); font-size: .8rem; font-weight: 700; margin-bottom: .25rem; }
.map-pin-card p { font-size: .72rem; color: var(--muted); margin-bottom: .6rem; }
@media (max-width: 575px) { .map-pin-card { display: none; } }

/* ---------------- Header & navigation ---------------- */
.topbar { background: var(--ink); color: #e7e0d3; font-size: .74rem; padding: .5rem 0; }
.topbar a, .topbar span { color: inherit; }
.topbar-item { display: inline-flex; align-items: center; gap: .4rem; }
.ai-badge {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand-dark); border: 1px solid rgba(250,94,7,.25); padding: .25rem .6rem; border-radius: 999px;
}

.site-nav { background: rgba(250, 247, 241, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1000; }
.site-nav .brand-logo { height: 38px; object-fit: contain; }
.nav-link-btn {
  text-decoration: none;
  background: none; border: none; font-family: var(--font-mono); font-weight: 700; font-size: .75rem;
  letter-spacing: .03em; text-transform: uppercase; padding: .5rem .85rem; border-radius: 999px; color: var(--ink);
  transition: all .15s ease; min-height: 40px;
}
.nav-link-btn:hover { color: var(--brand-dark); background: var(--brand-soft); }
.nav-link-btn.active { color: #fff; background: var(--ink); }
.mobile-toggle-btn { background: none; border: 1px solid var(--line-strong); border-radius: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }

/* Mobile off-canvas drawer */
#ampionic-mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--ink); color: #fff; z-index: 5000;
  transform: translateX(100%); transition: transform .3s ease; box-shadow: -20px 0 40px rgba(0,0,0,.25);
  display: flex; flex-direction: column; justify-content: space-between;
}
#ampionic-mobile-drawer.open { transform: translateX(0); }
.drawer-header { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; }
.drawer-close-btn { background: none; border: none; color: #cfc6b5; width: 40px; height: 40px; }
.drawer-links { padding: 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.mobile-route-btn { text-align: left; text-decoration: none; background: none; border: none; color: #d8cfbf; font-family: var(--font-mono); font-weight: 700; font-size: .82rem; padding: .85rem 1rem; border-radius: 10px; min-height: 44px; }
.mobile-route-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-route-btn.active { background: var(--brand); color: #fff; }
.drawer-footer { padding: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; color: #a89d8a; }

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero { background: var(--ink); color: #fff; padding: 4rem 0; text-align: center; }
.page-hero-split { text-align: left; }
.page-hero .lede { max-width: 560px; margin: 0 auto; }

.breadcrumb-bar { background: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.06); padding: .7rem 0; font-size: .78rem; color: #a89d8a; }
.breadcrumb-trail { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.breadcrumb-link {
  text-decoration: none;
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-mono); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #cfc6b5; min-height: 32px; display: inline-flex; align-items: center;
}
.breadcrumb-link:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb-current {
  font-family: var(--font-mono); font-weight: 700; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw;
}
.breadcrumb-sep { color: #5c5648; font-size: .68rem; }

/* ---------------- Filter bar (brands) ---------------- */
.filter-bar { background: var(--ink); padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.origin-filters { font-size: .78rem; }
.origin-pill {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  padding: .45rem .9rem; border-radius: 999px; background: rgba(255,255,255,.06); color: #cfc6b5; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.origin-pill.active, .origin-pill:hover { background: var(--brand); color: #fff; }

.brand-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; margin: .25rem 0 .3rem; }
.brand-card-desc { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.brand-card-cat { font-size: .76rem; color: var(--muted); line-height: 1.5; margin-bottom: .9rem; }
.brand-card-parts { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem; }
.part-chip { font-size: .62rem; font-family: var(--font-mono); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .12rem .4rem; }
.part-chip-more { font-size: .62rem; font-family: var(--font-mono); color: var(--muted-2); align-self: center; }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f8a53; display: inline-block; }

.empty-state { text-align: center; padding: 4rem 1.5rem; background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-state-icon { font-size: 2.25rem; }
.empty-state h3, .empty-state h4 { font-family: var(--font-display); font-weight: 700; margin: 1rem 0 .5rem; }
.empty-state p { font-size: .82rem; color: var(--muted); max-width: 360px; margin: 0 auto 1.25rem; }

/* ---------------- Brand detail ---------------- */
.spec-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 1.5rem; text-align: left; }
.spec-card h4 { font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: .85rem; letter-spacing: .05em; }
.spec-card div { font-family: var(--font-mono); font-size: .78rem; color: #d8cfbf; margin-bottom: .5rem; }
.spec-card div span { color: #8b8171; }

.section-heading-sm { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.part-row {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.part-row-index { font-family: var(--font-mono); font-size: .65rem; color: var(--brand-dark); text-transform: uppercase; font-weight: 700; }
.part-row-name { font-family: var(--font-display); font-size: .95rem; font-weight: 700; margin: .25rem 0; }
.part-row-note { font-size: .75rem; color: var(--muted); margin: 0; }
.notice-panel { background: #fef3c7; border: 1px solid #fde68a; color: #92400e; border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .8rem; line-height: 1.6; }

.rfq-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; position: sticky; top: 90px; }
.rfq-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; border-bottom: 1px solid var(--line); padding-bottom: .85rem; margin-bottom: 1rem; }
.rfq-card label { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }

.schema-console { background: var(--ink-2); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding: 1.25rem; }
.schema-console-head { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .75rem; margin-bottom: 1rem; font-family: var(--font-mono); font-size: .72rem; color: #a89d8a; }
.schema-console-head button { background: none; border: none; color: var(--brand); font-family: var(--font-mono); font-weight: 700; font-size: .72rem; cursor: pointer; }
#schema-debug-json { color: #cfc6b5; font-size: .68rem; line-height: 1.6; background: var(--ink); padding: 1rem; border-radius: 10px; max-height: 300px; overflow: auto; white-space: pre-wrap; }

/* ---------------- Services ---------------- */
.service-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; height: 100%; transition: all .2s ease; }
.service-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.service-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.service-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; color: var(--ink); }
.service-card p { font-size: .82rem; color: var(--muted); line-height: 1.6; }
.service-details { background: var(--paper-2); border-radius: 10px; padding: .9rem; font-size: .76rem; color: var(--muted); line-height: 1.6; margin-top: .75rem; }
.service-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.25rem; }
.service-toggle-btn { background: none; border: none; font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.service-toggle-btn:hover { color: var(--ink); }

.cta-banner { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* CTA banner variant that pairs the pitch copy with an inline contact form instead
   of (or alongside) a single button, so visitors can submit an inquiry right there. */
.cta-banner-with-form { align-items: stretch; gap: 2.5rem; }
.cta-banner-info { flex: 1 1 320px; max-width: 460px; display: flex; flex-direction: column; justify-content: center; }
.cta-banner-form-wrap { flex: 1 1 300px; max-width: 380px; width: 100%; }

/* Elevated glass-card wrapper for the inline CTA contact form: soft gradient sheen,
   icon+title header, icon-prefixed inputs, and a send button with a loading state. */
.cta-contact-card {
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: 0 20px 40px -22px rgba(0,0,0,.55); position: relative; overflow: hidden;
}
.cta-contact-card::before {
  content: ''; position: absolute; top: -40%; right: -30%; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250,94,7,.28), transparent 70%); pointer-events: none;
}
.cta-contact-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: 1.25rem; position: relative; z-index: 1; }
.cta-contact-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: 0 8px 18px -6px rgba(250,94,7,.6);
}
.cta-contact-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; margin: 0 0 .2rem; }
.cta-contact-subtitle { font-size: .74rem; color: #b7ad99; margin: 0; line-height: 1.5; }

.cta-contact-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .75rem; }
.cta-field { position: relative; }
.cta-field-icon {
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.4);
  font-size: .85rem; pointer-events: none; transition: color .15s ease;
}
.cta-field-textarea .cta-field-icon { top: 1rem; transform: none; }
.cta-field .form-control { padding-left: 2.35rem; }
.cta-field textarea.form-control { padding-top: .75rem; resize: none; }
.cta-field:focus-within .cta-field-icon { color: var(--brand); }

.cta-contact-form .form-control {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; border-radius: 12px;
}
.cta-contact-form .form-control::placeholder { color: rgba(255,255,255,.45); }
.cta-contact-form .form-control:focus { background: rgba(255,255,255,.11); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(250,94,7,.22); }

.cta-contact-submit { position: relative; margin-top: .35rem; gap: .55rem; box-shadow: 0 10px 24px -10px rgba(250,94,7,.55); }
.cta-contact-submit:hover { box-shadow: 0 12px 26px -8px rgba(250,94,7,.65); }
.cta-contact-submit-icon { font-size: .8rem; transition: transform .2s ease; }
.cta-contact-submit-icon .industrial-icon { display: block; }
.cta-contact-submit:hover .cta-contact-submit-icon { transform: translate(2px, -2px); }
.cta-contact-submit.is-loading { color: transparent; pointer-events: none; }
.cta-contact-submit.is-loading .cta-contact-submit-label,
.cta-contact-submit.is-loading .cta-contact-submit-icon { opacity: 0; }
.cta-contact-submit.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite;
}
.cta-contact-privacy {
  display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: #a89d8a; margin: .5rem 0 0; line-height: 1.4;
}
.cta-contact-privacy i { color: #6fbf8a; font-size: .78rem; }
.cta-contact-privacy .industrial-icon { color: #6fbf8a; }
@media (max-width: 575px) { .cta-contact-card { padding: 1.25rem; } }

/* ---------------- Blog ---------------- */
.blog-article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 768px) { .blog-article { flex-direction: row; } }
.blog-cover { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; min-height: 180px; }
@media (min-width: 768px) { .blog-cover { width: 34%; flex: none; } }
.blog-body { padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.blog-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: .5rem 0 .75rem; }
.blog-excerpt { font-size: .84rem; color: var(--muted); line-height: 1.65; margin-bottom: 1.25rem; }
.blog-content-box { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; font-size: .78rem; color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }

/* ---------------- Forms ---------------- */
.form-control, .form-select, textarea.form-control {
  border-radius: 10px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: .82rem;
  padding: .7rem .9rem; min-height: 44px;
}
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
label { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }

/* ---------------- CMS ---------------- */
.cms-tabs { background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 64px; z-index: 900; }
.cms-nav-btn {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .65rem 1.1rem; border-radius: 10px; background: rgba(255,255,255,.06); color: #cfc6b5; border: none; white-space: nowrap;
}
.cms-nav-btn.active { background: var(--brand); color: #fff; }
.cms-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; }
.cms-panel-dark { background: var(--ink); color: #fff; border-color: rgba(255,255,255,.08); }
.cms-panel-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: .35rem; display: flex; align-items: center; gap: .5rem; }
.cms-panel-sub { font-size: .78rem; color: var(--muted); margin-bottom: 1.25rem; }
.cms-panel-sub-dark { font-size: .76rem; color: #a89d8a; }

.console-block { background: var(--ink); border-radius: var(--radius); padding: 1rem; }
.console-block-head { display: flex; justify-content: space-between; color: #a89d8a; font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .5rem; margin-bottom: .75rem; }
.console-block-body { color: #d1f5e0; font-family: var(--font-mono); font-size: .75rem; line-height: 1.7; max-height: 220px; overflow-y: auto; }
.console-block-body li { margin-left: 1.1rem; }

.crawler-logs { max-height: 320px; overflow-y: auto; padding-right: .25rem; }
.crawler-logs-empty { text-align: center; padding: 2.5rem 1rem; color: #a89d8a; font-family: var(--font-mono); font-size: .72rem; }
.crawler-log-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: .75rem; font-family: var(--font-mono); font-size: .68rem; margin-bottom: .6rem; color: #cfc6b5; }
.crawler-log-item-head { display: flex; justify-content: space-between; color: #a89d8a; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .4rem; margin-bottom: .4rem; }
.crawler-log-item-head span:first-child { color: var(--brand); font-weight: 700; }
.crawler-log-item span:first-child { color: #8b8171; }
.crawler-log-item em { font-style: normal; }
.crawler-log-item em.ok { color: #34d399; }
.crawler-log-item em.link { color: #60a5fa; }
.crawler-log-item em.hl { color: #c084fc; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; display: inline-block; margin-right: .35rem; animation: pulse-scale 1.4s ease-in-out infinite; }
@keyframes pulse-scale { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.ticket-row { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.ticket-id { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; }
.ticket-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: .4rem 0 .1rem; }
.ticket-email { font-size: .74rem; color: var(--muted); font-family: var(--font-mono); }
.ticket-body { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .75rem; font-size: .76rem; color: var(--ink); margin-top: .6rem; max-width: 460px; white-space: pre-wrap; }

.spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }

/* ---------------- Icons ---------------- */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 30px; height: 30px; }
.industrial-icon {
  display: block; flex: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-width: 1.65; vector-effect: non-scaling-stroke;
}

/* ---------------- Toast ---------------- */
.app-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; max-width: min(360px, 90vw);
  background: var(--ink); color: #fff; border: 1px solid rgba(250,94,7,.35); border-radius: 14px;
  padding: .9rem 1.1rem; box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: .65rem;
  font-size: .82rem; opacity: 1; transform: translateY(0); transition: opacity .3s ease, transform .3s ease;
}
.app-toast.error { border-color: rgba(200,64,42,.4); background: #2a1512; }
.app-toast.hide { opacity: 0; transform: translateY(8px); }

/* ---------------- Footer ---------------- */
.footer-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--radius); padding: .6rem 1rem;
}
.footer-logo-badge img { display: block; }
.site-footer { background: var(--ink); color: #cfc6b5; }
.site-footer h4 { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .6rem; margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .82rem; }
.site-footer ul.bullet-list { padding-left: 1.1rem; }
.site-footer ul.bullet-list li { list-style: disc; color: #cfc6b5; }
.footer-nav-btn { background: none; border: none; color: #cfc6b5; padding: 0; font-family: var(--font-body); }
.footer-nav-btn:hover { color: var(--brand); }
.footer-link-btn { display: inline; text-align: left; font-size: inherit; cursor: pointer; }
.footer-brand-strip { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.footer-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .35rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.footer-brand-strip .brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  opacity: .55;
  letter-spacing: .02em;
  font-size: .95rem;
  transition: color .16s ease, opacity .16s ease;
}
.footer-brand-link:hover,
.footer-brand-link:focus-visible {
  background: var(--brand-soft);
  transform: translateY(-2px);
  box-shadow: 0 7px 16px -12px rgba(250,94,7,.8);
}
.footer-brand-link:hover .brand-word,
.footer-brand-link:focus-visible .brand-word {
  color: var(--brand-dark);
  opacity: 1;
}
.footer-brand-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.footer-legal-btn { cursor: pointer; font-size: inherit; }
.footer-archive-btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 42px; padding: .55rem .85rem;
  border: 1px solid rgba(250,94,7,.52); border-radius: 999px; background: rgba(250,94,7,.1); color: #ffb27a;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.footer-archive-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }
.footer-archive-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.footer-archive-btn:disabled { cursor: wait; opacity: .72; transform: none; }
.footer-archive-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: currentColor; color: var(--ink); font-size: 1rem; line-height: 1; }
.footer-archive-btn:hover .footer-archive-icon { color: var(--brand); background: #fff; }

/* ---------------- Legal pages ---------------- */
.legal-article { max-width: 840px; }
.legal-meta {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font-family: var(--font-mono); font-size: .67rem; text-transform: uppercase; letter-spacing: .04em;
}
.legal-meta .industrial-icon { color: var(--brand-dark); }
.legal-section {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 1rem; padding: 1.55rem 0;
  border-top: 1px solid var(--line);
}
.legal-section-number {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark);
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
}
.legal-section h2 {
  font-family: var(--font-display); font-size: 1.03rem; font-weight: 700; color: var(--ink);
  margin: .35rem 0 .6rem;
}
.legal-section .lede { margin: 0; font-size: .88rem; }
.legal-contact-panel { margin-bottom: 0; }
.legal-contact-panel h2 { font-family: var(--font-display); font-size: 1.02rem; margin: 0 0 .45rem; color: #fff; }
@media (max-width: 575px) {
  .legal-section { grid-template-columns: 34px minmax(0, 1fr); gap: .75rem; padding: 1.2rem 0; }
  .legal-section h2 { font-size: .92rem; }
}

/* ---------------- Animations ---------------- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn .5s cubic-bezier(.16,1,.3,1) both; }
.animate-fade-in-delayed { animation: fadeIn .6s cubic-bezier(.16,1,.3,1) .12s both; }

#ampionic-views-container { transition: opacity .2s ease-in-out; }

/* The application shell stays completely out of the first frame. main.js reveals
   it only after the initial route, fonts, and visible media have had a chance to
   settle behind the branded loading screen. */
body.app-loading > .d-flex { opacity: 0; }
body.app-ready > .d-flex { opacity: 1; transition: opacity .32s ease; }
@media (prefers-reduced-motion: reduce) {
  body.app-ready > .d-flex { transition: none; }
}

pre { white-space: pre-wrap !important; }

/* ---------------- Long-form editorial content blocks ---------------- */
.content-article { max-width: 760px; }
.content-article h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink);
  margin-top: 2rem; margin-bottom: .75rem;
}
.content-article h3:first-of-type { margin-top: 1.25rem; }
.content-article p.lede { margin-bottom: 1rem; font-size: .92rem; }
.content-article .article-lead { font-size: 1rem; color: var(--ink); font-weight: 500; }
.content-article .article-closing { padding-top: 1rem; border-top: 1px solid var(--line); font-style: normal; }

.blog-content-box p { margin-bottom: .85rem; }
.blog-content-box p:last-child { margin-bottom: 0; }

/* ---------------- Numbered process step cards ---------------- */
.step-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
  transition: all .2s ease;
}
.step-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.step-card-num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-family: var(--font-mono);
  font-weight: 700; font-size: .85rem; margin-bottom: 1rem;
}
.step-card-num .industrial-icon { color: var(--brand-dark); }
.step-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: .5rem; color: var(--ink); }
.step-card p { font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------------- Article section cards (breaks long-form copy into blocks) ---------------- */
.article-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin: 1.5rem 0 2rem;
}
@media (max-width: 767px) {
  .article-section-grid { grid-template-columns: 1fr; }
}
.article-section-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: all .2s ease;
}
.article-section-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.article-section-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft);
  font-size: 1.3rem; margin-bottom: .9rem;
}
.article-section-icon .industrial-icon { color: var(--brand-dark); }
.article-section-card h3 { font-size: 1rem; margin-top: 0; margin-bottom: .6rem; }
.article-section-card p.lede { font-size: .84rem; margin: 0; }

/* About value cards are deliberately presented one at a time. This gives each
   proof point more breathing room than a dense grid while retaining the same
   visual language as the editorial cards around it. */
.about-values-carousel {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(145deg, #fff, var(--paper-2));
  box-shadow: 0 18px 36px -30px rgba(21,19,15,.38);
  outline: none;
}
.about-values-carousel:focus-visible { outline: 3px solid rgba(250,94,7,.4); outline-offset: 4px; }
.about-values-carousel-track { position: relative; min-height: 278px; }
.about-values-slide {
  display: none;
  min-height: 278px;
  padding: clamp(1.45rem, 4vw, 2.5rem);
  border-radius: calc(var(--radius-lg) - 3px);
  background:
    radial-gradient(circle at 92% 12%, rgba(250,94,7,.13), transparent 20%),
    var(--paper-2);
  animation: about-value-slide-in .45s cubic-bezier(.16,1,.3,1) both;
}
.about-values-slide.is-active { display: block; }
.about-values-slide .article-section-icon { margin-bottom: 1.15rem; }
.about-values-slide h3 { max-width: 620px; font-size: clamp(1.1rem, 2.5vw, 1.5rem); margin: 0 0 .8rem; }
.about-values-slide p.lede { max-width: 680px; margin: 0; font-size: .93rem; }
.about-values-index { position: absolute; right: 1.5rem; bottom: 1.4rem; color: var(--brand-dark); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .09em; }
.about-values-footer { display: flex; align-items: center; gap: .8rem; padding: .65rem .7rem .35rem; }
.about-values-progress { flex: 1; height: 4px; overflow: hidden; border-radius: 999px; background: var(--line); }
.about-values-progress span { display: block; width: var(--about-carousel-progress, 25%); height: 100%; border-radius: inherit; background: var(--brand); transition: width .35s ease; }
.about-values-nav-btn {
  width: 42px; height: 42px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.about-values-nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }
.about-values-nav-btn:focus-visible { outline: 3px solid rgba(250,94,7,.38); outline-offset: 3px; }
@keyframes about-value-slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575px) {
  .about-values-carousel-track, .about-values-slide { min-height: 300px; }
  .about-values-slide { padding: 1.35rem 1.2rem 2.8rem; }
  .about-values-slide p.lede { font-size: .86rem; }
  .about-values-index { right: 1.2rem; bottom: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .about-values-slide { animation: none; } }

.article-highlight {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 1.25rem 1.5rem; margin: 1.5rem 0 2rem;
}
.article-highlight-icon { font-size: 1.5rem; flex: none; line-height: 1; }
.article-highlight p { color: #e7dfd0; font-size: .88rem; line-height: 1.7; }

.related-links {
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
}
.related-links-label {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 700; text-transform: uppercase;
  color: var(--muted); letter-spacing: .06em; white-space: nowrap;
}
.related-links-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.related-link-btn {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; transition: all .15s ease;
}
.related-link-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.bg-tint .related-link-btn { background: var(--paper); }

/* ---------------- Service cards as clickable buttons (catalog page) ---------------- */
.service-card-clickable { border: 1px solid var(--line); cursor: pointer; }
.service-card-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.service-card-clickable .service-toggle-btn { pointer-events: none; }

/* ---------------- Service hero (landing page) ---------------- */
.service-hero-icon {
  width: 56px; height: 56px; border-radius: 16px; background: rgba(250,94,7,.16); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.service-stat-chip {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm);
  padding: 1rem; height: 100%; transition: background .2s ease, transform .2s ease;
}
.service-stat-chip:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); }
.service-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: #fff; line-height: 1.1; }
.service-stat-label { font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .04em; color: #b7ad99; margin-top: .35rem; }

/* ---------------- Service editorial introductions ---------------- */
.service-overview-shell, .service-catalog-intro { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.35fr) minmax(210px, .8fr); gap: 1.5rem; align-items: stretch; max-width: 1120px; margin: 0 auto; }
.service-overview-heading, .service-catalog-intro-heading { padding: 1.5rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); }
.service-overview-heading .display-headline, .service-catalog-intro-heading .display-headline { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.service-overview-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 1.1rem; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid rgba(250,94,7,.16); border-radius: 14px; }
.service-overview-copy { padding: .55rem .25rem; }
.service-overview-lead { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.5; color: var(--ink); margin: 0 0 1.25rem; }
.service-overview-reading { border-left: 2px solid var(--brand); padding-left: 1.1rem; }
.service-overview-label { display: block; margin-bottom: .6rem; color: var(--brand-dark); font-family: var(--font-mono); font-weight: 700; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.service-overview-reading p, .service-overview-promise p, .service-catalog-intro-copy { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.service-overview-reading p { margin: 0 0 .8rem; }
.service-overview-reading p:last-child { margin-bottom: 0; }
.service-overview-promise { align-self: start; padding: 1.35rem; background: var(--ink); border-radius: var(--radius); position: relative; overflow: hidden; }
.service-overview-promise::after { content: ''; position: absolute; right: -44px; bottom: -44px; width: 130px; height: 130px; border: 1px solid rgba(250,94,7,.4); border-radius: 50%; }
.service-overview-promise .service-overview-label { color: #ffb27a; position: relative; z-index: 1; }
.service-overview-promise p { position: relative; z-index: 1; color: #e7dfd0; margin: 0; }
.service-catalog-intro { grid-template-columns: minmax(220px, .75fr) minmax(0, 1.6fr); align-items: center; }
.service-catalog-intro-copy { padding: .75rem .25rem; font-size: .96rem; }
@media (max-width: 991px) { .service-overview-shell { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr); } .service-overview-promise { grid-column: 1 / -1; } .service-catalog-intro { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.3fr); } }
@media (max-width: 575px) { .service-overview-shell, .service-catalog-intro { grid-template-columns: 1fr; gap: 1rem; } .service-overview-copy, .service-catalog-intro-copy { padding: .2rem .1rem; } .service-overview-promise { grid-column: auto; } }

/* ---------------- Service tier comparison table ---------------- */
/* overflow-x (not "overflow: hidden") so the table can scroll sideways on narrow
   screens instead of squashing columns or getting clipped; rounded corners still
   clip correctly since the radius + overflow-x combination masks the x-axis. */
.service-compare-table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  width: 100%; max-width: 100%;
}
.service-compare-table { margin-bottom: 0; width: max(100%, 760px); min-width: 760px; }

/* A single, native scrolling surface for every wide table. These declarations are
   intentionally more specific than Bootstrap's .table-responsive so iOS/Safari
   cannot clip the right-hand columns or hand the swipe gesture to the page. */
.table-scroll-region,
.service-compare-table-wrap,
.seo-table-wrap {
  position: relative;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--paper-2);
}
.table-scroll-region::-webkit-scrollbar,
.service-compare-table-wrap::-webkit-scrollbar,
.seo-table-wrap::-webkit-scrollbar { height: 10px; }
.table-scroll-region::-webkit-scrollbar-thumb,
.service-compare-table-wrap::-webkit-scrollbar-thumb,
.seo-table-wrap::-webkit-scrollbar-thumb { background: var(--brand); border: 2px solid var(--paper-2); border-radius: 999px; }
.table-scroll-region:focus-visible { outline: 3px solid rgba(250,94,7,.35); outline-offset: 3px; }
.table-scroll-region.has-horizontal-overflow:not(.is-at-end)::after {
  content: ''; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 42px;
  pointer-events: none; background: linear-gradient(90deg, transparent, rgba(250,247,241,.97));
}
.table-scroll-hint {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .65rem;
  color: var(--brand-dark); font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.table-scroll-hint .industrial-icon { animation: table-swipe-nudge 1.6s ease-in-out infinite; }
@keyframes table-swipe-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (min-width: 992px) { .table-scroll-hint { display: none; } }

/* Any Bootstrap grid column that hosts a horizontally-scrollable table must be
   allowed to shrink below its content's intrinsic width — flex items default to
   min-width: auto, which (in some mobile browsers) lets a wide table push the
   whole column wider instead of scrolling inside its own .table-responsive
   wrapper. min-width: 0 forces the overflow to stay contained where intended. */
.table-scroll-col { min-width: 0; }
.table-responsive { min-width: 0; }
.service-compare-table thead th {
  background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; padding: .9rem 1rem; border: none; white-space: nowrap;
}
.service-compare-table tbody th {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--ink); padding: .85rem 1rem;
  border-color: var(--line); white-space: nowrap;
}
.service-compare-table tbody td { font-size: .78rem; color: var(--muted); padding: .85rem 1rem; border-color: var(--line); }
.service-compare-table tbody td.cell-priority { color: var(--brand-dark); font-weight: 700; background: var(--brand-soft); }
.service-compare-table tbody tr:last-child th, .service-compare-table tbody tr:last-child td { border-bottom: none; }

/* ---------------- Animated impact bar chart ---------------- */
.bar-chart { display: flex; flex-direction: column; gap: 1.1rem; }
.bar-chart-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.bar-chart-label { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--ink); }
.bar-chart-value { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--brand-dark); }
.bar-chart-track { width: 100%; height: 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar-chart-fill {
  width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  transition: width 1.1s cubic-bezier(.16,1,.3,1);
}

/* ---------------- Reusable services carousel ---------------- */
.service-carousel { position: relative; }
.service-carousel-viewport { overflow: hidden; }
.service-carousel-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem;
  scrollbar-width: none;
}
.service-carousel-track::-webkit-scrollbar { display: none; }
.service-carousel-card {
  scroll-snap-align: start; flex: 0 0 auto; width: min(260px, 78vw); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.35rem; text-align: left; cursor: pointer; display: flex; flex-direction: column;
  gap: .6rem; transition: all .2s ease;
}
.service-carousel-card:hover { border-color: var(--brand); box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.service-carousel-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.service-carousel-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); }
.service-carousel-desc { font-size: .74rem; color: var(--muted); line-height: 1.55; }
.service-carousel-link { font-family: var(--font-mono); font-size: .66rem; font-weight: 700; text-transform: uppercase; color: var(--brand-dark); margin-top: auto; }
.service-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.service-carousel-nav-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: all .15s ease;
}
.service-carousel-nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.service-carousel-dots { display: flex; align-items: center; gap: .4rem; }
.service-carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: all .2s ease; }
.service-carousel-dot.active { background: var(--brand); width: 20px; border-radius: 999px; }
.brand-carousel-initial { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }

/* ---------------- Interactive scenario tabs (brand maintenance section) ---------------- */
.scenario-tabs { }
.scenario-tab-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.scenario-tab-btn {
  display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .6rem 1.1rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; color: var(--muted); cursor: pointer; transition: all .15s ease; min-height: 44px;
}
.scenario-tab-btn:hover { border-color: var(--brand); color: var(--ink); }
.scenario-tab-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.scenario-tab-num { font-family: var(--font-mono); font-size: .68rem; opacity: .7; }
.scenario-tab-panels { position: relative; }
.scenario-tab-panel {
  display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; animation: fadeIn .35s ease;
}
.scenario-tab-panel.active { display: block; }
.scenario-tab-panel p { font-size: .88rem; color: var(--muted); line-height: 1.75; margin: 0; }

/* ---------------- CMS: Static Pages & Sitemap tab ---------------- */
.seo-subpanel-title { font-size: 1.05rem; margin-bottom: 1rem; }
.seo-stat-chip {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; height: 100%; justify-content: center;
}
.seo-stat-value { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); line-height: 1.15; }
.seo-stat-value-sm { font-size: .92rem; }
.seo-stat-label { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.seo-info-note { font-size: .76rem; color: var(--muted); margin: 0; display: flex; align-items: flex-start; gap: .5rem; line-height: 1.55; }
.seo-info-note i { color: var(--brand-dark); margin-top: .15rem; }
.seo-info-note .industrial-icon { color: var(--brand-dark); margin-top: .15rem; }

.seo-sitemap-pre {
  color: #d1f5e0; font-family: var(--font-mono); font-size: .68rem; line-height: 1.6;
  max-height: 360px; overflow: auto; margin: 0; white-space: pre-wrap;
}
.seo-page-preview-frame-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.seo-page-preview-frame { width: 100%; height: 320px; border: none; display: block; background: #fff; }

.seo-table-wrap { max-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); }
.seo-pages-table { width: max(100%, 760px); min-width: 760px; }
.seo-pages-table thead th {
  background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; padding: .75rem .9rem; border: none; white-space: nowrap; position: sticky; top: 0;
}
.seo-pages-table tbody td { font-size: .74rem; color: var(--muted); padding: .65rem .9rem; border-color: var(--line); vertical-align: middle; }
.seo-pages-table tbody td.mono-caption { color: var(--ink); font-weight: 700; white-space: nowrap; }
.seo-pages-table tbody tr:last-child td { border-bottom: none; }

.cms-hostinger-publish { position: relative; overflow: hidden; }
.cms-hostinger-publish::after {
  content: ''; position: absolute; width: 220px; height: 220px; right: -105px; top: -110px; border-radius: 50%;
  border: 1px solid rgba(250,94,7,.2); box-shadow: 0 0 0 24px rgba(250,94,7,.035), 0 0 0 48px rgba(250,94,7,.02);
  pointer-events: none;
}
.cms-hostinger-publish > * { position: relative; z-index: 1; }
.hostinger-ready-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: .45rem .75rem; border-radius: 999px;
  background: #e4f5ea; color: #17613a; font-family: var(--font-mono); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.hostinger-install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.hostinger-install-step { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: .85rem; display: flex; gap: .7rem; align-items: flex-start; }
.hostinger-install-step span { color: var(--brand-dark); font-family: var(--font-mono); font-size: .65rem; font-weight: 700; }
.hostinger-install-step p { color: var(--muted); font-size: .72rem; line-height: 1.55; margin: 0; }
.hostinger-install-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.hostinger-install-actions .mono-caption { max-width: 560px; line-height: 1.5; }
.hostinger-publish-form { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(180px, .65fr); gap: 1rem; align-items: start; padding: 1rem; background: var(--ink); border-radius: var(--radius); }
.hostinger-publish-form label { color: #d8cfbf; }
.hostinger-publish-form .form-control { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
.hostinger-publish-form .form-control:focus { background: rgba(255,255,255,.11); }
.hostinger-publish-action { padding-top: 1.18rem; }
.hostinger-field-note { margin: .45rem 0 0; color: #a89d8a; font-size: .66rem; line-height: 1.45; }
.hostinger-publish-status { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; font-size: .76rem; line-height: 1.5; }
.hostinger-publish-status.loading { display: block; background: var(--brand-soft); border: 1px solid rgba(250,94,7,.24); color: #93410b; }
.hostinger-publish-status.success { display: block; background: #e4f5ea; border: 1px solid #b8e1c7; color: #17613a; }
.hostinger-publish-status.error { display: block; background: #fff0ed; border: 1px solid #f3c2b8; color: #9d2f1c; }
@media (max-width: 991px) { .hostinger-publish-form { grid-template-columns: 1fr 1fr; } .hostinger-publish-action { grid-column: 1 / -1; padding-top: 0; } }
@media (max-width: 575px) { .hostinger-install-grid, .hostinger-publish-form { grid-template-columns: 1fr; } .hostinger-publish-action { grid-column: auto; } }

/* ---------------- CMS: password gate (hidden admin console entry) ---------------- */
.cms-auth-wrap {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  padding: 3rem 1.25rem; background: var(--ink);
}
.cms-auth-card {
  width: 100%; max-width: 400px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: 2.25rem 1.9rem; text-align: center; box-shadow: var(--shadow-soft);
}
.cms-auth-icon {
  width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.1rem;
}
.cms-auth-card .eyebrow { justify-content: center; }
.cms-auth-card .display-headline { color: #fff; }
.cms-auth-card .lede { color: #b7ad99; }
.cms-auth-input {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; text-align: center;
  letter-spacing: .05em;
}
.cms-auth-input::placeholder { color: rgba(255,255,255,.4); }
.cms-auth-input:focus { background: rgba(255,255,255,.1); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(250,94,7,.22); }
.cms-auth-error {
  margin-top: .75rem; font-size: .74rem; color: #ff9d85; background: rgba(200,64,42,.14);
  border: 1px solid rgba(200,64,42,.35); border-radius: 10px; padding: .55rem .8rem; text-align: left;
  display: flex; align-items: center; gap: .5rem;
}
.cms-auth-error::before { content: '⚠'; flex: none; }

/* ---------------- About: scroll-led sourcing journey ---------------- */
.about-process-section {
  --about-rail-progress: 0;
  padding: 5.5rem 0 6rem;
  color: #fff;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 12% 18%, rgba(250,94,7,.26), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.075), transparent 25%),
    var(--ink);
}
.about-process-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.about-process-section .container { position: relative; z-index: 1; }
.about-process-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: 1080px; margin: 0 auto 3rem; }
.about-process-heading .eyebrow { color: #ffb27a; }
.about-process-heading .display-headline { max-width: 620px; color: #fff; font-size: clamp(1.55rem, 3.6vw, 2.45rem); }
.about-process-heading .lede { max-width: 350px; color: #c9c0b1; font-size: .88rem; }
.about-process-journey { position: relative; max-width: 1120px; min-height: 350px; margin: 0 auto; }
.about-process-rail {
  position: absolute; top: 52%; left: 6%; right: 6%; height: 1px; overflow: visible;
  background: rgba(255,255,255,.16); transform: translateY(-50%);
}
.about-process-rail::before, .about-process-rail::after {
  content: ''; position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translateY(-50%);
}
.about-process-rail::before { left: -4px; background: var(--brand); box-shadow: 0 0 0 7px rgba(250,94,7,.15); }
.about-process-rail::after { right: -4px; border: 1px solid rgba(255,255,255,.5); background: var(--ink); }
.about-process-rail span {
  display: block; width: 100%; height: 3px; transform-origin: left center; transform: scaleX(var(--about-rail-progress));
  background: linear-gradient(90deg, var(--brand), #ffb27a); box-shadow: 0 0 18px rgba(250,94,7,.65); transition: transform .08s linear;
}
.about-process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; padding: 0; margin: 0; list-style: none; }
.about-process-step {
  --about-x: 0px; --about-y: 0px; --about-turn: 0deg; --about-scale: 1;
  position: relative; z-index: 1; display: flex; align-items: flex-start;
}
.about-process-step:nth-child(even) { align-items: flex-end; padding-top: 112px; }
.about-process-card {
  min-height: 246px; width: 100%; padding: 1.25rem; position: relative; overflow: hidden;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17); border-radius: 20px;
  backdrop-filter: blur(8px); box-shadow: 0 24px 40px -30px rgba(0,0,0,.85);
  transform: translate3d(var(--about-x), var(--about-y), 0) rotate(var(--about-turn)) scale(var(--about-scale));
  will-change: transform; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.about-process-step.is-in-view .about-process-card { border-color: rgba(250,94,7,.72); background: rgba(255,255,255,.1); box-shadow: 0 25px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(250,94,7,.1); }
.about-process-card::after { content: ''; position: absolute; width: 120px; height: 120px; top: -72px; right: -56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 16px rgba(255,255,255,.025); }
.about-process-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.about-process-index { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; color: #ffb27a; }
.about-process-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.about-process-icon.tone-orange { background: var(--brand); color: #fff; }
.about-process-icon.tone-ink { background: #f7efe1; color: var(--ink); }
.about-process-icon.tone-paper { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #ffb27a; }
.about-process-card h3 { position: relative; z-index: 1; color: #fff; font-family: var(--font-display); font-size: .94rem; font-weight: 700; line-height: 1.35; margin: 0 0 .7rem; }
.about-process-card p { position: relative; z-index: 1; color: #d0c5b4; font-size: .76rem; line-height: 1.65; margin: 0; }
.about-process-pulse { position: absolute; left: 1.25rem; bottom: 1rem; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(250,94,7,.55); }
.about-process-step.is-in-view .about-process-pulse { animation: about-process-pulse 1.8s ease-out infinite; }
@keyframes about-process-pulse { 70% { box-shadow: 0 0 0 9px rgba(250,94,7,0); } 100% { box-shadow: 0 0 0 0 rgba(250,94,7,0); } }
@media (max-width: 991px) {
  .about-process-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .about-process-heading .lede { max-width: 620px; }
  .about-process-journey { min-height: 0; }
  .about-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-process-step:nth-child(even) { padding-top: 74px; }
  .about-process-rail { top: 49%; left: 9%; right: 9%; }
}
@media (max-width: 575px) {
  .about-process-section { padding: 3.5rem 0; }
  .about-process-heading { margin-bottom: 2rem; }
  .about-process-list { grid-template-columns: 1fr; gap: 1rem; padding-left: 2rem; }
  .about-process-step, .about-process-step:nth-child(even) { padding-top: 0; }
  .about-process-card { min-height: 0; padding: 1.15rem; }
  .about-process-rail { top: .5rem; bottom: .5rem; left: 8px; right: auto; width: 1px; height: auto; transform: none; }
  .about-process-rail span { width: 3px; height: 100%; transform-origin: top center; transform: scaleY(var(--about-rail-progress)); }
  .about-process-rail::before { top: 0; left: 50%; transform: translate(-50%, -4px); }
  .about-process-rail::after { top: auto; right: auto; bottom: -4px; left: 50%; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-process-rail span { transform: scaleX(1); transition: none; }
  .about-process-card { transform: none; }
  .about-process-pulse { animation: none !important; }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) { .about-process-rail span { transform: scaleY(1); } }

/* ---------------- Home: scroll-led sourcing signal ---------------- */
.home-process-section {
  --home-flow-progress: 0;
  position: relative; overflow: hidden; padding: 5.75rem 0 4.5rem;
  background: #e9dfcc;
}
.home-process-section::before {
  content: 'AMPIONIC'; position: absolute; top: 0; left: 50%; z-index: 0; pointer-events: none;
  color: transparent; font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 17vw, 16rem);
  line-height: .8; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(21,19,15,.075); transform: translateX(-50%); white-space: nowrap;
}
.home-process-section .container { position: relative; z-index: 1; }
.home-process-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: 1080px; margin: 0 auto 3rem; }
.home-process-heading .display-headline { max-width: 660px; font-size: clamp(1.7rem, 3.8vw, 2.55rem); margin: .45rem 0 0; }
.home-process-heading .lede { max-width: 365px; margin: 0; font-size: .88rem; }
.home-process-flow { position: relative; min-height: 360px; max-width: 1120px; margin: 0 auto; }
.home-process-grid {
  position: absolute; inset: 1rem 3% 1rem; border-radius: 26px; pointer-events: none; opacity: .48;
  background-image: linear-gradient(rgba(21,19,15,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(21,19,15,.075) 1px, transparent 1px);
  background-size: 30px 30px; mask-image: radial-gradient(ellipse at center, #000 15%, transparent 73%);
}
.home-process-path {
  position: absolute; top: 50%; right: 7%; left: 7%; z-index: 0; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(21,19,15,.22) 0 7px, transparent 7px 13px);
}
.home-process-path::before, .home-process-path::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translateY(-50%);
}
.home-process-path::before { left: -5px; background: var(--ink); box-shadow: 0 0 0 7px rgba(21,19,15,.1); }
.home-process-path::after { right: -5px; background: var(--brand); box-shadow: 0 0 0 7px rgba(250,94,7,.16); }
.home-process-path-fill {
  display: block; height: 4px; transform: translateY(-1px) scaleX(var(--home-flow-progress)); transform-origin: left center;
  background: linear-gradient(90deg, var(--ink), var(--brand) 78%, #ffb27a); box-shadow: 0 0 16px rgba(250,94,7,.38); transition: transform .08s linear;
}
.home-process-signal {
  position: absolute; top: 50%; left: calc(var(--home-flow-progress) * 100%); width: 13px; height: 13px; border-radius: 50%;
  background: #fff7ed; border: 3px solid var(--brand); transform: translate(-50%, -50%); box-shadow: 0 0 0 7px rgba(250,94,7,.14), 0 0 20px rgba(250,94,7,.7);
  transition: left .08s linear;
}
.home-process-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; padding: 0; margin: 0; list-style: none; }
.home-process-step {
  --home-card-x: 0px; --home-card-y: 0px; --home-card-turn: 0deg; --home-card-scale: 1;
  position: relative; display: flex; align-items: flex-start;
}
.home-process-step:nth-child(even) { align-items: flex-end; padding-top: 114px; }
.home-process-step::after {
  content: ''; position: absolute; left: 50%; top: calc(50% - 8px); z-index: -1; width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); border: 2px solid rgba(21,19,15,.28); transform: translate(-50%, -50%); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-process-step:nth-child(even)::after { top: calc(50% + 106px); }
.home-process-step.is-revealed::after { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px rgba(250,94,7,.14); }
.home-process-card {
  position: relative; width: 100%; min-height: 248px; overflow: hidden; padding: 1.2rem;
  background: rgba(255,255,255,.72); border: 1px solid rgba(21,19,15,.15); border-radius: 20px;
  box-shadow: 0 20px 36px -30px rgba(21,19,15,.55); backdrop-filter: blur(8px);
  /* Fade uses opacity only; transform remains exclusively owned by the scroll path. */
  opacity: 1;
  transform: translate3d(var(--home-card-x), var(--home-card-y), 0) rotate(var(--home-card-turn)) scale(var(--home-card-scale));
  will-change: transform, opacity;
  transition: opacity .72s cubic-bezier(.16, 1, .3, 1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.home-process-flow.is-scroll-fade-ready .home-process-card { opacity: 0; }
.home-process-flow.is-scroll-fade-ready .home-process-step.is-faded-in .home-process-card { opacity: 1; }
.home-process-card::after {
  content: ''; position: absolute; right: -45px; bottom: -52px; width: 120px; height: 120px; border: 1px solid rgba(21,19,15,.11); border-radius: 50%; box-shadow: 0 0 0 17px rgba(21,19,15,.025);
}
.home-process-step.is-revealed .home-process-card { background: rgba(255,255,255,.92); border-color: rgba(250,94,7,.68); box-shadow: 0 24px 48px -29px rgba(21,19,15,.55), 0 0 0 1px rgba(250,94,7,.08); }
.home-process-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.home-process-number { font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .13em; color: var(--brand-dark); }
.home-process-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
.home-process-icon.tone-orange { color: #fff; background: var(--brand); }
.home-process-icon.tone-paper { color: var(--ink); background: #fff9ed; border: 1px solid var(--line-strong); }
.home-process-icon.tone-ink { color: #fff; background: var(--ink); }
.home-process-card h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: .92rem; font-weight: 700; line-height: 1.38; margin: 0 0 .7rem; }
.home-process-card p { position: relative; z-index: 1; color: var(--muted); font-size: .76rem; line-height: 1.62; margin: 0; }
.home-process-status { position: absolute; bottom: 1rem; left: 1.2rem; z-index: 1; display: inline-flex; align-items: center; gap: .42rem; color: var(--muted); font-family: var(--font-mono); font-size: .57rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.home-process-status i { width: 6px; height: 6px; border-radius: 50%; background: #69a97b; box-shadow: 0 0 0 0 rgba(105,169,123,.5); }
.home-process-step.is-revealed .home-process-status i { animation: home-signal-pulse 1.8s ease-out infinite; }
@keyframes home-signal-pulse { 70% { box-shadow: 0 0 0 7px rgba(105,169,123,0); } 100% { box-shadow: 0 0 0 0 rgba(105,169,123,0); } }
.home-process-footer { display: flex; align-items: center; gap: .9rem; max-width: 760px; margin: 2rem auto 0; }
.home-process-footer-line { display: block; flex: 1; max-width: 110px; height: 1px; background: var(--brand); }
.home-process-footer p { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: .68rem; line-height: 1.6; }
@media (max-width: 991px) {
  .home-process-heading { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .home-process-heading .lede { max-width: 650px; }
  .home-process-flow { min-height: 0; }
  .home-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-process-step:nth-child(even) { padding-top: 76px; }
  .home-process-step::after { top: calc(50% - 8px); }
  .home-process-step:nth-child(even)::after { top: calc(50% + 68px); }
}
@media (max-width: 575px) {
  .home-process-section { padding: 3.7rem 0 3.2rem; }
  .home-process-heading { margin-bottom: 2rem; }
  .home-process-list { grid-template-columns: 1fr; gap: 1rem; padding-left: 2rem; }
  .home-process-step, .home-process-step:nth-child(even) { padding-top: 0; }
  .home-process-card { min-height: 0; padding: 1.15rem 1.15rem 2.45rem; }
  .home-process-path { top: .5rem; bottom: .5rem; left: 8px; right: auto; width: 2px; height: auto; transform: none; background: repeating-linear-gradient(180deg, rgba(21,19,15,.22) 0 7px, transparent 7px 13px); }
  .home-process-path-fill { width: 4px; height: 100%; transform: translateX(-1px) scaleY(var(--home-flow-progress)); transform-origin: top center; }
  .home-process-signal { top: calc(var(--home-flow-progress) * 100%); left: 50%; transition: top .08s linear; }
  .home-process-path::before { top: -5px; left: 50%; transform: translateX(-50%); }
  .home-process-path::after { right: auto; bottom: -5px; left: 50%; top: auto; transform: translateX(-50%); }
  .home-process-step::after, .home-process-step:nth-child(even)::after { top: 1.6rem; left: -2rem; transform: translate(-50%, -50%); }
  .home-process-footer { align-items: flex-start; margin-top: 1.5rem; }
  .home-process-footer-line { margin-top: .55rem; max-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-process-path-fill { transform: translateY(-1px) scaleX(1); transition: none; }
  .home-process-signal { left: 100%; transition: none; }
  .home-process-card { transform: none; }
  .home-process-status i { animation: none !important; }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
  .home-process-path-fill { transform: translateX(-1px) scaleY(1); }
  .home-process-signal { top: 100%; left: 50%; }
}

/* ---------------- Home editorial insight carousels ----------------
   The long-form sourcing cards stay readable without creating a tall 2x2 wall.
   Two cards remain visible on desktop, one on phones, while native horizontal
   scrolling keeps touch interaction natural and the arrows provide an obvious
   desktop control. */
.article-carousel {
  --article-carousel-progress: 0%;
  position: relative;
  margin: 1.6rem 0 2.1rem;
  padding: 1rem 0 .75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.article-carousel-count { color: var(--muted); font-family: var(--font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.article-carousel-controls { display: flex; gap: .45rem; }
.article-carousel-nav {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.article-carousel-nav:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; transform: translateY(-1px); }
.article-carousel-nav:focus-visible { outline: 3px solid rgba(250,94,7,.38); outline-offset: 3px; }
.article-carousel-nav:disabled { cursor: not-allowed; opacity: .38; }
.article-carousel-viewport {
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y; outline: none;
}
.article-carousel-viewport::-webkit-scrollbar { display: none; }
.article-carousel-viewport:focus-visible { outline: 3px solid rgba(250,94,7,.3); outline-offset: 4px; }
.article-carousel-track { display: flex; align-items: stretch; gap: 1rem; width: max-content; padding: .15rem .1rem .55rem; }
.article-carousel-card {
  position: relative; display: flex; flex-direction: column;
  flex: 0 0 min(calc((min(760px, 100vw) - 1rem) / 2), 360px);
  min-height: 330px; margin: 0; scroll-snap-align: start; overflow: hidden;
}
.article-carousel-card p.lede { margin-bottom: 1.7rem; }
.article-carousel-card h3 { max-width: 290px; }
.article-carousel-index {
  position: absolute; right: 1.25rem; bottom: 1.2rem; color: var(--brand-dark);
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em;
}
.article-carousel-progress { height: 3px; width: 100%; margin-top: .15rem; overflow: hidden; border-radius: 999px; background: var(--line); }
.article-carousel-progress span { display: block; width: 18%; height: 100%; border-radius: inherit; background: var(--brand); transition: width .25s ease; }
@media (max-width: 767px) {
  .article-carousel-card { flex-basis: min(86vw, 360px); min-height: 300px; }
  .article-carousel-head { margin-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .article-carousel-viewport { scroll-behavior: auto; }
  .article-carousel-nav, .article-carousel-progress span { transition: none; }
}

/* ---------------- Contextual SEO internal links ---------------- */
/* These links live inside editorial copy, not as a keyword cloud. Their underline
   remains subtle until hover/focus and they share the same touch-friendly focus
   treatment used by other interactive controls. */
.seo-context-link {
  color: var(--brand-dark);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(250,94,7,.72);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.seo-context-link:hover {
  color: var(--ink);
  text-decoration-color: var(--brand);
}
.seo-context-link:focus-visible,
.related-link-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.related-link-btn { text-decoration: none; }
.article-highlight .seo-context-link,
.bg-ink .seo-context-link,
.cta-banner .seo-context-link {
  color: #ffb27a;
  text-decoration-color: rgba(255,178,122,.82);
}
.article-highlight .seo-context-link:hover,
.bg-ink .seo-context-link:hover,
.cta-banner .seo-context-link:hover { color: #fff; }

/* ---------------- Machinery editorial reading blocks ---------------- */
/* These wrappers carry entrance motion; card-level hover/scroll transforms remain
   on the nested component, preventing animation collisions. */
.machinery-overview-shell {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(0, 1.35fr) minmax(210px, .8fr);
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}
.machinery-overview-heading {
  padding: 1.5rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.machinery-overview-heading .display-headline { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.machinery-overview-copy { padding: .55rem .25rem; }
.machinery-overview-lead {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.5;
}
.machinery-overview-reading { border-left: 2px solid var(--brand); padding-left: 1.1rem; }
.machinery-overview-reading p,
.machinery-overview-fact p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.machinery-overview-reading p { margin: 0 0 .8rem; }
.machinery-overview-reading p:last-child { margin-bottom: 0; }
.machinery-overview-fact {
  align-self: start;
  position: relative;
  overflow: hidden;
  padding: 1.35rem;
  background: var(--ink);
  border-radius: var(--radius);
}
.machinery-overview-fact::after {
  content: ''; position: absolute; right: -44px; bottom: -44px; width: 130px; height: 130px;
  border: 1px solid rgba(250,94,7,.42); border-radius: 50%;
}
.machinery-overview-fact .service-overview-label,
.machinery-overview-fact p { position: relative; z-index: 1; }
.machinery-overview-fact .service-overview-label { color: #ffb27a; }
.machinery-overview-fact p { margin: 0; color: #e7dfd0; }

/* ---------------- Reusable viewport reveal ---------------- */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .68s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
    transform .68s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.scroll-reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); }
@media (max-width: 991px) {
  .machinery-overview-shell { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr); }
  .machinery-overview-fact { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
  .machinery-overview-shell { grid-template-columns: 1fr; gap: 1rem; }
  .machinery-overview-copy { padding: .2rem .1rem; }
  .machinery-overview-fact { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Visible SEO link navigation ---------------- */
.seo-link-panel { position: relative; overflow: hidden; }
.seo-link-panel::after {
  content: 'LINKS'; position: absolute; right: -1rem; bottom: -2.5rem; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(4rem, 13vw, 10rem); font-weight: 900;
  line-height: 1; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(21,19,15,.08);
}
.seo-link-panel .container { position: relative; z-index: 1; }
.seo-link-panel-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 1.55rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.seo-link-panel-copy { max-width: 490px; }
.seo-link-panel-title { margin: 0 0 .55rem; font-family: var(--font-display); font-size: clamp(1.05rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--ink); }
.seo-link-panel-copy p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.seo-link-panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; max-width: 530px; }
.seo-link-panel-action {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 44px;
  padding: .65rem .9rem .65rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink); text-decoration: none; font-family: var(--font-mono);
  font-size: .67rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.seo-link-panel-action:hover { transform: translateY(-2px); background: var(--brand); border-color: var(--brand); color: #fff; }
.seo-link-panel-action:focus-visible { outline: 3px solid rgba(250,94,7,.4); outline-offset: 3px; }
@media (max-width: 991px) {
  .seo-link-panel-inner { display: block; }
  .seo-link-panel-actions { justify-content: flex-start; max-width: none; margin-top: 1.25rem; }
}
@media (max-width: 575px) {
  .seo-link-panel-inner { padding: 1.2rem; }
  .seo-link-panel-action { width: 100%; }
}

/* Footer links stay understated, but now visibly communicate that every listed
   machinery category and company page is an actual crawlable destination. */
.site-footer .footer-nav-btn {
  text-decoration-line: underline;
  text-decoration-color: rgba(207,198,181,.32);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.site-footer .footer-nav-btn:hover,
.site-footer .footer-nav-btn:focus-visible {
  color: var(--brand);
  text-decoration-color: var(--brand);
}
.site-footer .footer-nav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------------- Industrial scroll effects: verification / routes / blueprint ---------------- */
/* These public-page effects are deliberately operational rather than decorative:
   catalog cards are briefly scanned like inspected components, process cards join a
   route line as they enter view, and machinery categories emerge over a faint drawing grid. */
[data-industrial-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .64s cubic-bezier(.16, 1, .3, 1) var(--industrial-delay, 0ms),
    transform .64s cubic-bezier(.16, 1, .3, 1) var(--industrial-delay, 0ms);
  will-change: opacity, transform;
}
[data-industrial-reveal].is-industrial-revealed { opacity: 1; transform: translate3d(0, 0, 0); }

.industrial-verify-card { position: relative; overflow: hidden; isolation: isolate; }
.industrial-verify-card::after {
  content: ''; position: absolute; z-index: 2; inset: -38% 0 auto; height: 42%; pointer-events: none;
  opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent, rgba(250,94,7,.05) 35%, rgba(250,94,7,.45) 49%, rgba(250,94,7,.05) 63%, transparent);
}
[data-verify-scan].is-verified .industrial-verify-card::after { animation: industrial-verification-scan .8s cubic-bezier(.16, 1, .3, 1) both; }
[data-verify-scan].is-verified .industrial-verify-card { border-color: rgba(250,94,7,.56); }
@keyframes industrial-verification-scan {
  0% { opacity: 0; transform: translateY(-100%); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(390%); }
}

.machinery-assembly-grid,
.brands-catalog-grid { position: relative; isolation: isolate; }
.machinery-assembly-grid::before {
  content: ''; position: absolute; z-index: 0; inset: -1.2rem; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(21,19,15,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(21,19,15,.055) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, #000 12%, transparent 74%);
}
.machinery-assembly-grid > [data-industrial-reveal] { position: relative; z-index: 1; }
.machinery-assembly-grid > [data-industrial-reveal]::before {
  content: ''; position: absolute; z-index: 1; top: -4px; left: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-strong); transform: translateX(-50%); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.machinery-assembly-grid > [data-industrial-reveal].is-industrial-revealed::before {
  background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 5px rgba(250,94,7,.12);
}

.industrial-route-process { --route-progress: 0; position: relative; isolation: isolate; }
.industrial-route-process::before,
.industrial-route-process::after {
  content: ''; position: absolute; z-index: -1; top: 50%; left: 7%; right: 7%; height: 2px; transform: translateY(-50%);
}
.industrial-route-process::before { background: repeating-linear-gradient(90deg, rgba(21,19,15,.22) 0 7px, transparent 7px 13px); }
.industrial-route-process::after {
  right: auto; width: 86%; transform: translateY(-50%) scaleX(var(--route-progress)); transform-origin: left center;
  background: linear-gradient(90deg, var(--brand), #ffb27a); box-shadow: 0 0 14px rgba(250,94,7,.42); transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.industrial-route-process [data-route-stop] { position: relative; }
.industrial-route-process [data-route-stop]::after {
  content: ''; position: absolute; top: 50%; left: 50%; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-strong); transform: translate(-50%, -50%);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.industrial-route-process [data-route-stop].is-route-active::after {
  background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px rgba(250,94,7,.13);
}
.industrial-route-process .step-card { position: relative; z-index: 2; }
.industrial-route-process [data-route-stop].is-route-active .step-card { border-color: rgba(250,94,7,.68); box-shadow: 0 18px 34px -25px rgba(21,19,15,.42); }

@media (max-width: 991px) {
  .industrial-route-process::before,
  .industrial-route-process::after { top: 50%; left: 10%; right: 10%; }
  .industrial-route-process::after { width: 80%; }
}
@media (max-width: 575px) {
  .industrial-route-process { padding-left: 1.9rem; }
  .industrial-route-process::before,
  .industrial-route-process::after { top: .65rem; bottom: .65rem; left: .45rem; right: auto; width: 2px; height: auto; transform: none; }
  .industrial-route-process::before { background: repeating-linear-gradient(180deg, rgba(21,19,15,.22) 0 7px, transparent 7px 13px); }
  .industrial-route-process::after { height: calc(100% - 1.3rem); transform: scaleY(var(--route-progress)); transform-origin: top center; }
  .industrial-route-process [data-route-stop]::after { top: 1.35rem; left: -1.45rem; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-industrial-reveal] { opacity: 1; transform: none; transition: none; }
  .industrial-verify-card::after { display: none; }
  .industrial-route-process::after { transform: translateY(-50%) scaleX(1); transition: none; }
  .industrial-route-process [data-route-stop]::after { background: var(--brand); border-color: var(--brand); }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
  .industrial-route-process::after { transform: scaleY(1); }
}

/* ---------------- Hero: illustrated production-line sorting animation ---------------- */
.hero-production-line {
  position: relative;
  height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink);
  box-shadow: var(--shadow-soft);
}
.production-line-svg { display: block; width: 100%; height: 100%; }
.hero-production-line::after {
  content: ''; position: absolute; right: -16%; bottom: -42%; width: 62%; aspect-ratio: 1;
  border: 1px solid rgba(250,94,7,.35); border-radius: 50%; box-shadow: 0 0 0 28px rgba(250,94,7,.045), 0 0 0 56px rgba(250,94,7,.025);
  pointer-events: none;
}
.hero-production-line-meta {
  position: absolute; z-index: 2; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .35rem;
  max-width: min(58%, 230px); padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  background: rgba(20,18,15,.78); color: #e7dfd0; backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .07em; line-height: 1.35; text-transform: uppercase;
}
.hero-production-line-meta > span { color: #ffb27a; }
.hero-production-line-meta b { display: flex; align-items: center; gap: .4rem; color: #e7dfd0; font-size: inherit; }
.hero-production-line-meta i { width: 6px; height: 6px; border-radius: 50%; background: #6bb381; box-shadow: 0 0 0 0 rgba(107,179,129,.6); animation: production-status-pulse 1.8s ease-out infinite; }
.production-svg-label { fill: #d8cfbf; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.output-label { fill: #f7efe1; font-size: 8px; letter-spacing: .45px; }
.production-orbit { fill: none; stroke: #fa5e07; stroke-linecap: round; stroke-width: 1.5; stroke-dasharray: 3 12; opacity: .42; animation: production-orbit 7s linear infinite; }
.orbit-two { animation-duration: 11s; animation-direction: reverse; opacity: .23; }
.control-signal { stroke-dasharray: 170; stroke-dashoffset: 170; animation: production-control-signal 3s ease-in-out infinite; }
.inspection-beam { stroke-dasharray: 8 10; animation: production-beam 1.4s linear infinite; }
.sorter-arm { transform-box: view-box; transform-origin: 446px 142px; animation: production-sorter-arm 5.4s cubic-bezier(.5,0,.3,1) infinite; }
.belt-dashes { animation: production-belt 1.35s linear infinite; }
.belt-rollers circle { fill: #211d17; stroke: #c6b9a5; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: production-roller .9s linear infinite; }
.production-package { transform-box: view-box; transform-origin: 0 0; }
.package-a { animation: production-package-main 8.1s linear infinite; }
.package-b { animation: production-package-main 8.1s linear 2.7s infinite; }
.package-c { animation: production-package-main 8.1s linear 5.4s infinite; }
.package-sorted { transform-box: view-box; transform-origin: 0 0; animation: production-package-sorted 8.1s linear 4.08s infinite; }
@keyframes production-status-pulse { 70% { box-shadow: 0 0 0 7px rgba(107,179,129,0); } 100% { box-shadow: 0 0 0 0 rgba(107,179,129,0); } }
@keyframes production-orbit { to { stroke-dashoffset: -160; } }
@keyframes production-control-signal { 0%, 16% { stroke-dashoffset: 170; opacity: .2; } 48%, 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -170; opacity: .2; } }
@keyframes production-beam { to { stroke-dashoffset: -36; } }
@keyframes production-sorter-arm { 0%, 54%, 100% { transform: rotate(0deg); } 64%, 74% { transform: rotate(25deg); } 84% { transform: rotate(0deg); } }
@keyframes production-belt { to { stroke-dashoffset: -50; } }
@keyframes production-roller { to { transform: rotate(360deg); } }
@keyframes production-package-main {
  0% { transform: translate(-70px, 0); opacity: 0; }
  5% { opacity: 1; }
  64% { transform: translate(423px, 0); opacity: 1; }
  68%, 100% { transform: translate(510px, 0); opacity: 0; }
}
@keyframes production-package-sorted {
  0%, 8% { transform: translate(426px, 276px) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  69% { transform: translate(426px, 276px) rotate(0deg); opacity: 1; }
  89% { transform: translate(550px, 365px) rotate(36deg); opacity: 1; }
  100% { transform: translate(585px, 393px) rotate(36deg); opacity: 0; }
}
@media (max-width: 575px) {
  .hero-production-line { height: min(390px, 68vw); min-height: 300px; border-radius: 20px; }
  .hero-production-line-meta { top: .75rem; right: .75rem; max-width: 64%; font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-production-line-meta i,
  .production-orbit,
  .control-signal,
  .inspection-beam,
  .sorter-arm,
  .belt-dashes,
  .belt-rollers circle,
  .production-package { animation: none; }
  .package-a { transform: translate(80px, 0); opacity: 1; }
  .package-b { transform: translate(230px, 0); opacity: 1; }
  .package-c { transform: translate(375px, 0); opacity: 1; }
  .package-sorted { transform: translate(525px, 350px) rotate(36deg); opacity: 1; }
}

/* Hero line refinement: cartons enter, pass a vision check, then leave verified. */
.hero-production-line {
  background:
    radial-gradient(circle at 76% 28%, rgba(250,94,7,.13), transparent 25%),
    var(--ink);
}
.hero-production-line::before {
  content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.035) 45%, transparent 57%);
  transform: translateX(-120%); animation: production-surface-sheen 7.8s ease-in-out infinite;
}
.production-line-kpi {
  position: absolute; z-index: 2; display: flex; align-items: baseline; gap: .38rem;
  padding: .42rem .56rem; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  background: rgba(20,18,15,.7); color: #cfc6b5; backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .47rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase;
}
.production-line-kpi b { color: #fff5e8; font-size: .65rem; letter-spacing: .02em; }
.production-line-kpi-incoming { left: 1rem; bottom: 1rem; }
.production-line-kpi-verified { right: 1rem; bottom: 1rem; border-color: rgba(107,179,129,.36); }
.production-line-kpi-verified b { color: #86d69d; }
.production-route-line {
  fill: none; stroke: rgba(250,94,7,.34); stroke-width: 1.5; stroke-dasharray: 4 10;
  animation: production-route 5s linear infinite;
}
.scanner-waves { fill: none; stroke: #ffb27a; stroke-width: 2; stroke-linecap: round; opacity: .7; animation: production-scanner-waves 1.4s ease-in-out infinite; }
.production-scanner rect { filter: drop-shadow(0 0 6px rgba(250,94,7,.24)); }
.production-sorter { filter: drop-shadow(0 0 5px rgba(250,94,7,.09)); }
.sorter-arm { animation-duration: 8.1s; }
.package-sorted { animation: production-package-sorted 8.1s linear infinite; }
.production-output circle { animation: production-output-ready 1.5s ease-in-out infinite; }
@keyframes production-surface-sheen {
  0%, 16% { transform: translateX(-120%); opacity: 0; }
  28%, 68% { opacity: 1; }
  84%, 100% { transform: translateX(120%); opacity: 0; }
}
@keyframes production-route { to { stroke-dashoffset: -56; } }
@keyframes production-scanner-waves { 50% { opacity: 1; transform: translateX(-4px); } }
@keyframes production-output-ready { 50% { opacity: .45; filter: drop-shadow(0 0 5px #6bb381); } }
@keyframes production-sorter-arm {
  0%, 60%, 100% { transform: rotate(0deg); }
  66%, 76% { transform: rotate(25deg); }
  84% { transform: rotate(0deg); }
}
@keyframes production-package-sorted {
  0%, 61% { transform: translate(423px, 243px) rotate(0deg); opacity: 0; }
  64% { transform: translate(423px, 243px) rotate(0deg); opacity: 1; }
  70% { transform: translate(423px, 243px) rotate(0deg); opacity: 1; }
  88% { transform: translate(548px, 337px) rotate(36deg); opacity: 1; }
  100% { transform: translate(584px, 375px) rotate(36deg); opacity: 0; }
}
@media (max-width: 575px) {
  .production-line-kpi { font-size: .42rem; padding: .34rem .44rem; }
  .production-line-kpi b { font-size: .55rem; }
  .production-line-kpi-incoming { left: .75rem; bottom: .75rem; }
  .production-line-kpi-verified { right: .75rem; bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-production-line::before,
  .production-route-line,
  .scanner-waves,
  .production-output circle { animation: none; }
  .package-sorted { transform: translate(548px, 337px) rotate(36deg); opacity: 1; }
}

/* ---------------- Hero: friendly cartoon production line ---------------- */
/* A deliberately warmer, illustrated alternative to the previous technical SVG.
   Thick outlines, simple geometry and a small visual story make the automation
   feel approachable while keeping the B2B sourcing message clear. */
.hero-cartoon-line {
  position: relative;
  height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e7c68d;
  border-radius: var(--radius-lg);
  background: #fff6e6;
  box-shadow: 0 18px 38px -23px rgba(76, 54, 29, .36);
}
.cartoon-line-svg { display: block; width: 100%; height: 100%; }
.hero-cartoon-line::after {
  content: ''; position: absolute; z-index: 1; right: -12%; bottom: -34%; width: 48%; aspect-ratio: 1;
  border: 2px dashed rgba(244, 138, 27, .25); border-radius: 50%; pointer-events: none;
}
.cartoon-line-caption {
  position: absolute; z-index: 3; top: 1rem; right: 1rem; display: grid; gap: .22rem;
  max-width: min(58%, 250px); padding: .6rem .75rem; border: 1px solid rgba(81,70,61,.18); border-radius: 12px;
  background: rgba(255,253,247,.83); color: #51463d; backdrop-filter: blur(7px);
  box-shadow: 0 8px 20px -16px rgba(81,70,61,.55); font-family: var(--font-mono); text-transform: uppercase;
}
.cartoon-line-caption strong { font-size: .54rem; line-height: 1.45; letter-spacing: .055em; }
.cartoon-line-live { display: inline-flex; align-items: center; gap: .4rem; color: #c86208; font-size: .52rem; font-weight: 700; letter-spacing: .08em; }
.cartoon-line-live i { width: 7px; height: 7px; border-radius: 50%; background: #5cab70; box-shadow: 0 0 0 0 rgba(92,171,112,.42); animation: cartoon-live-pulse 1.8s ease-out infinite; }
.cartoon-line-status {
  position: absolute; z-index: 3; bottom: .9rem; display: flex; align-items: baseline; gap: .36rem;
  padding: .38rem .56rem; border: 1px solid rgba(81,70,61,.17); border-radius: 9px; background: rgba(255,253,247,.84);
  box-shadow: 0 8px 16px -14px rgba(81,70,61,.55); color: #6f6256; font-family: var(--font-mono);
  font-size: .45rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cartoon-line-status b { color: #51463d; font-size: .63rem; letter-spacing: 0; }
.cartoon-line-status-incoming { left: .9rem; }
.cartoon-line-status-output { right: .9rem; border-color: rgba(92,171,112,.35); }
.cartoon-line-status-output b { color: #438753; }
.cartoon-labels text { fill: #6b5747; }
.cartoon-flight-path { stroke: #8d8278; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 6; animation: cartoon-flight 5.8s linear infinite; }
.cartoon-paper-plane { transform-box: fill-box; transform-origin: center; animation: cartoon-plane 5.8s ease-in-out infinite; }
.cartoon-cloud { transform-box: fill-box; transform-origin: center; animation: cartoon-cloud-drift 7s ease-in-out infinite alternate; }
.cloud-two { animation-delay: -2.4s; animation-duration: 8.4s; }
.cartoon-sun-rays { transform-box: fill-box; transform-origin: center; animation: cartoon-sun-wiggle 7s ease-in-out infinite; }
.cartoon-gear-teeth { transform-box: fill-box; transform-origin: center; animation: cartoon-gear-spin 13s linear infinite; }
.cartoon-robot-upper, .cartoon-robot-forearm { transform-box: fill-box; transform-origin: left center; }
.cartoon-robot-upper { animation: cartoon-upper-arm 7.8s ease-in-out infinite; }
.cartoon-robot-forearm { animation: cartoon-forearm 7.8s ease-in-out infinite; }
.cartoon-gripper { transform-box: fill-box; transform-origin: center; animation: cartoon-gripper 7.8s ease-in-out infinite; }
.cartoon-scan-rays { animation: cartoon-scan 1.15s ease-in-out infinite; }
.cartoon-rollers circle { transform-box: fill-box; transform-origin: center; animation: cartoon-roller 1.25s linear infinite; }
.cartoon-belt-stripes { animation: cartoon-belt 1.2s linear infinite; }
.cartoon-box { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.box-one { animation: cartoon-box-line 9s linear infinite; }
.box-two { animation: cartoon-box-line 9s linear 3s infinite; }
.box-three { animation: cartoon-box-line 9s linear 6s infinite; }
.box-sorted { animation: cartoon-box-sort 9s linear infinite; }
.cartoon-output circle { animation: cartoon-output-glow 1.8s ease-in-out infinite; }
@keyframes cartoon-live-pulse { 70% { box-shadow: 0 0 0 7px rgba(92,171,112,0); } 100% { box-shadow: 0 0 0 0 rgba(92,171,112,0); } }
@keyframes cartoon-flight { to { stroke-dashoffset: -66; } }
@keyframes cartoon-plane { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(16px,-7px) rotate(5deg); } }
@keyframes cartoon-cloud-drift { to { transform: translateX(12px); } }
@keyframes cartoon-sun-wiggle { 0%,100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes cartoon-gear-spin { to { transform: rotate(360deg); } }
@keyframes cartoon-upper-arm { 0%, 55%, 100% { transform: rotate(0deg); } 66%, 76% { transform: rotate(8deg); } }
@keyframes cartoon-forearm { 0%, 55%, 100% { transform: rotate(0deg); } 66%, 76% { transform: rotate(-11deg); } }
@keyframes cartoon-gripper { 0%, 55%, 100% { transform: translate(0,0) rotate(0deg); } 66%, 76% { transform: translate(9px,-9px) rotate(-7deg); } }
@keyframes cartoon-scan { 0%,100% { opacity: .3; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(3px); } }
@keyframes cartoon-roller { to { transform: rotate(360deg); } }
@keyframes cartoon-belt { to { stroke-dashoffset: -48; } }
@keyframes cartoon-output-glow { 50% { opacity: .45; filter: drop-shadow(0 0 5px #5cab70); } }
@keyframes cartoon-box-line {
  0% { transform: translate(-66px, 288px); opacity: 0; }
  4% { opacity: 1; }
  69% { transform: translate(456px, 288px); opacity: 1; }
  76%, 100% { transform: translate(524px, 288px); opacity: 0; }
}
@keyframes cartoon-box-sort {
  0%, 60% { transform: translate(454px, 288px) rotate(0); opacity: 0; }
  64% { opacity: 1; }
  73% { transform: translate(454px, 288px) rotate(0); opacity: 1; }
  91% { transform: translate(562px, 279px) rotate(-8deg); opacity: 1; }
  100% { transform: translate(618px, 279px) rotate(-8deg); opacity: 0; }
}
@media (max-width: 575px) {
  .hero-cartoon-line { height: min(390px, 68vw); min-height: 300px; border-radius: 20px; }
  .cartoon-line-caption { top: .75rem; right: .75rem; max-width: 65%; padding: .48rem .58rem; }
  .cartoon-line-caption strong, .cartoon-line-live { font-size: .45rem; }
  .cartoon-line-status { bottom: .7rem; padding: .3rem .42rem; font-size: .38rem; }
  .cartoon-line-status b { font-size: .5rem; }
  .cartoon-line-status-incoming { left: .7rem; }
  .cartoon-line-status-output { right: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cartoon-line-live i, .cartoon-flight-path, .cartoon-paper-plane, .cartoon-cloud,
  .cartoon-sun-rays, .cartoon-gear-teeth, .cartoon-robot-upper, .cartoon-robot-forearm,
  .cartoon-gripper, .cartoon-scan-rays, .cartoon-rollers circle, .cartoon-belt-stripes,
  .cartoon-box, .cartoon-output circle { animation: none; }
  .box-one { transform: translate(95px, 288px); opacity: 1; }
  .box-two { transform: translate(270px, 288px); opacity: 1; }
  .box-three { transform: translate(420px, 288px); opacity: 1; }
  .box-sorted { transform: translate(567px, 279px) rotate(-8deg); opacity: 1; }
}

/* ---------------- Hero: reference-inspired hand-drawn factory ---------------- */
/* The scene is drawn entirely in SVG: large, soft geometry keeps the animation
   legible at mobile scale while the workers make the automated line feel human. */
.hero-ref-line {
  position: relative; height: 420px; margin: 0; overflow: hidden; border: 1px solid #e7c68d;
  border-radius: var(--radius-lg); background: #fff8eb; box-shadow: 0 18px 38px -23px rgba(76,54,29,.36);
}
.ref-line-svg { display: block; width: 100%; height: 100%; }
.hero-ref-line::after {
  content: ''; position: absolute; right: -10%; bottom: -30%; z-index: 1; width: 43%; aspect-ratio: 1;
  border: 2px dashed rgba(244,124,23,.22); border-radius: 50%; pointer-events: none;
}
.ref-line-caption {
  position: absolute; z-index: 3; top: 1rem; right: 1rem; display: grid; gap: .22rem; max-width: min(58%, 250px);
  padding: .6rem .75rem; border: 1px solid rgba(81,70,61,.18); border-radius: 12px; background: rgba(255,253,247,.86);
  color: #51463d; backdrop-filter: blur(7px); box-shadow: 0 8px 20px -16px rgba(81,70,61,.55);
  font-family: var(--font-mono); text-transform: uppercase;
}
.ref-line-caption span { display: inline-flex; align-items: center; gap: .4rem; color: #c86208; font-size: .52rem; font-weight: 700; letter-spacing: .08em; }
.ref-line-caption span i { width: 7px; height: 7px; border-radius: 50%; background: #5cab70; box-shadow: 0 0 0 0 rgba(92,171,112,.42); animation: ref-line-pulse 1.8s ease-out infinite; }
.ref-line-caption strong { font-size: .54rem; line-height: 1.45; letter-spacing: .055em; }
.ref-line-status {
  position: absolute; z-index: 3; bottom: .9rem; display: flex; align-items: baseline; gap: .36rem; padding: .38rem .56rem;
  border: 1px solid rgba(81,70,61,.17); border-radius: 9px; background: rgba(255,253,247,.86); color: #6f6256;
  box-shadow: 0 8px 16px -14px rgba(81,70,61,.55); font-family: var(--font-mono); font-size: .45rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ref-line-status b { color: #51463d; font-size: .63rem; letter-spacing: 0; }
.ref-line-status-incoming { left: .9rem; }
.ref-line-status-output { right: .9rem; border-color: rgba(92,171,112,.35); }
.ref-line-status-output b { color: #438753; }
.ref-labels text { fill: #6b5747; }

.ref-flight-path { stroke: #8d8278; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 6; animation: ref-flight 5.8s linear infinite; }
.ref-plane { transform-box: fill-box; transform-origin: center; animation: ref-plane-float 5.8s ease-in-out infinite; }
.ref-cloud { transform-box: fill-box; transform-origin: center; animation: ref-cloud-drift 7s ease-in-out infinite alternate; }
.ref-cloud-two { animation-delay: -2.4s; animation-duration: 8.4s; }
.ref-gear { transform-box: fill-box; transform-origin: center; animation: ref-gear-turn 16s linear infinite; }
.ref-arm-upper, .ref-arm-lower { transform-box: fill-box; transform-origin: left center; }
.ref-arm-upper { animation: ref-upper-arm 9s ease-in-out infinite; }
.ref-arm-lower { animation: ref-lower-arm 9s ease-in-out infinite; }
.ref-gripper { transform-box: fill-box; transform-origin: center; animation: ref-gripper-move 9s ease-in-out infinite; }
.ref-scan { animation: ref-scan-light 1.15s ease-in-out infinite; }
.ref-rollers circle { transform-box: fill-box; transform-origin: center; animation: ref-roller-turn 1.25s linear infinite; }
.ref-belt { animation: ref-belt-run 1.2s linear infinite; }
.ref-carton { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.carton-one { animation: ref-carton-line 9s linear infinite; }
.carton-two { animation: ref-carton-line 9s linear 3s infinite; }
.carton-three { animation: ref-carton-line 9s linear 6s infinite; }
.carton-checked { animation: ref-carton-sort 9s linear infinite; }
.ref-output circle { animation: ref-output-glow 1.8s ease-in-out infinite; }
.ref-worker-left { transform-box: fill-box; transform-origin: bottom center; animation: ref-worker-wave 4.5s ease-in-out infinite; }
.ref-worker-right { transform-box: fill-box; transform-origin: bottom center; animation: ref-worker-wave 5.2s ease-in-out -1.7s infinite; }

@keyframes ref-line-pulse { 70% { box-shadow: 0 0 0 7px rgba(92,171,112,0); } 100% { box-shadow: 0 0 0 0 rgba(92,171,112,0); } }
@keyframes ref-flight { to { stroke-dashoffset: -66; } }
@keyframes ref-plane-float { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(16px,-7px) rotate(5deg); } }
@keyframes ref-cloud-drift { to { transform: translateX(12px); } }
@keyframes ref-gear-turn { to { transform: rotate(360deg); } }
@keyframes ref-upper-arm { 0%,58%,100% { transform: rotate(0); } 68%,78% { transform: rotate(8deg); } }
@keyframes ref-lower-arm { 0%,58%,100% { transform: rotate(0); } 68%,78% { transform: rotate(-11deg); } }
@keyframes ref-gripper-move { 0%,58%,100% { transform: translate(0,0) rotate(0); } 68%,78% { transform: translate(9px,-9px) rotate(-7deg); } }
@keyframes ref-scan-light { 0%,100% { opacity: .3; transform: translateY(-2px); } 50% { opacity: 1; transform: translateY(3px); } }
@keyframes ref-roller-turn { to { transform: rotate(360deg); } }
@keyframes ref-belt-run { to { stroke-dashoffset: -48; } }
@keyframes ref-output-glow { 50% { opacity: .45; filter: drop-shadow(0 0 5px #5cab70); } }
@keyframes ref-worker-wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-1.6deg) translateY(-2px); } }
@keyframes ref-carton-line {
  0% { transform: translate(-66px, 305px); opacity: 0; }
  4% { opacity: 1; }
  69% { transform: translate(480px, 305px); opacity: 1; }
  76%,100% { transform: translate(548px, 305px); opacity: 0; }
}
@keyframes ref-carton-sort {
  0%,60% { transform: translate(478px,305px) rotate(0); opacity: 0; }
  64% { opacity: 1; }
  73% { transform: translate(478px,305px) rotate(0); opacity: 1; }
  91% { transform: translate(588px,296px) rotate(-8deg); opacity: 1; }
  100% { transform: translate(650px,296px) rotate(-8deg); opacity: 0; }
}
@media (max-width: 575px) {
  .hero-ref-line { height: min(390px,68vw); min-height: 300px; border-radius: 20px; }
  .ref-line-caption { top: .75rem; right: .75rem; max-width: 65%; padding: .48rem .58rem; }
  .ref-line-caption span, .ref-line-caption strong { font-size: .45rem; }
  .ref-line-status { bottom: .7rem; padding: .3rem .42rem; font-size: .38rem; }
  .ref-line-status b { font-size: .5rem; }
  .ref-line-status-incoming { left: .7rem; }
  .ref-line-status-output { right: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-line-caption span i, .ref-flight-path, .ref-plane, .ref-cloud, .ref-gear, .ref-arm-upper,
  .ref-arm-lower, .ref-gripper, .ref-scan, .ref-rollers circle, .ref-belt, .ref-carton, .ref-output circle,
  .ref-worker-left, .ref-worker-right { animation: none; }
  .carton-one { transform: translate(105px,305px); opacity: 1; }
  .carton-two { transform: translate(275px,305px); opacity: 1; }
  .carton-three { transform: translate(432px,305px); opacity: 1; }
  .carton-checked { transform: translate(594px,296px) rotate(-8deg); opacity: 1; }
}

/* Milk bottles now travel in small cardboard trays, so the illustrated line reads
   as a bottling-and-packing operation rather than a generic carton conveyor. */
.ref-milk-pack { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.milk-pack-one { animation: ref-milk-pack-line 9s linear infinite; }
.milk-pack-two { animation: ref-milk-pack-line 9s linear 3s infinite; }
.milk-pack-three { animation: ref-milk-pack-line 9s linear 6s infinite; }
.milk-pack-checked { animation: ref-milk-pack-sort 9s linear infinite; }
.ref-milk-bottles { transform-box: fill-box; transform-origin: center bottom; animation: ref-milk-bottle-bob 1.35s ease-in-out infinite; }
/* A tray is 48 SVG units tall. The conveyor deck begins at y=359, so its
   transform baseline is y=311: 311 + 48 = 359. Keeping every travel keyframe
   on that baseline makes the trays visibly ride the belt instead of hovering. */
@keyframes ref-milk-pack-line {
  0% { transform: translate(-76px, 311px); opacity: 0; }
  4% { opacity: 1; }
  69% { transform: translate(455px, 311px); opacity: 1; }
  76%, 100% { transform: translate(532px, 311px); opacity: 0; }
}
@keyframes ref-milk-pack-sort {
  0%, 60% { transform: translate(453px,311px) rotate(0); opacity: 0; }
  64% { opacity: 1; }
  73% { transform: translate(453px,311px) rotate(0); opacity: 1; }
  91% { transform: translate(568px,311px) rotate(-8deg); opacity: 1; }
  100% { transform: translate(638px,311px) rotate(-8deg); opacity: 0; }
}
@keyframes ref-milk-bottle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-milk-pack, .ref-milk-bottles { animation: none; }
  .milk-pack-one { transform: translate(90px,311px); opacity: 1; }
  .milk-pack-two { transform: translate(270px,311px); opacity: 1; }
  .milk-pack-three { transform: translate(420px,311px); opacity: 1; }
  .milk-pack-checked { transform: translate(575px,311px) rotate(-8deg); opacity: 1; }
}

/* ---------------- Hero illustration art direction refinement ---------------- */
/* The production line is treated as a hero illustration, not a dashboard: fewer
   competing overlays, stronger depth cues and a quieter frame let the packing story
   read instantly from bottle intake to verified tray output. */
.hero-ref-line {
  isolation: isolate;
  background:
    radial-gradient(circle at 79% 17%, rgba(255,255,255,.72) 0 5%, transparent 26%),
    linear-gradient(148deg, #fffdf7 0%, #fff4dd 52%, #f6e6c7 100%);
  box-shadow: 0 26px 54px -34px rgba(66, 48, 28, .5), 0 3px 0 rgba(255,255,255,.8) inset;
}
.hero-ref-line::before {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.34), transparent 19%, transparent 79%, rgba(244,124,23,.07));
  mix-blend-mode: soft-light;
}
.ref-line-svg {
  position: relative;
  z-index: 0;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
.ref-line-caption,
.ref-line-status {
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
.ref-line-caption {
  border-color: rgba(81,70,61,.14);
  box-shadow: 0 14px 28px -22px rgba(81,70,61,.65), 0 1px 0 rgba(255,255,255,.8) inset;
}
.ref-line-status {
  border-color: rgba(81,70,61,.13);
  box-shadow: 0 12px 24px -20px rgba(81,70,61,.6), 0 1px 0 rgba(255,255,255,.8) inset;
}
/* The SVG groups use a restrained hierarchy: the robot has weight, bottles stay
   clean and legible, and the supporting scenery gently recedes. */
.ref-robot { filter: drop-shadow(0 14px 11px rgba(64,53,44,.14)); }
.ref-station, .ref-filler, .ref-packing-bay { filter: drop-shadow(0 9px 7px rgba(64,53,44,.12)); }
.ref-foliage { opacity: .96; }
.ref-cloud { opacity: .92; }
.ref-milk-pack { filter: drop-shadow(0 7px 5px rgba(64,53,44,.14)); }
.ref-milk-bottles path { vector-effect: non-scaling-stroke; }
.ref-line-svg .ref-conveyor { filter: drop-shadow(0 13px 8px rgba(64,53,44,.17)); }
/* Set a more believable rhythm: a subtle bottle settle follows each conveyor move
   rather than making the entire tray bounce like a UI loading indicator. */
.ref-milk-bottles { animation-duration: 1.8s; animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
.ref-gear { animation-duration: 22s; }
.ref-arm-upper, .ref-arm-lower, .ref-gripper { animation-timing-function: cubic-bezier(.45,0,.2,1); }
@media (max-width: 575px) {
  .hero-ref-line {
    min-height: 274px;
    box-shadow: 0 18px 34px -27px rgba(66,48,28,.45);
  }
  /* Keep the working line large enough to inspect on a phone; the scene can crop
     atmosphere at the edges but never the robot, bottles or final packing station. */
  .ref-line-svg { min-width: 560px; margin-left: 50%; transform: translateX(-50%); }
  .ref-line-caption { max-width: 61%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ref-line::before { display: none; }
}

/* ---------------- Hero: critical MRO gear assembly ---------------- */
.hero-mro-gears {
  position: relative; height: 420px; margin: 0; overflow: hidden; isolation: isolate;
  border: 1px solid #e5c48b; border-radius: var(--radius-lg);
  background: linear-gradient(145deg, #fffaf0, #f3dfbb); box-shadow: 0 26px 54px -34px rgba(66,48,28,.5);
}
.hero-mro-gears::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.34), transparent 22%, transparent 76%, rgba(241,93,8,.09)); }
.hero-mro-gears::after { content: ''; position: absolute; z-index: 1; right: -9%; bottom: -25%; width: 45%; aspect-ratio: 1; border: 2px dashed rgba(241,93,8,.2); border-radius: 50%; pointer-events: none; }
.mro-gear-svg { position: relative; z-index: 0; display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.mro-grid { stroke: #8e7d68; stroke-width: 1; opacity: .13; }
.mro-route { fill: none; stroke: #f15d08; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 11; opacity: .6; animation: mro-route-flow 4.5s linear infinite; }
.mro-callout { fill: #fffaf0; stroke: #7a6959; stroke-width: 3; }
.mro-callout circle { fill: rgba(255,250,240,.86); }
.mro-callout path { fill: none; stroke: #f15d08; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mro-callout text, .mro-labels text { fill: #665747; }
.mro-callout text { stroke: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-anchor: middle; }
.mro-gear { transform-box: fill-box; transform-origin: center; }
.mro-gear-large { animation: mro-turn-clockwise 15s linear infinite; }
.mro-gear-mid { animation: mro-turn-counter 11s linear infinite; }
.mro-gear-small { animation: mro-turn-counter 9s linear infinite; }
.mro-bearing-drop { transform-box: fill-box; transform-origin: center; animation: mro-bearing-install 6.6s cubic-bezier(.55,0,.3,1) infinite; }
.mro-bearing-fixed { animation: mro-bearing-pulse 2.2s ease-in-out infinite; }
.mro-sensor { transform-box: fill-box; transform-origin: center; animation: mro-sensor-scan 2.4s ease-in-out infinite; }
.mro-bolts circle { transform-box: fill-box; transform-origin: center; animation: mro-bolt-settle 3.2s ease-in-out infinite; }
.mro-bolts circle:nth-child(2) { animation-delay: -.8s; }.mro-bolts circle:nth-child(3) { animation-delay: -1.6s; }.mro-bolts circle:nth-child(4) { animation-delay: -2.4s; }
.mro-dash-line { animation: mro-belt-guide 1.4s linear infinite; }
.mro-gear-caption, .mro-gear-status { position: absolute; z-index: 3; border: 1px solid rgba(81,70,61,.15); background: rgba(255,253,247,.86); box-shadow: 0 12px 24px -20px rgba(81,70,61,.6), 0 1px 0 rgba(255,255,255,.8) inset; backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; }
.mro-gear-caption { top: 1rem; right: 1rem; display: grid; gap: .22rem; max-width: min(58%, 250px); padding: .6rem .75rem; border-radius: 12px; color: #51463d; }
.mro-gear-caption span { display: inline-flex; align-items: center; gap: .4rem; color: #c86208; font-size: .52rem; letter-spacing: .08em; }.mro-gear-caption span i { width: 7px; height: 7px; border-radius: 50%; background: #5cab70; box-shadow: 0 0 0 0 rgba(92,171,112,.42); animation: mro-live-pulse 1.8s ease-out infinite; }.mro-gear-caption strong { font-size: .54rem; line-height: 1.45; letter-spacing: .055em; }
.mro-gear-status { bottom: .9rem; display: flex; align-items: baseline; gap: .36rem; padding: .38rem .56rem; border-radius: 9px; color: #6f6256; font-size: .45rem; letter-spacing: .06em; }.mro-gear-status b { color: #51463d; font-size: .63rem; letter-spacing: 0; }.mro-gear-status-incoming { left: .9rem; }.mro-gear-status-output { right: .9rem; border-color: rgba(92,171,112,.35); }.mro-gear-status-output b { color: #438753; }
@keyframes mro-turn-clockwise { to { transform: rotate(360deg); } } @keyframes mro-turn-counter { to { transform: rotate(-360deg); } } @keyframes mro-route-flow { to { stroke-dashoffset: -60; } } @keyframes mro-belt-guide { to { stroke-dashoffset: -40; } }
@keyframes mro-live-pulse { 70% { box-shadow: 0 0 0 7px rgba(92,171,112,0); } 100% { box-shadow: 0 0 0 0 rgba(92,171,112,0); } }
@keyframes mro-bearing-install { 0%, 9% { transform: translate(-110px,-125px) rotate(-25deg); opacity: 0; } 18% { opacity: 1; } 46%, 100% { transform: translate(0,0) rotate(360deg); opacity: 1; } }
@keyframes mro-bearing-pulse { 50% { filter: drop-shadow(0 0 7px rgba(92,171,112,.65)); } } @keyframes mro-sensor-scan { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 7px rgba(241,93,8,.45)); } } @keyframes mro-bolt-settle { 50% { transform: translateY(-4px) rotate(25deg); } }
@media (max-width: 575px) { .hero-mro-gears { height: min(390px,68vw); min-height: 274px; border-radius: 20px; }.mro-gear-svg { min-width: 560px; margin-left: 50%; transform: translateX(-50%); }.mro-gear-caption { top: .75rem; right: .75rem; max-width: 61%; padding: .48rem .58rem; }.mro-gear-caption span, .mro-gear-caption strong { font-size: .45rem; }.mro-gear-status { bottom: .7rem; padding: .3rem .42rem; font-size: .38rem; }.mro-gear-status b { font-size: .5rem; }.mro-gear-status-incoming { left: .7rem; }.mro-gear-status-output { right: .7rem; } }
@media (prefers-reduced-motion: reduce) { .mro-route, .mro-gear, .mro-bearing-drop, .mro-bearing-fixed, .mro-sensor, .mro-bolts circle, .mro-dash-line, .mro-gear-caption span i { animation: none; }.mro-bearing-drop { transform: translate(0,0); opacity: 1; } }

/* ---------------- Hero: MRO automation line (dark tech, 3-zone layout) ---------------- */
/* Zone A (storage) -> connecting data layer -> Zone B (gear-driven conveyor) ->
   Zone C (robotic packaging arm + schematic box). Deep gray / industrial blue
   palette with restrained accent glows, matching a modern high-tech hero. */
.hero-mro-line {
  position: relative; height: 420px; margin: 0; overflow: hidden; isolation: isolate;
  border: 1px solid #2a2e35; border-radius: var(--radius-lg); background: #15151b;
  box-shadow: 0 26px 54px -34px rgba(0,0,0,.55);
}
.mro-line-svg { display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.mro-line-grid { opacity: .08; }
.mro-line-label { fill: #7e8894; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }

/* Connecting data layer: pulsing circuit lines + data nodes */
.mro-circuit-path { animation: mro-circuit-flow 3.4s linear infinite; }
.mro-circuit-delay-1 { animation-delay: -.6s; }
.mro-circuit-delay-2 { animation-delay: -1.4s; }
.mro-circuit-delay-3 { animation-delay: -2.2s; }
.mro-line-nodes circle { transform-box: fill-box; transform-origin: center; animation: mro-node-ping 2.1s ease-in-out infinite; }
.mro-line-nodes circle:nth-child(2n) { animation-delay: -.7s; }
.mro-line-nodes circle:nth-child(3n) { animation-delay: -1.3s; }

/* Zone B: interlocking gears + moving belt items */
.mro-gear { transform-box: fill-box; transform-origin: center; }
.mro-gear-1 { animation: mro-gear-cw 9s linear infinite; }
.mro-gear-2 { animation: mro-gear-ccw 7s linear infinite; }
.mro-gear-3 { animation: mro-gear-cw 11s linear infinite; }
.mro-gear-4 { animation: mro-gear-ccw 6.4s linear infinite; }
.mro-gear-5 { animation: mro-gear-cw 8s linear infinite; }
.mro-gear-glow { animation: mro-glow-pulse 2.6s ease-in-out infinite; }
.mro-belt-dashes { animation: mro-belt-run 1.1s linear infinite; }
.mro-belt-item { transform-box: view-box; transform-origin: 0 0; opacity: 0; }
.mro-belt-item-1 { animation: mro-belt-item-travel 6s linear infinite; }
.mro-belt-item-2 { animation: mro-belt-item-travel 6s linear -2s infinite; }
.mro-belt-item-3 { animation: mro-belt-item-travel 6s linear -4s infinite; }

/* Zone C: robotic arm pick + place cycle */
.mro-robot-upper, .mro-robot-fore { transform-box: fill-box; transform-origin: left center; }
.mro-robot-upper { animation: mro-arm-upper 6s cubic-bezier(.45,0,.2,1) infinite; }
.mro-robot-fore { animation: mro-arm-fore 6s cubic-bezier(.45,0,.2,1) infinite; }
.mro-robot-gripper { transform-box: fill-box; transform-origin: center; }
.mro-gripper-jaw { transform-box: fill-box; transform-origin: 2px 0; animation: mro-gripper-close 6s cubic-bezier(.45,0,.2,1) infinite; }
.mro-gripper-jaw-b { animation-name: mro-gripper-close-b; }
.mro-box-part { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: mro-box-part-place 6s cubic-bezier(.45,0,.2,1) infinite; }

/* Caption / status chips reuse the same restrained glass-panel treatment */
.mro-line-caption, .mro-line-status {
  position: absolute; z-index: 3; border: 1px solid rgba(255,255,255,.1); background: rgba(21,21,27,.72);
  box-shadow: 0 12px 24px -20px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
}
.mro-line-caption { top: 1rem; right: 1rem; display: grid; gap: .22rem; max-width: min(58%, 250px); padding: .6rem .75rem; border-radius: 12px; color: #cfd6dc; }
.mro-line-caption span { display: inline-flex; align-items: center; gap: .4rem; color: #6cc4ff; font-size: .52rem; letter-spacing: .08em; }
.mro-line-caption span i { width: 7px; height: 7px; border-radius: 50%; background: #3fa9f5; animation: mro-live-pulse 1.8s ease-out infinite; }
.mro-line-caption strong { font-size: .54rem; line-height: 1.45; letter-spacing: .055em; color: #f2f4f6; }
.mro-line-status { bottom: .9rem; display: flex; align-items: baseline; gap: .36rem; padding: .38rem .56rem; border-radius: 9px; color: #9aa3ab; font-size: .45rem; letter-spacing: .06em; }
.mro-line-status b { color: #f2f4f6; font-size: .63rem; letter-spacing: 0; }
.mro-line-status-in { left: .9rem; }
.mro-line-status-out { right: .9rem; border-color: rgba(63,169,245,.4); }
.mro-line-status-out b { color: #6cc4ff; }

@keyframes mro-circuit-flow { to { stroke-dashoffset: -60; } }
@keyframes mro-node-ping { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.7); opacity: 1; filter: drop-shadow(0 0 4px #3fa9f5); } }
@keyframes mro-gear-cw { to { transform: rotate(360deg); } }
@keyframes mro-gear-ccw { to { transform: rotate(-360deg); } }
@keyframes mro-glow-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes mro-belt-run { to { stroke-dashoffset: -44; } }
@keyframes mro-belt-item-travel {
  0% { transform: translate(320px, 375px); opacity: 0; }
  6% { opacity: 1; }
  92% { transform: translate(690px, 375px); opacity: 1; }
  100% { transform: translate(710px, 375px); opacity: 0; }
}
@keyframes mro-arm-upper { 0%, 45%, 100% { transform: rotate(0deg); } 58%, 75% { transform: rotate(-32deg); } }
@keyframes mro-arm-fore { 0%, 45%, 100% { transform: rotate(0deg); } 58%, 75% { transform: rotate(24deg); } }
@keyframes mro-gripper-close { 0%, 45%, 100% { transform: rotate(0deg); } 55%, 78% { transform: rotate(14deg); } }
@keyframes mro-gripper-close-b { 0%, 45%, 100% { transform: rotate(0deg); } 55%, 78% { transform: rotate(-14deg); } }
@keyframes mro-live-pulse { 70% { box-shadow: 0 0 0 7px rgba(63,169,245,0); } 100% { box-shadow: 0 0 0 0 rgba(63,169,245,0); } }
@keyframes mro-box-part-place {
  0%, 55% { transform: translate(940px, 220px); opacity: 0; }
  62% { opacity: 1; }
  75%, 96% { transform: translate(900px, 372px); opacity: 1; }
  100% { transform: translate(900px, 372px); opacity: 0; }
}
@media (max-width: 575px) {
  .hero-mro-line { height: min(390px, 68vw); min-height: 274px; border-radius: 20px; }
  .mro-line-svg { min-width: 640px; margin-left: 50%; transform: translateX(-50%); }
  .mro-line-caption { top: .75rem; right: .75rem; max-width: 61%; padding: .48rem .58rem; }
  .mro-line-caption span, .mro-line-caption strong { font-size: .45rem; }
  .mro-line-status { bottom: .7rem; padding: .3rem .42rem; font-size: .38rem; }
  .mro-line-status b { font-size: .5rem; }
  .mro-line-status-in { left: .7rem; }
  .mro-line-status-out { right: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mro-circuit-path, .mro-line-nodes circle, .mro-gear, .mro-gear-glow, .mro-belt-dashes,
  .mro-belt-item, .mro-robot-upper, .mro-robot-fore, .mro-gripper-jaw, .mro-box-part,
  .mro-line-caption span i { animation: none; }
  .mro-belt-item-1 { transform: translate(420px, 375px); opacity: 1; }
  .mro-belt-item-2 { transform: translate(530px, 375px); opacity: 1; }
  .mro-belt-item-3 { transform: translate(630px, 375px); opacity: 1; }
  .mro-box-part { transform: translate(900px, 372px); opacity: 1; }
}

/* ---------------- About process: balanced timeline refinement ---------------- */
/* Four equal cards make the sourcing sequence faster to scan than a staggered
   masonry arrangement. The rail now sits above the cards, so it connects steps
   without cutting through the reading area. */
@media (min-width: 992px) {
  .about-process-heading { margin-bottom: 2.5rem; }
  .about-process-journey { min-height: 0; padding-top: 3.6rem; }
  .about-process-rail {
    top: 1.4rem;
    left: calc(12.5% + .15rem);
    right: calc(12.5% + .15rem);
    transform: none;
  }
  .about-process-rail::before,
  .about-process-rail::after { top: 0; transform: translateY(-50%); }
  .about-process-list { gap: 1rem; }
  .about-process-step,
  .about-process-step:nth-child(even) {
    display: block;
    padding-top: 0;
  }
  .about-process-step::before {
    content: '';
    position: absolute;
    z-index: 2;
    top: -2.65rem;
    left: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: #ffb27a;
    box-shadow: 0 0 0 1px rgba(255,255,255,.38);
    transform: translateX(-50%);
    transition: background .2s ease, box-shadow .2s ease;
  }
  .about-process-step.is-in-view::before {
    background: var(--brand);
    box-shadow: 0 0 0 6px rgba(250,94,7,.18);
  }
  .about-process-card {
    min-height: 286px;
    padding: 1.3rem;
  }
  .about-process-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
  }
  .about-process-pulse { bottom: 1.15rem; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .about-process-card { min-height: 310px; padding: 1.1rem; }
  .about-process-card h3 { font-size: .84rem; }
  .about-process-card p { font-size: .71rem; }
}

/* ---------------- Home process: stable signal-line layout ----------------
   The cards use a calm, one-time reveal instead of continuously translating and
   rotating with the scroll position. This keeps the route feeling alive while
   preventing cards from crossing each other or clipping their copy mid-scroll. */
.home-process-section {
  padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  background:
    radial-gradient(circle at 12% 14%, rgba(250,94,7,.08), transparent 25%),
    linear-gradient(180deg, #eee5d4 0%, #e9dfcc 100%);
}
.home-process-heading {
  max-width: 1080px;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.home-process-heading .display-headline {
  max-width: 650px;
  font-size: clamp(1.7rem, 3.9vw, 2.7rem);
  letter-spacing: -.045em;
}
.home-process-heading .lede { max-width: 380px; line-height: 1.7; }
.home-process-flow {
  max-width: 1120px;
  min-height: 0;
  padding-top: 4rem;
}
.home-process-grid { inset: 0 1% 0; opacity: .3; }
.home-process-path {
  top: 1.55rem;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  z-index: 0;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(21,19,15,.2) 0 7px, transparent 7px 13px);
}
.home-process-path-fill {
  height: 4px;
  margin-top: -.5px;
  border-radius: inherit;
  transition: transform .22s linear;
}
.home-process-signal { transition: left .22s linear; }
.home-process-list {
  align-items: stretch;
  gap: clamp(.8rem, 1.6vw, 1.35rem);
}
.home-process-step,
.home-process-step:nth-child(even) {
  display: block;
  min-width: 0;
  padding-top: 0;
}
.home-process-step::after,
.home-process-step:nth-child(even)::after {
  top: -2.45rem;
  left: 50%;
  z-index: 2;
  width: 13px;
  height: 13px;
  background: #f5ecdc;
  border: 3px solid #e9dfcc;
  box-shadow: 0 0 0 1px rgba(21,19,15,.2);
  transform: translate(-50%, -50%);
}
.home-process-step.is-revealed::after {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 6px rgba(250,94,7,.14);
}
.home-process-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 318px;
  padding: clamp(1.15rem, 2vw, 1.4rem);
  /* Reserve a dedicated footer zone so the handoff status never sits on top of the copy. */
  padding-bottom: clamp(2.75rem, 3.2vw, 3rem);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border-color: rgba(21,19,15,.13);
  box-shadow: 0 18px 34px -28px rgba(21,19,15,.62);
  transform: translate3d(0, 20px, 0) scale(.985);
  transition:
    opacity .62s cubic-bezier(.16,1,.3,1),
    transform .62s cubic-bezier(.16,1,.3,1),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}
.home-process-flow.is-scroll-fade-ready .home-process-card {
  opacity: 0;
  transition-delay: var(--home-card-delay, 0ms);
}
.home-process-flow.is-scroll-fade-ready .home-process-step.is-faded-in .home-process-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.home-process-card:hover {
  transform: translate3d(0, -5px, 0) scale(1.01) !important;
  border-color: rgba(250,94,7,.62);
  background: rgba(255,255,255,.98);
  box-shadow: 0 25px 44px -28px rgba(21,19,15,.62), 0 0 0 1px rgba(250,94,7,.08);
}
.home-process-card-top { margin-bottom: 1.25rem; }
.home-process-card h3 {
  max-width: 235px;
  font-size: clamp(.86rem, 1.25vw, 1rem);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.home-process-card p {
  max-width: 250px;
  margin-bottom: 0;
  font-size: .78rem;
  line-height: 1.68;
}
.home-process-status { bottom: 1.15rem; }
.home-process-footer { max-width: 760px; margin-top: 2.4rem; }

@media (max-width: 991px) {
  .home-process-flow { padding-top: 0; }
  .home-process-path { display: none; }
  .home-process-step::after,
  .home-process-step:nth-child(even)::after { display: none; }
  .home-process-card { min-height: 285px; }
}

@media (max-width: 575px) {
  .home-process-section { padding: 3.8rem 0 3.25rem; }
  .home-process-heading { margin-bottom: 2rem; }
  .home-process-heading .display-headline { font-size: clamp(1.55rem, 8vw, 2rem); }
  .home-process-flow { padding-top: 0; }
  .home-process-grid { inset: 0 0 0 1rem; opacity: .2; }
  .home-process-path {
    display: block;
    top: .7rem;
    bottom: .7rem;
    left: 8px;
    right: auto;
    width: 2px;
    height: auto;
    border-radius: 0;
    background: repeating-linear-gradient(180deg, rgba(21,19,15,.22) 0 7px, transparent 7px 13px);
    transform: none;
  }
  .home-process-path-fill {
    width: 4px;
    height: 100%;
    margin: 0 0 0 -1px;
    transform: scaleY(var(--home-flow-progress));
    transform-origin: top center;
  }
  .home-process-signal {
    top: calc(var(--home-flow-progress) * 100%);
    left: 50%;
    transition: top .22s linear;
  }
  .home-process-path::before { top: -5px; left: 50%; transform: translateX(-50%); }
  .home-process-path::after { top: auto; right: auto; bottom: -5px; left: 50%; transform: translateX(-50%); }
  .home-process-list { gap: 1rem; padding-left: 2rem; }
  .home-process-step,
  .home-process-step:nth-child(even) { padding-top: 0; }
  .home-process-step::after,
  .home-process-step:nth-child(even)::after {
    display: block;
    top: 1.65rem;
    left: -2rem;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
  }
  .home-process-card {
    min-height: 0;
    padding: 1.15rem 1.15rem 2.85rem;
  }
  .home-process-card p { max-width: none; font-size: .77rem; }
  .home-process-footer { align-items: flex-start; margin-top: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-process-card,
  .home-process-flow.is-scroll-fade-ready .home-process-card,
  .home-process-flow.is-scroll-fade-ready .home-process-step.is-faded-in .home-process-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .home-process-path-fill { transition: none; }
  .home-process-signal { transition: none; }
  .home-process-status i { animation: none !important; }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
  .home-process-path-fill { transform: scaleY(1); }
  .home-process-signal { top: 100%; left: 50%; }
}

/* ---------------- Home sourcing carousel: editorial polish ----------------
   The insight cards use a restrained glass-paper treatment: shorter copy keeps
   the cards balanced, the active slide gets a little more visual weight, and
   the edge lighting makes the horizontal route feel intentional on touch. */
.article-carousel {
  position: relative;
  margin: 2rem -1rem 2.35rem;
  padding: 1.05rem 1rem .95rem;
  border: 1px solid rgba(215,199,164,.8);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(250,94,7,.11), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(241,234,217,.7));
  box-shadow: 0 22px 44px -32px rgba(21,19,15,.55), inset 0 1px rgba(255,255,255,.9);
  overflow: hidden;
}
.article-carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .9;
}
.article-carousel-head { position: relative; z-index: 1; margin-bottom: .8rem; }
.article-carousel-count { color: var(--brand-dark); font-size: .6rem; letter-spacing: .1em; }
.article-carousel-controls { gap: .5rem; }
.article-carousel-nav {
  width: 40px;
  height: 40px;
  border-color: rgba(215,199,164,.95);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 16px -12px rgba(21,19,15,.55);
}
.article-carousel-nav:hover:not(:disabled) {
  box-shadow: 0 8px 18px -10px rgba(250,94,7,.65);
  transform: translateY(-2px) scale(1.03);
}
.article-carousel-viewport {
  position: relative;
  margin: 0 -.1rem;
  padding: .15rem .1rem .2rem;
}
.article-carousel-track { gap: .9rem; padding: .15rem .1rem .7rem; }
.article-carousel-card {
  flex-basis: min(calc((min(760px, 100vw) - 2.9rem) / 2), 350px);
  min-height: 276px;
  padding: 1.3rem 1.35rem 2.7rem;
  border-radius: 18px;
  border-color: rgba(215,199,164,.95);
  background:
    radial-gradient(circle at 92% 88%, rgba(250,94,7,.08), transparent 25%),
    linear-gradient(155deg, #fffefa 0%, #f2eadb 100%);
  box-shadow: 0 13px 28px -24px rgba(21,19,15,.55);
  opacity: .84;
  transform: translateY(5px) scale(.985);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  animation: article-card-in .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--article-card-index, 0) * 70ms);
}
.article-carousel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,.45), transparent 35%);
  opacity: .75;
}
.article-carousel-card::after {
  content: '';
  position: absolute;
  right: -34px;
  bottom: -38px;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(21,19,15,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(21,19,15,.025), 0 0 0 28px rgba(21,19,15,.018);
  pointer-events: none;
}
.article-carousel-card.is-active,
.article-carousel-card:hover {
  opacity: 1;
  border-color: rgba(250,94,7,.7);
  box-shadow: 0 20px 34px -24px rgba(21,19,15,.58), 0 0 0 1px rgba(250,94,7,.08);
  transform: translateY(-3px) scale(1);
}
.article-carousel-card .article-section-icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  background: rgba(250,94,7,.13);
  border: 1px solid rgba(250,94,7,.1);
  transition: transform .3s ease, background .3s ease;
}
.article-carousel-card:hover .article-section-icon,
.article-carousel-card.is-active .article-section-icon {
  background: rgba(250,94,7,.2);
  transform: translateY(-2px) rotate(-3deg);
}
.article-carousel-card h3,
.article-carousel-card p,
.article-carousel-index { position: relative; z-index: 1; }
.article-carousel-card h3 {
  max-width: 280px;
  margin-bottom: .55rem;
  font-size: clamp(.88rem, 1.5vw, 1rem);
  line-height: 1.3;
}
.article-carousel-card p.lede {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  margin-bottom: 0;
  font-size: .8rem;
  line-height: 1.65;
}
.article-carousel-index {
  position: relative;
  right: auto;
  bottom: auto;
  align-self: flex-end;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--brand-dark);
  font-size: .6rem;
}
.article-carousel-progress {
  position: relative;
  height: 4px;
  margin-top: .05rem;
  background: rgba(215,199,164,.72);
}
.article-carousel-progress span {
  background: linear-gradient(90deg, var(--brand-dark), var(--brand), #ffb27a);
  box-shadow: 0 0 10px rgba(250,94,7,.32);
}
@keyframes article-card-in {
  from { opacity: 0; transform: translateY(15px) scale(.97); }
  to { opacity: .84; transform: translateY(5px) scale(.985); }
}
@media (max-width: 767px) {
  .article-carousel { margin-inline: -.35rem; padding-inline: .75rem; border-radius: 20px; }
  .article-carousel-card {
    flex-basis: min(84vw, 340px);
    min-height: 250px;
    padding: 1.15rem 1.15rem 1.25rem;
  }
  .article-carousel-card p.lede { -webkit-line-clamp: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .article-carousel-card { animation: none; opacity: 1; transform: none; transition: none; }
  .article-carousel-card.is-active, .article-carousel-card:hover { transform: none; }
  .article-carousel-card .article-section-icon { transition: none; }
}

/* ---------------- Home highlights marquee: service route refinement ----------------
   Keep the moving service line visually separate from the editorial copy below it.
   The mono type and warm graphite treatment fit the site's technical sourcing language
   without competing with the orange action color. */
.home-parts-marquee {
  height: clamp(5.2rem, 12vw, 8.4rem);
  background: linear-gradient(90deg, rgba(250,247,241,.98), rgba(255,255,255,.5) 18%, rgba(255,255,255,.5) 82%, rgba(250,247,241,.98));
}
.home-parts-marquee + .container {
  padding-top: clamp(2rem, 4vw, 3.1rem);
}
.home-parts-marquee-track {
  gap: clamp(.6rem, 1.8vw, 1.2rem);
  animation-duration: 30s;
}
.home-parts-marquee-track span.home-parts-marquee-word:not(.home-parts-marquee-dot) {
  margin-inline: clamp(1.25rem, 4vw, 4.2rem);
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 4.7vw, 4.55rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: rgba(125,117,102,.16);
  -webkit-text-stroke: 1px rgba(125,117,102,.56);
  text-shadow: 1px 1px 0 rgba(255,255,255,.7);
}
.home-parts-marquee-dot {
  color: var(--brand);
  font-size: clamp(.65rem, 1.6vw, 1.05rem);
  opacity: .72;
}
@media (max-width: 575px) {
  .home-parts-marquee + .container { padding-top: 1.5rem; }
  .home-parts-marquee-track span.home-parts-marquee-word:not(.home-parts-marquee-dot) {
    margin-inline: 1rem;
    font-size: clamp(1.05rem, 6.2vw, 1.65rem);
    letter-spacing: .055em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-parts-marquee-track { animation: none; }
}

/* Drag gesture support: mouse users can grab the track just like a touch
   surface. Vertical touch movement is still left to the page, while horizontal
   movement is owned by the carousel script. */
.article-carousel-viewport {
  cursor: grab;
  touch-action: pan-y;
}
.article-carousel-viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none;
}
.article-carousel-viewport.is-dragging .article-carousel-card {
  pointer-events: none;
}

/* ---------------- Contact process: balanced glass cards ----------------
   The four request stages share one readable content rhythm. Equal-height flex
   columns keep the route aligned, while the hover treatment adds a restrained
   glass reflection without changing the site's warm editorial palette. */
.industrial-route-process {
  align-items: stretch;
  row-gap: 1.25rem;
}
.industrial-route-process > [data-route-stop] {
  display: flex;
  min-width: 0;
}
.industrial-route-process .contact-process-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 352px;
  padding: 1.35rem;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(241,234,217,.58)),
    rgba(255,255,255,.54);
  border: 1px solid rgba(250,94,7,.48);
  border-radius: 18px;
  box-shadow: 0 16px 28px -23px rgba(21,19,15,.42), inset 0 1px rgba(255,255,255,.9);
  backdrop-filter: blur(8px) saturate(1.03);
  -webkit-backdrop-filter: blur(8px) saturate(1.03);
  transition: transform .28s cubic-bezier(.16,1,.3,1), background .28s ease,
    border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
.industrial-route-process .contact-process-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.7), transparent 28%, transparent 68%, rgba(250,94,7,.08));
  opacity: .62;
  transition: opacity .28s ease, transform .45s ease;
}
.industrial-route-process .contact-process-card::after {
  content: '';
  position: absolute;
  right: -46px;
  bottom: -54px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(21,19,15,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(21,19,15,.025), 0 0 0 32px rgba(21,19,15,.018);
  pointer-events: none;
}
.industrial-route-process .contact-process-card > * {
  position: relative;
  z-index: 1;
}
.industrial-route-process .contact-process-card .step-card-num {
  flex: none;
  margin-bottom: 1.2rem;
  width: 40px;
  height: 40px;
  background: rgba(250,94,7,.12);
  border: 1px solid rgba(250,94,7,.12);
  transition: background .28s ease, color .28s ease, transform .28s ease;
}
.industrial-route-process .contact-process-card h4 {
  min-height: 3.15rem;
  margin-bottom: .72rem;
  line-height: 1.32;
  letter-spacing: -.015em;
}
.industrial-route-process .contact-process-card p {
  flex: 1;
  max-width: none;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.68;
}
.industrial-route-process .contact-process-card:hover,
.industrial-route-process .contact-process-card:focus-within {
  transform: translateY(-8px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.28)),
    rgba(255,255,255,.38);
  border-color: rgba(250,94,7,.82);
  box-shadow: 0 26px 42px -25px rgba(21,19,15,.48), 0 0 0 1px rgba(250,94,7,.12), inset 0 1px rgba(255,255,255,.95);
  backdrop-filter: blur(18px) saturate(1.24);
  -webkit-backdrop-filter: blur(18px) saturate(1.24);
}
.industrial-route-process .contact-process-card:hover::before,
.industrial-route-process .contact-process-card:focus-within::before {
  opacity: 1;
  transform: translateX(8%);
}
.industrial-route-process .contact-process-card:hover .step-card-num,
.industrial-route-process .contact-process-card:focus-within .step-card-num {
  background: var(--brand);
  color: #fff;
  transform: translateY(-2px) rotate(-3deg);
}
@media (max-width: 991px) {
  .industrial-route-process .contact-process-card { min-height: 330px; }
}
@media (max-width: 575px) {
  .industrial-route-process .contact-process-card {
    min-height: 0;
    padding: 1.2rem;
  }
  .industrial-route-process .contact-process-card h4 { min-height: 0; }
  .industrial-route-process .contact-process-card:hover,
  .industrial-route-process .contact-process-card:focus-within { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .industrial-route-process .contact-process-card,
  .industrial-route-process .contact-process-card::before,
  .industrial-route-process .contact-process-card .step-card-num { transition: none; }
  .industrial-route-process .contact-process-card:hover,
  .industrial-route-process .contact-process-card:focus-within { transform: none; }
}

/* ---------------- Contact process: production-line route ----------------
   Compact cards now read as four connected stations: intake, sourcing, QA, and
   aftercare. The rail sits above the cards on wide screens and becomes a vertical
   handoff line on phones, so the sequence is visible without cutting through copy. */
.industrial-route-process {
  --route-progress: 1;
  position: relative;
  isolation: isolate;
  padding-top: 4.4rem;
}
.industrial-route-process::before,
.industrial-route-process::after {
  top: 1.65rem;
  left: 12.5%;
  right: 12.5%;
  width: auto;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
}
.industrial-route-process::before {
  background: repeating-linear-gradient(90deg, rgba(21,19,15,.25) 0 7px, transparent 7px 13px);
}
.industrial-route-process::after {
  right: auto;
  width: 75%;
  background: linear-gradient(90deg, var(--brand), #ffb27a);
  box-shadow: 0 0 16px rgba(250,94,7,.38);
  transform: translateY(-50%) scaleX(var(--route-progress));
  transform-origin: left center;
}
.industrial-route-process > [data-route-stop] {
  position: relative;
  display: flex;
  min-width: 0;
}
.industrial-route-process > [data-route-stop]::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: -2.75rem;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px rgba(250,94,7,.14), 0 0 16px rgba(250,94,7,.28);
  transform: translateX(-50%);
}
.industrial-route-process > [data-route-stop]::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -2.2rem;
  left: 50%;
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(var(--brand), rgba(250,94,7,0));
  transform: translateX(-50%);
}
.industrial-route-process .contact-process-card {
  min-height: 258px;
  padding: 1.25rem;
  border-radius: 18px;
  background:
    linear-gradient(rgba(21,19,15,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,19,15,.035) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(241,234,217,.68));
  background-size: 22px 22px, 22px 22px, auto;
  box-shadow: 0 18px 32px -25px rgba(21,19,15,.52), inset 0 1px rgba(255,255,255,.95);
}
.industrial-route-process .contact-process-card::before {
  background: linear-gradient(115deg, rgba(255,255,255,.82), transparent 32%, transparent 67%, rgba(250,94,7,.11));
}
.industrial-route-process .contact-process-card .step-card-num {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  font-size: .72rem;
  box-shadow: 0 6px 12px -8px rgba(21,19,15,.8);
}
.industrial-route-process .contact-process-card h4 {
  min-height: 0;
  max-width: 240px;
  margin-bottom: .6rem;
  font-size: .92rem;
  line-height: 1.3;
}
.industrial-route-process .contact-process-card p {
  flex: 0 1 auto;
  max-width: 265px;
  font-size: .76rem;
  line-height: 1.62;
}
.industrial-route-process .contact-process-card:hover .step-card-num,
.industrial-route-process .contact-process-card:focus-within .step-card-num {
  background: var(--brand);
  border-color: var(--brand);
}
@media (max-width: 991px) {
  .industrial-route-process { padding-top: 3.8rem; }
  .industrial-route-process::before,
  .industrial-route-process::after { top: 1.35rem; left: 16%; right: 16%; }
  .industrial-route-process::after { width: 68%; }
  .industrial-route-process > [data-route-stop]::after { top: -2.35rem; }
  .industrial-route-process > [data-route-stop]::before { top: -1.8rem; }
  .industrial-route-process .contact-process-card { min-height: 230px; }
}
@media (max-width: 575px) {
  .industrial-route-process {
    padding-top: 0;
    padding-left: 2.05rem;
    row-gap: 1rem;
  }
  .industrial-route-process::before,
  .industrial-route-process::after {
    top: .7rem;
    bottom: .7rem;
    left: .45rem;
    right: auto;
    width: 2px;
    height: auto;
    border-radius: 0;
    transform: none;
  }
  .industrial-route-process::before {
    background: repeating-linear-gradient(180deg, rgba(21,19,15,.25) 0 7px, transparent 7px 13px);
  }
  .industrial-route-process::after {
    height: calc(100% - 1.4rem);
    background: linear-gradient(180deg, var(--brand), #ffb27a);
    transform: scaleY(var(--route-progress));
    transform-origin: top center;
  }
  .industrial-route-process > [data-route-stop]::after {
    top: 1.45rem;
    left: -1.6rem;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
  }
  .industrial-route-process > [data-route-stop]::before {
    top: 1.45rem;
    left: -1.05rem;
    width: 1.05rem;
    height: 1px;
    background: linear-gradient(90deg, var(--brand), rgba(250,94,7,0));
    transform: translateY(-50%);
  }
  .industrial-route-process .contact-process-card {
    min-height: 0;
    padding: 1.15rem;
  }
  .industrial-route-process .contact-process-card p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .industrial-route-process::after { transform: translateY(-50%) scaleX(1); transition: none; }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
  .industrial-route-process::after { transform: scaleY(1); }
}

/* ---------------- Contact process: refined production rail ----------------
   The route is a key visual connector, not a decorative rule. A quiet graphite
   track, warm active signal and individual station beacons make the line feel
   like part of the Ampionic production system while keeping it aligned with the
   four cards below. */
.industrial-route-process::before,
.industrial-route-process::after {
  left: 11%;
  right: 11%;
  width: auto;
  border-radius: 999px;
}
.industrial-route-process::before {
  height: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(21,19,15,.08)),
    #d7c7a4;
  border: 1px solid rgba(21,19,15,.16);
  box-shadow:
    0 2px 0 rgba(255,255,255,.62) inset,
    0 5px 12px -8px rgba(21,19,15,.6);
}
.industrial-route-process::after {
  height: 3px;
  background: linear-gradient(90deg, var(--ink) 0%, #5b3c29 27%, var(--brand) 67%, #ffb27a 100%);
  box-shadow: 0 0 12px rgba(250,94,7,.48), 0 1px 0 rgba(255,255,255,.42);
}
.industrial-route-process > [data-route-stop]::after {
  width: 17px;
  height: 17px;
  border: 3px solid rgba(255,255,255,.86);
  background: radial-gradient(circle, var(--brand) 0 4px, #fff5e8 4.5px 6px, var(--brand) 6.5px 100%);
  box-shadow:
    0 0 0 1px rgba(21,19,15,.18),
    0 0 0 6px rgba(250,94,7,.13),
    0 4px 12px -5px rgba(21,19,15,.58);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.industrial-route-process > [data-route-stop]::before {
  width: 2px;
  height: 1.35rem;
  background: linear-gradient(180deg, rgba(250,94,7,.8), rgba(250,94,7,.08));
}
.industrial-route-process > [data-route-stop]:hover::after,
.industrial-route-process > [data-route-stop]:focus-within::after {
  transform: translateX(-50%) scale(1.16);
  box-shadow:
    0 0 0 1px rgba(21,19,15,.2),
    0 0 0 8px rgba(250,94,7,.16),
    0 0 18px rgba(250,94,7,.48);
}
@media (max-width: 575px) {
  .industrial-route-process::before,
  .industrial-route-process::after {
    left: .25rem;
    right: auto;
    width: 8px;
    height: auto;
    border-radius: 999px;
  }
  .industrial-route-process::after {
    width: 3px;
    height: calc(100% - 1.4rem);
  }
  .industrial-route-process > [data-route-stop]::after {
    top: 1.45rem;
    left: -1.6rem;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
  }
  .industrial-route-process > [data-route-stop]:hover::after,
  .industrial-route-process > [data-route-stop]:focus-within::after {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .industrial-route-process > [data-route-stop]::after { transition: none; }
}

/* Final rail cleanup: use one aligned track. The active signal sits directly on
   the same graphite rail instead of creating a second visible stripe. */
.industrial-route-process::before {
  height: 3px;
  background: #6e6254;
  border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.55), 0 4px 10px -7px rgba(21,19,15,.55);
}
.industrial-route-process::after {
  height: 3px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 72%, #ffb27a);
  box-shadow: 0 0 11px rgba(250,94,7,.42);
}
@media (max-width: 575px) {
  .industrial-route-process::before {
    width: 3px;
    height: auto;
    background: #6e6254;
    box-shadow: 1px 0 0 rgba(255,255,255,.55), 3px 0 8px -6px rgba(21,19,15,.55);
  }
  .industrial-route-process::after {
    width: 3px;
    height: calc(100% - 1.4rem);
  }
}

/* ---------------- About process: reference-style sourcing timeline ----------------
   Keep the About page process close to the clean editorial reference: centered
   heading, one orange rail above four equal cards, and a small station beacon for
   every handoff. */
.about-process-section {
  --about-rail-progress: 1;
  padding: clamp(4.25rem, 7vw, 5.75rem) 0 clamp(3.75rem, 6vw, 5.25rem);
  color: var(--ink);
  background: #fff;
  overflow: hidden;
}
.about-process-section::before { display: none; }
.about-process-heading {
  display: block;
  max-width: 900px;
  margin: 0 auto clamp(2rem, 3vw, 2.7rem);
  text-align: center;
}
.about-process-heading .eyebrow {
  justify-content: center;
  color: var(--brand-dark);
}
.about-process-heading .display-headline {
  max-width: 920px;
  margin: .55rem auto 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  letter-spacing: -.045em;
}
.about-process-heading .lede { display: none; }
.about-process-journey {
  max-width: 1320px;
  min-height: 0;
  padding-top: 4.25rem;
  margin: 0 auto;
}
.about-process-rail {
  top: 1.45rem;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 72%, #ffb27a);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 3px 9px -6px rgba(21,19,15,.55);
  transform: none;
}
.about-process-rail::before,
.about-process-rail::after { display: none; }
.about-process-rail span {
  height: 3px;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.about-process-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1.45rem);
  align-items: stretch;
}
.about-process-step,
.about-process-step:nth-child(even) {
  display: block;
  min-width: 0;
  padding-top: 0;
}
.about-process-step::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -2.7rem;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(250,94,7,.13), 0 3px 9px -4px rgba(21,19,15,.45);
  transform: translateX(-50%);
}
.about-process-step::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: -1.95rem;
  left: 50%;
  width: 1px;
  height: 1.95rem;
  background: linear-gradient(var(--brand), rgba(250,94,7,.12));
  transform: translateX(-50%);
}
.about-process-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 398px;
  padding: 1.55rem 1.5rem 1.45rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(250,94,7,.78);
  border-radius: 17px;
  box-shadow: 0 18px 32px -28px rgba(21,19,15,.42);
  transform: none;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.about-process-card:hover {
  border-color: var(--brand);
  box-shadow: 0 22px 36px -25px rgba(21,19,15,.5), 0 0 0 1px rgba(250,94,7,.08);
  transform: translateY(-4px);
}
.about-process-card::after { display: none; }
.about-process-card-top {
  justify-content: flex-start;
  margin-bottom: 1.05rem;
}
.about-process-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .72rem;
  letter-spacing: .02em;
}
.about-process-icon { display: none; }
.about-process-card h3 {
  max-width: 270px;
  margin: 0 0 .65rem;
  color: var(--ink);
  font-size: clamp(.86rem, 1.35vw, 1rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.about-process-card p {
  max-width: 270px;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.7;
}
.about-process-pulse { display: none; }
.about-process-step.is-in-view .about-process-card {
  background: #fff;
  border-color: rgba(250,94,7,.78);
  box-shadow: 0 18px 32px -28px rgba(21,19,15,.42);
}
.about-process-step.is-in-view::before { background: var(--brand); }

@media (max-width: 991px) {
  .about-process-journey { padding-top: 0; }
  .about-process-rail,
  .about-process-step::before,
  .about-process-step::after { display: none; }
  .about-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-process-card { min-height: 300px; }
}
@media (max-width: 575px) {
  .about-process-section { padding: 3.75rem 0; }
  .about-process-heading { margin-bottom: 2rem; }
  .about-process-heading .display-headline { font-size: clamp(1.45rem, 7.5vw, 1.9rem); }
  .about-process-list { grid-template-columns: 1fr; gap: 1rem; }
  .about-process-card { min-height: 0; padding: 1.25rem; }
  .about-process-card p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-process-card,
  .about-process-step.is-in-view .about-process-card { transform: none; transition: none; }
}

/* ---------------- Home process: match the reference-style process cards ----------------
   The home route keeps its existing copy and interaction, but adopts the same
   clean editorial treatment as the refined About process: white canvas, one
   orange rail, station beacons, and equal white cards with warm borders. */
.home-process-section {
  padding: clamp(4.25rem, 7vw, 5.75rem) 0 clamp(3.75rem, 6vw, 5.25rem);
  background: #fff;
  color: var(--ink);
}
.home-process-section::before { display: none; }
.home-process-heading {
  display: block;
  max-width: 980px;
  margin: 0 auto clamp(2rem, 3vw, 2.7rem);
  text-align: center;
}
.home-process-heading .eyebrow {
  justify-content: center;
  color: var(--brand-dark);
}
.home-process-heading .display-headline {
  max-width: 940px;
  margin: .55rem auto 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  letter-spacing: -.045em;
}
.home-process-heading .lede {
  display: block;
  max-width: 680px;
  margin: 1rem auto 0;
  font-size: .88rem;
  line-height: 1.7;
}
.home-process-flow {
  max-width: 1320px;
  min-height: 0;
  padding-top: 4.25rem;
  margin: 0 auto;
}
.home-process-grid { display: none; }
.home-process-path {
  top: 1.45rem;
  left: 10%;
  right: 10%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-dark), var(--brand) 72%, #ffb27a);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 3px 9px -6px rgba(21,19,15,.55);
}
.home-process-path::before,
.home-process-path::after { display: none; }
.home-process-path-fill {
  height: 3px;
  margin: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.home-process-signal { display: none; }
.home-process-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1.45rem);
  align-items: stretch;
}
.home-process-step,
.home-process-step:nth-child(even) {
  display: block;
  min-width: 0;
  padding-top: 0;
}
.home-process-step::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -2.7rem;
  left: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(250,94,7,.13), 0 3px 9px -4px rgba(21,19,15,.45);
  transform: translateX(-50%);
}
.home-process-step::after,
.home-process-step:nth-child(even)::after {
  top: -1.95rem;
  left: 50%;
  z-index: 2;
  width: 1px;
  height: 1.95rem;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--brand), rgba(250,94,7,.12));
  box-shadow: none;
  transform: translateX(-50%);
}
.home-process-step.is-revealed::after {
  background: linear-gradient(var(--brand), rgba(250,94,7,.12));
  border: 0;
  box-shadow: none;
}
.home-process-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 398px;
  padding: 1.55rem 1.5rem 1.45rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(250,94,7,.78);
  border-radius: 17px;
  box-shadow: 0 18px 32px -28px rgba(21,19,15,.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .62s cubic-bezier(.16,1,.3,1);
}
.home-process-card::after { display: none; }
.home-process-card-top {
  justify-content: flex-start;
  margin-bottom: 1.05rem;
}
.home-process-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: .72rem;
  letter-spacing: .02em;
}
.home-process-icon { display: none; }
.home-process-card h3 {
  max-width: 270px;
  margin: 0 0 .65rem;
  color: var(--ink);
  font-size: clamp(.86rem, 1.35vw, 1rem);
  line-height: 1.35;
  letter-spacing: -.025em;
}
.home-process-card p {
  max-width: 270px;
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.7;
}
.home-process-status {
  bottom: 1.15rem;
  color: var(--muted);
}
.home-process-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 22px 36px -25px rgba(21,19,15,.5), 0 0 0 1px rgba(250,94,7,.08);
}

@media (max-width: 991px) {
  .home-process-flow { padding-top: 0; }
  .home-process-path,
  .home-process-step::before,
  .home-process-step::after,
  .home-process-step:nth-child(even)::after { display: none; }
  .home-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-process-card { min-height: 300px; }
}
@media (max-width: 575px) {
  .home-process-section { padding: 3.75rem 0; }
  .home-process-heading { margin-bottom: 2rem; }
  .home-process-heading .display-headline { font-size: clamp(1.45rem, 7.5vw, 1.9rem); }
  .home-process-heading .lede { max-width: none; }
  .home-process-list { grid-template-columns: 1fr; gap: 1rem; }
  .home-process-card { min-height: 0; padding: 1.25rem; }
  .home-process-card p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-process-card,
  .home-process-flow.is-scroll-fade-ready .home-process-card,
  .home-process-flow.is-scroll-fade-ready .home-process-step.is-faded-in .home-process-card,
  .home-process-card:hover { transform: none !important; transition: none; }
}

/* ---------------- Home process: moving carton rail ----------------
   Keep the rail and its four stations mathematically aligned with the card
   centres. Small cartons travel on the same single line to make the route read
   as an operational handoff rather than a decorative divider. */
.home-process-flow {
  --home-process-gap: clamp(.85rem, 1.5vw, 1.45rem);
  --home-process-gap-adjust: clamp(.32rem, .5625vw, .54rem);
}
.home-process-list {
  gap: var(--home-process-gap);
}
.home-process-path {
  left: calc(12.5% - var(--home-process-gap-adjust));
  right: calc(12.5% - var(--home-process-gap-adjust));
  overflow: visible;
}
.home-process-package {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 24px;
  height: 18px;
  border: 2px solid var(--brand-dark);
  border-radius: 3px;
  background: linear-gradient(145deg, #fffdf8, #f6e9d2);
  box-shadow: 0 4px 8px -5px rgba(21,19,15,.7), 0 0 0 3px rgba(250,94,7,.1);
  transform: translate(-50%, -50%);
  animation: home-process-package-travel 7.5s linear infinite;
}
.home-process-package::before {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  width: 2px;
  background: rgba(250,94,7,.52);
  transform: translateX(-50%);
}
.home-process-package::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: rgba(250,94,7,.34);
}
.home-process-package-two { animation-delay: -2.5s; }
.home-process-package-three { animation-delay: -5s; }
@keyframes home-process-package-travel {
  0%, 3% { left: 0%; opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(-4deg); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  88% { left: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  97%, 100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(4deg); }
}

@media (max-width: 991px) and (min-width: 576px) {
  .home-process-package { display: none; }
}

@media (max-width: 575px) {
  .home-process-path {
    left: 8px;
    right: auto;
    width: 2px;
  }
  .home-process-package {
    top: 0;
    left: 50%;
    width: 22px;
    height: 17px;
    animation-name: home-process-package-travel-vertical;
  }
  .home-process-package-two { animation-delay: -2.5s; }
  .home-process-package-three { animation-delay: -5s; }
  @keyframes home-process-package-travel-vertical {
    0%, 3% { top: 0%; opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(-4deg); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    88% { top: 100%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    97%, 100% { top: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.72) rotate(4deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-process-package {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .home-process-package-one { left: 18%; }
  .home-process-package-two { left: 50%; }
  .home-process-package-three { left: 82%; }
}
@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
  .home-process-package-one { top: 18%; left: 50%; }
  .home-process-package-two { top: 50%; left: 50%; }
  .home-process-package-three { top: 82%; left: 50%; }
}

/* ---------------- Home editorial cards: highlighted sourcing boxes ----------------
   The insight cards should read as distinct editorial modules rather than blending
   into the warm page canvas. The treatment stays restrained at rest, then adds a
   clear orange signal, lift and light sweep when a visitor engages with a card. */
.article-carousel-card {
  isolation: isolate;
  border: 1px solid rgba(250,94,7,.34);
  border-top: 3px solid var(--brand);
  background:
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(255,252,245,.98) 58%, rgba(246,235,215,.96) 100%);
  box-shadow:
    0 16px 30px -22px rgba(21,19,15,.7),
    0 0 0 1px rgba(255,255,255,.78) inset,
    0 4px 0 rgba(250,94,7,.06);
  transition:
    opacity .3s ease,
    transform .32s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    box-shadow .32s ease,
    background .32s ease;
}
.article-carousel-card::before {
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(90deg, transparent 0 48%, rgba(250,94,7,.055) 50%, transparent 52%);
  opacity: .88;
  transform: translateX(-105%);
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.article-carousel-card::after {
  right: -30px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-color: rgba(250,94,7,.16);
  box-shadow:
    0 0 0 15px rgba(250,94,7,.035),
    0 0 0 30px rgba(250,94,7,.018);
  transition: transform .35s ease, border-color .35s ease;
}
.article-carousel-card.is-active,
.article-carousel-card:hover,
.article-carousel-card:focus-within {
  opacity: 1;
  border-color: rgba(250,94,7,.82);
  background:
    linear-gradient(145deg, #fff 0%, #fffaf0 62%, #f8ead3 100%);
  box-shadow:
    0 25px 42px -23px rgba(21,19,15,.68),
    0 0 0 1px rgba(250,94,7,.1),
    0 5px 0 rgba(250,94,7,.1);
  transform: translateY(-7px) scale(1.012);
}
.article-carousel-card.is-active::before,
.article-carousel-card:hover::before,
.article-carousel-card:focus-within::before {
  transform: translateX(105%);
}
.article-carousel-card.is-active::after,
.article-carousel-card:hover::after,
.article-carousel-card:focus-within::after {
  transform: scale(1.08);
  border-color: rgba(250,94,7,.28);
}
.article-carousel-card .article-section-icon {
  border-color: rgba(250,94,7,.28);
  box-shadow: 0 8px 16px -12px rgba(250,94,7,.75), inset 0 1px rgba(255,255,255,.75);
}
.article-carousel-card h3 { color: var(--ink); }
.article-carousel-card p.lede { color: #766e60; }
.article-carousel-card:focus-visible {
  outline: 3px solid rgba(250,94,7,.42);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .article-carousel-card,
  .article-carousel-card::before,
  .article-carousel-card::after { transition: none; }
  .article-carousel-card.is-active,
  .article-carousel-card:hover,
  .article-carousel-card:focus-within { transform: none; }
}

/* ---------------- Contact editorial cards: visible highlighted treatment ----------------
   These two cards are rendered by the contact page as .article-section-card,
   not by the home carousel. Keep the treatment visible at rest so the boxes do
   not disappear into the warm section background. */
.article-section-grid {
  gap: clamp(1rem, 2vw, 1.35rem);
  margin: 1.5rem 0 2rem;
}
.article-section-grid .article-section-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 275px;
  padding: 1.6rem 1.55rem 1.7rem;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(255,252,246,.98) 62%, rgba(248,235,213,.96) 100%);
  border: 1px solid rgba(250,94,7,.48);
  border-top: 4px solid var(--brand);
  border-radius: 18px;
  box-shadow:
    0 16px 30px -22px rgba(21,19,15,.7),
    0 0 0 1px rgba(255,255,255,.86) inset;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .25s ease,
    box-shadow .3s ease, background .3s ease;
}
.article-section-grid .article-section-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.78), transparent 34%),
    linear-gradient(90deg, transparent 0 48%, rgba(250,94,7,.08) 50%, transparent 52%);
  transform: translateX(-105%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.article-section-grid .article-section-card::after {
  content: '';
  position: absolute;
  right: -38px;
  bottom: -46px;
  width: 132px;
  height: 132px;
  pointer-events: none;
  border: 1px solid rgba(250,94,7,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(250,94,7,.035), 0 0 0 32px rgba(250,94,7,.018);
  transition: transform .35s ease, border-color .35s ease;
}
.article-section-grid .article-section-card > * { position: relative; z-index: 1; }
.article-section-grid .article-section-icon {
  width: 46px;
  height: 46px;
  margin-bottom: 1.25rem;
  color: var(--brand-dark);
  background: rgba(250,94,7,.14);
  border: 1px solid rgba(250,94,7,.2);
  border-radius: 13px;
  box-shadow: 0 8px 16px -12px rgba(250,94,7,.75), inset 0 1px rgba(255,255,255,.8);
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.article-section-grid .article-section-card h3 {
  max-width: 330px;
  margin: 0 0 .7rem;
  color: var(--ink);
  font-size: clamp(.94rem, 1.65vw, 1.12rem);
  line-height: 1.28;
}
.article-section-grid .article-section-card p.lede {
  max-width: 390px;
  margin: 0;
  color: #766e60;
  font-size: .84rem;
  line-height: 1.72;
}
.article-section-grid .article-section-card:hover,
.article-section-grid .article-section-card:focus-within {
  transform: translateY(-8px);
  border-color: var(--brand);
  background: linear-gradient(145deg, #fff 0%, #fffaf0 64%, #f8ead3 100%);
  box-shadow:
    0 27px 44px -24px rgba(21,19,15,.7),
    0 0 0 1px rgba(250,94,7,.14),
    0 5px 0 rgba(250,94,7,.1);
}
.article-section-grid .article-section-card:hover::before,
.article-section-grid .article-section-card:focus-within::before {
  transform: translateX(105%);
}
.article-section-grid .article-section-card:hover::after,
.article-section-grid .article-section-card:focus-within::after {
  transform: scale(1.1);
  border-color: rgba(250,94,7,.32);
}
.article-section-grid .article-section-card:hover .article-section-icon,
.article-section-grid .article-section-card:focus-within .article-section-icon {
  background: rgba(250,94,7,.22);
  box-shadow: 0 10px 20px -10px rgba(250,94,7,.85), inset 0 1px rgba(255,255,255,.9);
  transform: translateY(-3px) rotate(-3deg);
}
.article-section-grid .article-section-card:focus-visible {
  outline: 3px solid rgba(250,94,7,.38);
  outline-offset: 4px;
}
@media (max-width: 575px) {
  .article-section-grid .article-section-card { min-height: 0; padding: 1.35rem 1.25rem 1.45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .article-section-grid .article-section-card,
  .article-section-grid .article-section-card::before,
  .article-section-grid .article-section-card::after,
  .article-section-grid .article-section-icon { transition: none; }
  .article-section-grid .article-section-card:hover,
  .article-section-grid .article-section-card:focus-within { transform: none; }
}