/* ==========================================================================
   SORTEX — Design System v1
   "Direct Sourcing Specialists"
   Editorial Industrial. Bone, ink, and the logo's warm tan.
   Prefix: .sx-  (namespaced so Blocksy theme updates can't collide)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Accent is sampled from the logo X (#C0A387). Because that tan fails contrast
   on bone, it is used as a GRAPHIC accent only (rules, marks, fills, on-ink
   text). Accent TEXT on light surfaces uses --sx-tan-deep, which passes AA.
   -------------------------------------------------------------------------- */
:root {
  /* Surface */
  --sx-bone:         #F4F2ED;
  --sx-bone-deep:    #E9E5DD;
  --sx-paper:        #FBFAF8;
  --sx-ink:          #101112;
  --sx-ink-soft:     #1B1D1F;
  --sx-ink-lift:     #26292C;

  /* Text */
  --sx-text:         #101112;
  --sx-text-mid:     #565B61;
  --sx-text-mute:    #8A9098;
  --sx-text-inv:     #F4F2ED;
  --sx-text-inv-mid: #A9AEB4;

  /* Brand accent — from the logo X */
  --sx-tan:          #C0A387;  /* graphic use: marks, rules, fills */
  --sx-tan-lift:     #D8C0A6;  /* accent text ON ink */
  --sx-tan-deep:     #7C5C3D;  /* accent text ON bone — 5.4:1, passes AA */
  --sx-tan-wash:     #EFE7DD;  /* tinted surface */

  /* Line */
  --sx-rule:          rgba(16,17,18,.14);
  --sx-rule-soft:     rgba(16,17,18,.07);
  --sx-rule-inv:      rgba(244,242,237,.18);
  --sx-rule-inv-soft: rgba(244,242,237,.09);

  /* Families */
  --sx-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sx-body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sx-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sx-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — 380px → 1600px */
  --sx-t-mono: clamp(.66rem, .60rem + .22vw, .75rem);
  --sx-t-sm:   clamp(.86rem, .82rem + .16vw, .94rem);
  --sx-t-body: clamp(1rem, .95rem + .22vw, 1.125rem);
  --sx-t-lead: clamp(1.15rem, 1.02rem + .58vw, 1.5rem);
  --sx-t-h4:   clamp(1.2rem, 1.08rem + .5vw, 1.5rem);
  --sx-t-h3:   clamp(1.5rem, 1.28rem + .95vw, 2.25rem);
  --sx-t-h2:   clamp(2rem, 1.5rem + 2.2vw, 3.75rem);
  --sx-t-h1:   clamp(2.75rem, 1.6rem + 5.1vw, 7rem);
  --sx-t-mega: clamp(3.5rem, 1.4rem + 9vw, 11rem);

  /* Rhythm */
  --sx-gap:     clamp(1.25rem, 1rem + 1.1vw, 2rem);
  --sx-pad-x:   clamp(1.25rem, .6rem + 3vw, 4.5rem);
  --sx-sec-y:   clamp(4.5rem, 3rem + 7vw, 10rem);
  --sx-wrap:    1560px;
  --sx-measure: 62ch;

  /* Motion */
  --sx-ease:     cubic-bezier(.22, .61, .36, 1);
  --sx-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
.sx, .sx *, .sx *::before, .sx *::after { box-sizing: border-box; }

.sx {
  background: var(--sx-bone);
  color: var(--sx-text);
  font-family: var(--sx-body);
  font-size: var(--sx-t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.sx img, .sx svg, .sx video { max-width: 100%; height: auto; display: block; }
/* Images that fill a fixed aspect ratio set inline (e.g. style="aspect-ratio:3/2") */
.sx .sx-img { width: 100%; height: 100%; object-fit: cover; }
.sx ::selection { background: var(--sx-tan); color: var(--sx-ink); }
.sx :focus-visible { outline: 2px solid var(--sx-tan-deep); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.sx-wrap {
  width: 100%;
  max-width: var(--sx-wrap);
  margin-inline: auto;
  padding-inline: var(--sx-pad-x);
}
.sx-wrap--narrow { max-width: 1080px; }

.sx-sec { padding-block: var(--sx-sec-y); position: relative; }
.sx-sec--tight { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.sx-sec--flush-t { padding-top: 0; }
.sx-sec--paper { background: var(--sx-paper); }
.sx-sec--wash  { background: var(--sx-tan-wash); }

/* Inverted sections — the editorial counterpoint */
.sx-sec--ink { background: var(--sx-ink); color: var(--sx-text-inv); }
.sx-sec--ink h1, .sx-sec--ink h2, .sx-sec--ink h3, .sx-sec--ink h4 { color: var(--sx-text-inv); }
.sx-sec--ink p, .sx-sec--ink .sx-lead, .sx-sec--ink .sx-sm { color: var(--sx-text-inv-mid); }
.sx-sec--ink .sx-eyebrow { color: var(--sx-tan-lift); }
.sx-sec--ink .sx-eyebrow::before { background: var(--sx-tan-lift); }
.sx-sec--ink .sx-rule { border-top-color: var(--sx-rule-inv); }
.sx-sec--ink .sx-num { color: var(--sx-text-inv-mid); }

/* 12-col editorial grid */
.sx-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--sx-gap); }
@media (max-width: 900px) { .sx-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 560px) { .sx-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Span helpers set grid-column-END only, never the `grid-column` shorthand.
   The shorthand also writes grid-column-start, which would be overwritten by
   the .sx-start* classes below (equal specificity, declared later) — collapsing
   the element to a single track. Keeping the two properties separate lets a
   span class and a start class compose. */
.sx-c2{grid-column-end:span 2}.sx-c3{grid-column-end:span 3}.sx-c4{grid-column-end:span 4}
.sx-c5{grid-column-end:span 5}.sx-c6{grid-column-end:span 6}.sx-c7{grid-column-end:span 7}
.sx-c8{grid-column-end:span 8}.sx-c9{grid-column-end:span 9}.sx-c12{grid-column-end:span 12}
.sx-start2{grid-column-start:2}.sx-start4{grid-column-start:4}
.sx-start6{grid-column-start:6}.sx-start7{grid-column-start:7}
.sx-start8{grid-column-start:8}
@media (max-width: 900px) {
  .sx-c2,.sx-c3,.sx-c4,.sx-c5 { grid-column-end: span 3; }
  .sx-c6,.sx-c7,.sx-c8,.sx-c9,.sx-c12 { grid-column-end: span 6; }
  .sx-start2,.sx-start4,.sx-start6,.sx-start7,.sx-start8 { grid-column-start: auto; }
}
@media (max-width: 560px) {
  .sx-c2,.sx-c3,.sx-c4,.sx-c5,.sx-c6,.sx-c7,.sx-c8,.sx-c9,.sx-c12 { grid-column-end: span 2; }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.sx h1, .sx h2, .sx h3, .sx h4, .sx .sx-display {
  font-family: var(--sx-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
  text-wrap: balance;
  margin: 0;
  /* Inherit, never hard-set. `.sx h2` and `.sx-sec--ink h2` have identical
     specificity, so a literal here would win on source order and render dark
     headings on the dark sections. Colour comes from the section instead. */
  color: inherit;
}
.sx h1 { font-size: var(--sx-t-h1); }
.sx h2 { font-size: var(--sx-t-h2); line-height: 1.0; }
.sx h3 { font-size: var(--sx-t-h3); line-height: 1.08; letter-spacing: -.025em; }
.sx h4 { font-size: var(--sx-t-h4); line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
.sx-mega { font-size: var(--sx-t-mega); line-height: .84; letter-spacing: -.05em; }

/* Signature move: italic serif word set inside a grotesque headline */
.sx-em {
  font-family: var(--sx-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--sx-tan-deep);
  padding-inline-end: .04em;
}
.sx-sec--ink .sx-em,
.sx-hero .sx-em { color: var(--sx-tan-lift); }

.sx p { margin: 0 0 1em; max-width: var(--sx-measure); }
.sx p:last-child { margin-bottom: 0; }

.sx-lead {
  font-size: var(--sx-t-lead);
  line-height: 1.45;
  color: var(--sx-text-mid);
  letter-spacing: -.012em;
  max-width: 54ch;
}
.sx-sm { font-size: var(--sx-t-sm); line-height: 1.55; color: var(--sx-text-mid); }

/* Technical label */
.sx-eyebrow {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sx-tan-deep);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.4rem;
}
.sx-eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--sx-tan-deep); flex: none; }
.sx-eyebrow--bare::before { display: none; }

.sx-num { font-family: var(--sx-mono); font-size: var(--sx-t-mono); letter-spacing: .12em; color: var(--sx-text-mute); }

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

/* --------------------------------------------------------------------------
   5. THE X MARK — brand device lifted from the logo
   Two right-pointing chevrons. Used as a directional/flow motif.
   -------------------------------------------------------------------------- */
.sx-x {
  display: inline-block;
  width: 1em; height: 1em;
  flex: none;
  color: var(--sx-tan);
}
.sx-x svg { width: 100%; height: 100%; display: block; }

/* Chevron divider that runs the page width */
.sx-chevrons {
  height: clamp(28px, 3vw, 44px);
  width: 100%;
  background-image: repeating-linear-gradient(
    115deg,
    var(--sx-tan) 0 2px,
    transparent 2px 14px
  );
  opacity: .5;
}

/* --------------------------------------------------------------------------
   6. BUTTONS + LINKS
   -------------------------------------------------------------------------- */
.sx-btn {
  --b-bg: var(--sx-ink);
  --b-fg: var(--sx-bone);
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: 1.05em 1.9em;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--sx-body);
  font-size: var(--sx-t-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--b-bg);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--sx-ease), border-color .45s var(--sx-ease);
}
.sx-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--sx-tan);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--sx-ease-out);
  z-index: -1;
}
.sx-btn:hover::after, .sx-btn:focus-visible::after { transform: scaleY(1); }
.sx-btn:hover, .sx-btn:focus-visible { color: var(--sx-ink); border-color: var(--sx-tan); }
.sx-btn__ico { transition: transform .45s var(--sx-ease-out); }
.sx-btn:hover .sx-btn__ico { transform: translateX(5px); }

.sx-btn--ghost { --b-bg: transparent; --b-fg: var(--sx-ink); border-color: var(--sx-rule); }

/* Dark-ground contexts. The hero is dark but is NOT .sx-sec--ink, so it must be
   named explicitly here — otherwise a ghost button inherits dark-on-dark. */
.sx-sec--ink .sx-btn,
.sx-hero .sx-btn { --b-bg: var(--sx-bone); --b-fg: var(--sx-ink); }
.sx-sec--ink .sx-btn--ghost,
.sx-hero .sx-btn--ghost { --b-bg: transparent; --b-fg: var(--sx-bone); border-color: var(--sx-rule-inv); }
.sx-sec--ink .sx-btn--ghost:hover,
.sx-hero .sx-btn--ghost:hover { --b-fg: var(--sx-ink); border-color: var(--sx-tan); }

.sx-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.sx-link {
  color: inherit;
  text-decoration: none;
  font-weight: 550;
  background-image: linear-gradient(var(--sx-tan-deep), var(--sx-tan-deep));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .12em;
  transition: background-size .45s var(--sx-ease-out), color .3s;
}
.sx-link:hover { background-size: 100% 1px; color: var(--sx-tan-deep); }
.sx-sec--ink .sx-link { background-image: linear-gradient(var(--sx-tan-lift), var(--sx-tan-lift)); }
.sx-sec--ink .sx-link:hover { color: var(--sx-tan-lift); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.sx-hero {
  position: relative;
  min-height: min(94svh, 980px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 6rem + 8vw, 11rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background: var(--sx-ink);
  color: var(--sx-text-inv);
  overflow: hidden;
}
.sx-hero__media { position: absolute; inset: 0; z-index: 0; }
.sx-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sx-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,17,18,.85) 0%, rgba(16,17,18,.35) 42%, rgba(16,17,18,.96) 100%),
    linear-gradient(90deg, rgba(16,17,18,.8) 0%, transparent 62%);
}
.sx-hero__inner { position: relative; z-index: 1; width: 100%; }
.sx-hero h1 { color: var(--sx-text-inv); max-width: 16ch; }
.sx-hero .sx-eyebrow { color: var(--sx-tan-lift); }
.sx-hero .sx-eyebrow::before { background: var(--sx-tan-lift); }
.sx-hero .sx-lead { color: var(--sx-text-inv-mid); }

.sx-hero__foot {
  margin-top: clamp(3rem, 2rem + 5vw, 6rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--sx-rule-inv);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sx-gap);
}
.sx-hero__stat .sx-hero__fig {
  font-family: var(--sx-display);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--sx-text-inv);
}
.sx-hero__stat .sx-hero__cap {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-text-inv-mid);
  margin-top: .6rem;
  display: block;
}

/* --------------------------------------------------------------------------
   7b. PAGE HERO — inner pages
   Shorter than the homepage hero and text-only. Inner pages earn attention
   with content, not with another full-viewport image.
   -------------------------------------------------------------------------- */
.sx-phero {
  background: var(--sx-ink);
  color: var(--sx-text-inv);
  padding-block: clamp(8rem, 6rem + 9vw, 13rem) clamp(3.5rem, 2.5rem + 4vw, 6rem);
  position: relative;
  overflow: hidden;
}
.sx-phero::after {
  /* Chevron field bleeding in from the right — the logo mark as texture. */
  content: "";
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(38%, 520px);
  background-image: repeating-linear-gradient(115deg,
    rgba(192,163,135,.30) 0 1px, transparent 1px 18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
          mask-image: linear-gradient(90deg, transparent, #000 75%);
  pointer-events: none;
}
.sx-phero > * { position: relative; z-index: 1; }
.sx-phero h1 { max-width: 18ch; }
.sx-phero .sx-lead { color: var(--sx-text-inv-mid); margin-top: 1.75rem; }
.sx-phero .sx-eyebrow { color: var(--sx-tan-lift); }
.sx-phero .sx-eyebrow::before { background: var(--sx-tan-lift); }
.sx-phero .sx-em { color: var(--sx-tan-lift); }
.sx-phero .sx-btn { --b-bg: var(--sx-bone); --b-fg: var(--sx-ink); }
.sx-phero .sx-btn--ghost { --b-bg: transparent; --b-fg: var(--sx-bone); border-color: var(--sx-rule-inv); }
.sx-phero .sx-btn--ghost:hover { --b-fg: var(--sx-ink); border-color: var(--sx-tan); }

/* --------------------------------------------------------------------------
   7c. SPLIT ROW — alternating image / text
   -------------------------------------------------------------------------- */
.sx-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 1.4rem + 3vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  border-bottom: 1px solid var(--sx-rule);
}
.sx-split:last-child { border-bottom: 0; }
.sx-sec--ink .sx-split { border-color: var(--sx-rule-inv); }
.sx-split--flip .sx-split__media { order: 2; }
.sx-split__media img, .sx-split__media .sx-ph { width: 100%; }
@media (max-width: 820px) {
  .sx-split { grid-template-columns: 1fr; }
  .sx-split--flip .sx-split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   7d. SPEC LIST — definition pairs for product / process detail
   -------------------------------------------------------------------------- */
.sx-spec { margin: 2rem 0 0; border-top: 1px solid var(--sx-rule); }
.sx-sec--ink .sx-spec { border-color: var(--sx-rule-inv); }
.sx-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: 1rem var(--sx-gap);
  padding-block: .95rem;
  border-bottom: 1px solid var(--sx-rule-soft);
}
.sx-sec--ink .sx-spec__row { border-color: var(--sx-rule-inv-soft); }
.sx-spec__k {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-tan-deep);
  padding-top: .25em;
}
.sx-sec--ink .sx-spec__k { color: var(--sx-tan-lift); }
.sx-spec__v { font-size: var(--sx-t-sm); color: var(--sx-text-mid); }
.sx-sec--ink .sx-spec__v { color: var(--sx-text-inv-mid); }
@media (max-width: 560px) { .sx-spec__row { grid-template-columns: 1fr; gap: .3rem; } }

/* --------------------------------------------------------------------------
   7e. NEXT-PAGE LINK — end-of-page navigation
   -------------------------------------------------------------------------- */
.sx-next {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 1px solid var(--sx-rule);
  text-decoration: none;
  color: inherit;
  transition: padding-inline .5s var(--sx-ease-out);
}
.sx-sec--ink .sx-next { border-color: var(--sx-rule-inv); }
.sx-next:hover { padding-inline: .75rem; }
.sx-next__label {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sx-tan-deep);
}
.sx-sec--ink .sx-next__label { color: var(--sx-tan-lift); }
.sx-next__title { font-family: var(--sx-display); font-size: var(--sx-t-h3); font-weight: 700; letter-spacing: -.03em; }
.sx-next__ico { font-size: var(--sx-t-h3); color: var(--sx-tan-deep); transition: transform .5s var(--sx-ease-out); }
.sx-next:hover .sx-next__ico { transform: translateX(8px); }
.sx-sec--ink .sx-next__ico { color: var(--sx-tan-lift); }

/* --------------------------------------------------------------------------
   8. MARQUEE — factory / capability ticker
   -------------------------------------------------------------------------- */
.sx-marquee {
  overflow: hidden;
  border-block: 1px solid var(--sx-rule);
  padding-block: 1.15rem;
  background: var(--sx-bone);
}
.sx-sec--ink .sx-marquee { border-color: var(--sx-rule-inv); background: transparent; }
.sx-marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: sx-slide 46s linear infinite;
}
.sx-marquee:hover .sx-marquee__track { animation-play-state: paused; }
.sx-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sx-text-mid);
  white-space: nowrap;
}
.sx-marquee__item::after { content: ""; width: 5px; height: 5px; background: var(--sx-tan); flex: none; }
@keyframes sx-slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.sx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  background: var(--sx-paper);
  border: 1px solid var(--sx-rule-soft);
  height: 100%;
  transition: border-color .45s var(--sx-ease), transform .55s var(--sx-ease-out), background .45s;
}
.sx-card:hover { border-color: var(--sx-tan); transform: translateY(-4px); }
.sx-card__idx {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .12em;
  color: var(--sx-tan-deep);
  margin-bottom: 1.6rem;
}
.sx-card h3, .sx-card h4 { margin-bottom: .7rem; }
.sx-card p { color: var(--sx-text-mid); font-size: var(--sx-t-sm); }
.sx-sec--ink .sx-card { background: var(--sx-ink-soft); border-color: var(--sx-rule-inv-soft); }
.sx-sec--ink .sx-card:hover { border-color: var(--sx-tan); }
.sx-sec--ink .sx-card__idx { color: var(--sx-tan-lift); }
/* Inverted-context colour is handled in one place — see section 17. */

/* Category card with image */
.sx-cat { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; background: var(--sx-ink); }
.sx-cat__img { aspect-ratio: 4 / 5; overflow: hidden; }
.sx-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sx-ease-out), opacity .5s; opacity: .9; }
.sx-cat:hover .sx-cat__img img { transform: scale(1.06); opacity: 1; }
.sx-cat__body {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: linear-gradient(180deg, transparent, rgba(16,17,18,.92) 55%);
  color: var(--sx-text-inv);
}
.sx-cat__body h3 { color: var(--sx-text-inv); font-size: var(--sx-t-h4); }
.sx-cat__meta {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-tan-lift);
  margin-top: .6rem;
  display: block;
}

/* --------------------------------------------------------------------------
   10. STAT BLOCK
   -------------------------------------------------------------------------- */
.sx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0; border-top: 1px solid var(--sx-rule); }
.sx-sec--ink .sx-stats { border-color: var(--sx-rule-inv); }
.sx-stat { padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) clamp(1rem, .7rem + 1vw, 2rem) clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem) 0; border-bottom: 1px solid var(--sx-rule); }
.sx-sec--ink .sx-stat { border-color: var(--sx-rule-inv); }
.sx-stat__fig {
  font-family: var(--sx-display);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
  display: flex;
  align-items: baseline;
  gap: .06em;
}
.sx-stat__suffix { color: var(--sx-tan-deep); }
.sx-sec--ink .sx-stat__suffix { color: var(--sx-tan); }
.sx-stat__cap { font-size: var(--sx-t-sm); color: var(--sx-text-mid); margin-top: .9rem; max-width: 28ch; }

/* --------------------------------------------------------------------------
   11. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.sx-steps { border-top: 1px solid var(--sx-rule); }
.sx-sec--ink .sx-steps { border-color: var(--sx-rule-inv); }
.sx-step {
  display: grid;
  grid-template-columns: 6rem minmax(0, 22ch) minmax(0, 1fr);
  gap: var(--sx-gap);
  align-items: start;
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  border-bottom: 1px solid var(--sx-rule);
  position: relative;
}
.sx-sec--ink .sx-step { border-color: var(--sx-rule-inv); }
.sx-step::before {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--sx-tan);
  transition: width .9s var(--sx-ease-out);
}
.sx-step:hover::before { width: 100%; }
.sx-step__no { font-family: var(--sx-mono); font-size: var(--sx-t-mono); letter-spacing: .14em; color: var(--sx-tan-deep); padding-top: .55em; }
.sx-sec--ink .sx-step__no { color: var(--sx-tan-lift); }
.sx-step__body p { font-size: var(--sx-t-sm); color: var(--sx-text-mid); }
@media (max-width: 900px) {
  .sx-step { grid-template-columns: 4rem 1fr; }
  .sx-step__body { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   12. ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.sx-acc { border-top: 1px solid var(--sx-rule); }
.sx-acc__item { border-bottom: 1px solid var(--sx-rule); }
.sx-acc__q {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(1.1rem, .9rem + .8vw, 1.75rem);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--sx-display);
  font-size: var(--sx-t-h4);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--sx-text);
  transition: color .3s;
}
.sx-acc__q:hover { color: var(--sx-tan-deep); }
.sx-acc__sign { flex: none; width: 1em; height: 1em; position: relative; }
.sx-acc__sign::before, .sx-acc__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1px; background: var(--sx-tan-deep);
  transition: transform .45s var(--sx-ease-out);
}
.sx-acc__sign::after { transform: rotate(90deg); }
.sx-acc__item[open] .sx-acc__sign::after { transform: rotate(0deg); }
.sx-acc__a { padding-bottom: 1.9rem; max-width: 68ch; }
.sx-acc__a p { color: var(--sx-text-mid); }
.sx-acc__item summary::-webkit-details-marker { display: none; }
.sx-acc__item summary { list-style: none; }

/* --------------------------------------------------------------------------
   13. QUOTE / PULL
   -------------------------------------------------------------------------- */
.sx-quote { border-left: 2px solid var(--sx-tan); padding-left: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.sx-quote__text {
  font-family: var(--sx-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.75rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--sx-text);
  max-width: 24ch;
}
.sx-sec--ink .sx-quote__text { color: var(--sx-text-inv); }
.sx-quote__by { margin-top: 1.75rem; font-family: var(--sx-mono); font-size: var(--sx-t-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sx-text-mute); }

/* --------------------------------------------------------------------------
   14. FORM
   -------------------------------------------------------------------------- */
.sx-form { display: grid; gap: 1.4rem; }
.sx-field { display: flex; flex-direction: column; gap: .55rem; }
.sx-field label {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-text-mid);
}
.sx-field input, .sx-field select, .sx-field textarea {
  font-family: var(--sx-body);
  font-size: var(--sx-t-body);
  color: var(--sx-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sx-rule);
  border-radius: 0;
  padding: .8rem 0;
  transition: border-color .35s;
}
.sx-field input:focus, .sx-field select:focus, .sx-field textarea:focus {
  outline: none;
  border-bottom-color: var(--sx-tan-deep);
}
.sx-field textarea { resize: vertical; min-height: 7rem; }
.sx-field input::placeholder, .sx-field textarea::placeholder { color: var(--sx-text-mute); }

/* The quote form sits on a dark section. Without these the field text inherits
   --sx-text and you type invisible ink. */
.sx-sec--ink .sx-field label { color: var(--sx-text-inv-mid); }
.sx-sec--ink .sx-field input,
.sx-sec--ink .sx-field select,
.sx-sec--ink .sx-field textarea {
  color: var(--sx-text-inv);
  border-bottom-color: var(--sx-rule-inv);
}
.sx-sec--ink .sx-field input::placeholder,
.sx-sec--ink .sx-field textarea::placeholder { color: var(--sx-text-mute); }
.sx-sec--ink .sx-field input:focus,
.sx-sec--ink .sx-field select:focus,
.sx-sec--ink .sx-field textarea:focus { border-bottom-color: var(--sx-tan); }
/* Native select popups render in the OS palette — keep options readable. */
.sx-sec--ink .sx-field select option { color: var(--sx-ink); background: var(--sx-bone); }
.sx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 620px) { .sx-form__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   15. MOTION — scroll reveal
   -------------------------------------------------------------------------- */
.sx [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--sx-ease-out), transform .85s var(--sx-ease-out);
  transition-delay: var(--sx-delay, 0ms);
}
.sx [data-reveal].is-in { opacity: 1; transform: none; }

/* Masked line-by-line headline reveal */
.sx-reveal-line { display: block; overflow: hidden; }
.sx-reveal-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--sx-ease-out);
  transition-delay: var(--sx-delay, 0ms);
}
.sx .is-in .sx-reveal-line > span,
.sx .sx-reveal-line.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .sx [data-reveal] { opacity: 1; transform: none; }
  .sx-reveal-line > span { transform: none; }
}

/* --------------------------------------------------------------------------
   16. BLOCKSY RESETS
   Neutralises theme defaults that fight the design system.
   -------------------------------------------------------------------------- */
.sx .wp-block-group,
.sx .wp-block-columns,
.sx .wp-block-column { margin-block: 0; }
.sx .wp-block-image { margin: 0; }
.sx .wp-block-image figcaption {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .1em;
  color: var(--sx-text-mute);
  margin-top: .9rem;
  text-align: left;
}
.sx .entry-content > * { margin-block-start: 0; }
.sx ul.sx-list { list-style: none; margin: 0; padding: 0; }
.sx ul.sx-list li {
  position: relative;
  padding-left: 1.6rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--sx-rule-soft);
  font-size: var(--sx-t-sm);
  color: var(--sx-text-mid);
}
.sx ul.sx-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.25em;
  width: 8px; height: 1px; background: var(--sx-tan);
}
.sx-sec--ink ul.sx-list li { border-color: var(--sx-rule-inv-soft); }

/* --------------------------------------------------------------------------
   17. INVERTED-CONTEXT OVERRIDES  — must stay LAST in this file
   
   Component rules written as `.some-class p` have the same specificity (0,1,1)
   as `.sx-sec--ink p`, and they are declared later, so they win on source order
   and paint dark body text onto a dark section. The failure is silent and only
   appears when that component is first used inside .sx-sec--ink — which is how
   six cards on the Private Label page and three process steps on Contact
   shipped unreadable before this block existed.
   
   Anything added below that sets colour via `.class element` must get a line
   here too.
   -------------------------------------------------------------------------- */
.sx-sec--ink .sx-card p,
.sx-sec--ink .sx-step__body p,
.sx-sec--ink .sx-acc__a p,
.sx-sec--ink .sx-stat__cap,
.sx-sec--ink .sx-spec__v { color: var(--sx-text-inv-mid); }

.sx-sec--ink .sx-acc__q { color: var(--sx-text-inv); }
.sx-sec--ink .sx-acc__q:hover { color: var(--sx-tan-lift); }
.sx-sec--ink .sx-acc,
.sx-sec--ink .sx-acc__item { border-color: var(--sx-rule-inv); }
.sx-sec--ink .sx-acc__sign::before,
.sx-sec--ink .sx-acc__sign::after { background: var(--sx-tan-lift); }
.sx-sec--ink .sx-step__no,
.sx-sec--ink .sx-card__idx,
.sx-sec--ink .sx-stat__suffix { color: var(--sx-tan-lift); }
.sx-sec--ink .sx-quote__by { color: var(--sx-text-mute); }

/* --------------------------------------------------------------------------
   18. FULL-BLEED IMAGE BAND
   A single photograph run edge to edge, used to break a long text page and to
   put real product in front of the reader between arguments.
   -------------------------------------------------------------------------- */
.sx-band { width: 100%; overflow: hidden; background: var(--sx-ink); }
.sx-band img {
  width: 100%;
  height: clamp(260px, 40vw, 620px);
  object-fit: cover;
  display: block;
}
.sx-band__cap {
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sx-text-mute);
  padding: 1rem var(--sx-pad-x) 0;
  max-width: var(--sx-wrap);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   19. VIDEO SECTION — manufacturing footage behind a scrim
   The loop is atmosphere, not content: it is muted, has no controls, and every
   word stays readable if it never plays. The poster carries the first paint and
   the reduced-motion case.
   -------------------------------------------------------------------------- */
.sx-vsec {
  position: relative;
  overflow: hidden;
  background: var(--sx-ink);
  color: var(--sx-text-inv);
  padding-block: clamp(5rem, 4rem + 7vw, 10rem);
  isolation: isolate;
}
.sx-vsec__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: .34;
}
.sx-vsec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16,17,18,.80) 0%, rgba(16,17,18,.45) 45%, rgba(16,17,18,.88) 100%),
    linear-gradient(90deg, rgba(16,17,18,.85) 0%, transparent 65%);
}
.sx-vsec h2 { color: var(--sx-text-inv); }
.sx-vsec p { color: var(--sx-text-inv-mid); }
.sx-vsec .sx-eyebrow { color: var(--sx-tan-lift); }
.sx-vsec .sx-eyebrow::before { background: var(--sx-tan-lift); }
.sx-vsec .sx-em { color: var(--sx-tan-lift); }
.sx-vsec .sx-btn { --b-bg: var(--sx-bone); --b-fg: var(--sx-ink); }
.sx-vsec .sx-btn--ghost { --b-bg: transparent; --b-fg: var(--sx-bone); border-color: var(--sx-rule-inv); }
.sx-vsec .sx-btn--ghost:hover { --b-fg: var(--sx-ink); border-color: var(--sx-tan); }
.sx-vsec ul.sx-list li { border-color: var(--sx-rule-inv-soft); color: var(--sx-text-inv-mid); }

@media (prefers-reduced-motion: reduce) {
  /* The poster still shows through — sortex.js pauses the element. */
  .sx-vsec__bg { opacity: .34; }
}

/* --------------------------------------------------------------------------
   20. MARKETS — the countries served
   -------------------------------------------------------------------------- */
/* Explicit column counts rather than auto-fit. There are five markets, and
   auto-fit lands on four at common widths — leaving one orphan on its own row
   with a stub underline. Stepping 5 -> 3 -> 2 -> 1 keeps rows evenly filled. */
.sx-markets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--sx-rule);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (max-width: 1180px) { .sx-markets { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .sx-markets { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px)  { .sx-markets { grid-template-columns: 1fr; } }
.sx-sec--ink .sx-markets { border-color: var(--sx-rule-inv); }
.sx-market {
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem) 1.5rem clamp(1.25rem, 1rem + 1vw, 1.9rem) 0;
  border-bottom: 1px solid var(--sx-rule);
}
.sx-sec--ink .sx-market { border-color: var(--sx-rule-inv); }
.sx-market__name {
  font-family: var(--sx-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.sx-market__cert {
  display: block;
  margin-top: .55rem;
  font-family: var(--sx-mono);
  font-size: var(--sx-t-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sx-tan-deep);
}
.sx-sec--ink .sx-market__cert { color: var(--sx-tan-lift); }