/* ==========================================================================
   CENTS Precision Manufacturing - www.centsmould.com
   Light editorial theme: white header, deep-blue uppercase navigation, orange
   primary CTA, charcoal stat bands, full-bleed photography and short copy.
   Aligned with the owner's reference site.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand - sampled from the CENTS logo artwork */
  --orange: #fc8830;
  --orange-deep: #e2700d;
  --orange-text: #b4520a;      /* small orange text: 5.1:1 on white */
  --orange-soft: rgba(252, 136, 48, 0.12);
  --blue: #38a0f0;
  --blue-ink: #10508f;
  --blue-deep: #0f4c81;          /* readable brand-family blue for links */
  --blue-soft: rgba(56, 160, 240, 0.1);

  --ink: #ffffff;
  --ink-2: #f6f7f9;
  --ink-3: #eef0f3;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --steel: #e3e6ea;
  --line: #e5e7eb;
  --line-strong: #d3d7dd;

  --text: #171b21;
  --text-dim: #4b5563;
  --text-mute: #6b7280;

  --paper: #f6f7f9;
  --paper-2: #eef0f3;
  --paper-ink: #171b21;
  --paper-dim: #4b5563;

  --dark: #0f4c81;             /* brand blue for dark bands */
  --dark-2: #0a3355;           /* deeper blue for the footer */
  --blue-tint: #f2f7fc;        /* pale blue section band */
  --blue-tint-2: #e8f0f8;      /* cooler blue band */
  --orange-on-dark: #ffa45c;   /* 4.5:1 orange for text on blue */
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-mute: rgba(255, 255, 255, 0.75);

  --f-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --f-head: "Archivo", "Segoe UI", "Helvetica Neue", sans-serif;
  --f-body: "Manrope", "Segoe UI", "Helvetica Neue", sans-serif;
  --f-label: "Barlow Condensed", "Archivo", "Segoe UI", sans-serif;

  --shell: 1240px;
  --radius: 4px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 18px 44px rgba(16, 24, 40, 0.12);
  --grid: linear-gradient(rgba(23, 27, 33, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(23, 27, 33, 0.04) 1px, transparent 1px);
  --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;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--orange-deep); }
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  color: var(--text);
}
h1 { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.1rem); }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem); }
h3 { font-family: var(--f-head); font-weight: 800; text-transform: none; letter-spacing: -0.01em; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }
h4 { font-family: var(--f-head); font-weight: 800; text-transform: none; font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }
strong { color: var(--text); font-weight: 700; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--orange); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--orange); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 8px; top: 8px; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell--wide { max-width: 1440px; }
.section { padding: clamp(64px, 8vw, 118px) 0; position: relative; }
.section--tight { padding: clamp(40px, 4vw, 64px) 0; }
.section--light { background: var(--ink-2); }
.section--steel {
  background: linear-gradient(180deg, #ffffff, var(--ink-2));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--grid { background-image: var(--grid); background-size: 56px 56px, 56px 56px; }
.section--blueprint {
  background-color: var(--ink-2);
  background-image: var(--grid);
  background-size: 44px 44px, 44px 44px;
}
.section__head { max-width: 820px; margin-bottom: clamp(30px, 4vw, 54px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head p { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 0; }

.eyebrow {
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--orange-text);
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: ""; width: 30px; height: 1px; background: var(--orange); display: inline-block;
}
.section__head--center .eyebrow { justify-content: center; }
.lede { font-size: 1.12rem; color: var(--text-dim); }

/* ------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand__logo { height: 46px; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__list a {
  display: block;
  font-family: var(--f-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue-ink);
  padding: 10px 13px;
  position: relative;
}
.nav__list a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.nav__list a:hover, .nav__list a:focus-visible { color: #0d2f57; }
.nav__list a:hover::after, .nav__list a.is-active::after { transform: scaleX(1); }
.nav__list a.is-active { color: #0d2f57; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-toggle {
  display: none; width: 46px; height: 42px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer; padding: 10px 11px;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); margin: 4px 0; transition: 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__cta { display: none; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 1rem; font-weight: 600;
  padding: 15px 26px;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s, color 0.18s, border-color 0.18s;
}
.btn--primary {
  background: var(--orange);
  color: #0a3355;
  box-shadow: 0 6px 16px rgba(226, 112, 13, 0.22);
}
.btn--primary:hover { background: #ffa04d; color: #0a3355; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(226, 112, 13, 0.28); }
.btn--ghost { border-color: #bccbd9; color: #0f4c81; background: #fff; }
.btn--ghost:hover { color: var(--orange-deep); border-color: var(--orange); background: #fff; }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; background: transparent; }
.btn--outline-light:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.12); }
.btn--sm { padding: 11px 18px; font-size: 0.92rem; }
.btn--lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.link-arrow {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.13em;
  font-weight: 600; display: inline-flex; align-items: center; gap: 8px; color: var(--blue-ink);
}
.link-arrow::after { content: "\2192"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(520px, 66vh, 760px);
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(7, 30, 54, 0.86) 0%, rgba(7, 30, 54, 0.64) 46%, rgba(7, 30, 54, 0.36) 100%);
}
.hero__inner { max-width: 760px; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 .hl { color: var(--orange); }
.hero__sub {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  color: rgba(255, 255, 255, 0.86); max-width: 60ch; margin-bottom: 26px;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 0.92rem; font-weight: 600; color: var(--orange-on-dark);
  margin-bottom: 18px;
}
.hero__kicker::before { content: ""; width: 30px; height: 1px; background: var(--orange); }
.hero__kicker b { color: #fff; font-weight: 600; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.hero__trust li {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.9rem; color: rgba(255, 255, 255, 0.72);
}
.hero__panel {
  background: rgba(255, 255, 255, 0.97); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-2);
}
.hero__panel h2 { font-size: 1.05rem; font-family: var(--f-label); letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 14px; }
.hero__panel .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.hero__panel .fact__num { font-family: var(--f-display); font-size: 1.5rem; color: var(--text); display: block; line-height: 1.1; }
.hero__panel .fact__num em { font-style: normal; color: var(--orange-deep); }
.hero__panel .fact__label { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--text-mute); display: block; margin-top: 3px; }
.hero__panel .btn { width: 100%; margin-top: 20px; }
.hero__panel .panel-note { font-size: 0.88rem; color: var(--text-mute); margin: 14px 0 0; }

/* ------------------------------------------------------------ stat band */
.fact-strip { background: linear-gradient(120deg, #0a3355, #0f4c81); color: #fff; }
.section--dark { background: linear-gradient(120deg, #0a3355, #0f4c81); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .section__head p, .section--dark p { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--orange-on-dark); }
.fact-strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact-strip .fact {
  padding: 30px 22px; border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.fact-strip .fact:last-child { border-right: 0; }
.fact-strip .fact__num {
  font-family: var(--f-display); font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.6rem);
  display: block; line-height: 1; color: #fff;
}
.fact-strip .fact__num em { font-style: normal; color: var(--orange); }
.fact-strip .fact__label {
  display: block; margin-top: 10px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.84rem; color: var(--on-dark-mute);
}

/* --------------------------------------------------- editorial components */
.band { position: relative; overflow: hidden; }
.band__media { position: relative; }
.band__media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 45%; }
.band__overlay {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(7, 30, 54, 0.86) 0%, rgba(7, 30, 54, 0.58) 52%, rgba(7, 30, 54, 0.18) 100%);
}
.band__overlay .shell { width: 100%; }
.band__overlay h2, .band__overlay h3 { color: #fff; }
.band__overlay p { color: rgba(255, 255, 255, 0.84); max-width: 54ch; margin-bottom: 0; }
.band__overlay .eyebrow { color: var(--orange-on-dark); }
.band__content { max-width: 620px; }

.check-list { list-style: none; margin: 0 0 6px; padding: 0; }
.check-list li {
  position: relative; padding-left: 30px; margin-bottom: 11px;
  font-size: 1.02rem; color: var(--text-dim);
}
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 14px; height: 8px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.section--dark .check-list li, .band__overlay .check-list li { color: var(--on-dark); }

.numbered { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numbered__item { position: relative; padding-top: 26px; border-top: 2px solid var(--blue-deep, #0f4c81); }
.numbered__n {
  font-family: var(--f-label); font-weight: 600; letter-spacing: 0.18em;
  font-size: 1rem; color: var(--orange-text); display: block; margin-bottom: 10px;
}
.numbered__item h3 { margin-bottom: 8px; }
.numbered__item p { margin: 0; color: var(--text-dim); font-size: 1rem; }

.product-card { display: block; color: inherit; }
.product-card:hover { color: inherit; }
.product-card__media { overflow: hidden; background: var(--ink-2); border-radius: var(--radius); }
.product-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__label {
  display: block; margin: 16px 0 6px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.86rem; color: var(--orange-text);
}
.product-card h3 { margin-bottom: 6px; }
.product-card p { color: var(--text-dim); font-size: 0.98rem; margin-bottom: 10px; }

.qa-table { width: 100%; border-collapse: collapse; }
.qa-table th, .qa-table td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.qa-table th {
  width: 34%; font-family: var(--f-head); font-weight: 700; font-size: 1rem;
  color: var(--text); padding-right: 26px;
}
.qa-table td { color: var(--text-dim); font-size: 1rem; }
.qa-table tr:last-child th, .qa-table tr:last-child td { border-bottom: 0; }
/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: 24px; }
.grid > *, .split > *, .contact-grid > *, .hero__grid > *, .cta-band__inner > *,
.footer-grid > *, .kpi-row > *, .form-row > *, .numbered > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2-6 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; position: relative; box-shadow: var(--shadow-1);
  transition: transform 0.24s var(--ease), box-shadow 0.24s, border-color 0.24s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card h3 { margin-bottom: 10px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card p { color: var(--text-dim); }
.card--accent { border-top: 3px solid var(--orange); }
.card__icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 16px;
  border-radius: 3px; background: var(--orange-soft); color: var(--orange-deep);
}
.card__icon svg { width: 22px; height: 22px; }
.card--media { padding: 0; overflow: hidden; }
.card--media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card--product img { aspect-ratio: 1 / 1; background: #fff; object-fit: cover; }
.card--media .card__body { padding: 24px 26px 28px; }
.card__meta {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.84rem; color: var(--orange-text); margin-bottom: 8px;
}
.card__body h3 a { color: var(--text); }
.card__body h3 a:hover { color: var(--orange-deep); }
.section--light .card { background: #fff; }

/* -------------------------------------------------------------- spec list */
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list .k {
  color: var(--text-mute); font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.88rem;
}
.spec-list .v { color: var(--text); font-weight: 600; text-align: right; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 620px; }
caption {
  text-align: left; padding: 16px 20px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--orange-text); border-bottom: 1px solid var(--line); font-size: 0.88rem;
}
th, td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.86rem; color: var(--text-dim); background: var(--ink-2);
}
tbody tr:hover { background: #fafbfc; }
tbody tr:last-child td { border-bottom: 0; }
td strong { color: var(--text); }
.table-note { font-size: 0.88rem; color: var(--text-mute); margin: 10px 0 0; }

/* ------------------------------------------------------------------- kpi */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; box-shadow: var(--shadow-1); }
.kpi__num { font-family: var(--f-display); font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1; display: block; }
.kpi__num em { font-style: normal; color: var(--orange-deep); }
.kpi__label {
  display: block; margin-top: 8px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.13em; font-size: 0.84rem; color: var(--text-mute);
}
.kpi__note { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--text-dim); }

/* ------------------------------------------------------------- media/text */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-2); }
.split__media figcaption {
  font-size: 0.88rem; color: var(--text-mute); margin-top: 12px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em;
}
.media-badge {
  position: absolute; right: 0; top: 0;
  background: var(--orange); color: #fff; padding: 14px 20px;
  font-family: var(--f-display); font-size: 1.3rem; line-height: 1.1;
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.28); border-radius: 2px;
}
.media-badge span { display: block; font-family: var(--f-label); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.steps li {
  counter-increment: step; position: relative;
  padding: 26px 26px 26px 84px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 26px; top: 24px;
  font-family: var(--f-display); font-size: 1.25rem; color: var(--orange);
  padding-right: 14px; border-right: 1px solid var(--line);
}
.steps h3 { font-size: 1.12rem; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--text-dim); font-size: 0.99rem; }
.steps .steps__meta {
  display: block; margin-top: 8px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.8rem; color: var(--text-mute);
}

/* ------------------------------------------------------------------- faq */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.faq summary {
  cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
  font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--text);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  color: var(--orange-deep); font-size: 1.6rem; font-family: var(--f-head); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq__answer { padding: 0 24px 22px; color: var(--text-dim); }
.faq .faq__answer p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ quick answer */
.quick-answer {
  border-left: 3px solid var(--orange);
  background: var(--orange-soft);
  padding: 22px 26px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 28px;
}
.quick-answer p:last-child { margin-bottom: 0; }
.quick-answer__label {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--orange-text); font-size: 0.86rem; display: block; margin-bottom: 6px; font-weight: 600;
}

/* ---------------------------------------------------------------- banners */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0a3355 0%, #0f4c81 100%);
  padding: clamp(56px, 7vw, 96px) 0;
}
.cta-band--orange {
  background:
    radial-gradient(760px 340px at 10% 92%, rgba(252, 136, 48, 0.22), transparent 66%),
    linear-gradient(120deg, #0a3355 0%, #0f4c81 100%);
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band p { color: var(--on-dark); margin-bottom: 0; }
.cta-band .eyebrow { color: var(--orange-on-dark); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.cta-band .btn-row { justify-content: flex-end; }
.cta-band .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.hero .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.badge {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.82rem; color: var(--text-dim);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; background: #fff;
}

/* --------------------------------------------------------- breadcrumb/etc */
.breadcrumb { padding-top: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.84rem; color: var(--text-mute); margin: 0;
}
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.breadcrumb a { color: var(--text-mute); }
.breadcrumb a:hover { color: var(--orange-deep); }

.page-hero {
  padding: clamp(46px, 6vw, 84px) 0 clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line);
  background-color: var(--ink-2);
  background-image: var(--grid);
  background-size: 44px 44px, 44px 44px;
}
.page-hero h1 { max-width: 24ch; margin-bottom: 16px; }
.page-hero__lede { font-size: 1.1rem; color: var(--text-dim); max-width: 76ch; }
.page-hero__meta {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 22px; padding: 0; list-style: none;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.88rem;
  color: #5b6470;
}
.page-hero__meta li { margin: 0; }
.page-hero__meta strong { color: var(--orange-text); }

/* ---------------------------------------------------------------- prose */
.prose { max-width: 78ch; }
.prose h2 { margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { color: var(--text-dim); }
.prose table { margin: 1.4em 0; }
.prose > p:first-of-type { font-size: 1.06rem; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 24px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.84rem; color: var(--text-mute);
}
.note-box {
  border: 1px solid var(--line); border-left: 3px solid var(--blue-ink);
  background: #f7fafd; padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 26px; font-size: 0.99rem;
}
.note-box p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 54px); align-items: start; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: #fff; box-shadow: var(--shadow-1); }
.contact-list { list-style: none; padding: 0; margin: 0 0 18px; }
.contact-list li { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list a { font-weight: 600; }
.contact-list__addr { color: var(--text-dim); font-size: 0.97rem; }
.site-footer .contact-list__addr { color: var(--on-dark); }
.site-footer .contact-list li { border-color: rgba(255, 255, 255, 0.12); }
form.rfq { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.86rem; color: var(--text-dim); font-weight: 600;
}
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--text);
  background: #fff; border: 1px solid #9aa2ad;
  border-radius: 3px; padding: 13px 15px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft);
}
.field textarea { min-height: 150px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: 0.88rem; color: var(--text-mute); margin: 0; }
.form-status { font-size: 0.95rem; margin: 0; padding: 12px 16px; border-radius: 3px; display: none; }
.form-status.is-error { display: block; background: #fef2f2; border: 1px solid #f5b5b5; color: #8f1d1d; }

/* ------------------------------------------------------------- footer */
.site-footer {
  background: linear-gradient(180deg, #0a3355, #082946); color: var(--on-dark);
  padding: clamp(48px, 6vw, 80px) 0 30px;
}
.footer-facts {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 48px;
}
.footer-facts .fact { padding: 20px 18px; background: rgba(255, 255, 255, 0.05); border-right: 1px solid rgba(255, 255, 255, 0.14); }
.footer-facts .fact:last-child { border-right: 0; }
.footer-facts .fact__num { font-family: var(--f-display); font-size: 1.3rem; display: block; line-height: 1.15; color: #fff; }
.footer-facts .fact__label {
  display: block; margin-top: 6px; font-family: var(--f-label); text-transform: uppercase;
  letter-spacing: 0.13em; font-size: 0.76rem; color: var(--on-dark-mute);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 32px; }
.footer-h {
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.9rem; color: var(--orange-on-dark); font-weight: 600; margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 9px; font-size: 0.95rem; }
.footer-col a { color: var(--on-dark); }
.footer-col a:hover { color: #fff; }
.footer-col h2 { color: #fff; }
.footer-blurb { font-size: 0.95rem; color: var(--on-dark); margin: 16px 0 0; }
.footer-logo { height: 52px; width: auto; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer-badges .badge { background: transparent; border-color: rgba(255, 255, 255, 0.22); color: var(--on-dark); font-size: 0.74rem; }
.footer-col a.btn--primary, .footer-col a.btn--primary:hover { color: #0a3355; }
.footer-col a.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.footer-col a.btn--ghost:hover { border-color: #fff; color: #fff; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.footer-bottom p { margin: 0; font-size: 0.88rem; color: var(--on-dark-mute); }
.footer-bottom__meta { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.1em; }

/* --------------------------------------------------------- whatsapp float */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #4fce5d, #25a334);
  color: #fff; box-shadow: 0 12px 28px rgba(16, 24, 40, 0.32);
}
.wa-float:hover { color: #fff; transform: scale(1.05); }

/* ------------------------------------------------------------ utilities */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
html.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .nav__list a { padding: 10px 10px; font-size: 0.94rem; letter-spacing: 0.1em; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .split, .contact-grid, .grid--2-6, .cta-band__inner, .hero__grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbered { grid-template-columns: 1fr; }
  .fact-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .fact-strip .fact { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .cta-band .btn-row { justify-content: flex-start; }
  .band__overlay { background: linear-gradient(180deg, rgba(12, 17, 23, 0.86), rgba(12, 17, 23, 0.62)); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav {
    position: fixed; inset: 84px 0 auto; margin: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px rgba(16, 24, 40, 0.12);
    max-height: calc(100vh - 84px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; align-items: stretch; padding: 10px 20px 26px; gap: 0; }
  .nav__list a { padding: 15px 4px; font-size: 1.12rem; border-bottom: 1px solid var(--line); }
  .nav__list a::after { display: none; }
  .nav-toggle { display: block; }
  .header-inner { min-height: 72px; }
  .brand__logo { height: 40px; }
  .header-actions .btn--primary { display: none; }
  .nav__cta { display: block; margin-top: 16px; }
  .nav__cta + .nav__cta { margin-top: 10px; }
  .nav__cta a { border-bottom: 0; padding: 15px 10px; text-align: center; }
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-facts { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .hero__panel .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .shell { padding: 0 18px; }
  .fact-strip__inner { grid-template-columns: 1fr; }
  .fact-strip .fact { border-right: 0; }
  .footer-facts { grid-template-columns: 1fr; }
  .footer-facts .fact { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .steps li { padding: 20px 18px; }
  .steps li::before { position: static; display: block; border-right: 0; padding-right: 0; margin-bottom: 8px; }
  .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .footer-bottom { padding-bottom: 62px; }
  .band__media img { aspect-ratio: 4 / 3; }
  .qa-table th, .qa-table td { display: block; width: 100%; padding: 8px 0; }
  .qa-table th { border-bottom: 0; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header, .wa-float, .nav, .cta-band, .breadcrumb { display: none; }
  body { background: #fff; color: #000; }
}


/* ------------------------------------------------- tonal section rhythm */
.section--warm { background: var(--blue-tint); }
.section--cool { background: var(--blue-tint-2); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* ------------------------------------------------------- hero carousel */
.hero--carousel {
  display: block;
  min-height: clamp(560px, 74vh, 840px);
  padding: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero--carousel .hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero--carousel .hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero--carousel .hero__slide.is-active { opacity: 1; }
.hero--carousel .hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* the scrim sits above the photos and below the copy */
.hero--carousel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(7, 30, 54, 0.92) 0%, rgba(7, 30, 54, 0.72) 45%, rgba(7, 30, 54, 0.34) 100%);
}
.hero--carousel .hero__inner {
  position: relative; z-index: 1;
  padding-top: clamp(90px, 12vh, 150px);
  padding-bottom: clamp(120px, 14vh, 170px);
}
.hero__nav { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; }
.hero__nav .shell { display: flex; align-items: center; gap: 12px; }
.hero__dot {
  width: 38px; height: 26px; padding: 11px 0; border: 0; border-radius: 2px;
  background: rgba(255, 255, 255, 0.34); background-clip: content-box; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.6); }
.hero__dot.is-active { background: var(--orange); background-clip: content-box; }
.hero__arrow:hover { background: rgba(7, 30, 54, 0.72); }
.hero__arrows { margin-left: auto; display: flex; gap: 10px; }
.hero__arrow {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(12, 17, 23, 0.35); color: #fff;
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
}
.hero__arrow:hover { background: rgba(12, 17, 23, 0.6); border-color: #fff; }
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 74px; z-index: 2;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 900px) {
  .hero--carousel { min-height: 0; }
  .hero--carousel .hero__inner { padding-top: 64px; padding-bottom: 40px; }
  .hero__nav { position: static; padding: 0 0 22px; }
  .hero__nav .shell { padding-left: 0; }
  .hero__caption { position: static; margin: 18px 0 0; }
  .hero--carousel .hero__slide img { position: absolute; inset: 0; }
  .hero--carousel .hero__slides { position: absolute; }
}

/* ==========================================================================
   REFERENCE DESIGN SYSTEM PORT  (owner's rivonsports.com stylesheet)
   Navy scale #00376f / #0155af, cream page base #f7f5f0, Barlow Condensed
   uppercase display type, orange CTA band with navy heading, 4px buttons with
   a sliding arrow, cards that lift and zoom.
   Values only: every existing class keeps working.
   ========================================================================== */

:root {
  --orange: #fc8830;
  --orange-deep: #e2700d;
  --orange-text: #b4520a;
  --orange-on-dark: #ffb178;
  --blue: #38a0f0;
  --blue-ink: #0155af;
  --blue-deep: #00376f;
  --blue-soft: rgba(1, 85, 175, 0.08);

  --ink: #f7f5f0;          /* cream page base */
  --ink-2: #fffdf9;
  --ink-3: #f1ede4;
  --panel: #ffffff;
  --panel-2: #ffffff;
  --steel: #e7e2d7;
  --line: rgba(1, 85, 175, 0.14);
  --line-strong: rgba(1, 85, 175, 0.26);

  --text: #18222e;
  --text-dim: #4a5560;
  --text-mute: #6f7a85;

  --paper: #ffffff;
  --paper-2: #f7f5f0;
  --paper-ink: #18222e;
  --paper-dim: #4a5560;

  --dark: #00376f;
  --dark-2: #00284f;
  --blue-tint: #f2f7fc;
  --blue-tint-2: #e8f0f8;
  --on-dark: rgba(255, 255, 255, 0.84);
  --on-dark-mute: rgba(255, 255, 255, 0.72);

  --f-display: "Barlow Condensed", "Archivo", "Segoe UI", sans-serif;
  --f-head: "Barlow Condensed", "Archivo", "Segoe UI", sans-serif;
  --f-label: "Barlow Condensed", "Archivo", "Segoe UI", sans-serif;

  --shadow-1: 0 8px 24px rgba(0, 55, 111, 0.08);
  --shadow-2: 0 26px 60px rgba(0, 55, 111, 0.18);
  --grid: linear-gradient(rgba(1, 85, 175, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(1, 85, 175, 0.05) 1px, transparent 1px);
}

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5,
.hero__title, .page-hero h1 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}
h1, .page-hero h1 { font-size: clamp(42px, 6.4vw, 92px); }
h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1; }
h3 { font-size: clamp(20px, 2vw, 27px); line-height: 1.05; font-weight: 600; }
h4 { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.1; font-weight: 600; }
.hero__title { font-size: clamp(46px, 7.4vw, 108px); }
.lede, .page-hero__lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-label); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-ink);
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--orange); flex: none; }

/* ---------------------------------------------------------------- buttons */
.btn {
  font-family: var(--f-label); font-size: 17px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 12px;
}
.btn::after { content: "\2192"; transition: transform 0.32s var(--ease); }
.btn:hover::after { transform: translateX(6px); }
.btn--primary { background: var(--orange); color: #00376f; border-color: var(--orange); }
.btn--primary:hover { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.btn--ghost { background: transparent; color: var(--blue-deep); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--orange); color: var(--blue-ink); background: #fff; }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--blue-deep); border-color: #fff; }
.hero .btn--ghost, .band .btn--ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.hero .btn--ghost:hover, .band .btn--ghost:hover { background: #fff; color: var(--blue-deep); }
.btn--sm { padding: 11px 20px; font-size: 15px; }

/* ---------------------------------------------------------------- section */
.section { padding: clamp(74px, 9vw, 132px) 0; }
.section--tight { padding: clamp(56px, 6.5vw, 92px) 0; }
.section__head { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(34px, 4vw, 52px); }
.section__head p { margin: 0; }
.section--light { background: var(--blue-tint); }
.section--warm { background: #f7f5f0; }
.section--cool { background: var(--blue-tint-2); }
.section--steel { background: linear-gradient(180deg, #fffdf9, #f7f5f0); }
.section--dark { background: var(--blue-deep); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p, .section--dark li { color: var(--on-dark); }

/* ------------------------------------------------------------------ header */
.site-header { background: rgba(247, 245, 240, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__list a { font-family: var(--f-label); font-size: 14px; font-weight: 600; letter-spacing: 0.16em; color: var(--blue-ink); border-bottom: 2px solid transparent; }
.nav__list a:hover, .nav__list a.is-active { color: var(--blue-deep); border-bottom-color: var(--orange); }
.nav-toggle span { background: var(--blue-deep); }

/* -------------------------------------------------------------------- hero */
.hero--carousel { min-height: clamp(580px, 86svh, 940px); }
.hero__inner { padding-top: clamp(104px, 13vh, 168px); padding-bottom: clamp(94px, 11vh, 150px); }
.hero__kicker { font-family: var(--f-label); font-size: 13px; letter-spacing: 0.26em; color: var(--orange-on-dark); }
.hero__trust li { font-family: var(--f-label); font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.hero__dot { height: 26px; padding: 10px 0; background-clip: content-box; background-color: rgba(255, 255, 255, 0.45); }
.hero__dot.is-active { background-color: var(--orange); }
.page-hero { background: linear-gradient(180deg, #fffdf9, #f7f5f0); border-bottom: 1px solid var(--line); }
.page-hero__meta li { font-family: var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }

/* ------------------------------------------------------------------- cards */
.card { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--shadow-1); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: rgba(1, 85, 175, 0.3); }
.card--media img, .card--product img { transition: transform 0.8s var(--ease); }
.card:hover .card--media img, .card:hover .card--product img { transform: scale(1.05); }
.card__meta, .product-card__label { font-family: var(--f-label); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange-text); }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--blue-ink); }
.link-arrow { font-family: var(--f-label); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-ink); }
.link-arrow::after { content: "\2192"; margin-left: 8px; transition: transform 0.3s var(--ease); display: inline-block; }
.link-arrow:hover::after { transform: translateX(6px); }
.pillar__icon, .numbered__n { font-family: var(--f-display); }
.numbered__n { font-size: clamp(26px, 2.6vw, 38px); color: var(--blue-deep); opacity: 0.28; }
.numbered__item { border-top: 2px solid var(--blue-deep); }
.check-list li::before { background: var(--orange); }

/* -------------------------------------------------------------- stat band */
.fact-strip { background: var(--blue-deep); }
.fact-strip .fact { border-right: 1px solid rgba(255, 255, 255, 0.16); }
.fact-strip .fact__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 62px); color: #fff; letter-spacing: 0.01em; }
.fact-strip .fact__num em { color: var(--orange); font-style: normal; }
.fact-strip .fact__label { font-family: var(--f-label); font-size: 12.5px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------- cta band */
.cta-band, .cta-band--orange, .cta-band--dark { background: var(--orange); }
.cta-band h1, .cta-band h2, .cta-band h3 { color: #00376f; }
.cta-band p, .cta-band li { color: #0b3b66; }
.cta-band .eyebrow { color: #00376f; }
.cta-band .eyebrow::before { background: #00376f; }
.cta-band .btn--primary { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.cta-band .btn--primary:hover { background: #fff; color: var(--blue-deep); border-color: #fff; }
.cta-band .btn--ghost { border-color: rgba(0, 55, 111, 0.4); color: #00376f; }
.cta-band .btn--ghost:hover { background: #00376f; color: #fff; }

/* ------------------------------------------------------ tables and steps */
.table-wrap table thead th { background: var(--blue-deep); color: #fff; font-family: var(--f-label); font-size: 13.5px; letter-spacing: 0.16em; }
.table-wrap tbody tr:nth-child(even) { background: var(--blue-tint); }
.table-wrap caption { font-family: var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-text); }
.steps li { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); }
.steps li::before { font-family: var(--f-display); color: var(--orange); }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.faq__q { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.quick-answer { background: var(--blue-tint); border-left: 4px solid var(--orange); }
.quick-answer__label { font-family: var(--f-label); letter-spacing: 0.24em; color: var(--orange-text); }
.badge { font-family: var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; background: #fff; border-color: var(--line); color: var(--blue-ink); }
.media-badge { font-family: var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--dark-2); }
.footer-h { font-family: var(--f-label); font-size: 13px; font-weight: 700; letter-spacing: 0.22em; color: var(--orange-on-dark); }
.footer-col a { color: var(--on-dark); }
.footer-col a:hover { color: var(--orange); padding-left: 5px; }
.footer-blurb { color: rgba(255, 255, 255, 0.7); }
.footer-bottom p, .footer-bottom__meta { color: rgba(255, 255, 255, 0.62); }
.footer-facts .fact { border-color: rgba(255, 255, 255, 0.14); }
.site-footer .contact-list__addr, .site-footer .contact-list__row { color: var(--on-dark); }
.site-footer .contact-list li { border-color: rgba(255, 255, 255, 0.14); }
.form-note, .field label { font-family: var(--f-label); letter-spacing: 0.12em; }
.field input, .field select, .field textarea { border-color: #8a94a6; background: #fff; }

/* --------------------------------------------------------------- reveals */
.reveal { transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; }
  .btn:hover::after, .link-arrow:hover::after { transform: none; }
  .card:hover { transform: none; }
}

/* Two-up photo pair used in the plant section */
.media-pair { display: grid; gap: 16px; }
.media-pair figure { margin: 0; }
.media-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; display: block; }
.media-pair figcaption {
  margin-top: 8px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
}
/* stacked, not side by side: two small images next to a large heading read as
   unbalanced. Each photo now fills the media column. */
.media-pair { grid-template-columns: 1fr; }

/* this block carries a long heading, so it is set slightly smaller than the
   other section headings */
.section--plant h2 { font-size: clamp(28px, 3.6vw, 48px); }
.section--plant .check-list li { font-size: 15.5px; }
.section--plant .split__media figcaption { margin-top: 10px; }

/* Text and media columns are centred against each other: a tall media column
   next to a short text column previously left a visible hole under the copy. */
.split { align-items: center; }

/* the plant block stacks two photos, so they are set flatter to keep the two
   columns close in height */
.section--plant .media-pair img { aspect-ratio: 16 / 9; }

/* Hero copy is pulled toward the left edge: the centred shell offset is reduced
   by 5vw, and floored at 0 so the text never leaves the viewport. */
/* Plant block: the copy keeps its natural flow and the two buttons are pushed
   to the bottom of the column so they line up with the lower photo instead of
   floating in the middle of the section. */
.section--plant .split { align-items: stretch; }
.section--plant .split > div:not(.media-pair) {
  display: flex; flex-direction: column;
}
.section--plant .btn-row { margin-top: auto; padding-top: 30px; }

/* ---- correction: the plant block is a grid, not a .split ------------------ */
.section--plant .grid--2-6 { align-items: stretch; }
.section--plant .grid--2-6 > div:first-child { display: flex; flex-direction: column; }
.section--plant .btn-row { margin-top: auto; padding-top: 30px; }

/* ---- correction: reveal must not hide content when JS is unavailable ------ */
html.js .reveal { opacity: 0; transform: translateY(36px); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* Customer-visit mosaic */
.visit-wall { margin: 0; }
.visit-wall img { width: 100%; border-radius: 4px; display: block; }
.visit-wall figcaption {
  margin-top: 10px; font-family: var(--f-label); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute);
}
.faq-langs { max-width: 860px; color: var(--text-dim); }

/* ---------------------------------------------------------------- FAQ list
   Plain rows on white with hairline dividers, a chevron on the right and
   readable sentence-case questions - replaces the filled, all-caps boxes. */
.section--white { background: #fff; }

.faq-wrap { max-width: 960px; }

.faq__item {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(1, 85, 175, 0.16);
}
.faq__item:first-of-type { border-top: 1px solid rgba(1, 85, 175, 0.16); }
.faq__item[open] { background: transparent; }

.faq__q {
  position: relative; cursor: pointer; list-style: none;
  font-family: var(--f-body); font-size: clamp(17px, 1.3vw, 19.5px); font-weight: 600;
  letter-spacing: 0; text-transform: none; line-height: 1.45;
  color: var(--blue-deep); padding: 22px 46px 22px 0;
  transition: color 0.25s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q h3 {
  font-family: inherit; font-size: inherit; font-weight: inherit; font-style: normal;
  letter-spacing: 0; text-transform: none; color: inherit; margin: 0; line-height: inherit;
}
.faq__q:hover { color: var(--orange-text); }

.faq__q::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }

.faq__a {
  font-family: var(--f-body); font-size: 16.5px; line-height: 1.75;
  color: var(--text-dim); max-width: 76ch; margin: 0;
  padding: 0 46px 26px 0;
}
.faq-more { margin-top: 34px; }

/* Hero copy inset: ~7vw from the left edge (clamped) so the headline sits
   clear of the edge without drifting back to the centred position. */
@media (min-width: 900px) {
  .hero .shell.hero__inner {
    margin-left: 0;
    margin-right: auto;
    padding-left: clamp(24px, 7vw, 150px);
  }
}

/* plant block: open the row rhythm so a longer list reads as a full panel */
.section--plant .check-list li { padding: 13px 0; }
.section--plant .check-list li:first-child { padding-top: 4px; }
.section--plant .check-list { margin-top: 6px; }

/* --------------------------------------------- product categories and search terms */
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.cat-nav a {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 12px 20px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff;
  font-family: var(--f-label); font-size: 15px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--blue-deep);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.cat-nav a span { font-family: var(--f-display); font-size: 12px; color: var(--orange); }
.cat-nav a:hover { border-color: var(--blue-deep); background: var(--blue-ink); color: #fff; }
.cat-nav a:hover span { color: var(--orange-on-dark); }

.kw-strip {
  margin: 0 0 34px; padding: 20px 24px; background: var(--blue-tint);
  border-left: 3px solid var(--orange); border-radius: var(--radius);
}
.kw-strip__label {
  margin: 0 0 12px; font-family: var(--f-label); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-deep);
}
.kw-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kw-list li { font-family: var(--f-body); font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.kw-list li span {
  display: inline-block; min-width: 152px; margin-right: 12px; vertical-align: top;
  font-family: var(--f-label); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-mute);
}
@media (max-width: 620px) {
  .kw-list li span { display: block; min-width: 0; margin: 0 0 2px; }
}

.page-hero__alias { margin: 16px 0 0; font-family: var(--f-body); font-size: 13.5px; line-height: 1.6; color: var(--text-mute); }
.page-hero__alias span {
  display: inline-block; margin-right: 10px; font-family: var(--f-label); font-size: 12px;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange-text);
}

/* ------------------------------- custom file input (fixed English labels) */
/* The native file control renders "Choose file / No file chosen" in the VISITOR'S
   browser language, so a Chinese-locale browser shows its own localised wording.
   Hiding the native control and drawing our own keeps the wording English everywhere. */
.filebox {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.filebox + .filebox { margin-top: 10px; }
.filebox__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.filebox__btn {
  flex: none; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 4px;
  background: #f7f5f0; cursor: pointer; font-family: var(--f-label); font-size: 13px;
  letter-spacing: 0.06em; color: var(--blue-deep);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.filebox__btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.filebox__input:focus-visible + .filebox__btn { outline: 2px solid var(--orange); outline-offset: 2px; }
.filebox__name { font-size: 14px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebox__name.is-set { color: var(--text-dim); }