/* Zhuocheng V2.0 visual system — site-export
   Homepage is the visual source of truth.
   RFQ orange only on Request-a-Quote CTAs. */
:root {
  --navy: #0b1f33;
  --blue: #1665d8;
  --blue-dark: #124fb0;
  --cyan: #16a3b6;
  --ink: #0b1f33;
  --ink-soft: #2a3744;
  --muted: #5f6976;
  --paper: #ffffff;
  --white: #ffffff;
  --surface: #f5f8fb;
  --rfq: #f28c28;
  --rfq-dark: #d9771c;
  --line: #e2e8ef;
  --line-dark: #a9b6c4;
  --blue-soft: #edf3ff;
  --max: 1480px;
  --section: clamp(80px, 9vw, 112px);
  --gutter: clamp(20px, 3.2vw, 48px);
  --radius: 4px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  color: var(--ink);
  background: var(--paper);
}

body {
  color: var(--ink);
  background: var(--paper);
}

/* Button sizing contract (site-wide)
   Root cause of repeated full-width CTAs:
   - static-site mobile used bare `.button{width:100%}` (now scoped to `.hero-actions`)
   - `width:auto` still stretches in grid/flex contexts
   Default: content-sized. Opt into full-width only where intentional. */
.button,
a.button {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* Mobile hero only: stack CTAs full-bleed inside .hero-actions */
@media (max-width: 760px) {
  .hero-actions .button,
  .hero-actions a.button {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Shell */
.site-header {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid var(--line) !important;
}
.utility-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 0 var(--gutter);
  background: var(--navy) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 12px;
}
.nav-bar {
  max-width: var(--max);
  height: 72px !important;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.desktop-nav > a,
.desktop-nav > button {
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 620;
}
.desktop-nav > a:hover,
.desktop-nav > button:hover,
.desktop-nav > button.active {
  color: var(--blue) !important;
}

/* Primary actions = industrial blue */
.button.primary,
.mega-feature-actions a:last-child {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
  border-radius: var(--radius);
}
.button.primary:hover,
.mega-feature-actions a:last-child:hover {
  background: var(--blue-dark) !important;
  border-color: var(--blue-dark) !important;
}
.button.secondary {
  border-color: var(--line-dark) !important;
  background: #fff !important;
  color: var(--ink) !important;
  border-radius: var(--radius);
}
.button.secondary:hover {
  background: var(--blue-soft) !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

/* RFQ orange — nav / mobile / sticky CTA only */
.nav-quote,
.mobile-quote,
.button.rfq,
a.nav-quote,
a.mobile-quote,
a.button.primary[href*="request-a-quote"],
a.button.primary[href*="rfq"],
.mobile-sticky-cta .button.rfq,
.footer-rfq .button.primary,
.footer-bottom .rfq-link {
  background: var(--rfq) !important;
  border-color: var(--rfq) !important;
  color: #fff !important;
  border-radius: var(--radius);
}
.nav-quote:hover,
.mobile-quote:hover,
.button.rfq:hover,
a.nav-quote:hover,
a.mobile-quote:hover,
a.button.primary[href*="request-a-quote"]:hover,
a.button.primary[href*="rfq"]:hover,
.footer-rfq .button.primary:hover {
  background: var(--rfq-dark) !important;
  border-color: var(--rfq-dark) !important;
}

/* Links / accents */
.section-code,
.capability-copy > span,
.capability-copy a,
.text-link,
.mega-column a:hover,
.footer-col a:hover,
.mega-feature-actions a:first-child,
.breadcrumb a:hover {
  color: var(--blue) !important;
}
.proof-rail svg,
.video-copy li svg,
.equipment-grid strong,
.footer-proof-icon,
.capability-tabs button.active {
  color: var(--cyan) !important;
}
.capability-tabs button.active {
  border-bottom-color: var(--blue) !important;
  color: var(--ink) !important;
}
.capability-tabs button:hover {
  color: var(--ink) !important;
  background: transparent !important;
}

/* Surfaces */
.hero,
.hero-copy,
.products,
.factory-video,
.page-shell,
.mega-menu,
.page-section {
  background: #fff;
}
.split-section,
.manufacturing,
.hero-stage,
.capability-image,
.proof-rail,
.surface-band {
  background: var(--surface) !important;
}
.split-copy {
  background: var(--surface) !important;
  color: var(--ink) !important;
}

/* Dark bands = deep navy (not orange graphite) */
.page-hero.dark,
.quality,
.rfq,
.rfq-intro,
.split-section.quality,
.supplier-file-head,
.clean-footer-proof,
.footer-proof {
  background: var(--navy) !important;
  color: #fff !important;
}
.page-hero.dark .section-code,
.quality .section-code,
.rfq-intro .section-code,
.quality-copy .section-code {
  color: var(--cyan) !important;
}
.page-hero.dark h1,
.quality h2,
.rfq h2,
.rfq-intro h2,
.quality-copy h2,
.footer-col strong {
  color: #fff !important;
}
.page-hero.dark p,
.quality-copy p,
.rfq-intro p {
  color: rgba(255, 255, 255, 0.78) !important;
}
.footer-cert-row span {
  border-color: rgba(22, 163, 182, 0.45) !important;
  color: var(--cyan) !important;
}
.footer-rfq .button.primary {
  background: var(--rfq) !important;
  border-color: var(--rfq) !important;
}

/* Type hierarchy (V2.0) — homepage + inner pages */
.hero h1 {
  color: var(--ink);
  font-size: clamp(36px, 4.2vw, 56px) !important;
  letter-spacing: -1.2px;
  line-height: 1.08;
}
.v2-page .page-hero h1 {
  /* sized in v2-pages.css to match homepage section rhythm */
}
.capability-heading h2,
.split-copy h2,
.video-copy h2,
.section-heading h2 {
  color: var(--ink) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
}
.capability-copy h3 {
  color: var(--ink) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
}
.hero-copy > p,
.capability-heading p,
.capability-copy p,
.split-copy > p,
.video-copy p {
  color: var(--muted) !important;
  font-size: 16px !important;
  line-height: 1.6;
}

/* Spacing / geometry */
.section,
.products,
.factory-video {
  max-width: var(--max);
  padding-top: var(--section);
  padding-bottom: var(--section);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.capability-panel,
.mega-menu,
.button,
.nav-quote,
.mobile-quote {
  border-radius: var(--radius);
}
.capability-panel {
  margin-top: 28px !important;
  border: 1px solid var(--line);
  overflow: hidden;
}
.capability-panel[hidden] { display: none !important; }
.capability-panel.is-active { display: grid !important; }
.capability-copy { padding: clamp(28px, 4vw, 48px) !important; }
.capability-tabs button {
  min-height: 52px !important;
  font-size: 13px !important;
  text-align: left !important;
}

/* Factory video */
.video-frame {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--navy);
}
.video-frame video,
.video-frame img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  display: block;
}
.video-frame:not(.is-playing)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,31,51,0) 42%, rgba(11,31,51,.78));
  pointer-events: none;
}
.video-frame button[data-video-play] {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.video-frame button[data-video-play] span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid var(--blue);
}
.video-frame button[data-video-play][hidden] { display: none !important; }
.video-frame .video-caption {
  position: absolute;
  left: clamp(24px, 3.5vw, 48px);
  right: clamp(24px, 3.5vw, 48px);
  bottom: clamp(22px, 3.5vw, 44px);
  z-index: 2;
  color: #fff;
  pointer-events: none;
}
.video-frame .video-caption strong {
  display: block;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 700;
}
.video-frame .video-caption p {
  max-width: 560px;
  margin: 8px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
}
.video-frame.is-playing .video-caption,
.video-frame.is-playing button[data-video-play],
.video-frame.is-playing::after {
  opacity: 0;
  visibility: hidden;
}

/* Kill leftover orange accents from prior pass */
.button.primary,
.desktop-nav > a:hover,
.section-code,
.capability-copy a {
  /* enforced above */
}

@media (max-width: 900px) {
  .hero h1,
  .page-hero h1 { font-size: clamp(36px, 8vw, 42px) !important; }
  .utility-bar { display: none !important; }
}