/* HanSun visual system v6
   One brand system, three functional surfaces: deep / mist / paper. */
:root {
  --hs-ink: #0d2028;
  --hs-deep: #062b36;
  --hs-teal: #0e4b59;
  --hs-paper: #f4f1ea;
  --hs-mist: #e1ebec;
  --hs-steel: #b9c8ca;
  --hs-orange: #f2a04a;
  --hs-orange-text: #99531f;
  --hs-white: #ffffff;
  --hs-line: rgba(13, 32, 40, .16);
  --hs-line-light: rgba(255, 255, 255, .22);
  --hs-body: "DM Sans", "Segoe UI", sans-serif;
  --hs-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --hs-mono: "IBM Plex Mono", Consolas, monospace;

  /* Bridge the legacy and v5 systems to the same tokens. */
  --ink: var(--hs-ink);
  --ink-soft: #52656b;
  --navy: var(--hs-teal);
  --blue: #17677a;
  --blue-dark: var(--hs-deep);
  --orange: var(--hs-orange);
  --orange-dark: var(--hs-orange-text);
  --mist: var(--hs-mist);
  --paper: var(--hs-paper);
  --surface-deep: var(--hs-deep);
  --surface-deep-2: var(--hs-ink);
  --surface-mist: var(--hs-mist);
  --surface-warm: var(--hs-paper);
  --surface-proof: #edf2f1;
  --surface-process: #dce8e9;
  --line-soft: var(--hs-line);
  --v5-ink: var(--hs-ink);
  --v5-soft: #52656b;
  --v5-deep: var(--hs-deep);
  --v5-deep-2: var(--hs-ink);
  --v5-blue: var(--hs-teal);
  --v5-orange: var(--hs-orange);
  --v5-mist: var(--hs-mist);
  --v5-paper: var(--hs-paper);
  --v5-line: var(--hs-line);
}

html { background: var(--hs-paper); }
html { overflow-x: hidden; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--hs-paper); color: var(--hs-ink); font-family: var(--hs-body); }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.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; }
h1, h2, h3, h4 { font-family: var(--hs-display); }

/* Shared chrome: the brand should feel like one site on every route. */
.topline, .v5-topline {
  min-height: 31px;
  background: var(--hs-ink) !important;
  color: rgba(255,255,255,.74);
  font-family: var(--hs-mono);
  font-size: 10px;
}
.topline__inner, .v5-topline__inner { min-height: 31px; padding-block: 9px; }
.topline a, .v5-topline a { color: rgba(255,255,255,.9); }
.site-header, .v5-header {
  border-bottom-color: var(--hs-line) !important;
  background: rgba(244,241,234,.96) !important;
}
.brand-lockup, .v5-brand { min-width: 245px; gap: 12px; }
.brand-lockup img, .v5-brand img { width: 52px; height: 52px; }
.brand-lockup strong, .v5-brand strong { color: var(--hs-ink); }
.brand-lockup small, .v5-brand small { color: #617277; font-size: 10px; }
.main-nav, .v5-nav__links { color: var(--hs-ink); }
.main-nav a, .v5-nav__links > a { color: #52656b; }
.main-nav a::after, .v5-nav__links > a::after { background: var(--hs-orange); }
.menu-toggle, .v5-menu { color: var(--hs-ink); }
.button--orange, .v5-button--orange { background: var(--hs-orange); color: var(--hs-ink); }
.button--orange:hover, .v5-button--orange:hover { background: #f7b15d; }

/* Hero surfaces are intentionally deep; remove the green/yellow cast from the home image. */
.v5-hero__image {
  background: linear-gradient(90deg, rgba(4,19,27,.97) 0%, rgba(6,37,48,.93) 52%, rgba(7,43,53,.84) 100%), url("assets/optimized/site/hero-port-night.webp") center/cover !important;
}
.v5-hero, .v5-subhero, .v5-equipment, .v5-detail-hero,
.hero, .proof-strip, .section--families { background-color: var(--hs-deep) !important; }
.v5-business, .v5-route-strip, .section--process { background-color: var(--hs-mist) !important; }
.v5-equipment-index, .section--catalog, .section--evidence { background-color: var(--hs-paper) !important; }
.v5-culture { background-color: var(--hs-ink) !important; }
.v5-footer, .site-footer, .terminal-band { background-color: var(--hs-ink) !important; }
.v5-cta, .v5-detail-cta, .quote-band { background-color: var(--hs-orange) !important; }

/* Accent text is dark enough for small labels on paper and mist surfaces. */
.v5-label, .v5-equipment-card small, .v5-equipment-card b,
.v5-detail-system-map__branch > span, .v5-detail-system-map__branch b,
.v5-detail-system-card__eyebrow, .v5-detail-system-card__link,
.eyebrow, .process-grid article span, .systems-rail > div:first-child span,
.directory-route__number { color: var(--hs-orange-text) !important; }
.v5-label--light, .v5-kicker--light, .eyebrow--light { color: #f6c486 !important; }
.v5-kicker > span, .eyebrow__rule { background: var(--hs-orange); }

/* Evidence imagery must remain legible and complete. */
.v5-equipment-card--product img,
.v5-equipment-index-card__image img,
.v5-detail-system-card__media img,
.v5-detail-guide-step__media img { transform: none !important; }
.v5-equipment-card--product:hover img,
.v5-equipment-index-card:hover .v5-equipment-index-card__image img,
.v5-detail-system-card:hover .v5-detail-system-card__media img { transform: none !important; }

/* Keep the first-level equipment index useful on desktop without an empty right half. */
.equipment-v5 .v5-subhero { padding-block: 78px 72px; }
.equipment-v5 .v5-subhero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr); grid-template-rows: auto auto; }
.equipment-v5 .v5-subhero__inner > div { grid-row: 1 / 3; align-self: center; }
.equipment-v5 .v5-subhero__inner > p { grid-column: 2; grid-row: 1; align-self: end; }
.equipment-v5 .v5-subhero__inner::after {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-height: 180px;
  margin-top: 28px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(6,43,54,.2), rgba(6,43,54,.72)), url("assets/optimized/site/port-cranes-day.webp") center/cover;
  box-shadow: 12px 12px 0 rgba(242,160,74,.7);
  content: "";
}
.v5-subhero .v5-kicker { color: rgba(255,255,255,.76); }

/* Mobile readability and control sizing. No critical information is hidden. */
@media (max-width: 720px) {
  .shell, .v5-shell { width: calc(100% - 36px); }
  .topline, .v5-topline { display: none; }
  .float-contact { display: none !important; }
  .topline__inner, .v5-topline__inner { font-size: 10px; }
  .brand-lockup, .v5-brand { min-width: 0; }
  .brand-lockup img, .v5-brand img { width: 42px; height: 42px; }
  .brand-lockup strong, .v5-brand strong { font-size: 20px; }
  .brand-lockup small, .v5-brand small { margin-top: 5px; font-size: 10px; }
  .main-nav a, .main-nav .button, .v5-nav__links > a, .v5-nav__links > .v5-button { min-height: 44px; font-size: 12px; }
  .button, .v5-button { min-height: 48px; font-size: 12px; }
  .v5-kicker, .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .v5-hero__proof span { font-size: 10px !important; }
  .v5-hero__card-copy small { font-size: 10px !important; }
  .v5-hero__card > a { font-size: 11px !important; }
  .v5-business-card .v5-label { font-size: 10px !important; }
  .v5-business-card a, .v5-business-card button { font-size: 11px !important; }
  .v5-business-proof small { font-size: 10px !important; }
  .v5-equipment-card small { font-size: 10px !important; }
  .v5-equipment-card b { font-size: 10px !important; }
  .v5-equipment-card--product img { transform: none !important; object-fit: contain !important; }
  .v5-principles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; margin-top: 28px; }
  .v5-principles strong { margin-top: 15px; font-size: 17px; }
  .v5-principles small { margin-top: 7px; font-size: 11px; line-height: 1.45; }
  .v5-culture__stamp { margin-top: 28px; }
  .v5-float-contact { display: none !important; }
  .equipment-v5 .v5-subhero { padding-block: 58px 52px; }
  .equipment-v5 .v5-subhero__inner { display: block; }
  .equipment-v5 .v5-subhero__inner > div, .equipment-v5 .v5-subhero__inner > p { display: block; }
  .equipment-v5 .v5-subhero__inner::after { min-height: 154px; margin-top: 30px; box-shadow: 8px 8px 0 rgba(242,160,74,.7); }
  .equipment-v5 .v5-subhero__inner > p { margin-top: 28px; font-size: 15px; }
  .v5-detail-system-card__media img { transform: none !important; }
  .v5-detail-system-card:hover .v5-detail-system-card__media img { transform: none !important; }
  .part-detail-page .part-detail-copy h1 { max-width: 100%; font-size: clamp(34px, 10.5vw, 44px) !important; line-height: .98; letter-spacing: -.045em; overflow-wrap: anywhere; word-break: break-word; }
  .footer-grid a, .footer-bottom a, .v5-footer a, .v5-footer span { font-size: 13px; }
  .footer-grid small, .v5-footer small { font-size: 10px; }
  .form-note { font-size: 12px; }
}

@media (max-width: 390px) {
  .v5-principles { grid-template-columns: 1fr; gap: 14px; }
  .v5-principles strong { font-size: 18px; }
  .v5-equipment-card h3, .v5-equipment-card--wide h3 { font-size: 22px !important; }
  .v5-equipment-card--lead h3 { font-size: 31px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v7 title color contract: unify the rule, not one flat color.
   Dark surfaces carry white titles with one orange emphasis; light surfaces
   carry ink titles with a restrained teal emphasis. This keeps the industrial
   palette formal while preserving a clear action accent. */
:root {
  --title-on-dark: var(--hs-white);
  --title-on-light: var(--hs-ink);
  --title-accent-dark: var(--hs-orange);
  --title-accent-light: var(--hs-teal);
  --title-link: var(--hs-orange-text);
}

/* Safe default for every title block. Page-specific surfaces below deliberately
   override this contract so legacy selectors cannot make headings drift. */
h1, h2, h3, h4 {
  color: var(--title-on-light) !important;
  font-family: var(--hs-display) !important;
  font-weight: 600 !important;
}
h1 em, h2 em, h3 em, h4 em {
  color: var(--title-accent-light) !important;
  font-style: normal;
}

/* Deep / ink / teal surfaces: high-contrast title plus one warm emphasis. */
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h1,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h2,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h3,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h4,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h1,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h2,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h3,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h4 {
  color: var(--title-on-dark) !important;
}
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h1 em,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h2 em,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h3 em,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band, .systems-intro) h4 em,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h1 em,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h2 em,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h3 em,
:where(.v5-business-card--dark, .v5-equipment-index-card--featured,
  .featured-card--lead, .directory-route--primary, .family-card--lead) h4 em {
  color: var(--title-accent-dark) !important;
}

/* Orange is a CTA surface, not another competing title color. */
:where(.v5-cta, .v5-detail-cta, .quote-band) h1,
:where(.v5-cta, .v5-detail-cta, .quote-band) h2,
:where(.v5-cta, .v5-detail-cta, .quote-band) h3,
:where(.v5-cta, .v5-detail-cta, .quote-band) h4 {
  color: var(--title-on-light) !important;
}
:where(.v5-cta, .v5-detail-cta, .quote-band) h1 em,
:where(.v5-cta, .v5-detail-cta, .quote-band) h2 em,
:where(.v5-cta, .v5-detail-cta, .quote-band) h3 em,
:where(.v5-cta, .v5-detail-cta, .quote-band) h4 em {
  color: var(--title-accent-light) !important;
}

/* Light surfaces use ink + teal; bright orange remains reserved for action. */
:where(.v5-business, .v5-equipment-index, .v5-detail-overview,
  .v5-detail-systems, .section--catalog, .section--featured, .section--evidence,
  .section--process, .legal-page, .part-detail-page, .supply-scope) h1 em,
:where(.v5-business, .v5-equipment-index, .v5-detail-overview,
  .v5-detail-systems, .section--catalog, .section--featured, .section--evidence,
  .section--process, .legal-page, .part-detail-page, .supply-scope) h2 em,
:where(.v5-business, .v5-equipment-index, .v5-detail-overview,
  .v5-detail-systems, .section--catalog, .section--featured, .section--evidence,
  .section--process, .legal-page, .part-detail-page, .supply-scope) h3 em,
:where(.v5-business, .v5-equipment-index, .v5-detail-overview,
  .v5-detail-systems, .section--catalog, .section--featured, .section--evidence,
  .section--process, .legal-page, .part-detail-page, .supply-scope) h4 em {
  color: var(--title-accent-light) !important;
}

/* Small identifiers can use the darker orange text token on light surfaces. */
:where(.eyebrow, .v5-label, .v5-detail-system-card__eyebrow,
  .directory-route__number, .process-grid article > span) {
  color: var(--title-link) !important;
}
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band) .eyebrow,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band) .v5-kicker {
  color: rgba(255,255,255,.76) !important;
}
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band) .v5-label,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band) .v5-equipment-card small,
:where(.v5-hero, .v5-subhero, .v5-equipment, .v5-culture, .v5-detail-hero,
  .v5-detail-models, .catalog-page-hero, .hero, .proof-strip, .section--families,
  .terminal-band) .v5-equipment-card b {
  color: var(--title-accent-dark) !important;
}

/* The catalog route rail is a navigation surface; teal is calmer than a full
   orange band, while orange remains available for the active interaction. */
.catalog-model-rail {
  background: var(--hs-teal) !important;
  color: var(--hs-white) !important;
}
.catalog-model-rail__inner > * { border-left-color: rgba(255,255,255,.2) !important; }
.catalog-model-rail a, .catalog-model-rail button { color: var(--hs-white) !important; }
.catalog-model-rail a span, .catalog-model-rail button span { color: rgba(255,255,255,.68) !important; }
.catalog-model-rail a:hover, .catalog-model-rail button:hover,
.catalog-model-rail a:focus-visible, .catalog-model-rail button:focus-visible {
  background: rgba(255,255,255,.1) !important;
  color: var(--hs-orange) !important;
}
.catalog-model-rail a:hover span, .catalog-model-rail button:hover span,
.catalog-model-rail a:focus-visible span, .catalog-model-rail button:focus-visible span {
  color: rgba(255,255,255,.86) !important;
}

/* Repair the remaining cross-route typography drift and the 7px mobile brand
   sublabel that was below a practical reading size. */
.process-grid h3,
.catalog-empty h3,
.featured-card__body h3 {
  font-family: var(--hs-display) !important;
  font-weight: 600 !important;
}
.home-v5 .v5-brand small { font-size: 10px !important; letter-spacing: .08em; }
.mobile-route-bar { display: none; }

@media (max-width: 720px) {
  .home-v5 .v5-brand img { width: 42px; height: 42px; }
  .brand-lockup small, .v5-brand small,
  .home-v5 .v5-brand small { font-size: 10px !important; }
  .home-v5 .v5-hero__proof span,
  .home-v5 .v5-hero__card-copy small,
  .home-v5 .v5-business-card .v5-label,
  .home-v5 .v5-business-proof small,
  .home-v5 .v5-equipment-card small,
  .home-v5 .v5-equipment-card b,
  .home-v5 .v5-culture__stamp span,
  .home-v5 .v5-culture__stamp small,
  .equipment-detail-v5 .v5-detail-system-card__media span {
    font-size: 10px !important;
  }
  .catalog-model-rail__inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-block: 12px;
    scroll-padding-inline: 18px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .catalog-model-rail__inner > *,
  .catalog-model-rail__inner > div {
    flex: 0 0 min(76vw, 285px);
    min-height: 92px;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.2) !important;
    scroll-snap-align: start;
  }
  .catalog-model-rail__inner > div { flex-basis: min(82vw, 310px); }
  .catalog-model-rail__inner > * + * { border-left: 1px solid rgba(255,255,255,.2) !important; }
  .mobile-route-bar {
    position: sticky;
    top: 66px;
    z-index: 9;
    display: flex;
    align-items: stretch;
    min-height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.16);
    background: rgba(6,43,54,.96);
    box-shadow: 0 4px 12px rgba(3,18,25,.14);
  }
  .mobile-route-bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: rgba(255,255,255,.74);
    font: 10px var(--hs-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .mobile-route-bar a:first-child { padding-left: 0; color: var(--hs-white); }
  .mobile-route-bar a:last-child { margin-left: auto; color: var(--hs-orange); }
  .mobile-route-bar a span { margin-left: 5px; font-size: 13px; }
  .equipment-detail-v5 #overview,
  .equipment-detail-v5 #systems,
  .equipment-detail-v5 #request { scroll-margin-top: 122px; }
  main > section:nth-of-type(n + 2) { content-visibility: auto; contain-intrinsic-size: 720px; }
}

/* v8 mobile contrast repair: equipment cards switch from image-overlay cards
   to light information cards, so their titles must leave the dark section's
   white-on-image treatment and return to ink on the card surface. */
@media (max-width: 720px) {
  .home-v5 .v5-equipment-card > div h3,
  .home-v5 .v5-equipment-card > div h3 em {
    color: var(--hs-ink) !important;
    text-shadow: none !important;
  }
  .home-v5 .v5-equipment-card > div small {
    color: var(--hs-orange-text) !important;
  }
  .home-v5 .v5-equipment-card > div > b {
    color: var(--hs-teal) !important;
  }
}

/* v9 alignment repair: the equipment index contains variable-length model
   metadata, so a fixed card height lets the grid contents escape into the
   next row. Let each row size to its content and keep media in its own box. */
.equipment-v5 .v5-equipment-index-card {
  height: auto;
  min-height: 350px;
  align-items: stretch;
}
.equipment-v5 .v5-equipment-index-card__image,
.equipment-v5 .v5-equipment-index-card__body {
  min-height: 0;
}

/* Replaced images must not impose their intrinsic height on a fixed-ratio
   media frame. This prevents catalog thumbnails and detail branch visuals
   from pushing past the image/text boundary. */
.part-card__image img,
.v5-detail-system-map__branch-media img {
  min-width: 0;
  min-height: 0;
}
@media (max-width: 720px) {
  .equipment-v5 .v5-equipment-index-card {
    min-height: 0;
  }
  .part-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .equipment-detail-v5 .v5-detail-system-map__branch-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0;
  }
  .equipment-detail-v5 .v5-detail-system-map__branch-media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

/* v10 reading-scale repair: utility labels are allowed to be compact, but
   explanatory copy and task-facing controls must remain comfortable to read
   at normal viewing distance on both desktop and mobile. */
.v5-kicker,
.eyebrow,
.v5-label,
.v5-detail-system-card__eyebrow,
.v5-detail-system-map__branch > span,
.v5-detail-system-map__branch b,
.directory-route__number,
.process-grid article > span {
  font-size: 12px !important;
  line-height: 1.3 !important;
}
.v5-subhero__inner > p,
.v5-section-head--split > p,
.v5-detail-overview__copy > p,
.v5-detail-systems .v5-section-head--split > p,
.v5-detail-cta__copy,
.v5-detail-models p,
.catalog-page-hero__note p,
.section-heading__note,
.supply-scope__heading > p,
.evidence-copy .lead {
  font-size: 17px !important;
  line-height: 1.65 !important;
}
.v5-equipment-index-card__body p,
.v5-equipment-card p,
.v5-detail-system-card p,
.v5-detail-evidence p,
.v5-detail-system-map__branch small,
.v5-detail-system-map__hub small,
.v5-overview-signal small {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.v5-models b,
.v5-models span,
.v5-system-line b,
.v5-system-line span,
.v5-equipment-index-card__body > a,
.v5-detail-system-card small,
.v5-detail-system-card__link,
.v5-detail-evidence a,
.v5-detail-facts dt,
.v5-detail-evidence > div > span {
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.v5-detail-facts dd { font-size: 23px !important; }
.v5-detail-system-card strong,
.v5-detail-system-map__branch strong { font-size: 24px !important; }

/* v42 title repair: the machine name is the visual anchor. Keep the existing
   image treatment unchanged; typography fixes must not alter supplied media. */
.equipment-v5 .v5-equipment-index-card__body h3 {
  margin-top: 28px;
  color: var(--hs-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -.045em;
}
.equipment-v5 .v5-equipment-index-card--featured .v5-equipment-index-card__body h3 {
  color: var(--hs-white) !important;
}
@media (max-width: 720px) { .equipment-v5 .v5-equipment-index-card__body h3 { margin-top: 24px; } }

/* v43 homepage title-only repair: the equipment section is dark, but its
   compact caption bands are light. Do not let the parent surface recolor
   these device names to white on white. */
.home-v5 .v5-equipment-card > div h3 { color: var(--hs-ink) !important; }
.home-v5 .v5-equipment-card > div h3 em { color: var(--hs-teal) !important; }
.v5-footer__grid small,
.v5-footer__bottom,
.footer-grid small,
.footer-bottom { font-size: 11px !important; }
.v5-footer__brand p,
.footer-brand p,
.v5-footer__grid a,
.v5-footer__grid span,
.footer-grid a,
.footer-grid span { font-size: 13px !important; line-height: 1.55 !important; }

/* Text inside legacy shorthand rules needs its own override because those
   selectors set the entire font shorthand on child spans. */
.v5-kicker > span:not(:first-child),
.v5-overview-signal > span,
.v5-detail-system-map__hub span,
.v5-detail-system-card__media span,
.v5-detail-guide-step__media span,
.v5-detail-readiness-card > span,
.v5-hero__proof span,
.v5-hero__card-copy small,
.v5-business-proof small,
.v5-culture__stamp > span,
.v5-culture__stamp > small,
.v5-culture__capabilities b,
.v5-hero__rail,
.v5-detail-hero__badge > span,
.catalog-model-rail small,
.catalog-page-hero__note > span,
.catalog-route-context > span,
.tag-row span,
.v5-detail-model-tags span,
.home-v5 .v5-equipment-card small,
.home-v5 .v5-equipment-card b,
.home-v5 .v5-business-card .v5-label,
.home-v5 .v5-business-proof small {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* These are interaction or route-identification labels, not decorative
   metadata. Keep them above the small-print threshold on the homepage. */
.home-v5 .v5-equipment-card small,
.home-v5 .v5-equipment-card b { font-size: 12px !important; }
.home-v5 .v5-business-card .v5-label,
.home-v5 .v5-business-proof small { font-size: 11px !important; }
.home-v5 .v5-hero__proof > div > span,
.home-v5 .v5-hero__card-copy > small,
.home-v5 .v5-business-proof > span > small,
.home-v5 .v5-principles > div > span,
.home-v5 .v5-principles > div > small { font-size: 11px !important; }
.home-v5 .v5-principles > div > small { font-size: 12px !important; line-height: 1.55 !important; }
.home-v5 .v5-business-card--dark h3 em { color: var(--hs-orange) !important; }
.home-v5 .v5-business-card p { font-size: 14px !important; line-height: 1.55 !important; }
.home-v5 .v5-business-card a,
.home-v5 .v5-inline-button,
.home-v5 .v5-hero__card > a,
.home-v5 .v5-text-button { font-size: 12px !important; }
.brand-lockup small,
.v5-brand small,
.home-v5 .v5-brand small { font-size: 11px !important; }
.catalog-model-rail a span,
.catalog-model-rail button span { font-size: 11px !important; line-height: 1.4 !important; }
.mobile-route-bar a { font-size: 11px !important; }

/* Legacy catalog and part records share the same reading contract. */
.directory-route p,
.legal-card p,
.part-detail-intro,
.detail-notice p,
.part-card__name,
.catalog-footer,
.catalog-empty p,
.scope-note p,
.culture-grid p,
.proof-list p { font-size: 14px !important; line-height: 1.65 !important; }
.directory-route strong { font-size: 35px !important; }
.directory-route b,
.directory-column__label,
.directory-column a b,
.directory-quickfind__intro > span,
.directory-quickfind__codes a,
.filter-count,
.part-card__status,
.part-card__brand,
.part-card__reference,
.part-card__meta span,
.part-card__action,
.text-button,
.detail-notice a,
.spec-list dt,
.contact-copy b { font-size: 12px !important; line-height: 1.35 !important; }
.directory-column a { font-size: 15px !important; }
.part-card h3 { font-size: 27px !important; }
.part-detail-name { font-size: 23px !important; }
.spec-list dd { font-size: 14px !important; }
.systems-rail__links a,
.systems-rail__links button { min-height: 40px; font-size: 12px !important; }

@media (max-width: 720px) {
  .v5-kicker,
  .eyebrow,
  .v5-label,
  .v5-detail-system-card__eyebrow,
  .v5-detail-system-map__branch > span,
  .v5-detail-system-map__branch b,
  .directory-route__number,
  .process-grid article > span {
    font-size: 11px !important;
  }
  .v5-subhero__inner > p,
  .v5-section-head--split > p,
  .v5-detail-overview__copy > p,
  .v5-detail-systems .v5-section-head--split > p,
  .v5-detail-cta__copy,
  .v5-detail-models p,
  .catalog-page-hero__note p,
  .section-heading__note,
  .supply-scope__heading > p,
  .evidence-copy .lead { font-size: 15px !important; }
  .v5-equipment-index-card__body p,
  .v5-equipment-card p,
  .v5-detail-system-card p,
  .v5-detail-evidence p,
  .v5-detail-system-map__branch small,
  .v5-detail-system-map__hub small,
  .v5-overview-signal small,
  .directory-route p,
  .legal-card p,
  .part-detail-intro,
  .detail-notice p,
  .part-card__name,
  .catalog-footer,
  .catalog-empty p,
  .scope-note p,
  .culture-grid p,
  .proof-list p { font-size: 14px !important; }
  .v5-models b,
  .v5-models span,
  .v5-system-line b,
  .v5-system-line span,
  .v5-equipment-index-card__body > a,
  .v5-detail-system-card small,
  .v5-detail-system-card__link,
  .v5-detail-evidence a,
  .v5-detail-facts dt,
  .v5-detail-evidence > div > span,
  .directory-route b,
  .directory-column__label,
  .directory-column a b,
  .directory-quickfind__intro > span,
  .directory-quickfind__codes a,
  .filter-count,
  .part-card__status,
  .part-card__brand,
  .part-card__reference,
  .part-card__meta span,
  .part-card__action,
  .text-button,
  .detail-notice a,
  .spec-list dt,
  .contact-copy b { font-size: 11px !important; }
  .v5-detail-facts dd { font-size: 22px !important; }
  .v5-detail-system-card strong,
  .v5-detail-system-map__branch strong { font-size: 22px !important; }
  .v5-footer__grid a,
  .v5-footer__grid span,
  .footer-grid a,
  .footer-grid span { font-size: 13px !important; }
  .directory-column a { font-size: 15px !important; }
  .part-card h3 { font-size: 25px !important; }
  .part-detail-name { font-size: 21px !important; }
  .spec-list dd { font-size: 14px !important; }
}

/* v44 homepage media contract: one image treatment for every equipment card.
   Keep source files untouched; use the card media area for the visual crop. */
.home-v5 .v5-equipment-card--product img,
.home-v5 .v5-equipment-card--wide img {
  object-fit: cover !important;
  object-position: center center !important;
  padding: 0 !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .home-v5 .v5-equipment-card--product img,
  .home-v5 .v5-equipment-card--wide img {
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    transform: none !important;
  }
}

/* v46 complete-device media contract: equipment cards are information-first.
   Use intrinsic-ratio media rows and contain the supplied image so no boom,
   mast, cab or chassis is removed by a promotional crop. */
@media (min-width: 721px) {
  .home-v5 .v5-equipment-grid {
    grid-auto-rows: auto;
    align-items: start;
  }
  .home-v5 .v5-equipment-card {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
  }
  .home-v5 .v5-equipment-card--product img,
  .home-v5 .v5-equipment-card--wide img {
    height: auto;
    min-height: 0;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  .home-v5 .v5-equipment-card--product img { aspect-ratio: 4 / 3; }
  .home-v5 .v5-equipment-card--wide img { aspect-ratio: 16 / 9; }
}

@media (max-width: 720px) {
  .home-v5 .v5-equipment-card--product img,
  .home-v5 .v5-equipment-card--wide img {
    height: auto;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
  .home-v5 .v5-equipment-card--product img { aspect-ratio: 4 / 3; }
  .home-v5 .v5-equipment-card--wide img { aspect-ratio: 16 / 9; }
}

/* v47 complete-image contract: equipment photography is evidence, not a
   decorative background. Let every supplied device image keep its native
   ratio and move the caption below it, so no boom, mast, cab or wheel is cut. */
.home-v5 .v5-equipment-grid {
  grid-auto-rows: auto !important;
  align-items: start !important;
}
.home-v5 .v5-equipment-card {
  display: flex !important;
  height: auto !important;
  min-height: 0 !important;
  flex-direction: column;
}
.home-v5 .v5-equipment-card img,
.home-v5 .v5-equipment-card--product img,
.home-v5 .v5-equipment-card--wide img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #e7edef;
  transform: none !important;
}
.home-v5 .v5-equipment-card > div {
  position: static !important;
  flex: 0 0 auto;
  width: auto;
}

@media (min-width: 721px) {
  .home-v5 .v5-equipment-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .home-v5 .v5-equipment-card--wide {
    grid-column: span 2 !important;
  }
}

/* v48 card rhythm: the first-level equipment selector keeps one visual
   baseline per row. Reserve the same two-line title height so a short machine
   name cannot make its card shorter than the neighbouring equipment cards. */
@media (min-width: 721px) {
  .home-v5 .v5-equipment-card h3,
  .home-v5 .v5-equipment-card--wide h3 {
    min-height: 1.8em;
  }
  .home-v5 .v5-equipment-card--wide {
    grid-column: span 2 !important;
  }
}

/* v52 desktop equipment hierarchy: restore the intended editorial rhythm of
   one compact machine card beside one wide crane card. The unequal widths
   create a clear small-versus-system distinction without changing any source
   image; each media stage still contains the complete supplied photograph. */
@media (min-width: 1101px) {
  .home-v5 .v5-equipment-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .home-v5 .v5-equipment-card:nth-child(-n + 4) { grid-column: span 1 !important; }
  .home-v5 .v5-equipment-card:nth-child(5) { grid-column: span 2 !important; }
  .home-v5 .v5-equipment-card:nth-child(4) h3,
  .home-v5 .v5-equipment-card:nth-child(5) h3 {
    font-size: clamp(27px, 2.4vw, 39px) !important;
  }
  .home-v5 .v5-equipment-card:nth-child(4) img { aspect-ratio: 4 / 3 !important; }
  .home-v5 .v5-equipment-card:nth-child(5) img { aspect-ratio: 16 / 9 !important; }
  .home-v5 .v5-equipment-card:nth-child(4),
  .home-v5 .v5-equipment-card:nth-child(5) {
    align-self: stretch !important;
    height: auto !important;
  }
  .home-v5 .v5-equipment-card:nth-child(4) img {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 4 / 3 !important;
  }
  .home-v5 .v5-equipment-card:nth-child(5) img {
    flex: 0 0 auto;
  }
  .home-v5 .v5-equipment-card:nth-child(4) > div,
  .home-v5 .v5-equipment-card:nth-child(5) > div {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }
  .home-v5 .v5-equipment-card:nth-child(4) > div b,
  .home-v5 .v5-equipment-card:nth-child(5) > div b {
    margin-top: auto;
    padding-top: 10px;
  }
}

/* v50 mobile parallel pair: on narrow screens the two final choices share a
   row, so keep their media stages equal and preserve the full source image. */
@media (max-width: 720px) {
  .home-v5 .v5-equipment-card:nth-child(4) img,
  .home-v5 .v5-equipment-card:nth-child(5) img {
    aspect-ratio: 1.55 / 1 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center;
  }
  .home-v5 .v5-equipment-card:nth-child(4) > div small,
  .home-v5 .v5-equipment-card:nth-child(5) > div small {
    display: block;
    height: 36px;
    min-height: 36px;
  }
}

/* v55 lower-row alignment: the compact terminal-tractor card and the wide
   crane card keep one shared media frame and one shared white information
   panel on desktop. The photographs remain complete via contain; the shared
   frame prevents different source ratios from creating uneven white blocks. */
@media (min-width: 1101px) {
  .home-v5 .v5-equipment-card:nth-child(4),
  .home-v5 .v5-equipment-card:nth-child(5) {
    --v5-lower-media-height: clamp(450px, 24.1vw, 463px);
    display: grid !important;
    grid-template-rows: var(--v5-lower-media-height) auto !important;
    align-content: start;
    position: relative !important;
    overflow: hidden;
    background: #e7edef;
  }
  .home-v5 .v5-equipment-card:nth-child(4)::before,
  .home-v5 .v5-equipment-card:nth-child(5)::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: var(--v5-lower-media-height);
    content: "";
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(18px);
    opacity: .72;
    transform: scale(1.06);
  }
  .home-v5 .v5-equipment-card:nth-child(4)::before {
    background-image: url("assets/optimized/equipment/sany-autonomous-terminal-tractor.webp");
  }
  .home-v5 .v5-equipment-card:nth-child(5)::before {
    background-image: url("assets/equipment/quay-crane.webp");
  }
  .home-v5 .v5-equipment-card:nth-child(4) img,
  .home-v5 .v5-equipment-card:nth-child(5) img {
    position: relative !important;
    z-index: 1;
    width: 100% !important;
    height: var(--v5-lower-media-height) !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
  }
  .home-v5 .v5-equipment-card:nth-child(4) > div,
  .home-v5 .v5-equipment-card:nth-child(5) > div {
    position: relative !important;
    z-index: 2;
    min-height: 166px;
  }
}

/* Apply the same evidence rule to the second-level machine directory. */
.equipment-v5 .v5-equipment-index-card__image {
  display: flex;
  height: auto !important;
  min-height: 0 !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
  background: #e7edef;
}
.equipment-v5 .v5-equipment-index-card__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

@media (max-width: 720px) {
  .home-v5 .v5-equipment-card--lead { grid-column: 1 / -1 !important; }
  .equipment-v5 .v5-equipment-index-card__image {
    display: block;
    padding: 10px;
  }
  .equipment-v5 .v5-equipment-index-card__image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* v45 evidence-led route: make the match method and part records feel complete
   without changing the established HanSun palette or source imagery. */
.v5-match {
  background: var(--hs-paper);
  color: var(--hs-ink);
  padding: clamp(72px, 8vw, 116px) 0;
}

.v5-match .v5-section-head--split,
.v5-detail-match__inner,
.part-detail-related .section-heading--split {
  align-items: end;
}

.v5-match .v5-section-head--split > p {
  color: #536b72;
  max-width: 520px;
}

.v5-match-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.v5-match-grid article {
  border-top: 2px solid var(--hs-orange);
  min-height: 214px;
  padding: 20px 20px 24px;
  background: rgba(255, 255, 255, .46);
}

.v5-match-grid article > span,
.v5-detail-match li > span {
  color: var(--hs-orange-text);
  display: block;
  font: 600 12px/1 var(--hs-mono);
  letter-spacing: .12em;
  margin-bottom: 30px;
}

.v5-match-grid article strong {
  display: block;
  font: 700 clamp(24px, 2.2vw, 32px)/.98 var(--hs-display);
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.v5-match-grid article p {
  color: #536b72;
  font-size: 15px;
  line-height: 1.58;
  margin: 0;
}

.v5-match-footer {
  align-items: center;
  border-top: 1px solid rgba(13, 32, 40, .18);
  display: grid;
  gap: 18px;
  grid-template-columns: auto 1fr auto;
  margin-top: 28px;
  padding-top: 20px;
}

.v5-match-footer > span,
.v5-match-footer > strong {
  font-family: var(--hs-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v5-match-footer > strong { color: #536b72; font-weight: 500; }

.v5-inline-button {
  background: transparent;
  border: 0;
  color: var(--hs-orange-text);
  cursor: pointer;
  font: 600 12px/1.2 var(--hs-mono);
  letter-spacing: .04em;
  min-height: 44px;
  padding: 10px 0;
  text-align: right;
}

.v5-inline-button b { color: var(--hs-orange); font-size: 18px; margin-left: 6px; }

.v5-detail-match {
  background: var(--hs-mist);
  color: var(--hs-ink);
  padding: clamp(58px, 7vw, 92px) 0;
}

.v5-detail-match__inner {
  display: grid;
  gap: 60px;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
}

.v5-detail-match h2 { color: var(--hs-ink); }
.v5-detail-match p { color: #536b72; font-size: 16px; line-height: 1.65; max-width: 470px; }
.v5-detail-match ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.v5-detail-match li { border-top: 2px solid var(--hs-teal); padding: 18px 16px 0; }
.v5-detail-match li > span { color: var(--hs-teal); margin-bottom: 28px; }
.v5-detail-match li strong { display: block; font: 700 24px/.98 var(--hs-display); margin-bottom: 12px; }
.v5-detail-match li small { color: #536b72; display: block; font-size: 14px; line-height: 1.45; }

.part-detail-status-grid,
.part-detail-evidence-grid,
.part-detail-related-grid { display: grid; gap: 12px; }

.part-detail-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0 30px; }
.part-detail-status-grid > div { border-top: 1px solid rgba(13, 32, 40, .24); padding-top: 12px; }
.part-detail-status-grid span,
.part-detail-evidence-grid article > span,
.part-detail-related-card__eyebrow { color: var(--hs-orange-text); display: block; font: 500 10px/1.2 var(--hs-mono); letter-spacing: .09em; text-transform: uppercase; }
.part-detail-status-grid strong { display: block; font-size: 15px; line-height: 1.4; margin-top: 8px; }

.part-detail-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0; }
.part-detail-evidence-grid article { background: var(--hs-mist); padding: 18px; }
.part-detail-evidence-grid article > span { color: var(--hs-teal); }
.part-detail-evidence-grid strong { display: block; font: 700 21px/1.05 var(--hs-display); margin: 14px 0 10px; }
.part-detail-evidence-grid p { color: #536b72; font-size: 14px; line-height: 1.55; margin: 0; }

.part-detail-related { background: #edf3f3; }
.part-detail-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 38px; }
.part-detail-related-card { background: var(--hs-white); border: 1px solid rgba(13, 32, 40, .16); display: flex; flex-direction: column; min-height: 210px; padding: 22px; }
.part-detail-related-card__eyebrow { color: var(--hs-orange-text); margin-bottom: 24px; }
.part-detail-related-card strong { font: 700 25px/1 var(--hs-display); }
.part-detail-related-card code { color: var(--hs-teal); font: 500 12px/1.4 var(--hs-mono); margin-top: 12px; overflow-wrap: anywhere; }
.part-detail-related-card p { color: #536b72; font-size: 14px; line-height: 1.55; margin: 16px 0 20px; }
.part-detail-related-card .text-button { margin-top: auto; }
.part-detail-related-card--route { background: var(--hs-deep); border-color: var(--hs-deep); color: var(--hs-white); }
.part-detail-related-card--route .part-detail-related-card__eyebrow { color: var(--hs-orange); }
.part-detail-related-card--route p { color: #c6d4d5; }
.part-detail-related-card--route .text-button { color: var(--hs-orange); }

@media (max-width: 720px) {
  .v5-match { padding: 62px 0; }
  .v5-match-grid { grid-template-columns: 1fr; margin-top: 30px; }
  .v5-match-grid article { min-height: 0; padding: 18px; }
  .v5-match-grid article > span { margin-bottom: 20px; }
  .v5-match-grid article strong { font-size: 28px; margin-bottom: 12px; }
  .v5-match-grid article p { font-size: 15px; }
  .v5-match-footer { align-items: start; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
  .v5-inline-button { text-align: left; }
  .v5-detail-match__inner { gap: 34px; grid-template-columns: 1fr; }
  .v5-detail-match p { font-size: 15px; }
  .v5-detail-match ol { grid-template-columns: 1fr; }
  .v5-detail-match li { padding-top: 14px; }
  .v5-detail-match li > span { margin-bottom: 18px; }
  .v5-detail-match li strong { font-size: 25px; }
  .part-detail-status-grid,
  .part-detail-evidence-grid,
  .part-detail-related-grid { grid-template-columns: 1fr; }
  .part-detail-status-grid { margin: 22px 0 26px; }
  .part-detail-evidence-grid { margin: 22px 0; }
  .part-detail-related-grid { margin-top: 28px; }
  .part-detail-related-card { min-height: 0; padding: 18px; }
}

/* v56 second-level media contract: one predictable card system for every
   equipment-detail route. Source images stay uncropped via contain; the
   media frame, grid and CTA rhythm are standardized at each breakpoint. */
.equipment-detail-v5 .v5-detail-system-map__branches {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 38px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  align-items: stretch !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch,
.equipment-detail-v5 .v5-detail-system-map__branch:nth-child(n),
.equipment-detail-v5 .v5-detail-system-map__branch:first-child,
.equipment-detail-v5 .v5-detail-system-map__branch:last-child {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  grid-column: auto !important;
  grid-row: auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: auto !important;
  padding: 0 0 18px !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch-media {
  box-sizing: border-box !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 3 / 2 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #e7edef !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch-media img {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > span,
.equipment-detail-v5 .v5-detail-system-map__branch > strong,
.equipment-detail-v5 .v5-detail-system-map__branch > small,
.equipment-detail-v5 .v5-detail-system-map__branch > p,
.equipment-detail-v5 .v5-detail-system-map__branch > b {
  box-sizing: border-box !important;
  margin-right: 20px !important;
  margin-left: 20px !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > span {
  margin-top: 17px !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > strong {
  margin-top: 10px !important;
  max-width: none !important;
  min-height: 2em !important;
  font-size: clamp(23px, 1.8vw, 30px) !important;
  line-height: .98 !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > small {
  margin-top: 7px !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > p {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.equipment-detail-v5 .v5-detail-system-map__branch > b {
  margin-top: auto !important;
  padding-top: 18px !important;
}

@media (min-width: 721px) and (max-width: 1050px) {
  .equipment-detail-v5 .v5-detail-system-map__branches {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-top: 30px !important;
  }
}

@media (max-width: 720px) {
  .equipment-detail-v5 .v5-detail-system-map__branches {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 12px !important;
    margin: 18px 0 0 !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch,
  .equipment-detail-v5 .v5-detail-system-map__branch:nth-child(n),
  .equipment-detail-v5 .v5-detail-system-map__branch:first-child,
  .equipment-detail-v5 .v5-detail-system-map__branch:last-child {
    height: auto !important;
    padding-bottom: 16px !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch > span,
  .equipment-detail-v5 .v5-detail-system-map__branch > strong,
  .equipment-detail-v5 .v5-detail-system-map__branch > small,
  .equipment-detail-v5 .v5-detail-system-map__branch > p,
  .equipment-detail-v5 .v5-detail-system-map__branch > b {
    margin-right: 16px !important;
    margin-left: 16px !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch > span {
    margin-top: 14px !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch > strong {
    margin-top: 8px !important;
    min-height: 0 !important;
    font-size: clamp(22px, 6.1vw, 27px) !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch > p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__branch > b {
    padding-top: 16px !important;
  }
}

/* v57 second-level shell contract: remove route-specific rail widths so all
   six equipment pages give their branch cards the same usable canvas. */
.equipment-detail-v5 .v5-detail-system-map {
  box-sizing: border-box !important;
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100% !important;
  padding: 16px !important;
}

.equipment-detail-v5 .v5-detail-system-map__hub {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 118px !important;
  height: auto !important;
  margin: 0 0 16px !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

@media (max-width: 720px) {
  .equipment-detail-v5 .v5-detail-system-map {
    padding: 12px !important;
  }

  .equipment-detail-v5 .v5-detail-system-map__hub {
    min-height: 122px !important;
    margin-bottom: 12px !important;
  }
}