/* ==========================================================================
   JINHON - Guangzhou Jinhon International Trade Co., Ltd.
   Homepage stylesheet
   Brand: deep navy blue + orange accent
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --navy-900: #061426;
  --navy-800: #0b2545;
  --navy-700: #123a66;
  --navy-600: #1c5189;
  --navy-100: #e8eef5;

  --orange-600: #d8610e;
  --orange-500: #ee7413;
  --orange-050: #fdf3ea;

  --ink: #16202e;
  --muted: #4f5d70;
  --muted-2: #7b8798;
  --line: #e2e7ee;
  --line-strong: #cfd8e3;
  --canvas: #f6f8fa;
  --white: #ffffff;

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.05);
  --shadow: 0 14px 34px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 26px 60px rgba(11, 37, 69, 0.14);

  --container: 1200px;
  --gutter: 24px;
  --header-h: 76px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Images carry width/height attributes for layout stability (CLS).
   Without resetting height, those attribute hints win and every image
   renders at its raw pixel height, ignoring any CSS aspect-ratio. */
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--navy-800);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

p,
figure,
figcaption,
dl,
dt,
dd,
blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout primitives -------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: clamp(72px, 9vw, 124px);
  padding-bottom: clamp(72px, 9vw, 124px);
}

.section--tight {
  padding-top: clamp(58px, 6.5vw, 88px);
  padding-bottom: clamp(58px, 6.5vw, 88px);
}

.section--canvas {
  background: var(--canvas);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section--navy {
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.74);
  position: relative;
  overflow: hidden;
}

.section[id],
.cta-section[id],
.hero[id],
#main,
#top {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Section header: title block on the left, supporting copy on the right.
   Both columns sit on the container's full width so the band reads balanced
   instead of leaving the right-hand side as dead space. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: end;
}

.section-head > .eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.section-head > .section-title {
  grid-column: 1;
  grid-row: 2;
}

.section-head > .section-lede {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  margin-top: 0;
  max-width: 46ch;
  padding-bottom: 5px;
}

.section-head--center {
  display: block;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange-500);
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-title {
  font-size: clamp(1.72rem, 3.2vw, 2.5rem);
  letter-spacing: -0.022em;
}

.section-lede {
  margin-top: 20px;
  font-size: clamp(1rem, 1.32vw, 1.075rem);
  line-height: 1.68;
  color: var(--muted);
  max-width: 68ch;
}

.section--navy .eyebrow {
  color: #f6a561;
}

.section--navy .section-title,
.section--navy h3 {
  color: #fff;
}

.section--navy .section-lede {
  color: rgba(255, 255, 255, 0.68);
}

.section-head--center .section-lede {
  margin-left: auto;
  margin-right: auto;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  --btn-bd: var(--navy-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
    color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.btn--primary {
  --btn-bg: var(--orange-500);
  --btn-bd: var(--orange-500);
  --btn-fg: #fff;
  box-shadow: 0 10px 24px rgba(238, 116, 19, 0.26);
}

.btn--primary:hover {
  --btn-bg: var(--orange-600);
  --btn-bd: var(--orange-600);
  box-shadow: 0 14px 30px rgba(216, 97, 14, 0.32);
  transform: translateY(-2px);
}

.btn--outline {
  --btn-bg: transparent;
  --btn-bd: var(--line-strong);
  --btn-fg: var(--navy-800);
}

.btn--outline:hover {
  --btn-bd: var(--navy-800);
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  transform: translateY(-2px);
}

.btn--ghost-light {
  --btn-bg: rgba(255, 255, 255, 0.04);
  --btn-bd: rgba(255, 255, 255, 0.32);
  --btn-fg: #fff;
}

.btn--ghost-light:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-bd: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 14px;
}

.btn__arrow {
  transition: transform 0.22s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 26px rgba(11, 37, 69, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}

.logo__mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo__name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--navy-800);
}

.logo__tag {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.logo--light .logo__name {
  color: #fff;
}

.logo--light .logo__tag {
  color: rgba(255, 255, 255, 0.5);
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__link {
  position: relative;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy-700);
  padding-top: 6px;
  padding-bottom: 6px;
  transition: color 0.2s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--orange-500);
  transition: right 0.25s var(--ease);
}

.nav__link:hover {
  color: var(--navy-800);
}

.nav__link:hover::after {
  right: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.header__phone {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-700);
}

.header__phone span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle__bar {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: background 0.2s linear;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}

.nav-toggle__bar::before {
  top: -6px;
}

.nav-toggle__bar::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.76);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
  background:
    radial-gradient(52% 58% at 92% 4%, rgba(238, 116, 19, 0.17) 0%, transparent 62%),
    radial-gradient(50% 55% at 2% 98%, rgba(28, 81, 137, 0.42) 0%, transparent 66%),
    linear-gradient(180deg, #0b2545 0%, #081c36 100%);
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 0%, transparent 78%);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: clamp(40px, 4.8vw, 70px);
  align-items: center;
  padding-top: clamp(46px, 5.6vw, 78px);
  padding-bottom: clamp(44px, 5vw, 72px);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12.1px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}

.hero__badge svg {
  flex: 0 0 auto;
}

.hero__title {
  font-size: clamp(2.15rem, 4.6vw, 3.55rem);
  color: #fff;
  letter-spacing: -0.026em;
  line-height: 1.06;
  max-width: 15ch;
}

.hero__lede {
  margin-top: 20px;
  font-size: clamp(1.03rem, 1.5vw, 1.185rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}

/* hero visual collage - one editorial image plus two application tiles */
.hero__mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero__mosaic-main,
.hero__tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a1b31;
}

.hero__mosaic-main {
  grid-column: 1 / -1;
  box-shadow: 0 26px 58px rgba(2, 10, 22, 0.44);
}

.hero__mosaic-main img {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
}

.hero__tile img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.hero__tile:hover img {
  transform: scale(1.04);
}

.hero__mosaic-main::after,
.hero__tile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0) 50%, rgba(6, 20, 38, 0.8) 100%);
  pointer-events: none;
}

.hero__mosaic-label,
.hero__tile-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 12.4px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
}

.hero__tile-label {
  left: 13px;
  right: 13px;
  bottom: 11px;
  font-size: 10.6px;
}

/* --- Core products ------------------------------------------------------ */
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* rail that ties the three core products into one supply chain */
.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 54px;
  margin-bottom: 22px;
}

.rail::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc((100% - 56px) / 6);
  right: calc((100% - 56px) / 6);
  height: 1px;
  background: var(--line-strong);
}

.rail__dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy-800);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.product-card__media {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
}

.product-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3.15;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card__media img {
  transform: scale(1.035);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 24px 24px 26px;
  flex: 1;
}

.product-card__cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.product-card h3 {
  font-size: 19.5px;
}

.product-card p {
  font-size: 14.8px;
  line-height: 1.62;
}

.product-card__link {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.4px;
  font-weight: 600;
  color: var(--navy-700);
  transition: color 0.2s var(--ease);
}

.product-card__link svg {
  transition: transform 0.25s var(--ease);
}

.product-card__link:hover {
  color: var(--orange-600);
}

.product-card__link:hover svg {
  transform: translateX(4px);
}

.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: 34px;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: 14.2px;
  color: var(--muted);
}

.chain b {
  font-weight: 600;
  color: var(--navy-800);
}

.chain i {
  font-style: normal;
  color: var(--muted-2);
}

.chain .chain__out {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--orange-050);
  border: 1px solid rgba(238, 116, 19, 0.22);
  color: var(--navy-800);
  font-weight: 600;
}

/* --- Integrated sourcing model ------------------------------------------ */
.sourcing {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(34px, 4.6vw, 64px);
  align-items: center;
}

/* the long positioning headline reads better with an even rag; ignored by
   engines that do not support text-wrap, which then falls back to normal wrap */
.sourcing__copy .section-title {
  text-wrap: balance;
}

.sourcing__points {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}

.sourcing__points li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15.1px;
  line-height: 1.6;
  letter-spacing: -0.004em;
  color: var(--ink);
}

.sourcing__points svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: rgba(238, 116, 19, 0.9);
}

.flow {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

.flow__node {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--canvas);
}

.flow__node strong {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.34;
  color: var(--navy-800);
}

.flow__kicker {
  font-size: 10.6px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.flow__meta {
  font-size: 13.2px;
  line-height: 1.5;
  color: var(--muted-2);
}

.flow__node--jinhon {
  padding-top: 19px;
  padding-bottom: 19px;
  border-color: var(--navy-800);
  border-left: 3px solid var(--orange-500);
  background: var(--navy-800);
}

.flow__node--jinhon strong {
  font-size: 16.6px;
  letter-spacing: 0.03em;
  color: #fff;
}

.flow__node--jinhon .flow__kicker {
  color: rgba(235, 154, 92, 0.92);
}

.flow__node--jinhon .flow__meta {
  color: rgba(255, 255, 255, 0.72);
}

.flow__node--buyer {
  border-color: rgba(238, 116, 19, 0.3);
  background: var(--orange-050);
}

.flow__node--buyer .flow__kicker {
  color: var(--orange-600);
}

.flow__arrow {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #a8b5c6;
}

.flow__arrow svg {
  display: block;
}

/* --- Feature blocks ----------------------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.feature {
  padding: 28px 26px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.feature__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--navy-100);
  color: var(--navy-700);
}

.feature__num {
  display: block;
  margin-bottom: 11px;
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange-600);
}

.feature h3 {
  font-size: 17.4px;
  margin-bottom: 10px;
  letter-spacing: -0.012em;
}

.feature p {
  font-size: 14.7px;
  line-height: 1.64;
  color: var(--muted);
}

/* --- How it works ------------------------------------------------------- */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 56px;
}

.steps::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 6.5%;
  right: 6.5%;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.step {
  position: relative;
  padding-top: 0;
}

.step__num {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--orange-500);
}

.step h3 {
  margin-top: 22px;
  font-size: 18px;
  color: #fff;
}

.step p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.62);
}

.steps__note {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.76);
}

.steps__note strong {
  color: #fff;
}

/* --- Applications ------------------------------------------------------- */
.apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}

.app {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy-900);
}

.app img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.65s var(--ease);
}

.app:hover img {
  transform: scale(1.05);
}

.app__label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 1;
  font-size: 16.4px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.app__label::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 11px;
  background: var(--orange-500);
}

.app::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0) 38%, rgba(6, 20, 38, 0.8) 100%);
  pointer-events: none;
}

/* --- Case study --------------------------------------------------------- */
.case {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(34px, 4.4vw, 60px);
  align-items: center;
}

/* Fixed-ratio media slot. Any replacement photo is auto-cropped to this frame, so real
   case-study photography (container loading, equipment, shipment, products) drops in
   without touching the layout. */
.case__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}

.case__media img {
  width: 100%;
  aspect-ratio: 4 / 3.35;
  object-fit: cover;
}

.case__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12.2px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.case__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange-500);
}

.case__list {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.case__list li {
  display: block;
}

.case__step {
  font-size: 15.7px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--navy-800);
}

.case__step-num {
  font-size: 11.9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange-500);
}

.case__step-dash {
  color: var(--muted-2);
}

.case__step-text {
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

.case__products {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.case__products h4 {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tag {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 13.2px;
  font-weight: 500;
  color: var(--navy-700);
}

/* --- Additional products ------------------------------------------------ */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.mini {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-800);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.mini:hover {
  border-color: var(--line-strong);
  background: var(--canvas);
  transform: translateY(-2px);
}

.mini__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--canvas);
  color: var(--muted);
}

.mini:hover .mini__dot {
  background: #fff;
  color: var(--orange-600);
}

.mini-note {
  margin-top: 26px;
  font-size: 14.4px;
}

.mini-note a {
  color: var(--navy-700);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}

.mini-note a:hover {
  color: var(--orange-600);
  border-bottom-color: var(--orange-500);
}

/* --- About -------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: clamp(34px, 4.4vw, 62px);
  align-items: start;
}

.about__body p + p {
  margin-top: 18px;
}

.about__body p {
  font-size: 16.2px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 58ch;
}

.about__body .btn {
  margin-top: 30px;
}

.glance {
  padding: 30px 30px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
}

.glance dl {
  margin: 0;
}

.glance__row {
  padding-top: 17px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.glance__row:last-child {
  border-bottom: 0;
}

.glance dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.glance dd {
  margin: 7px 0 0;
  font-size: 15.2px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy-800);
}

/* --- Final CTA ---------------------------------------------------------- */
.cta-section {
  position: relative;
  background: var(--navy-800);
  color: rgba(255, 255, 255, 0.74);
  overflow: hidden;
}

.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    radial-gradient(56% 60% at 82% 12%, rgba(238, 116, 19, 0.22) 0%, transparent 60%),
    radial-gradient(48% 52% at 2% 92%, rgba(28, 81, 137, 0.45) 0%, transparent 64%),
    linear-gradient(180deg, #0a2140 0%, #08192e 100%);
}

.cta {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(34px, 4.4vw, 62px);
  align-items: center;
  padding-top: clamp(60px, 7vw, 96px);
  padding-bottom: clamp(60px, 7vw, 96px);
}

.cta h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  color: #fff;
  max-width: 20ch;
}

.cta__text {
  margin-top: 18px;
  font-size: clamp(1rem, 1.3vw, 1.07rem);
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 30px;
}

.cta__contact {
  margin-top: 30px;
  display: grid;
  gap: 11px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.62);
}

.cta__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 500;
}

.cta__contact a:hover {
  color: #f8b57e;
}

.inquiry {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.inquiry__title {
  font-size: 18.5px;
  color: var(--navy-800);
}

.inquiry__hint {
  margin-top: 8px;
  font-size: 13.6px;
  line-height: 1.55;
}

.field {
  margin-top: 16px;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.6px;
  font-weight: 600;
  color: var(--navy-800);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 14.6px;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9aa6b6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(238, 116, 19, 0.16);
}

.field--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.inquiry .btn {
  width: 100%;
  margin-top: 22px;
}

.inquiry__foot {
  margin-top: 14px;
  font-size: 12.6px;
  line-height: 1.5;
  color: var(--muted-2);
  text-align: center;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(56px, 6.4vw, 84px);
  padding-bottom: 34px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 46px;
}

.footer__blurb {
  margin-top: 22px;
  font-size: 15.4px;
  line-height: 1.7;
  max-width: 40ch;
  color: rgba(255, 255, 255, 0.7);
}

.footer__contact {
  margin-top: 24px;
  display: grid;
  gap: 13px;
}

.footer__contact a,
.footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 15.4px;
  color: rgba(255, 255, 255, 0.88);
}

.footer__contact a:hover {
  color: #fff;
}

.footer__contact svg {
  flex: 0 0 auto;
  color: var(--orange-500);
}

.footer__col h3 {
  margin-bottom: 20px;
  font-size: 12.2px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.footer__links {
  display: grid;
  gap: 13px;
}

.footer__links a {
  font-size: 15.4px;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s var(--ease);
}

.footer__links a:hover {
  color: #fff;
}

.footer__bottom {
  margin-top: clamp(44px, 5.4vw, 66px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  align-items: center;
  font-size: 13.9px;
  color: rgba(255, 255, 255, 0.58);
}

.footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.footer__bottom a:hover {
  color: #fff;
}

/* --- Reveal on scroll --------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  .header__phone {
    display: none;
  }

  .features,
  .mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 26px;
  }

  .steps::before {
    display: none;
  }

  .products__grid,
  .apps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* keep the third product card centred on the two-column grid */
  .products__grid > :last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 14px);
    margin-left: auto;
    margin-right: auto;
  }

  /* the connecting rail only reads on the three-column layout */
  .rail {
    display: none;
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 68px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0;
    padding: 14px var(--gutter) 26px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 40px rgba(11, 37, 69, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0.25s linear;
  }

  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding: 15px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }

  .nav__link::after {
    display: none;
  }

  .header__actions .btn {
    display: none;
  }

  .section-head {
    display: block;
    max-width: 760px;
  }

  .section-head > .section-lede {
    margin-top: 20px;
    max-width: 68ch;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-top: 46px;
    padding-bottom: 34px;
  }

  .hero__title {
    max-width: 22ch;
  }

  .hero__mosaic-main img {
    aspect-ratio: 16 / 9;
  }

  .hero__tile img {
    aspect-ratio: 16 / 10.6;
  }

  .sourcing {
    grid-template-columns: 1fr;
  }

  .sourcing__points {
    margin-top: 24px;
  }

  .case,
  .about,
  .cta {
    grid-template-columns: 1fr;
  }

  .case__media {
    order: -1;
  }

  .cta {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
  }

  .section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .products__grid,
  .apps,
  .features,
  .mini-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .products__grid > :last-child {
    max-width: none;
  }

  .apps {
    gap: 16px;
  }

  .hero__cta .btn,
  .cta__actions .btn {
    flex: 1 1 100%;
  }

  .hero__mosaic {
    gap: 9px;
  }

  .hero__mosaic-label {
    left: 13px;
    bottom: 11px;
    font-size: 11px;
  }

  .hero__tile-label {
    left: 11px;
    right: 11px;
    font-size: 9.4px;
    letter-spacing: 0.06em;
  }

  .flow {
    padding: 18px;
  }

  .hero__badge {
    font-size: 11.8px;
  }

  .chain {
    font-size: 13.4px;
  }

  .inquiry {
    padding: 22px;
  }

  .field--row {
    grid-template-columns: 1fr;
  }

  .glance {
    padding: 24px 22px 6px;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    font-size: 13.2px;
  }
}

@media (max-width: 420px) {
  .hero__title {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Product detail page - sublimation-transfer-paper.html
   Everything below is additive: no rule above is changed, so the homepage is
   unaffected. Physical properties only - logical properties are discarded by
   the target rendering environment.
   ========================================================================== */

/* --- Product hero ------------------------------------------------------- */
/* The hero is a dark band, so the eyebrow needs the lighter orange used by the
   other dark sections rather than the orange-600 body colour. */
.pdp-hero .eyebrow {
  color: #f6a561;
}

/* Fixed-ratio media frame. A replacement photo is auto-cropped to this frame,
   so only src / width / height / alt need updating. */
.pdp-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a1b31;
  box-shadow: 0 26px 58px rgba(2, 10, 22, 0.44);
}

.pdp-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}

.pdp-hero__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0) 52%, rgba(6, 20, 38, 0.78) 100%);
  pointer-events: none;
}

.pdp-hero__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  z-index: 1;
  font-size: 12.4px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
}

/* --- Applications grid (five cards) ------------------------------------- */
/* Three cards fill the first row; the remaining two are placed back on the same
   grid at the same width and land exactly centred, so the last row does not
   leave a hole on the right. */
.pdp-apps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 46px;
}

.pdp-apps > .app {
  grid-column: span 2;
}

.pdp-apps > .app:nth-child(4) {
  grid-column: 2 / 4;
}

.pdp-apps > .app:nth-child(5) {
  grid-column: 4 / 6;
}

/* --- Specification sheet ------------------------------------------------- */
.spec-sheet {
  margin-top: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.spec-sheet__row {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding: 19px 30px;
  border-bottom: 1px solid var(--line);
}

.spec-sheet__row:last-child {
  border-bottom: 0;
}

.spec-sheet dt {
  font-size: 11.8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.spec-sheet dd {
  margin: 0;
  font-size: 15.4px;
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.5;
  color: var(--navy-800);
}

/* values that are only fixed once an enquiry has been reviewed */
.spec-sheet dd.spec-sheet__tbc {
  font-weight: 500;
  color: var(--muted);
}

.spec-sheet__note {
  margin-top: 20px;
  font-size: 13.6px;
  line-height: 1.6;
  color: var(--muted-2);
}

/* --- Supply and export (dark band) -------------------------------------- */
.supply-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.supply-card {
  padding: 26px 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.supply-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
  color: #f6a561;
}

.supply-card h3 {
  margin-bottom: 9px;
  font-size: 16.8px;
  letter-spacing: -0.012em;
}

.supply-card p {
  font-size: 14.4px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Product page responsive -------------------------------------------- */
@media (max-width: 1080px) {
  .pdp-apps {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdp-apps > .app,
  .pdp-apps > .app:nth-child(4),
  .pdp-apps > .app:nth-child(5) {
    grid-column: auto;
  }

  /* the odd fifth card keeps its siblings' width and centres (same convention
     the product grid already uses for its own odd last card) */
  .pdp-apps > .app:nth-child(5) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    margin-left: auto;
    margin-right: auto;
  }

  .supply-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-sheet__row {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 22px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 640px) {
  .pdp-apps {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pdp-apps > .app:nth-child(5) {
    max-width: none;
  }

  .supply-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .spec-sheet {
    margin-top: 34px;
  }

  .spec-sheet__row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 16px 20px;
  }

  .pdp-hero__caption {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: 11.4px;
  }
}

/* --- Hero supporting paragraph ------------------------------------------ */
/* Quieter second line under the hero description (the JINHON sourcing
   statement). Purely additive so every rule above, and the homepage, is
   unaffected. */
.pdp-hero__sub {
  margin-top: 15px;
  max-width: 52ch;
  font-size: clamp(0.97rem, 1.24vw, 1.05rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
}

/* --- Applications grid (six cards) -------------------------------------- */
/* The Polyester Fabric page lists six applications, which fills two even rows
   of three with no hole to close. This variant therefore switches the fifth-card
   centring offsets back to normal spans - the rules above, and the five-card
   layout on the other product pages, are left exactly as they were. */
.pdp-apps--six > .app:nth-child(4),
.pdp-apps--six > .app:nth-child(5) {
  grid-column: span 2;
}

@media (max-width: 1080px) {
  /* back to one card per cell, so the two-column and single-column layouts
     stack exactly the way they do on the other product pages */
  .pdp-apps--six > .app:nth-child(4),
  .pdp-apps--six > .app:nth-child(5) {
    grid-column: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* --- Enquiry form: submitting state -------------------------------------- */
/* The submit button is disabled while the enquiry is in flight. Without this
   it would keep its full-strength colour and pointer cursor, which reads as
   "still clickable" - so tone it down and cancel the hover lift. Applies only
   to that disabled state; every other button rule is unchanged. */
.inquiry .btn[disabled] {
  opacity: 0.68;
  cursor: default;
  box-shadow: none;
  transform: none;
}

/* --- Enquiry form: success state ---------------------------------------- */
/* Once the enquiry API confirms the submission, main.js puts .is-sent on the
   form: the fields and the submit button step aside and the confirmation card
   is revealed in the same place. Plain markup plus CSS - no alert, no modal
   and no animation. */
.inquiry__success {
  display: none;
  padding: 28px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
  text-align: center;
}

/* The card takes focus so the confirmation is announced; it is not an
   interactive control, so it does not need a focus ring. */
.inquiry__success:focus {
  outline: none;
}

.inquiry.is-sent > .inquiry__title,
.inquiry.is-sent > .inquiry__hint,
.inquiry.is-sent > .field,
.inquiry.is-sent > .btn,
.inquiry.is-sent > .inquiry__foot {
  display: none;
}

.inquiry.is-sent > .inquiry__success {
  display: block;
}

.inquiry__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(238, 116, 19, 0.3);
  border-radius: 50%;
  background: var(--orange-050);
  color: var(--orange-500);
}

.inquiry__success-title {
  margin-top: 16px;
  font-size: 18.5px;
}

.inquiry__success-text {
  margin-top: 6px;
  font-size: 13.8px;
  line-height: 1.6;
  color: var(--muted);
}

.inquiry .inquiry__success-btn {
  width: auto;
}

@media (max-width: 640px) {
  .inquiry__success {
    padding: 24px 18px 22px;
  }

  .inquiry .inquiry__success-btn {
    width: 100%;
  }
}

/* ==========================================================================
   FOX Thailand case study + partnership modules
   Purely additive: no rule above is modified, so the homepage and the three
   product pages keep the layout they already have. Physical properties only -
   logical properties are discarded by the target rendering environment.
   ========================================================================== */

/* --- Case study hero ----------------------------------------------------- */
/* The supplied partnership photograph is portrait (1179x1476). The media
   column is therefore sized to a 4:5 frame, which keeps the people, the
   branding and the goods visible instead of cropping them into a wide band. */
.csx-hero__inner {
  grid-template-columns: 1.06fr 0.94fr;
  align-items: center;
}

.csx-hero__subtitle {
  margin-top: 18px;
  max-width: 26ch;
  font-size: clamp(1.1rem, 1.7vw, 1.34rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.014em;
  color: rgba(255, 255, 255, 0.93);
}

.csx-hero__support {
  margin-top: 20px;
  max-width: 42ch;
  font-size: 14.4px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

.csx-hero__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a1b31;
  box-shadow: 0 26px 58px rgba(2, 10, 22, 0.44);
}

.csx-hero__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --- Story lead ---------------------------------------------------------- */
.csx-lead {
  max-width: 74ch;
}

.csx-lead p {
  font-size: 1.04rem;
  line-height: 1.74;
  color: var(--muted);
}

.csx-lead p + p {
  margin-top: 16px;
}

.csx-lead p:first-child {
  font-size: clamp(1.14rem, 1.7vw, 1.3rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: var(--navy-800);
}

.csx-lead__statement {
  max-width: 62ch;
  margin-top: 30px;
  padding-left: 20px;
  border-left: 2px solid var(--orange-500);
  font-size: clamp(1.04rem, 1.5vw, 1.16rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

/* body paragraph that sits between photographic blocks */
.csx-body {
  margin-top: 30px;
  max-width: 68ch;
  font-size: 16.2px;
  line-height: 1.72;
  color: var(--muted);
}

/* --- Two-up partnership figures ------------------------------------------ */
.csx-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 46px;
}

.csx-figure {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.csx-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.csx-figure figcaption {
  padding: 13px 18px 15px;
  border-top: 1px solid var(--line);
  font-size: 13.6px;
  line-height: 1.55;
  color: var(--muted);
}

/* --- Supplied shipment statistics ---------------------------------------- */
/* The numbers carry the weight and the labels stay quiet: no per-row dividers
   and no cards, so the block reads as evidence rather than a dashboard panel. */
.csx-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line-strong);
}

.csx-stat__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}

.csx-stat__num {
  font-size: clamp(1.8rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--navy-800);
}

.csx-stat__unit {
  font-size: clamp(0.96rem, 1.3vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-700);
}

.csx-stat__label {
  margin-top: 11px;
  font-size: 14.6px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.csx-stats2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 26px;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}

.csx-stats2 li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14.8px;
  color: var(--muted);
}

.csx-stats2 b {
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--navy-800);
}

.csx-note {
  margin-top: 28px;
  max-width: 64ch;
  font-size: 13.2px;
  line-height: 1.62;
  color: var(--muted-2);
}

/* --- Photographic evidence ----------------------------------------------- */
/* One frame type shared by the shipment strip, the editorial gallery and the
   Thailand grid. The image always fills the frame, so mixed source aspect
   ratios never break the layout. */
.csx-shot {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy-900);
}

.csx-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.csx-shot::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(6, 20, 38, 0) 44%, rgba(6, 20, 38, 0.8) 100%);
  pointer-events: none;
}

.csx-shot figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
}

.csx-shot__stage {
  display: block;
  margin-bottom: 5px;
  font-size: 11.2px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #f4a76e;
}

.csx-shot__note {
  display: block;
  font-size: 14.2px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: #fff;
}

.csx-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 46px;
}

.csx-strip .csx-shot {
  aspect-ratio: 3 / 2;
}

/* --- Product categories -------------------------------------------------- */
.csx-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.csx-cat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.csx-cat__media {
  overflow: hidden;
  background: var(--canvas);
}

.csx-cat__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.csx-cat__body {
  padding: 22px 24px 26px;
}

.csx-cat h3 {
  font-size: 18.4px;
}

.csx-cat__list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.csx-cat__list li {
  position: relative;
  padding-left: 17px;
  font-size: 14.8px;
  line-height: 1.55;
  color: var(--muted);
}

.csx-cat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-500);
}

/* the fifth category closes the grid on a single full-width row */
.csx-cat--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: stretch;
}

.csx-cat--wide .csx-cat__media {
  height: 100%;
  min-height: 240px;
}

.csx-cat--wide .csx-cat__media img {
  height: 100%;
}

.csx-cat--wide .csx-cat__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Supply chain flow --------------------------------------------------- */
.csx-flow {
  display: grid;
  gap: 0;
  margin-top: 48px;
}

.csx-flow__node {
  padding: 20px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.csx-flow__kicker {
  font-size: 11.4px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.csx-flow__node strong {
  display: block;
  margin-top: 7px;
  font-size: 19.6px;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: #fff;
}

.csx-flow__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.csx-flow__caps li {
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 13.2px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

.csx-flow__span {
  padding: 15px 24px 4px;
  font-size: 13.6px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.6);
}

.csx-flow__node--jinhon {
  border-color: rgba(238, 116, 19, 0.42);
  border-left: 3px solid var(--orange-500);
  background: rgba(238, 116, 19, 0.09);
}

.csx-flow__node--jinhon .csx-flow__kicker {
  color: #f4a76e;
}

.csx-flow__node--market {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.02);
}

.csx-flow__arrow {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 12px;
  color: rgba(255, 255, 255, 0.32);
}

.csx-flow__copy {
  display: grid;
  gap: 14px;
  max-width: 74ch;
  margin-top: 42px;
}

.csx-flow__copy p {
  font-size: 15.6px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.72);
}

/* --- Editorial gallery --------------------------------------------------- */
/* Fixed row heights keep every frame in a row exactly the same height even
   though the source photographs have different aspect ratios. */
.csx-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(200px, 22vw, 296px);
  gap: 16px;
  margin-top: 48px;
}

.csx-gallery .csx-shot {
  height: 100%;
}

/* the seated group sits low in its frame, so bias the crop downwards */
.csx-gallery .csx-shot:nth-child(7) img {
  object-position: center 58%;
}

.csx-gallery .csx-shot:nth-child(1) { grid-column: span 7; }
.csx-gallery .csx-shot:nth-child(2) { grid-column: span 5; }
.csx-gallery .csx-shot:nth-child(3) { grid-column: span 5; }
.csx-gallery .csx-shot:nth-child(4) { grid-column: span 7; }
.csx-gallery .csx-shot:nth-child(5) { grid-column: span 4; }
.csx-gallery .csx-shot:nth-child(6) { grid-column: span 4; }
.csx-gallery .csx-shot:nth-child(7) { grid-column: span 4; }

/* --- Thailand market grid ------------------------------------------------ */
.csx-local {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}

.csx-local .csx-shot {
  aspect-ratio: 4 / 3;
}

/* the tallest source here is the most tightly framed, so bias the crop to the
   people rather than to the middle of the frame */
.csx-local .csx-shot img {
  object-position: center 40%;
}

/* --- Closing band and final statement ------------------------------------ */
.csx-closing {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
}

.csx-closing img {
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
}

.csx-final__statement {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.csx-final__big {
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #fff;
}

.csx-final__brand {
  margin-top: 9px;
  font-size: 15.4px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   Homepage partnership module + About proof + product page evidence module
   ========================================================================== */

.foxmod__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.foxmod__stat b {
  display: block;
  font-size: clamp(1.34rem, 2vw, 1.68rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--navy-800);
}

.foxmod__stat span {
  display: block;
  margin-top: 6px;
  font-size: 13.8px;
  font-weight: 500;
  color: var(--muted);
}

.foxmod__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-700);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.foxmod__cta svg {
  transition: transform 0.25s var(--ease);
}

.foxmod__cta:hover {
  color: var(--orange-600);
  border-bottom-color: var(--orange-500);
}

.foxmod__cta:hover svg {
  transform: translateX(4px);
}

/* --- Shared inline link used by the proof cards -------------------------- */
.foxproof__link,
.foxevi__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 14.6px;
  font-weight: 600;
  color: var(--navy-700);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.foxproof__link svg,
.foxevi__link svg {
  transition: transform 0.25s var(--ease);
}

.foxproof__link:hover,
.foxevi__link:hover {
  color: var(--orange-600);
  border-bottom-color: var(--orange-500);
}

.foxproof__link:hover svg,
.foxevi__link:hover svg {
  transform: translateX(4px);
}

/* --- About: long-term partnership proof ---------------------------------- */
.about__sub {
  margin-top: 36px;
  font-size: 19.6px;
  letter-spacing: -0.014em;
}

.about__body .about__sub + p {
  margin-top: 13px;
}

.foxproof {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.foxproof img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.foxproof__kicker {
  font-size: 12.2px;
  font-weight: 600;
  color: var(--orange-600);
}

.foxproof__title {
  margin-top: 7px;
  font-size: 16.8px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--navy-800);
}

.foxproof__link {
  margin-top: 12px;
}

/* --- Product page evidence module --------------------------------------- */
.foxevi {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.foxevi__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}

.foxevi__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.foxevi__kicker {
  font-size: 12.4px;
  font-weight: 600;
  color: var(--orange-600);
}

.foxevi__text {
  margin-top: 13px;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.68;
  color: var(--muted);
}

.foxevi__link {
  margin-top: 20px;
  font-size: 14.8px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .csx-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }

  .csx-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 960px) {
  .csx-hero__inner {
    grid-template-columns: 1fr;
  }

  .csx-hero__subtitle,
  .csx-hero__support {
    max-width: 46ch;
  }

  .csx-pair,
  .csx-cats,
  .csx-local {
    grid-template-columns: 1fr;
  }

  .csx-cat--wide {
    grid-column: 1 / -1;
    display: block;
  }

  .csx-cat--wide .csx-cat__media {
    height: auto;
    min-height: 0;
  }

  .csx-cat--wide .csx-cat__media img {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .csx-gallery {
    grid-auto-rows: 232px;
  }

  .csx-gallery .csx-shot:nth-child(1),
  .csx-gallery .csx-shot:nth-child(2),
  .csx-gallery .csx-shot:nth-child(3),
  .csx-gallery .csx-shot:nth-child(4),
  .csx-gallery .csx-shot:nth-child(5),
  .csx-gallery .csx-shot:nth-child(6) {
    grid-column: span 6;
  }

  /* the odd seventh frame takes the full width so no cell is left empty */
  .csx-gallery .csx-shot:nth-child(7) {
    grid-column: 1 / -1;
  }

  .foxevi {
    grid-template-columns: 1fr;
  }

  .foxevi__text {
    max-width: 68ch;
  }

  .foxevi__media {
    max-width: 520px;
  }
}

@media (max-width: 640px) {
  .csx-stats,
  .csx-stats2,
  .csx-strip {
    grid-template-columns: 1fr;
  }

  .csx-stats {
    gap: 26px;
  }

  .csx-stats2 {
    gap: 14px;
  }

  .csx-lead__statement {
    padding-left: 16px;
  }

  .csx-gallery {
    grid-auto-rows: 212px;
    gap: 12px;
  }

  .csx-gallery .csx-shot:nth-child(1),
  .csx-gallery .csx-shot:nth-child(2),
  .csx-gallery .csx-shot:nth-child(3),
  .csx-gallery .csx-shot:nth-child(4),
  .csx-gallery .csx-shot:nth-child(5),
  .csx-gallery .csx-shot:nth-child(6),
  .csx-gallery .csx-shot:nth-child(7) {
    grid-column: 1 / -1;
  }

  .csx-shot figcaption {
    left: 13px;
    right: 13px;
    bottom: 12px;
  }

  .csx-flow__node {
    padding: 18px 18px 20px;
  }

  .csx-flow__span {
    padding-left: 18px;
    padding-right: 18px;
  }

  .foxmod__stats {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .foxproof {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .foxproof img {
    max-width: 260px;
  }

  .foxevi {
    padding: 18px;
  }

  .foxevi__media {
    max-width: none;
  }
}
/* --- Product page evidence module: heading ------------------------------- */
.foxevi__title {
  margin-top: 9px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--navy-800);
}
/* --- Homepage module: paired case title ---------------------------------- */
.foxmod__title {
  margin-top: 24px;
  font-size: 18px;
  letter-spacing: -0.014em;
  color: var(--navy-800);
}

/* The About column sizes and colours its paragraphs with a higher specificity
   than a single class, so the proof card repeats the context to keep the kicker
   orange and the paired title navy rather than inheriting the body paragraph. */
.foxproof .foxproof__kicker {
  font-size: 12.2px;
  font-weight: 600;
  color: var(--orange-600);
}

.foxproof .foxproof__title {
  margin-top: 7px;
  font-size: 16.8px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--navy-800);
}

/* ==========================================================================
   Homepage optimisation - positioning, product system, case-study proof
   Purely additive: no rule above is modified.
   ========================================================================== */

/* --- Hero: product scope line -------------------------------------------- */
/* The concise one-line scope of what JINHON supplies. Deliberately quieter than
   the supporting line above it so the two read as a pair rather than as two
   competing paragraphs. */
.hero__scope {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 13.6px;
  line-height: 1.62;
  letter-spacing: 0.004em;
  color: rgba(255, 255, 255, 0.56);
}

/* --- Shared band spacing -------------------------------------------------- */
/* Space between a section head and the block that follows it. Used by the
   homepage case-study band and by the action that closes it. */
.band {
  margin-top: clamp(40px, 4.6vw, 56px);
}

/* --- Supply chain flow: category line ------------------------------------ */
/* The product categories the specialized manufacturers cover - the middle tier
   of the homepage supply-chain diagram, inside the existing white .flow card. */
.flow__span {
  padding: 12px 6px 2px;
  font-size: 13.2px;
  line-height: 1.6;
  text-align: center;
  color: var(--muted-2);
}

/* --- Product categories: numbering, in-list links, per-category action --- */
.csx-cat__num {
  margin-bottom: 7px;
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--orange-600);
}

/* The homepage category cards carry their own action, so the body fills the
   card and the action lands on the baseline of the shortest card in its row. */
.csx-cats .csx-cat__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* The wide card keeps the centred body it already has on the case-study page. */
.csx-cats .csx-cat--wide .csx-cat__body {
  justify-content: center;
}

.csx-cat__list a {
  color: var(--navy-700);
  font-weight: 600;
  transition: color 0.2s var(--ease);
}

.csx-cat__list a:hover {
  color: var(--orange-600);
}

.csx-cat__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  padding-bottom: 2px;
  border-top: 1px solid var(--line);
  font-size: 14.6px;
  font-weight: 600;
  color: var(--navy-700);
  transition: color 0.22s var(--ease);
}

.csx-cat__cta svg {
  transition: transform 0.25s var(--ease);
}

.csx-cat__cta:hover {
  color: var(--orange-600);
}

.csx-cat__cta:hover svg {
  transform: translateX(4px);
}

/* --- Six-step process ---------------------------------------------------- */
/* Two rows of three. The connector rail only reads across a single row, so this
   variant drops it rather than leaving the second row visually unattached. */
.steps--six {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 44px;
}

.steps--six::before {
  display: none;
}

@media (max-width: 1080px) {
  .steps--six {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .steps--six {
    grid-template-columns: 1fr;
  }
}

/* --- About: eyebrow inside the About column ------------------------------ */
/* The About column sizes and colours every paragraph with a higher specificity
   than a single class, so the eyebrow has to repeat that context to stay small
   and orange instead of flattening into the body paragraph style. */
.about__body .eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
}

/* ==========================================================================
   Case-study narrative and homepage positioning update
   Purely additive: no rule above this block is modified.
   ========================================================================== */

/* --- Case-study hero: paragraphs, highlight statement, secondary label --- */
/* The hero carries the thesis of the whole page, so the supporting
   paragraphs stay at body size and the two-line highlight is given the
   weight of a headline instead. */
.csx-hero__text {
  margin-top: 16px;
  max-width: 50ch;
  font-size: 15.2px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.72);
}

.csx-hero__claim {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 44ch;
}

.csx-hero__claim span {
  display: block;
  font-size: clamp(1.14rem, 1.9vw, 1.42rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: #fff;
}

.csx-hero__claim span + span {
  color: #f4a76e;
}

.csx-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-size: 11.6px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.csx-hero__label::before {
  content: "";
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
}

/* --- Growth timeline ---------------------------------------------------- */
/* A rule above each milestone with a dot sitting on it. When the grid wraps
   to fewer columns every item keeps its own rule, so the band still reads as
   a timeline instead of breaking into unattached cards. */
.tl {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(18px, 2.2vw, 34px);
  row-gap: 36px;
  margin-top: 52px;
}

.tl__item {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid var(--line-strong);
}

.tl__item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange-500);
}

.tl__item:last-child::before {
  box-shadow: 0 0 0 5px rgba(238, 116, 19, 0.16);
}

.tl__when {
  font-size: 12.2px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.tl__title {
  margin-top: 9px;
  font-size: 15.6px;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--navy-800);
}

.tl__text {
  margin-top: 10px;
  font-size: 13.9px;
  line-height: 1.64;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .tl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .tl {
    grid-template-columns: 1fr;
  }
}

/* --- Two engines of growth ---------------------------------------------- */
/* Two symmetric capability columns. The China column is tinted rather than
   relabelled, so neither side reads as the cause of the other. */
.engines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: 48px;
}

.engines__col {
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.engines__kicker {
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.engines__title {
  margin-top: 10px;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  letter-spacing: -0.014em;
}

.engines__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.engines__list li {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 13.4px;
  line-height: 1.4;
  color: var(--navy-700);
}

.engines__col--china {
  border-color: rgba(238, 116, 19, 0.38);
}

.engines__col--china .engines__list li {
  border-color: rgba(238, 116, 19, 0.3);
  background: var(--orange-050);
}

@media (max-width: 860px) {
  .engines {
    grid-template-columns: 1fr;
  }
}

/* --- Editorial two-column statement ------------------------------------- */
/* Headline on the left, argument on the right, both using the container
   width instead of leaving a dead column beside a narrow heading. */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  column-gap: clamp(32px, 5vw, 84px);
  align-items: start;
}

.editorial__title {
  font-size: clamp(1.72rem, 3.2vw, 2.5rem);
  letter-spacing: -0.022em;
}

.editorial__title span {
  display: block;
}

.editorial__copy {
  padding-top: 6px;
}

.editorial__copy p {
  font-size: clamp(1rem, 1.32vw, 1.075rem);
  line-height: 1.72;
  color: var(--muted);
}

.editorial__copy p + p {
  margin-top: 16px;
}

@media (max-width: 960px) {
  .editorial {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}

/* --- Partnership diagram: two-way trust band ---------------------------- */
/* Sits between the two teams rather than between a vendor and a customer. */
.csx-flow__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 14.4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #f4a76e;
  text-align: center;
}

.csx-flow__trust svg {
  flex: 0 0 auto;
}

.csx-flow__node--fox {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Statement spacing after a note block ------------------------------- */
.csx-lead--gap {
  margin-top: 44px;
}

/* --- Distributor invitation card ---------------------------------------- */
.invite {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(30px, 4vw, 62px);
  align-items: center;
  padding: clamp(28px, 3.6vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--canvas);
}

.invite__title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: -0.022em;
}

.invite__title span {
  display: block;
}

.invite__text {
  margin-top: 18px;
  max-width: 52ch;
  font-size: clamp(1rem, 1.3vw, 1.06rem);
  line-height: 1.7;
  color: var(--muted);
}

.invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 28px;
}

.invite__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.invite__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.invite__media figcaption {
  padding: 13px 18px 15px;
  border-top: 1px solid var(--line);
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 900px) {
  .invite {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
}
/* ==========================================================================
   Homepage trust architecture - FOX strip, FOX proof, relevance stack,
   real supply-chain sequence, reduced applications and the closing statement
   Purely additive: no rule above this block is modified.
   Physical properties only - logical properties are discarded by the target
   rendering environment.
   ========================================================================== */

/* --- FOX trust strip (attached to the hero) ----------------------------- */
/* Sits at the foot of the navy hero band and reads as part of it: a hairline
   separates it from the positioning statement, no card and no new background.
   It is proof rather than a logo wall, so the three facts carry the weight and
   the kicker stays quiet. */
.trustbar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(4, 13, 25, 0.34);
}

.trustbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(28px, 4vw, 68px);
  row-gap: 28px;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 32px;
}

.trustbar__kicker {
  font-size: 11.4px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f4a76e;
}

.trustbar__title {
  margin-top: 11px;
  font-size: clamp(1.34rem, 2.2vw, 1.7rem);
  letter-spacing: -0.02em;
  color: #fff;
}

.trustbar__line {
  margin-top: 10px;
  max-width: 52ch;
  font-size: 14.6px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.66);
}

.trustbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 14.6px;
  font-weight: 600;
  color: #fff;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.trustbar__cta svg {
  transition: transform 0.25s var(--ease);
}

.trustbar__cta:hover {
  color: #f4a76e;
  border-bottom-color: rgba(244, 167, 110, 0.7);
}

.trustbar__cta:hover svg {
  transform: translateX(4px);
}

.trustbar__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 26px;
}

.trustbar__fact b {
  display: block;
  font-size: clamp(1.16rem, 1.7vw, 1.42rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: #fff;
}

.trustbar__fact span {
  display: block;
  margin-top: 7px;
  font-size: 13.1px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 960px) {
  .trustbar__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .trustbar__facts {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* --- Two-line statement on a light background ---------------------------- */
/* Mirrors the highlight statement on the case-study hero, restated for a light
   band so the same idea keeps the same weight wherever it appears. */
.claim {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.claim span {
  display: block;
  font-size: clamp(1.14rem, 1.9vw, 1.42rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--navy-800);
}

.claim span + span {
  color: var(--orange-600);
}

/* the paired case title is a subheading here, not a card label */
.case__body .foxmod__title {
  font-size: clamp(1.16rem, 1.75vw, 1.4rem);
  letter-spacing: -0.018em;
}

/* the action already sits inside a spaced band, so it does not need its own
   top margin as well */
.foxcase__cta {
  margin-top: 0;
}

/* --- FOX proof: market scale vs supply scale ----------------------------- */
/* Two columns at deliberately different visual weights. The market side states
   what FOX built on the ground; the tinted supply side carries the China-side
   figures, given a denser two-column rhythm so it reads as the heavier half. */
.scales {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(22px, 3vw, 40px);
  margin-top: clamp(40px, 4.6vw, 56px);
}

.scale {
  padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px) clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.scale__kicker {
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.scale__window {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-600);
}

.scale__list {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.scale__item b {
  display: block;
  font-size: clamp(1.3rem, 2.05vw, 1.66rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.026em;
  color: var(--navy-800);
}

.scale__item span {
  display: block;
  margin-top: 6px;
  font-size: 13.8px;
  line-height: 1.5;
  color: var(--muted);
}

.scale--supply {
  border-color: rgba(238, 116, 19, 0.34);
  background: var(--orange-050);
}

.scale--supply .scale__kicker {
  color: var(--orange-600);
}

.scale--supply .scale__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

@media (max-width: 860px) {
  .scales {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .scale--supply .scale__list {
    grid-template-columns: 1fr;
  }
}

/* The equipment counts are supporting detail, so they read a step smaller than
   the material totals above instead of competing for the same attention. */
.equip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 26px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.equip__item b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--navy-700);
}

.equip__item span {
  display: block;
  margin-top: 4px;
  font-size: 13.4px;
  line-height: 1.5;
  color: var(--muted-2);
}

@media (max-width: 640px) {
  .equip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* --- Four-stage growth timeline ------------------------------------------ */
/* The case-study page keeps the five-stage version; the homepage summary uses
   four stages, so it needs its own track count and no empty last column. */
.tl--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .tl--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tl--four {
    grid-template-columns: 1fr;
  }
}

/* --- Three-tier model stack ---------------------------------------------- */
/* Your market / JINHON / China supply chain, joined by a two-way arrow: the
   relationship runs in both directions, so neither tier reads as a feed line
   into the next. Light-theme sibling of the case-study supply-chain flow. */
.stack {
  display: grid;
  gap: 0;
  margin-top: clamp(38px, 4.4vw, 54px);
}

.stack__node {
  padding: 22px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.stack__kicker {
  font-size: 11.4px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.stack__node strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.06rem, 1.6vw, 1.24rem);
  font-weight: 700;
  letter-spacing: -0.016em;
  color: var(--navy-800);
}

.stack__caps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.stack__caps li {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 13.4px;
  line-height: 1.4;
  color: var(--navy-700);
}

.stack__node--jinhon {
  border-color: rgba(238, 116, 19, 0.42);
  border-left: 3px solid var(--orange-500);
  background: var(--orange-050);
}

.stack__node--jinhon .stack__kicker {
  color: var(--orange-600);
}

.stack__node--jinhon .stack__caps li {
  border-color: rgba(238, 116, 19, 0.3);
  background: #fff;
}

.stack__arrow {
  display: flex;
  justify-content: center;
  padding-top: 13px;
  padding-bottom: 13px;
  color: var(--muted-2);
}

@media (max-width: 640px) {
  .stack__node {
    padding: 18px 18px 20px;
  }
}

/* --- Editorial modifiers (supply-chain model sub-block) ------------------ */
/* A second editorial statement inside a section that already opened with a
   headline: ruled off from the block above and set a step smaller, so it reads
   as part of the same argument rather than as a new section. */
.editorial--rule {
  margin-top: clamp(46px, 5.2vw, 70px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--line);
}

.editorial--minor .editorial__title {
  font-size: clamp(1.4rem, 2.2vw, 1.86rem);
}

/* the closing line of that block, sized against the copy column it sits in */
.editorial__copy .sourcing__claim-out {
  margin-top: 14px;
  font-size: 14.8px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--orange-600);
}

/* --- Product categories: one line of evidence ---------------------------- */
/* One sentence only. The FOX story is told in full once, higher up the page. */
.evidence-line {
  margin-top: 30px;
  padding: 15px 20px;
  border-left: 2px solid var(--orange-500);
  background: var(--orange-050);
  font-size: 14.8px;
  line-height: 1.62;
  color: var(--navy-800);
}

@media (max-width: 640px) {
  .evidence-line {
    padding: 13px 16px;
    font-size: 14.2px;
  }
}

/* --- Why JINHON: the evidence line under each capability ----------------- */
/* Each capability closes on the proof that supports it, separated by a short
   orange rule instead of another card or badge. */
.feature__proof {
  margin-top: 18px;
  font-size: 13.4px;
  font-weight: 600;
  line-height: 1.52;
  color: var(--navy-700);
}

.feature__proof::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-bottom: 11px;
  background: var(--orange-500);
}

/* --- Behind the supply chain: photographic sequence --------------------- */
/* Six equal 4:3 frames built on the existing evidence frame, so the captions
   and the gradient treatment match the case-study gallery exactly. */
.evid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 46px;
}

.evid .csx-shot {
  aspect-ratio: 4 / 3;
}

@media (max-width: 1080px) {
  .evid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .evid {
    grid-template-columns: 1fr;
  }
}

/* --- Applications, reduced to a single line ----------------------------- */
/* Application photography used to take a full grid of its own. The information
   is still worth stating, but it must not outweigh the FOX proof or the real
   supply-chain sequence, so it is reduced to one line of text. */
.apps-line {
  max-width: 84ch;
}

.apps-line__title {
  font-size: clamp(1.24rem, 1.9vw, 1.5rem);
  letter-spacing: -0.018em;
}

.apps-line__text {
  margin-top: 12px;
  font-size: clamp(1rem, 1.32vw, 1.08rem);
  line-height: 1.7;
  color: var(--muted);
}

/* --- About: two-line headline and the case-study link ------------------- */
/* The About column sizes and colours every paragraph with a higher specificity
   than a single class, so the headline keeps its own context and the two lines
   stack instead of running together. */
.about__body .section-title span {
  display: block;
}

.about__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 14.6px;
  font-weight: 600;
  color: var(--navy-700);
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.about__link svg {
  transition: transform 0.25s var(--ease);
}

.about__link:hover {
  color: var(--orange-600);
  border-bottom-color: var(--orange-500);
}

.about__link:hover svg {
  transform: translateX(4px);
}

/* --- Closing statement: two-line headline ------------------------------- */
.cta h2 span {
  display: block;
}

.cta h2 span + span {
  color: #f4a76e;
}

/* ==========================================================================
   Final patch - FOX organizational scale (200+ team members) on the case-study
   page, and the removal of the homepage applications section.
   Purely additive: no rule above this block is modified.
   ========================================================================== */

/* --- Case study: quiet sub-heading above the FOX Today metrics ----------- */
.csx-sub {
  margin-top: 34px;
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* The supporting sentence continues the sub-heading, so it drops the top
   margin a standalone body paragraph normally carries. */
.csx-body--tight {
  margin-top: 14px;
}

/* --- FOX Today: four metrics read as an even 2 x 2 block ----------------- */
/* Two columns keep the four dimensions legible; a single row of four would
   squeeze the longer labels such as the regional warehouse line. */
.csx-stats2--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .csx-stats2--four {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Homepage - product-category photography
   Purely additive: no rule above this block is modified. Every rule here is
   scoped to .csx-cats--catalog, the modifier only the homepage product grid
   carries, so the case-study page keeps exactly the cropping it already had.
   The category frames and the supply-chain evidence frames are separate people
   in the markup, and these rules touch only the category frames.
   Physical properties only - logical properties are discarded by the target
   rendering environment.
   ========================================================================== */

/* Each category photograph is framed on its own terms. The shared 16:10 frame
   is unchanged; only the part of each source photograph that lands inside it
   moves, so one crop is never forced onto five different photographs. */
.csx-cats--catalog > .csx-cat:nth-child(1) .csx-cat__media img {
  object-position: center 58%;
}

.csx-cats--catalog > .csx-cat:nth-child(2) .csx-cat__media img {
  object-position: center;
}

.csx-cats--catalog > .csx-cat:nth-child(3) .csx-cat__media img {
  object-position: center 54%;
}

.csx-cats--catalog > .csx-cat:nth-child(4) .csx-cat__media img {
  object-position: center 55%;
}

/* The fifth card closes the grid on a single full-width row, so its frame is
   far wider than the four above it. Its photograph is portrait, and in the
   default frame it was reduced to a thin horizontal slice of the machine. The
   extra height on that one frame keeps the machine structure whole; the row
   stays shorter than a standard category card, so the grid still reads as one
   system. */
.csx-cats--catalog > .csx-cat--wide .csx-cat__media {
  min-height: 400px;
}

.csx-cats--catalog > .csx-cat--wide .csx-cat__media img {
  object-position: center 44%;
}

@media (max-width: 960px) {
  /* the wide card falls back to a stacked block here, where the image sizes
     itself from its own aspect ratio - so the desktop minimum must not leave
     empty space underneath it */
  .csx-cats--catalog > .csx-cat--wide .csx-cat__media {
    min-height: 0;
  }
}

/* ==========================================================================
   Homepage hero - first-screen fit (1920 x 1080 at 100% browser zoom)
   --------------------------------------------------------------------------
   The hero band measured 1296px tall, so at 100% zoom the FOX trust strip
   started at y=1147 and fell entirely below a ~930px viewport: the proof was
   never part of the first screen. This block shortens the band without
   touching a single type size - one duplicated spec table removed from the
   markup, margins and paddings tightened, and the collage re-fitted into a
   512px column.

   Scope: `.hero--firstscreen`, added to index.html only. The base `.hero`,
   `.hero__inner`, `.hero__content`, `.hero__title`, `.hero__lede` and
   `.hero__cta` classes are also used by case-studies/fox-thailand.html and the
   three product pages, so every rule below stays behind the modifier and none
   of them can reach those pages.

   The desktop geometry is fenced at min-width 961px because the base sheet
   collapses `.hero__inner` to a single column and re-caps `.hero__title`
   inside `@media (max-width: 960px)`. A rule appended out here would out-rank
   that block - it is both later in the file and more specific - and would
   silently break the stacked tablet and mobile hero.

   Second pass (vertical-rhythm refinement). The strip did fit a 929px headless
   viewport, but only just, and a real maximised Chrome window on a 1080p
   display minus its own chrome lands nearer 900px - so in practice the foot of
   the strip was still being cut. Two slack bands were removed instead of
   shrinking anything: hero top padding 62 -> 30 and hero bottom padding
   57 -> 28, plus 8px inside the strip. That is 69px of height bought back with
   no change to any type size, any column, any image or any copy.
   ========================================================================== */

@media (min-width: 961px) {
  /* Vertical rhythm, measured at 1904x929 (Chrome, 1920x1080 at 100% zoom).
     Two bands of slack were carrying height without carrying meaning:

       header -> badge            62px  ->  30px
       CTA row -> trust-strip     57px  ->  28px

     The first is the hero's own top padding (base sheet:
     clamp(46px, 5.6vw, 78px)); the second is its bottom padding (base sheet:
     clamp(44px, 5vw, 72px)). Everything between them - badge, headline,
     paragraph, capability line, product line, CTA row - is untouched, and so
     are both grid columns and the collage. 30px still reads as a deliberate
     top margin rather than a collision, and 28px is the same distance the
     nav uses between its own items; neither is a squeeze. */
  .hero--firstscreen .hero__inner {
    padding-top: clamp(28px, 2.4vw, 30px);
    padding-bottom: clamp(25px, 2.2vw, 28px);
  }

  .hero--firstscreen .hero__badge {
    margin-bottom: 14px;
  }

  .hero--firstscreen .hero__lede {
    margin-top: 14px;
  }

  /* The capability line is one line by design, but a 42ch measure was forcing
     it onto two. */
  .hero--firstscreen .csx-hero__support {
    margin-top: 12px;
    max-width: 62ch;
  }

  .hero--firstscreen .hero__scope {
    margin-top: 8px;
  }

  .hero--firstscreen .hero__cta {
    margin-top: 22px;
  }

  /* FOX trust strip: this is proof, so it stays attached to the hero band
     rather than reading as a new section. Padding and margins only - the type
     scale and the three facts are untouched. The bottom padding is the one
     place inside the strip that is genuinely slack: nothing sits under the
     "See the FOX Growth Story" rule, so 24px -> 16px buys back height without
     changing how the strip reads. Its top padding stays at 22px, which is what
     keeps it looking joined to the hero rather than stacked after it. */
  .hero--firstscreen .trustbar__inner {
    padding-top: 22px;
    padding-bottom: 16px;
  }

  .hero--firstscreen .trustbar__title {
    margin-top: 7px;
  }

  .hero--firstscreen .trustbar__line {
    margin-top: 6px;
  }

  .hero--firstscreen .trustbar__cta {
    margin-top: 12px;
  }
}

/* Only once the container reaches its full 1200px does the row have room to be
   re-proportioned. Below that the original 0.94fr / 1.06fr split is kept, so
   the two columns can never squeeze each other. */
@media (min-width: 1248px) {
  /* The left column takes the larger share for one measured reason: the
     headline needs a 552px measure to break after "Your Digital Printing"
     (that phrase is 551.9px wide at 56.8px) and the old 531px column could
     only give it four lines. The 512px image column then lands the collage at
     504px - 336px main + 12px gap + 156px tiles - which is the 500-520px the
     brief asks for, with both aspect-ratios left exactly as they were. */
  .hero--firstscreen .hero__inner {
    grid-template-columns: minmax(0, 1fr) 512px;
  }

  /* Same size, same weight, same colour: only the measure changes, so the
     headline stops breaking after "Your Digital". */
  .hero--firstscreen .hero__title {
    max-width: 20ch;
  }
}

/* ==========================================================================
   Homepage FOX case study - scale proof row and spacing refit
   --------------------------------------------------------------------------
   The section read as sparse and slightly disconnected: the partnership
   paragraph described a role in the abstract, FOX's market result and the
   China-side supply response were never shown on the same line, and the column
   carried three separate bands of slack (24px above the sub-heading, 30px
   above the paragraph, 52px of rule-off above the statement).
   Three facts now sit between the paragraph and the two-line statement, and
   every rule below is either a brand-new class or scoped to `#case-study`,
   which exists only on index.html - so the case-study page and the three
   product pages keep exactly the layout they had, even though `.band`,
   `.csx-body`, `.foxmod__title` and `.claim` are all shared classes.
   Physical properties only - logical properties are discarded by the target
   rendering environment.

   Second pass (visual hierarchy + the hand-off to the growth timeline).
   Three numbers changed, no structure and no copy:
   - the headline row and the row under it are one thought, so the gap between
     them closes from 44px to 22px;
   - the photo column is re-proportioned so the exhibition photo renders 554px
     wide instead of 540px, inside the 540-560px asked for. The width comes out
     of the gutter, not the text column, because the text column is within 8px
     of a wrap threshold (see the note in the block below);
   - the growth timeline is pushed clear of the fold. Its dot rule used to land
     846px below the section top while a 1920x1080 viewport only offers 853px of
     content height below the sticky header, so the rule and its dots - and
     nothing else - sat on the last seven pixels of the screen. The rule now
     lands around 934px, which keeps it off screen by ~80px.
   ========================================================================== */

/* --- The proof row ------------------------------------------------------- */
/* Deliberately lighter than a stat card: the figures sit just above body size
   and the only structure is a hairline between facts, so the row adds scale
   without adding another boxed module to the section. */
.foxmod__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* the divider belongs between the facts, not before the first one */
.foxmod__proof-item + .foxmod__proof-item {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.foxmod__proof-item b {
  display: block;
  font-size: clamp(1.04rem, 1.28vw, 1.16rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}

.foxmod__proof-item span {
  display: block;
  margin-top: 5px;
  font-size: 12.7px;
  line-height: 1.45;
  color: var(--muted);
}

/* On phones the three columns would be about 110px wide each, so the row
   stacks and the dividers turn horizontal. */
@media (max-width: 700px) {
  .foxmod__proof {
    grid-template-columns: 1fr;
  }

  .foxmod__proof-item + .foxmod__proof-item {
    margin-top: 12px;
    padding-top: 12px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* --- Spacing and column refit, desktop only ------------------------------ */
/* Fenced at min-width 961px on purpose. `#case-study` out-ranks the base
   sheet's `@media (max-width: 960px)` rule for `.section` (an id beats a class
   whatever the source order), so an unfenced override would silently replace
   that block's 58px mobile padding with the desktop value. Same reasoning as
   the hero block above. */
@media (min-width: 961px) {
  /* Head-to-band gap was clamp(40px, 4.6vw, 56px). */
  #case-study .band {
    margin-top: clamp(32px, 3.5vw, 44px);
  }

  /* The row directly under the headline is a continuation of it rather than a
     new beat, so that one gap closes to 22px. `.case.band` is more specific
     than the plain `.band` above, and that is exactly what keeps the band that
     closes the section - the CTA under the note - on its 44px. */
  #case-study .case.band {
    margin-top: clamp(18px, 1.6vw, 22px);
  }

  /* Rule-off above the growth timeline, was a flat 52px. Measured: with the
     headline at the top of the screen the timeline's dot rule landed 846px
     below the section top while a 1920x1080 viewport leaves only 853px of
     content height under the sticky header - so the rule and its dots sat on
     the last seven pixels with none of their milestone text. 148px puts the
     rule at ~934px, about 80px clear of the fold, and the measured check is
     `TIMELINE_visibleAtSectionTop` in probe-fox2.ps1. */
  #case-study .tl {
    margin-top: clamp(100px, 10vw, 148px);
  }

  /* The paired sub-heading is the first child of the column, so its 24px top
     margin was slack stacked on top of the grid item rather than space
     between two things. */
  #case-study .case__body .foxmod__title {
    margin-top: 0;
  }

  /* Was 30px above a paragraph that directly continues the sub-heading. */
  #case-study .case__body .csx-body {
    margin-top: 16px;
  }

  /* The statement keeps its rule and its weight - only the rule-off above it
     closes up, because the proof row now sits between the two. */
  #case-study .case__body .claim {
    margin-top: 22px;
    padding-top: 20px;
  }

  /* Was clamp(72px, 9vw, 124px), which left the section ending on a large
     field of empty canvas below the closing action. */
  #case-study {
    padding-bottom: clamp(54px, 6.2vw, 80px);
  }
}

/* --- Wider case photo, once the container is at its full 1200px ----------- */
/* Same fence as the hero block above, and for the same reason: this geometry
   only holds while the container sits at 1200px. Below 1248px the base
   `clamp(34px, 4.4vw, 60px)` gutter and the original 0.95fr / 1.05fr split are
   left exactly as they were, so a narrower desktop is untouched.

   The 44px gutter is not an invention - it is what the base sheet itself
   resolves to around a 1000px viewport - and it is what pays for the wider
   photo. Doing it the other way round (widening the photo column and letting
   the text column absorb it) narrowed the text to 582px and broke the section's
   closing statement over two lines: "...supply chain" / "behind it.". The
   orange sentence is only ~8px clear of its own wrap threshold at 598.5px, so
   the text column is the one thing here that must keep its measure. At 1200px
   this yields media 556px / text 600px against the original 542px / 598.5px. */
@media (min-width: 1248px) {
  #case-study .case {
    column-gap: 44px;
    grid-template-columns: minmax(0, 0.9265fr) minmax(0, 1fr);
  }
}

/* ==========================================================================
   Sublimation Transfer Paper - product page revamp
   --------------------------------------------------------------------------
   Four blocks were replaced on sublimation-transfer-paper.html: the old
   overview + feature grid, the four-card supply grid, the placeholder
   specification rows and the empty evidence copy. Everything below is additive:
   every class is new (or a new modifier on an existing block), so no rule above
   is changed and no other page is affected.

   `.spec-sheet__tbc` and `.supply-grid` / `.supply-card` are left in the sheet
   untouched - they are no longer referenced by this page, but removing them
   would be a change to the shared stylesheet rather than an addition to it.
   Physical properties only - logical properties are discarded by the target
   rendering environment.
   ========================================================================== */

/* --- Hero: core specification strip ------------------------------------- */
/* Four values rather than a paragraph, so the numbers a buyer searches for
   (GSM, width, roll length) are readable in the first screen. Built as a
   hairline-separated row: no boxes, no shadows, no icons. */
.pdp-specstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pdp-specstrip > li {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

/* the divider belongs between the values, not before the first one */
.pdp-specstrip > li:first-child {
  padding-left: 0;
  border-left: 0;
}

.pdp-specstrip__value {
  display: block;
  font-size: clamp(0.98rem, 1.22vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #fff;
}

.pdp-specstrip__label {
  display: block;
  margin-top: 5px;
  font-size: 12.2px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.58);
}

/* --- Product range: three series cards ---------------------------------- */
/* Text-only cards by design: no photography exists for these series, and an
   invented product shot would be worse than no image. The card carries the
   series name, its GSM range, a one-line description and the applications. */
.pdp-series {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 46px;
}

.series-card {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.series-card__num {
  font-size: 11.9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange-600);
}

.series-card h3 {
  margin-top: 12px;
  font-size: 19px;
  letter-spacing: -0.014em;
}

/* GSM sits in its own ruled band so the number reads as a specification
   rather than as body copy. */
.series-card__meta {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}

.series-card__meta dt {
  font-size: 11.4px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.series-card__meta dd {
  margin-top: 6px;
  font-size: 14.6px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy-800);
}

.series-card__text {
  margin-top: 14px;
  font-size: 14.6px;
  line-height: 1.62;
  color: var(--muted);
}

.series-card__label {
  margin-top: 20px;
  font-size: 11.4px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.series-card__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.series-card__apps li {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 12.7px;
  font-weight: 500;
  color: var(--navy-700);
}

/* --- Specifications: value lists ---------------------------------------- */
/* Widths are a list of seven pairs, so they wrap as chips rather than running
   as one unreadably long line. */
.spec-sheet__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.spec-sheet__list li {
  position: relative;
  padding-right: 19px;
}

.spec-sheet__list li:last-child {
  padding-right: 0;
}

.spec-sheet__list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 4px;
  height: 1px;
  background: var(--line-strong);
}

/* --- Specifications: matching help + sample CTA ------------------------- */
.spec-help {
  margin-top: 24px;
  padding: 26px 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.spec-help__text {
  font-size: clamp(1.02rem, 1.32vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--navy-800);
}

.spec-help__sub {
  margin-top: 9px;
  max-width: 74ch;
  font-size: 14.9px;
  line-height: 1.64;
  color: var(--muted);
}

.spec-help .btn {
  margin-top: 20px;
}

/* --- Supply system: scope labels ---------------------------------------- */
/* One line of related products rather than four cards. The row is capped at a
   measure so it reads as a closing statement of the section instead of
   stretching the full container width. */
.supply-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.supply-scope li {
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14.2px;
  font-weight: 600;
  color: #fff;
}

/* --- Evidence: supporting line under the heading ------------------------ */
.foxevi__meta {
  margin-top: 8px;
  font-size: 12.6px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted-2);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  /* Four values would be ~120px wide each on a tablet, which breaks
     "Up to 20,000m" onto two lines; two per row keeps every value intact. */
  .pdp-specstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  /* Restore the divider on every second cell, since each row now starts a new
     pair. */
  .pdp-specstrip > li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .pdp-series {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .pdp-specstrip {
    margin-top: 26px;
    padding-top: 20px;
  }

  .pdp-specstrip > li {
    padding-left: 16px;
  }

  .spec-help {
    margin-top: 20px;
    padding: 22px 20px 24px;
  }

  .spec-help .btn {
    width: 100%;
    justify-content: center;
  }

  .supply-scope {
    margin-top: 28px;
    gap: 8px;
  }

  .supply-scope li {
    padding: 8px 14px;
    font-size: 13.4px;
  }
}