/* HENGDE Visual System v1.0 — shared heroes, section rhythm and final CTA. */
:root {
  --hd-vs-navy: #0b2845;
  --hd-vs-navy-2: #123b61;
  --hd-vs-ink: #10243a;
  --hd-vs-muted: #5c6f82;
  --hd-vs-line: #d8e2eb;
  --hd-vs-soft: #f5f8fb;
  --hd-vs-soft-blue: #eef3f8;
  --hd-vs-orange: #d84b00;
  --hd-vs-shell: 1240px;
}

.hd-page-hero { position: relative; isolation: isolate; overflow: hidden; }
.hd-page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgba(11,40,69,.14); pointer-events: none; }
.hd-page-hero--level-a { min-height: clamp(560px, 43vw, 680px); }
.hd-page-hero--level-b { min-height: clamp(360px, 34vw, 480px); }
.hd-page-hero--level-c { min-height: 320px; }
.hd-page-hero--production { background: linear-gradient(125deg, #071d32 0%, #0b2845 48%, #123b61 100%); }
.hd-page-hero--equipment { background: linear-gradient(135deg, #eef3f8 0%, #fff 64%); }
.hd-page-hero--project { background: linear-gradient(120deg, #071d32 0%, #123b61 100%); }
.hd-page-hero--resource,
.hd-page-hero--article { background: linear-gradient(135deg, #f5f8fb, #eef3f8); }
.hd-page-hero--service { background: linear-gradient(135deg, #eef3f8, #fff); }
.hd-page-hero--company { background: linear-gradient(120deg, #0b2845, #163f65); }
.hd-page-hero--contact { background: linear-gradient(120deg, #081f36, #123b61); }
body.hd-v3 .inner-hero.hd-page-hero--production,
body.hd-v3 .inner-hero.hd-page-hero--project,
body.hd-v3 .inner-hero.hd-page-hero--company,
body.hd-v3 .inner-hero.hd-page-hero--contact { background: linear-gradient(120deg, #071d32, #123b61); color: #fff; }
body.hd-v3 .inner-hero.hd-page-hero--equipment,
body.hd-v3 .inner-hero.hd-page-hero--resource,
body.hd-v3 .inner-hero.hd-page-hero--service,
body.hd-v3 .inner-hero.hd-page-hero--article { background: linear-gradient(135deg, #f5f8fb, #eef3f8); color: var(--hd-vs-ink); }

.hd-page-hero .inner-hero-stage,
.hd-page-hero .ls-shell,
.hd-page-hero .shell { position: relative; z-index: 2; }
.hd-page-hero--level-a .inner-hero-stage { padding-top: clamp(54px, 6vw, 92px); padding-bottom: clamp(54px, 6vw, 88px); }
.hd-page-hero--level-b .inner-hero-stage,
.hd-page-hero--level-c .inner-hero-stage { padding-top: clamp(38px, 4vw, 64px); padding-bottom: clamp(38px, 4vw, 62px); }

.hd-page-hero--production .hero-copy,
.hd-page-hero--project .hero-copy,
.hd-page-hero--company .hero-copy,
.hd-page-hero--contact .hero-copy { color: #fff; }
.hd-page-hero--production .hero-copy h1,
.hd-page-hero--project .hero-copy h1,
.hd-page-hero--company .hero-copy h1,
.hd-page-hero--contact .hero-copy h1 { color: #fff; }
.hd-page-hero--production .hero-copy > p,
.hd-page-hero--project .hero-copy > p,
.hd-page-hero--company .hero-copy > p,
.hd-page-hero--contact .hero-copy > p { color: rgba(255,255,255,.82); }

/*
 * V3's earlier light-page presentation layer has a more specific inner-hero
 * selector. Dark visual-system heroes must retain accessible contrast without
 * changing the light Equipment, Resource or Service variants.
 */
body.hd-v3 .inner-hero.hd-page-hero--production .hero-copy h1,
body.hd-v3 .inner-hero.hd-page-hero--project .hero-copy h1,
body.hd-v3 .inner-hero.hd-page-hero--company .hero-copy h1,
body.hd-v3 .inner-hero.hd-page-hero--contact .hero-copy h1 {
  color: #fff !important;
  text-shadow: 0 2px 20px rgba(3,20,35,.22);
}
body.hd-v3 .inner-hero.hd-page-hero--production .hero-copy > p,
body.hd-v3 .inner-hero.hd-page-hero--project .hero-copy > p,
body.hd-v3 .inner-hero.hd-page-hero--company .hero-copy > p,
body.hd-v3 .inner-hero.hd-page-hero--contact .hero-copy > p {
  color: #d7e4ef !important;
}
body.hd-v3 .inner-hero.hd-page-hero--production .breadcrumb,
body.hd-v3 .inner-hero.hd-page-hero--production .breadcrumb a,
body.hd-v3 .inner-hero.hd-page-hero--production .breadcrumb span,
body.hd-v3 .inner-hero.hd-page-hero--project .breadcrumb,
body.hd-v3 .inner-hero.hd-page-hero--project .breadcrumb a,
body.hd-v3 .inner-hero.hd-page-hero--project .breadcrumb span,
body.hd-v3 .inner-hero.hd-page-hero--company .breadcrumb,
body.hd-v3 .inner-hero.hd-page-hero--company .breadcrumb a,
body.hd-v3 .inner-hero.hd-page-hero--company .breadcrumb span,
body.hd-v3 .inner-hero.hd-page-hero--contact .breadcrumb,
body.hd-v3 .inner-hero.hd-page-hero--contact .breadcrumb a,
body.hd-v3 .inner-hero.hd-page-hero--contact .breadcrumb span {
  color: #b9ccdc !important;
}
body.hd-v3 .inner-hero.hd-page-hero--production .inner-hero-trust,
body.hd-v3 .inner-hero.hd-page-hero--project .inner-hero-trust,
body.hd-v3 .inner-hero.hd-page-hero--company .inner-hero-trust,
body.hd-v3 .inner-hero.hd-page-hero--contact .inner-hero-trust {
  color: #75cfff !important;
}
.hd-page-hero .inner-hero-grid { align-items: center; gap: clamp(32px, 5vw, 72px); }
.hd-page-hero .hero-copy h1 { max-width: 780px; margin: 0; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.hd-page-hero--level-b .hero-copy h1,
.hd-page-hero--level-c .hero-copy h1 { font-size: clamp(36px, 4vw, 56px); }
.hd-page-hero .hero-copy > p { max-width: 720px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; }
.hd-page-hero .breadcrumb { margin: 0 0 22px; }
.hd-page-hero--production .breadcrumb,
.hd-page-hero--project .breadcrumb,
.hd-page-hero--company .breadcrumb,
.hd-page-hero--contact .breadcrumb,
.hd-page-hero--production .breadcrumb a,
.hd-page-hero--project .breadcrumb a,
.hd-page-hero--company .breadcrumb a,
.hd-page-hero--contact .breadcrumb a { color: rgba(255,255,255,.72); }
.hd-page-hero .inner-engineering-panel { border-radius: 18px; overflow: hidden; box-shadow: 0 22px 54px rgba(5,25,44,.22); }
.hd-page-hero .inner-engineering-media { aspect-ratio: 16 / 10; min-height: 0; }
.hd-page-hero .inner-engineering-media img { width: 100%; height: 100%; object-fit: cover; }
.hd-page-hero .drawing-panel .inner-engineering-media img { object-fit: contain; background: #fff; }
.hd-page-hero .inner-proof-wrap { position: relative; z-index: 3; margin-top: 0; }
.hd-page-hero .proof-strip { border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(6,30,52,.1); }

.hd-section { position: relative; padding-block: clamp(64px, 7vw, 104px); }
.hd-section--white { background: #fff; }
.hd-section--soft { background: var(--hd-vs-soft); }
.hd-section--media { background: var(--hd-vs-soft-blue); }
.hd-section--dark { background: var(--hd-vs-navy); color: #fff; }
.hd-section--cta { background: var(--hd-vs-navy); color: #fff; }
.hd-section + .hd-section { border-top: 1px solid rgba(11,40,69,.06); }
.hd-section .inner-section-heading { margin-bottom: clamp(30px, 4vw, 54px); }
.hd-section .section-order { color: #2c78ba; opacity: .7; }

.hd-final-cta { padding: clamp(54px, 6vw, 82px) 24px; border-top: 0; }
.hd-final-cta__inner { width: min(var(--hd-vs-shell), 100%); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.hd-final-cta__inner > div:first-child { max-width: 760px; }
.hd-final-cta span { color: #66cdfc; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.hd-final-cta h2 { margin: 10px 0 12px; color: #fff; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -.035em; }
.hd-final-cta p { margin: 0; color: rgba(255,255,255,.75); font-size: 18px; }
.hd-final-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
.hd-visual-button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 7px; font-weight: 800; text-decoration: none; }
.hd-visual-button--orange { background: var(--hd-vs-orange); color: #fff; }
.hd-visual-button--outline { border-color: rgba(255,255,255,.58); color: #fff; }

/* Existing V8 pages now inherit one shared visual contract. */
.v8-content-page > .inner-hero.hd-page-hero { padding: 0; }
.v8-content-page > .inner-section-nav { margin-block: 0; padding-block: 22px; }
.v8-content-page > .content-section.hd-section { margin: 0; }
.v8-content-page > .closing-cta { margin: 0; }
.v8-content-page > .closing-cta .closing-grid { min-height: 210px; }

/* Contact: branded hero first, operational information below. */
.contact-visual-hero { color: #fff; }
.contact-visual-hero__grid { min-height: clamp(520px, 42vw, 650px); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); align-items: center; gap: clamp(40px,6vw,86px); padding-block: clamp(62px,7vw,98px); }
.contact-visual-hero__copy h1 { margin: 14px 0 20px; color: #fff; font-size: clamp(42px,4.8vw,68px); line-height: 1.02; letter-spacing: -.045em; }
.contact-visual-hero__copy > p { max-width: 680px; color: rgba(255,255,255,.8); font-size: 19px; line-height: 1.7; }
.contact-visual-hero__media { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.contact-visual-hero__media picture { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.contact-visual-hero__media img,
.contact-visual-hero__media img.v8-media-fill { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.contact-visual-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: rgba(255,255,255,.18); }
.contact-visual-facts div { padding: 15px 17px; background: rgba(8,31,54,.94); }
.contact-visual-facts strong { display: block; color: #fff; font-size: 14px; }
.contact-visual-facts span { color: rgba(255,255,255,.65); font-size: 12px; }
.contact-page .contact-stage { background: var(--hd-vs-soft); padding-block: clamp(64px,7vw,96px); }
.contact-page .contact-stage > .shell:first-child { display: none; }

/* Line-system pages share the same component names without changing their data. */
.ls-main > .ls-shell { max-width: 1240px; }
.ls-main .hd-page-hero { margin-top: 14px; border-radius: 24px; padding: clamp(30px,4vw,54px); }
.ls-main .hd-page-hero--level-a { min-height: clamp(520px,43vw,650px); }
.ls-main .hd-page-hero--level-b { min-height: clamp(360px,32vw,470px); }
.ls-main .hd-page-hero .ls-hero-copy h1 { font-size: clamp(40px,4.4vw,66px); }
.ls-main .hd-page-hero--level-b .ls-hero-copy h1 { font-size: clamp(36px,3.8vw,52px); }
.ls-main .hd-page-hero--production .ls-hero-copy h1,
.ls-main .hd-page-hero--production .ls-hero-copy > p,
.ls-main .hd-page-hero--production .ls-kicker,
.ls-main .hd-page-hero--project .ls-hero-copy h1,
.ls-main .hd-page-hero--project .ls-hero-copy > p { color: #fff; }
.ls-commercial-hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); align-items: center; gap: clamp(34px,5vw,68px); }
.ls-commercial-hero__media { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 48px rgba(4,27,48,.24); }
.ls-commercial-hero__media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ls-commercial-hero__media.is-drawing img { object-fit: contain; }
.ls-commercial-hero__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 8px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.2); }
.ls-commercial-hero__facts div { padding: 15px 18px; background: rgba(7,29,50,.94); }
.ls-commercial-hero__facts strong { display: block; color: #fff; font-size: 15px; }
.ls-commercial-hero__facts span { display: block; margin-top: 3px; color: rgba(255,255,255,.65); font-size: 12px; }
.ls-main .hd-section { margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc((100vw - 1240px)/2)); }
.ls-main .hd-section--soft { background: var(--hd-vs-soft); }
.ls-main .hd-section--media { background: var(--hd-vs-soft-blue); }
.ls-main .ls-catalog-tools { margin-top: 0; padding-top: 72px; }
.ls-main .ls-family-capacity-cards,
.ls-main .ls-production-gallery,
.ls-main .ls-equipment-gallery,
.ls-main .ls-related-projects { background: var(--hd-vs-soft); }
.ls-main .ls-variant-section,
.ls-main #equipment-list,
.ls-main .ls-route-evidence { background: #fff; }
.ls-main .ls-line-inquiry { background: var(--hd-vs-navy); color: #fff; }
.ls-main .ls-line-inquiry h2,
.ls-main .ls-line-inquiry h3 { color: #fff; }
.ls-main .ls-line-inquiry p { color: rgba(255,255,255,.76); }

/* Editorial hierarchy remains readable rather than becoming a full-screen banner. */
.hd-news-editorial .hd-news-header { background: linear-gradient(135deg,#f5f8fb,#eef3f8); border-bottom: 1px solid var(--hd-vs-line); }
.hd-news-editorial .hd-news-hero-grid { padding-block: clamp(36px,5vw,70px); }
.hd-news-editorial .hd-news-hero img { aspect-ratio: 16/10; object-fit: cover; }
.v8-content-page .inner-hero-news,
.v8-content-page .inner-hero-resources,
.v8-content-page .inner-hero-faq,
.v8-content-page .inner-hero-downloads,
.v8-content-page .inner-hero-factory-videos { background: linear-gradient(135deg,#f5f8fb,#eef3f8); }

@media (max-width: 980px) {
  .hd-page-hero--level-a,.hd-page-hero--level-b,.hd-page-hero--level-c { min-height: 0; }
  .ls-commercial-hero,.contact-visual-hero__grid { grid-template-columns: 1fr; }
  .contact-visual-hero__grid { padding-block: 52px; }
  .hd-final-cta__inner { align-items: flex-start; flex-direction: column; }
  .ls-commercial-hero__facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .hd-page-hero .hero-copy h1,
  .contact-visual-hero__copy h1,
  .ls-main .hd-page-hero .ls-hero-copy h1 { font-size: clamp(34px,10.5vw,44px); }
  .hd-page-hero--level-a .inner-hero-stage,
  .hd-page-hero--level-b .inner-hero-stage,
  .hd-page-hero--level-c .inner-hero-stage { padding-top: 34px; padding-bottom: 34px; }
  .hd-page-hero .hero-actions,.hd-final-cta__actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .hd-page-hero .hero-actions a,.hd-final-cta__actions a { width: 100%; }
  .hd-page-hero .proof-strip { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 0; }
  .hd-section { padding-block: 54px; }
  .ls-main .hd-page-hero { margin-inline: -10px; padding: 22px; border-radius: 0; }
  .ls-commercial-hero__media img { aspect-ratio: 4/3; }
  .ls-commercial-hero__facts,.contact-visual-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-visual-hero__media picture { aspect-ratio: 16/10; }
  .contact-visual-hero__grid { gap: 30px; }
}

@media (max-width: 360px) {
  .hd-page-hero .hero-copy h1,
  .contact-visual-hero__copy h1,
  .ls-main .hd-page-hero .ls-hero-copy h1 { font-size: 32px; }
  .ls-commercial-hero__facts,.contact-visual-facts,.hd-page-hero .proof-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-page-hero *, .hd-section *, .hd-final-cta * { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; }
}