/* Semiconductor market page — the shared market-page design, identical to
   defense-test (Figma node 10226:4374 "Application - Defense & Space w1440 - v3",
   file 5IXXWDyoJ70K9J0GHPwUSt). Shares the dedicated homepage /
   capabilities-test design language — Stolzl display / Poppins body, Figma hexes
   (the application navy, orange and blue tokens), a white page with application-grey hairline
   section separators (as the sibling pages use — NOT the Figma frame's grey fill),
   notched shapes, faint diagonal BG lines.

   All selectors scoped under .cp-page; Rails additionally prefixes every rule with
   .industry-page at render time. Custom properties
   live on .cp-page (NOT :root — the prefixer would orphan them). Poppins Light (300)
   is not loaded site-wide, so display type uses Stolzl 400 (as the sibling pages do). */

.industry-page .cp-page {
  --navy: var(--color-eo-navy);
  --ice: var(--color-eo-blue);
  --orange: var(--color-eo-orange);
  --grey: var(--color-eo-grey);
  --muted: var(--color-muted);
  --tile: color-mix(in oklab, var(--ice) 18%, white);
  --maxw: 1280px; /* matches dedicated homepage / capabilities-test (site max-w-7xl) */
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--navy);
  font-size: 16px;
  line-height: 1.55;
  background: #fff;
}
.industry-page .cp-page *, .industry-page .cp-page *::before, .industry-page .cp-page *::after { box-sizing: border-box; }
.industry-page .cp-page a { color: inherit; text-decoration: none; }
.industry-page .cp-page a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.industry-page .cp-page img { display: block; max-width: 100%; }

.industry-page .cp-page .d-wrap {
  position: relative;
  z-index: 1; /* above the diagonal BG lines */
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- Faint diagonal background lines (Figma "BG Line" style) --------------- */
.industry-page .cp-page > section, .industry-page .cp-page > .d-cta { position: relative; z-index: 1; }
.industry-page .d-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.industry-page .d-bg span {
  position: absolute;
  left: -20%;
  width: 140%;
  border-top: 1px solid color-mix(in oklab, var(--navy) 10%, transparent);
  transform-origin: 0 0;
}
.industry-page .d-bg span:nth-child(1) { top: 14%; transform: rotate(-23.6deg); }
.industry-page .d-bg span:nth-child(2) { top: 29%; transform: rotate(23.6deg); }
.industry-page .d-bg span:nth-child(3) { top: 49%; transform: rotate(-23.6deg); }
.industry-page .d-bg span:nth-child(4) { top: 84%; transform: rotate(-23.6deg); }

/* --- Shared type ---------------------------------------------------------- */
/* The H1 and every section H2 use capabilities-test's heading rule: Poppins 700
   at 30px, navy var(--navy) — one heading treatment across the content pages. */
.industry-page .cp-page h1, .industry-page .cp-page .d-h2, .industry-page .d-cta h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--navy);
}
/* Section sub-headers — capabilities-test's .hd-intro: 16px Poppins at 1.5,
   no extra tracking, held to a 445px measure. */
.industry-page .d-lead {
  margin: 16px 0 0;
  max-width: 445px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.industry-page .d-head { margin-bottom: 48px; }

/* --- Buttons -------------------------------------------------------------- */
/* capabilities-test's two variants, sentence case: orange for /quote and /cart
   (carrying the header's arrow), navy for everything else (no arrow). */
.industry-page .d-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.industry-page .d-btn-arrow { width: 16px; height: 16px; flex: 0 0 auto; }
.industry-page .d-btn-orange { background: var(--orange); }
.industry-page .d-btn-orange:hover { background: rgba(249, 134, 19, 0.9); }
.industry-page .d-btn-blue { background: var(--navy); }
.industry-page .d-btn-blue:hover { background: color-mix(in oklab, var(--navy) 90%, transparent); }
/* The scoped `.cp-page a { color: inherit }` reset outranks a class-only
   `.d-btn-*` rule, so pin the label color with an `a`-qualified selector. */
.industry-page .cp-page a.d-btn-orange { color: #fff; }
.industry-page .cp-page a.d-btn-blue { color: #fff; }

/* --- Section rhythm ------------------------------------------------------- */
/* Uniform 64px top+bottom padding with a hairline separator inset to the content
   column — matching dedicated homepage / capabilities-test. */
.industry-page .d-build .d-wrap, .industry-page .d-why .d-wrap, .industry-page .d-steps .d-wrap, .industry-page .d-cert .d-wrap {
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid var(--grey);
}

/* --- Hero ----------------------------------------------------------------- */
/* 80px above the H1 = the offset capabilities-test uses, so both pages' headings
   start at the same height. */
.industry-page .d-hero .d-wrap { padding-top: 32px; padding-bottom: 64px; }
.industry-page .d-hero-inner { display: flex; gap: 32px; align-items: flex-start; }
.industry-page .d-hero-text { flex: 1 1 0; min-width: 0; padding-top: 0; }
.industry-page .d-hero-lede { margin: 40px 0; max-width: 480px; }
.industry-page .d-hero-lede p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.industry-page .d-hero-lede p:last-child { margin-bottom: 0; }
/* Same shape as the capabilities-test hero: an equal column, cut along the whole
   bottom edge at the page's 23.6° — 264px over the 604px column at 1280. Depth in
   px, not %, so the angle doesn't shift with the photo's height. */
.industry-page .d-hero-photo {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  height: 566px;
  --photo-cut: 264px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--photo-cut)), 0 100%);
  overflow: hidden;
}
.industry-page .d-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* --- What we build (application cards) ------------------------------------ */
.industry-page .d-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr; /* every card the same height (uniform Figma cards) */
  gap: 40px 16px;
}
.industry-page .app-card { display: flex; flex-direction: column; height: 100%; }
.industry-page .app-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 0 24px;
}
/* Card titles across the page use the cluster's 20px Stolzl (capabilities-test's
   .hd-card-body h3), so the page has one heading scale below the H2s. */
.industry-page .app-head b {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
/* Figma symbol; fill is baked navy, fits inside the box via default aspect-preserve */
.industry-page .app-head .app-ico { flex: 0 0 auto; width: 40px; height: 40px; }
.industry-page .app-desc {
  margin: 14px 0 16px;
  padding: 0 65px 0 24px;
  font-size: 14px;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--muted);
}
/* Pinned to the card bottom; with the fixed-height chip panel below, every navy
   "offers" block is the same size across all cards (matching the Figma). */
.industry-page .app-offers { margin-top: auto; background: var(--navy); }
.industry-page .app-offers-lbl {
  margin: 0;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.31;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: #fff;
}
.industry-page .app-chips {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  min-height: 140px; /* uniform blue blocks (Figma); grows if a market needs 4 chips */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Grey on the navy panel — the same tag treatment capabilities-test uses on its
   navy capability cards; ice would read as a button. */
.industry-page .app-chips li {
  background: var(--tile);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--navy);
}

/* --- Why choose (stat band) ----------------------------------------------- */
/* Stat band replicates dedicated homepage's .hd-cap-stats: a flat flex row,
   number + single-line label, thin inner dividers only (no outer frame). */
.industry-page .d-why .d-h2 { max-width: 825px; }
.industry-page .d-stats { display: flex; margin: 48px 0 0; }
.industry-page .d-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
}
.industry-page .d-stat + .d-stat { border-left: 1px solid color-mix(in oklab, var(--navy) 15%, transparent); }
/* Same figures as the homepage's In-house Manufacturing Capabilities stats
   (.hd-cap-num): 54px, off the 30px type scale on purpose. */
.industry-page .d-stat-num {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
}
.industry-page .d-stat-lbl { font-size: 14px; line-height: 1.31; color: var(--muted); }

/* --- In-house at every stage ---------------------------------------------- */
/* The step cards from dedicated homepage's "From an R&D Project to a Full OEM
   Program": narrow columns, wide gutters, and the grey fill cut across the
   top-left at 23.6° with the number sitting in the void. Three steps here rather
   than the homepage's four, so the column is wider and the bite deeper — 160px
   over the 365px card is the same 23.6°. */
.industry-page .d-steps-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 72px;
  row-gap: 24px;
}
.industry-page .d-steps-cta { margin-top: 40px; }
.industry-page .step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 20px 20px;
  /* Fixed px (not %) so the bite always clears the number, whatever the height. */
  --step-cut: 160px;
}
/* Pseudo-element fill, not the card's own background, so the number can sit in
   the triangle the diagonal leaves empty. */
.industry-page .step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tile);
  clip-path: polygon(0 var(--step-cut), 100% 0, 100% 100%, 0 100%);
}
.industry-page .step-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: color-mix(in oklab, var(--navy) 35%, transparent);
}
.industry-page .step-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  /* clears the diagonal at the card's left edge (the number takes 44px of it) */
  margin-top: calc(var(--step-cut) - 44px);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--navy) 20%, transparent);
}
.industry-page .step-head b {
  /* reserve 2 lines and bottom-align, so a title that wraps keeps its divider
     and body aligned with the single-line ones */
  display: flex;
  align-items: flex-end;
  min-height: 2.16em;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.25px;
}
.industry-page .step-head .step-ico { height: 22px; width: auto; flex: 0 0 auto; }
.industry-page .step-sub {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--muted);
}
.industry-page .step-tags {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* Outlined and see-through, so they read as labels rather than buttons — a
   filled pill (ice especially, the secondary button fill) looks clickable. */
.industry-page .step-tags li {
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 4px;
  padding: 4px 6px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--navy);
}

/* --- Certified excellence (navy cards) ------------------------------------ */
.industry-page .d-cert-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.industry-page .cert-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 0;
  background: var(--navy);
  color: #fff;
}
.industry-page .cert-card h3 {
  margin: 0;
  padding: 0 24px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 10px;
}
.industry-page .cert-list {
  list-style: none;
  margin: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Grey on the navy card, as the "What we build" chips and capabilities-test. */
.industry-page .cert-list li {
  background: var(--tile);
  border-radius: 4px;
  padding: 4px 6px 3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--navy);
}

/* --- CTA band (inset navy box) -------------------------------------------- */
.industry-page .d-cta {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto 64px;
  padding: 40px 26px;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.industry-page .d-cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.industry-page .d-cta-bg span {
  position: absolute;
  left: -20%;
  width: 140%;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  transform-origin: 0 0;
}
.industry-page .d-cta-bg span:nth-child(1) { top: 24%; transform: rotate(-23.6deg); }
.industry-page .d-cta-bg span:nth-child(2) { top: 72%; transform: rotate(23.6deg); }
.industry-page .d-cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
/* Same 30px Poppins heading as the sections; white, since this band is navy. */
.industry-page .d-cta h2 { max-width: 620px; color: #fff; }
.industry-page .d-cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  flex-wrap: wrap;
}
.industry-page .d-cta-copy {
  margin: 0;
  max-width: 354px;
  font-size: 14px;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: #fff;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 960px) {
  .industry-page .d-hero .d-wrap { padding-top: 8px; }
  .industry-page .d-hero-inner { flex-direction: column; align-items: stretch; gap: 40px; }
  /* stacked: hold the photo to 460px so its 23.6° cut keeps its proportions */
  .industry-page .d-hero-photo { flex: none; width: 100%; max-width: 460px; height: 480px; --photo-cut: 201px; }
  .industry-page .d-apps { grid-template-columns: 1fr; }
  .industry-page .d-steps-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
  .industry-page .step-card { --step-cut: 140px; }
  .industry-page .cert-card { min-height: 0; }
  .industry-page .d-cert-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Headings step to 24px (text-2xl). */
  .industry-page .cp-page h1, .industry-page .cp-page .d-h2, .industry-page .d-cta h2 { font-size: 24px; }
  .industry-page .d-hero-photo { height: 360px; --photo-cut: 140px; }
  /* one full-width step per row: a 140px bite would be half the card's height */
  .industry-page .d-steps-grid { grid-template-columns: 1fr; }
  .industry-page .step-card { --step-cut: 80px; }
  .industry-page .d-stats { flex-direction: column; }
  .industry-page .d-stat + .d-stat { border-left: none; border-top: 1px solid color-mix(in oklab, var(--navy) 15%, transparent); }
  .industry-page .d-cta-row { flex-direction: column; align-items: flex-start; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .industry-page .cp-page *, .industry-page .cp-page *::before, .industry-page .cp-page *::after { transition: none !important; }
}

/* Reviewed Chinese copy and Dayan contact presentation. */
.industry-page .cp-page{font-family:var(--font-sans)}
.industry-page .cp-page .d-hero-lede p,.industry-page .cp-page .d-lead,.industry-page .cp-page .app-desc,.industry-page .cp-page .step-sub{line-height:1.9}
.industry-page .cp-page .app-head b,.industry-page .cp-page .step-head b{line-height:1.5}
.industry-page .cp-page .app-chips li{line-height:1.7;font-size:13px}
.industry-page .cp-page .d-stat-num{font-family:var(--font-sans);font-size:36px;letter-spacing:0}
.industry-page .cp-page .d-h2{line-height:1.5}
.industry-page .cp-page .market-contact-number{display:block;margin-top:16px;font-size:22px;letter-spacing:.04em;color:inherit}
.industry-page .cp-page .market-products{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.industry-page .cp-page .market-products a{font-size:13px;border:1px solid #bdcce1;padding:10px 18px;color:#021344;background:white}
@media(max-width:640px){.industry-page .cp-page .d-stat-num{font-size:27px}.industry-page .cp-page .market-contact-number{font-size:20px}.industry-page .cp-page .d-cta-copy{line-height:1.9}}