.hd-page {
  --hd-navy: var(--color-eo-navy);
  --hd-ice: var(--color-eo-blue);
  --hd-orange: var(--color-eo-orange);
  --hd-grey: var(--color-eo-grey);
  --hd-muted: var(--color-muted);
  --hd-pale: color-mix(in oklab, var(--hd-ice) 18%, white);
  --hd-hairline: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--hd-navy);
}

/* Faint diagonal background lines (Figma "BG Line" layers) behind all content. */
.hd-page > section { position: relative; z-index: 1; }
.hd-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hd-bg-line {
  position: absolute;
  left: -20%;
  width: 140%;
  border-top: 1px solid color-mix(in oklab, var(--hd-navy) 10%, transparent);
  transform-origin: 0 0;
}
/* one consistent angle (the Figma 23.6° stroke), only the sign alternates so
   the lines cross a few times (near the hero, mid-page, and lower down) */
/* This 19° sweep crosses the Custom & OEM block and its separator — hidden so
   the separator reads cleanly. */
.hd-bg-line:nth-child(2) { display: none; }
.hd-bg-line:nth-child(3) { top: 39%; transform: rotate(23.6deg); }
.hd-bg-line:nth-child(4) { top: 51%; transform: rotate(-23.6deg); }
.hd-bg-line:nth-child(5) { top: 73%; transform: rotate(23.6deg); }
.hd-bg-line:nth-child(6) { top: 88%; transform: rotate(-23.6deg); }

/* Fading branded backdrop behind the hero only: full-bleed lens photo with a
   white veil that thickens downward, so the image dissolves into the page
   before the next section (mirrors the Figma gradient overlay). */
.hd-herobg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 780px;
  z-index: 0;
  background:
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.55) 38%,
      #fff 82%),
    url("/assets/home/backgrounds/hero-lenses-42bcf253.webp") center top / cover no-repeat;
}

.hd-hero {
  display: flex;
  /* Card is first in the DOM (so it stacks on top on mobile) and, as plain
     row, sits on the left on desktop — the Custom & OEM value prop leads. */
  flex-direction: row;
  gap: 40.5px; /* +35% over the base 30px, to widen the space between the two column headings */
  /* top-align both columns (headings line up via matching 32px top paddings).
     The card is content-height, with fixed Figma spacing around the stats. */
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 20px 64px; /* top gap below the nav for both columns; 20px sides = app px-5 → aligns with header */
}

.hd-hero ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Left card: Custom & OEM --------------------------------------------- */

.hd-card {
  /* Narrower than the product-groups column (~42/58) so the hero isn't a 50/50
     split — the value prop is a focused navy panel beside the wider catalog. */
  flex: 42 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: #fff;
  /* Navy panel over the pale fading backdrop (per the Figma hero). The 32px top
     padding offsets the H1 from the panel edge; the categories column carries a
     matching 32px top padding so both headings line up. */
  background: var(--hd-navy);
  padding: 32px;
}

/* Column so the stats and markets carry fixed vertical spacing (per Figma). */
.hd-card-body {
  display: flex;
  flex-direction: column;
}

.hd-card h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;          /* text-3xl */
  font-weight: 700;         /* font-bold */
  line-height: 1.2;
  letter-spacing: normal;
  color: #fff;              /* white on the navy panel */
}

.hd-lede {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.31;
  letter-spacing: 0.28px;
}

.hd-hero .hd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

/* Informational tags, not buttons — the same pale brand surface as the OEM
   process step cards / materials swatches) so they read as neutral labels on
   the ice card, not as the navy CTAs. */
.hd-chips li {
  background: var(--hd-pale);
  border-radius: 4px;
  padding: 4px 6px 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28px;
  line-height: 1.31;
  color: var(--hd-navy);
  text-transform: capitalize;
}

.hd-stats {
  display: flex;
  margin-top: 40px; /* Figma: 40px above the stats block */
}

/* Equal thirds spanning the panel width (mirrors .hd-cap-stats lower down) so
   the row fills the card edge-to-edge instead of floating centered. */
.hd-stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 6px 20px;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.hd-stat:last-child .hd-stat-sub { white-space: nowrap; }
.hd-stat + .hd-stat { border-left: 1px solid rgba(255, 255, 255, 0.25); }

.hd-stat-big {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.25px;
  text-transform: uppercase;
  white-space: nowrap; /* keep "OEM-READY" on one line in the narrow card */
}

.hd-stat-sub {
  font-size: 14px;
  line-height: 1.31;
  letter-spacing: 0.28px;
}

.hd-hero .hd-markets {
  margin-top: 40px; /* Figma: 40px below the stats block */
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  /* Vertical list (per Figma), one market per line — never wraps. */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hd-markets li {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: #fff;
}

.hd-cta {
  display: flex;
  gap: 12px;
}

/* Shared homepage CTA geometry: 10/16 padding, 4px radius, 14px medium
   Poppins, no border, background-only hover. Orange = cart/custom-project
   actions (eo-orange); navy = everything else. */
.hd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* gap-2 */
  padding: 10px 16px;       /* py-2.5 px-4 */
  border-radius: 4px;       /* rounded */
  font-size: 14px;          /* text-sm */
  font-weight: 500;         /* font-medium */
  line-height: 1.25rem;     /* text-sm line-height (20px) */
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

/* Arrow on homepage CTAs. */
.hd-btn-arrow { width: 16px; height: 16px; flex: 0 0 auto; }

.hd-btn-orange { background: var(--hd-orange); color: #fff; }
.hd-btn-orange:hover { background: color-mix(in oklab, var(--hd-orange) 90%, transparent); } /* = eo-orange/90 */

/* "Blue" buttons fill navy with white text (the ice fill is reserved for
   surfaces on this page); orange stays the cart/quote action colour. */
.hd-btn-blue { background: var(--hd-navy); color: #fff; }
.hd-btn-blue:hover { background: color-mix(in oklab, var(--hd-navy) 90%, transparent); }

/* Ice buttons live on the navy Custom & OEM card (orange stays reserved for the
   quote/cart CTAs). Solid ice = primary; ice outline = secondary. */
.hd-btn-ice { background: var(--hd-ice); color: var(--hd-navy); }
.hd-btn-ice:hover { background: color-mix(in oklab, var(--hd-ice) 88%, var(--hd-navy)); }

/* Outline: transparent fill, 1px ice stroke via inset box-shadow (not border,
   so its box matches the filled button's height exactly). */
.hd-btn-outline { background: transparent; color: var(--hd-ice); box-shadow: inset 0 0 0 1px var(--hd-ice); }
.hd-btn-outline:hover { background: color-mix(in oklab, var(--hd-ice) 15%, transparent); }

/* --- Right column: product groups ----------------------------------------- */

.hd-groups {
  flex: 58 1 0;
  min-width: 0;
  /* matches the navy card's 32px top padding so "Shop by Category" and
     "Custom & OEM" sit on the same line, both dropped below the nav together */
  padding-top: 32px;
}

.hd-groups h2,
.hd-sectors h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--hd-navy);
}

.hd-hero .hd-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 30px;
}

.hd-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--hd-navy);
}

.hd-tile-title {
  display: flex;
  /* bottom-align so the label hugs its image; the 36px min-height reserves two
     lines so every tile's image starts on the same row. */
  align-items: flex-end;
  min-height: 36px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.2px;
}

.hd-grid a:hover .hd-tile-title { color: var(--hd-orange); }

.hd-tile-media {
  position: relative;
  display: block;
}

.hd-tile-img {
  display: block;
  aspect-ratio: 160 / 172;
  /* Side-to-side diagonal cut applied in CSS so tiles can carry plain photos
     (matches the diagonal the older Figma PNGs baked into their alpha). */
  clip-path: polygon(0 0, 100% 0, 100% 59.3%, 0 100%);
  overflow: hidden;
}

.hd-tile-img img {
  display: block;
  width: 100%;
  /* The app's Tailwind preflight sets img { max-width: 100% }, which clamped the
     nudged widths below while their negative margins stayed — leaving the optics
     tile 12px short of its box. Opt out; .hd-tile-img clips the overflow. */
  max-width: none;
  /* 5px taller + pulled up 5px: the crop sits slightly higher while cover
     still fills the tile (extra height clipped at the top, bottom stays flush). */
  height: calc(100% + 5px);
  margin-top: -5px;
  object-fit: cover;
}

/* Per-tile crop nudges. Add horizontal (and, where needed, extra vertical)
   slack, then bias the margin so the extra is clipped from one side —
   shifting the visible crop while cover still fills the tile. */
.hd-grid li:nth-child(1) .hd-tile-img img { width: calc(100% + 12px); margin-left: -12px; } /* optics: left 6 */
.hd-grid li:nth-child(3) .hd-tile-img img { width: calc(100% + 12px); margin-left: 0; }      /* electro-optics: right 6 */
.hd-grid li:nth-child(5) .hd-tile-img img {                                                    /* optical systems: right 6 + up */
  width: calc(100% + 12px); margin-left: 0;
  height: calc(100% + 10px); margin-top: -10px;
}

.hd-grid a:hover .hd-tile-img img { transform: scale(1.03); }
.hd-tile-img img { transition: transform 0.2s ease; }

.hd-tile-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
}

/* --- Markets: custom optics, engineered by market -------------------------- */

.hd-sectors {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 20px 64px; /* uniform 64/64 → 128px gaps both sides */
  scroll-margin-top: 24px;
}

.hd-sectors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-sep {
  border: 0;
  border-top: 1px solid var(--hd-grey);
  margin: 0 0 48px;
}

.hd-sectors-intro {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.5; /* same leading as .hd-company-text > p */
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}

.hd-sectors-body {
  display: flex;
  align-items: stretch; /* list + panel share one height (the taller: the list) */
  gap: 40px;
  margin-top: 40px;
}

/* Radio-tab mechanism (same pattern as homepage-test-joriui):
   hidden radios first in .hd-sectors-body, tabs are <label>s,
   panels shown via :checked ~ sibling selectors. */
/* Fixed, not absolute: clicking a label focuses its radio, and the browser
   scrolls the focused element into view — an absolutely-positioned radio sits
   at the top of .hd-sectors-body, so every tab click yanked the page up to
   the section heading. A fixed element is always "in view", so no scroll. */
.hd-sector-control {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}

.hd-sectors .hd-sector-list {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* spread 7 tabs to match the fixed card height */
  gap: 24px;
}

.hd-sector-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 4px 0 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--hd-navy) 60%, transparent);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.hd-sector-name:hover {
  color: var(--hd-orange);
  border-bottom-color: var(--hd-orange);
}

/* glyph + name grouped left; the arrow stays pinned right via space-between */
.hd-sector-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Fixed square box for every glyph so they read as one size and all the market
   names start at the same x. Each glyph's viewBox centres inside the box. */
.hd-sector-ico {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.hd-sector-arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 15.2px;
}

#hd-market-defense:checked ~ .hd-sector-list [for="hd-market-defense"],
#hd-market-lasermfg:checked ~ .hd-sector-list [for="hd-market-lasermfg"],
#hd-market-medical:checked ~ .hd-sector-list [for="hd-market-medical"],
#hd-market-semicon:checked ~ .hd-sector-list [for="hd-market-semicon"],
#hd-market-industrial:checked ~ .hd-sector-list [for="hd-market-industrial"],
#hd-market-fusion:checked ~ .hd-sector-list [for="hd-market-fusion"],
#hd-market-research:checked ~ .hd-sector-list [for="hd-market-research"] {
  color: var(--hd-orange);
  border-bottom: 1.5px solid var(--hd-orange);
  padding-bottom: 7.5px;
}

/* --- Info panel (navy card, right side) --- */

.hd-sector-panels {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; /* let the active panel stretch to the shared column height */
}

.hd-sector-panel {
  display: none;
  flex: 1 1 auto;
  /* min-width:0 lets the panel shrink below the wide banner image's intrinsic
     width; without it the flex default (min-width:auto) forces the panel to the
     image's natural width and it overflows the viewport (clipped on mobile). */
  min-width: 0;
  flex-direction: column;
  height: 600px; /* fixed so every market's card is identical (no reflow on switch) */
  background: var(--hd-ice);
  color: var(--hd-navy);
}

#hd-market-defense:checked ~ .hd-sector-panels [data-market="defense"],
#hd-market-lasermfg:checked ~ .hd-sector-panels [data-market="lasermfg"],
#hd-market-medical:checked ~ .hd-sector-panels [data-market="medical"],
#hd-market-semicon:checked ~ .hd-sector-panels [data-market="semicon"],
#hd-market-industrial:checked ~ .hd-sector-panels [data-market="industrial"],
#hd-market-fusion:checked ~ .hd-sector-panels [data-market="fusion"],
#hd-market-research:checked ~ .hd-sector-panels [data-market="research"] {
  display: flex;
}

/* fixed-height banner, identical across all markets; the body flexes to fill
   the rest of the card so the CTA stays anchored at the bottom */
/* Sized so the body below it just fits its tallest copy (Defense & Space runs to
   three lines) — that keeps the banner identical on every market while leaving
   almost no dead space between the copy and the button. */
.hd-sector-panel-photo {
  flex: 0 0 auto;
  height: 400px;
  overflow: hidden;
}

.hd-sector-panel-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
/* Per-market crop — each subject sits high in its frame, so bias the crop
   upward ("lower" the photo) to keep the optics in view. */
.hd-sector-panel[data-market="defense"]  .hd-sector-panel-photo img { object-position: center 25%; }
.hd-sector-panel[data-market="lasermfg"] .hd-sector-panel-photo img { object-position: center 40%; }
.hd-sector-panel[data-market="medical"]  .hd-sector-panel-photo img { object-position: center 10%; }
.hd-sector-panel[data-market="fusion"]   .hd-sector-panel-photo img { object-position: center 42%; }

.hd-sector-panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px 24px;
}

.hd-sector-panel-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.25px;
}

.hd-sector-panel-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}

.hd-sector-panel-body .hd-btn {
  margin-top: auto;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 960px) {
  .hd-hero { flex-direction: column; padding-top: 16px; }
  /* Stacked full-width; keep the ice panel's padding intact. */
  .hd-card { flex-basis: auto; width: 100%; min-height: 0; }
  .hd-groups { width: 100%; padding-top: 0; }
  .hd-hero .hd-grid { margin-top: 32px; }
  /* Accordion: flatten the tab list and the panels container into
     .hd-sectors-body (display: contents) and interleave them with `order`,
     so the open panel renders directly under its tab. Stacking all 7 tabs
     above the panel put the swapped content below the fold — tapping a
     market looked like nothing happened. DOM is untouched, so the radio
     :checked ~ selectors keep working. */
  .hd-sectors-body { flex-direction: column; gap: 0; }
  .hd-sectors .hd-sector-list,
  .hd-sectors .hd-sector-list li,
  .hd-sector-panels { display: contents; }
  /* Spacing via margins, not the container gap — collapsed panels are still
     flex items, and a gap would double up between tabs. */
  .hd-sector-name { margin-bottom: 24px; }
  .hd-sector-list [for="hd-market-defense"]    { order: 1; }
  .hd-sector-panel[data-market="defense"]      { order: 2; }
  .hd-sector-list [for="hd-market-lasermfg"]   { order: 3; }
  .hd-sector-panel[data-market="lasermfg"]     { order: 4; }
  .hd-sector-list [for="hd-market-medical"]    { order: 5; }
  .hd-sector-panel[data-market="medical"]      { order: 6; }
  .hd-sector-list [for="hd-market-semicon"]    { order: 7; }
  .hd-sector-panel[data-market="semicon"]      { order: 8; }
  .hd-sector-list [for="hd-market-industrial"] { order: 9; }
  .hd-sector-panel[data-market="industrial"]   { order: 10; }
  .hd-sector-list [for="hd-market-fusion"]     { order: 11; }
  .hd-sector-panel[data-market="fusion"]       { order: 12; }
  .hd-sector-list [for="hd-market-research"]   { order: 13; }
  .hd-sector-panel[data-market="research"]     { order: 14; }
  /* Instant open/close, no animation: the desktop display: none/flex swap
     already does that — the panel just needs its mobile sizing. display: none
     keeps collapsed panels out of the focus order / accessibility tree. */
  .hd-sector-panel {
    flex: 0 0 auto;
    height: auto;
    margin-bottom: 24px; /* only visible on the open panel; the rest are display: none */
  }
  .hd-sector-panel-photo { height: 200px; }
  /* The tab arrow doubles as the disclosure indicator: right when closed,
     down at the open panel. */
  #hd-market-defense:checked ~ .hd-sector-list [for="hd-market-defense"] .hd-sector-arrow,
  #hd-market-lasermfg:checked ~ .hd-sector-list [for="hd-market-lasermfg"] .hd-sector-arrow,
  #hd-market-medical:checked ~ .hd-sector-list [for="hd-market-medical"] .hd-sector-arrow,
  #hd-market-semicon:checked ~ .hd-sector-list [for="hd-market-semicon"] .hd-sector-arrow,
  #hd-market-industrial:checked ~ .hd-sector-list [for="hd-market-industrial"] .hd-sector-arrow,
  #hd-market-fusion:checked ~ .hd-sector-list [for="hd-market-fusion"] .hd-sector-arrow,
  #hd-market-research:checked ~ .hd-sector-list [for="hd-market-research"] .hd-sector-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  /* page-h1 steps down to text-2xl (24px) on mobile; match it. */
  .hd-card h1,
  .hd-groups h2, .hd-sectors h2 { font-size: 24px; }
  .hd-sector-name { font-size: 18px; }
  .hd-hero .hd-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stats: compact, centred 3-up row. A stacked column ran far too long and
     read badly left-aligned, pushing the CTAs off-screen. */
  .hd-stats { gap: 0; margin-top: 28px; }
  .hd-stat { padding: 0 6px; align-items: center; text-align: center; }
  .hd-stat:first-child, .hd-stat:nth-child(2), .hd-stat:last-child { flex: 1 1 0; width: auto; }
  .hd-stat:first-child { padding-left: 6px; }
  .hd-stat + .hd-stat { border-left: 1px solid var(--hd-hairline); border-top: 0; }
  .hd-stat-big { font-size: 14px; white-space: nowrap; }
  .hd-stat:last-child .hd-stat-sub { white-space: normal; }
  /* tighten the card's vertical rhythm on mobile so the CTAs sit higher */
  .hd-card { gap: 28px; }
  .hd-hero .hd-markets { margin-top: 28px; }
  .hd-cta { flex-wrap: wrap; }
}

/* ========================================================================== */
/* Remaining Figma homepage blocks (intro strip, capabilities, materials,     */
/* OEM process, CTA band, company). All 1280px-constrained on white (matching  */
/* the site's max-w-7xl container), no full-bleed bands.                        */
/* ========================================================================== */

/* Shared section heading / eyebrow / intro (H2 reuses the Stolzl 30 rule). */
.hd-capabilities h2,
.hd-materials h2,
.hd-process h2,
.hd-company h2,
.hd-cta-band h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--hd-navy);
}

/* Section sub-headers ("In-house Manufacturing Capabilities", "From an R&D
   Project to a Full OEM Program") — same leading as .hd-company-text > p. */
.hd-sec-intro {
  margin: 16px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}

/* Uniform centered hairline between sections (navy CTA band + the company
   block after it are self-separating, so they get no top rule). */
.hd-sectors,
.hd-capabilities,
.hd-materials,
.hd-process {
  border-top: 1px solid var(--hd-grey);
}

/* --- Capabilities --------------------------------------------------------- */
.hd-capabilities {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 20px;
}

.hd-cap-stats {
  display: flex;
  margin: 48px 0;
}
.hd-cap-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  text-align: center;
}
.hd-cap-stat + .hd-cap-stat { border-left: 1px solid color-mix(in oklab, var(--hd-navy) 15%, transparent); }
.hd-cap-num {
  font-family: var(--font-display);
  font-size: 54px; /* large figures, per Figma (~2x the label) */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
}
.hd-cap-lbl { font-size: 14px; line-height: 1.31; color: var(--hd-muted); }
/* The Stolzl lambda is lighter than the digits — thicken its strokes to match. */
.hd-lam { -webkit-text-stroke: 0.7px currentColor; }

.hd-capabilities .hd-cap-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  text-align: left;
}
/* 5 cards: 3 across the first row, the trailing 2 centered on the second. */
.hd-capabilities .hd-cap-grid > li {
  flex: 0 1 calc((100% - 34px) / 3);
  min-width: 0;
}
.hd-cap-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  text-decoration: none;
}
.hd-cap-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-cap-card:hover > img,
.hd-cap-card:focus-within > img { transform: scale(1.05); }
.hd-cap-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 128px 20px 20px;
}
/* Diagonal navy panel instead of a bottom fade (Figma): an oversized block
   rotated to the page's 23.6°, anchored to the body's top-left corner, so its
   top edge is the only thing that shows — a straight cut sinking to the right.
   Sized in % of the body, so it rides up with the hover reveal for free. */
.hd-cap-card-body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  background: color-mix(in oklab, var(--hd-navy) 90%, transparent);
  transform-origin: 0 0;
  transform: rotate(23.6deg);
}
.hd-cap-card-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.25px;
}
/* Hover/focus reveal: tags + EXPLORE slide open under the always-visible title.
   grid-rows 0fr→1fr animates height with the inner wrapper clipping overflow. */
.hd-cap-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-cap-reveal-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(6px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hd-cap-card:hover .hd-cap-reveal,
.hd-cap-card:focus-within .hd-cap-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}
.hd-cap-card:hover .hd-cap-reveal-inner,
.hd-cap-card:focus-within .hd-cap-reveal-inner {
  transform: translateY(0);
}
/* no hover on touch → reveal is always open there */
@media (hover: none) {
  .hd-cap-reveal { grid-template-rows: 1fr; opacity: 1; }
}

.hd-capabilities .hd-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Same pale brand fill as the hero's .hd-chips — one tag treatment for the
   whole page, whether the tag sits on the hero card or a navy photo card. */
.hd-capabilities .hd-tags li {
  background: var(--hd-pale);
  border-radius: 4px;
  padding: 4px 6px 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28px;
  line-height: 1.31;
  color: var(--hd-navy);
}
.hd-cap-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hd-orange);
}
.hd-cap-explore .hd-arrow { width: 15px; height: 14px; }

/* --- Materials ------------------------------------------------------------ */
.hd-materials {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 20px;
  text-align: center;
}
/* Two rows of fully-rounded, content-width pills that grow to fill each row
   (per Figma). Three fills alternate: navy (white text), ice, and pale. */
.hd-materials .hd-mat-list {
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px; /* slight gap between rows */
}
.hd-materials .hd-mat-row {
  display: flex;
  flex-wrap: wrap; /* pills wrap on narrow viewports instead of overflowing */
  gap: 6px; /* slight gap between rectangles */
}
.hd-materials .hd-mat {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 28px;
  border-radius: 12px; /* less-rounded rectangles (per Figma), not full stadium */
  /* Same font as the OEM process step titles (.hd-step-head h3). */
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.25px;
  white-space: nowrap;
}
/* Pale tier uses the app's pale-blue secondary surface treatment. */
.hd-materials .hd-mat.is-navy { background: var(--hd-navy); color: #fff; }
.hd-materials .hd-mat.is-ice  { background: var(--hd-ice);  color: var(--hd-navy); }
.hd-materials .hd-mat.is-pale { background: var(--hd-pale);        color: var(--hd-navy); }
.hd-materials .hd-mat sub { font-size: 0.7em; }

/* --- OEM process ---------------------------------------------------------- */
.hd-process {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 20px;
}
.hd-process .hd-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Figma's proportions: 190px cards with 53px between them across a 920px row
     — so a wide gap, ~28% of the card. Scaled to our 1240px row that's a 256px
     card and a 72px gutter. Row gap stays tight for the stacked breakpoints. */
  column-gap: 72px;
  row-gap: 24px;
}
.hd-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* no min-height: the grid already levels all four to the tallest copy, and a
     floor would just bake empty grey under the shortest step (per Figma) */
  padding: 8px 20px 20px;
  /* --hd-step-cut: how deep the diagonal bites into the card's left edge. Fixed
     px (not %) so it always clears the step number, whatever the card height;
     112px over the 256px desktop card is the page's 23.6° diagonal. */
  --hd-step-cut: 112px;
}
/* The grey fill is a pseudo-element rather than the card's own background, so
   the number can sit in the triangle the diagonal leaves empty (Figma: white
   card on grey — we invert it, grey card on white). */
.hd-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hd-pale);
  clip-path: polygon(0 var(--hd-step-cut), 100% 0, 100% 100%, 0 100%);
}
/* Off the 30px type scale on purpose, like the 54px .hd-cap-num stat figures:
   in Figma the step number is a big pale numeral filling the diagonal's void. */
.hd-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(--hd-navy) 35%, transparent);
}
.hd-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(--hd-step-cut) - 44px);
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in oklab, var(--hd-navy) 20%, transparent);
}
.hd-step-head h3 {
  margin: 0;
  /* reserve 2 lines and bottom-align text so 1-line titles line up with the
     one that wraps (Serial OEM supply) — dividers + bodies then align */
  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;
}
.hd-step-head .hd-step-ico { height: 22px; width: auto; flex: 0 0 auto; }
.hd-step > p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}
.hd-proc-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

/* --- CTA band (navy, inside the 1280 column) ------------------------------ */
.hd-cta-band {
  max-width: 1280px;
  margin: 64px auto; /* padding is internal to the navy block; margin makes the outer gap */
  background: var(--hd-ice);
  color: var(--hd-navy);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hd-cta-band h2 { color: var(--hd-navy); max-width: 620px; }
.hd-cta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hd-cta-row > p {
  margin: 0;
  max-width: 460px; /* wide enough that the text sits on two lines, not three */
  font-size: 16px; /* match .hd-sec-intro */
  line-height: 1.31;
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}
.hd-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Company / Manufacturer ----------------------------------------------- */
.hd-company {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 20px 80px; /* top 64 (+ CTA's 64 margin = 128 gap); extra at page end */
  display: grid;
  grid-template-columns: 255px 1fr 200px;
  align-items: center;
  gap: 32px;
}
.hd-company-photo { overflow: hidden; }
.hd-company-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Both photos are cut at the page's 23.6° diagonal, with opposite signs so they
   read as a pair around the text: the left one's bottom edge climbs to the
   right (Figma's shape — 111px over the 255px column), the right one's top edge
   falls to the right (87px over its 200px column). Depths in px, not %, so the
   angle doesn't shift with the photo's height. */
.hd-company-photo-l {
  height: 380px;
  --hd-photo-cut: 111px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hd-photo-cut)), 0 100%);
}
/* The right one keeps a square top and is cut only along the bottom, falling to
   the right — the same 23.6°, opposite in sign to the left photo. */
.hd-company-photo-r {
  height: 283px;
  --hd-photo-cut: 87px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--hd-photo-cut)));
}
.hd-company-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.hd-company-text > p {
  margin: 8px 0 0;
  max-width: 460px;
  font-size: 16px; /* match .hd-sec-intro */
  line-height: 1.5;
  letter-spacing: 0.28px;
  color: var(--hd-muted);
}
.hd-company-text .hd-btn { margin-top: 20px; }

/* --- Responsive: new sections --------------------------------------------- */
@media (max-width: 960px) {
  .hd-capabilities .hd-cap-grid > li { flex-basis: calc((100% - 16px) / 2); }
  .hd-process .hd-steps { grid-template-columns: repeat(2, 1fr); }
  .hd-company {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 28px;
  }
  /* wider photo → deeper bite, so the 23.6° holds when it stops being a column */
  .hd-company-photo-l { width: 320px; max-width: 100%; height: 300px; --hd-photo-cut: 140px; }
  .hd-company-photo-r { display: none; }
  .hd-cta-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hd-capabilities h2, .hd-materials h2, .hd-process h2,
  .hd-company h2, .hd-cta-band h2 { font-size: 24px; }
  .hd-cap-stats { flex-direction: column; }
  .hd-cap-stat + .hd-cap-stat { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--hd-navy) 15%, transparent); }
  .hd-capabilities .hd-cap-grid > li { flex-basis: 100%; }
  .hd-process .hd-steps { grid-template-columns: 1fr; }
  /* one full-width step per row: a 128px bite would be half the card's height,
     so take a shallower one (the diagonal stays, the dead band doesn't) */
  .hd-step { --hd-step-cut: 80px; }
}