.page-hero { position: relative; min-height: 410px; display: grid; align-items: end; padding-block: 90px 65px; color: #fff; background: var(--navy); isolation: isolate; overflow: hidden; }
.page-hero::before { position: absolute; inset: 0; z-index: -2; background: var(--page-image, url('images/industrial-automation.jpg')) center/cover no-repeat; content: ''; }
.page-hero::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,15,33,.96), rgba(8,15,33,.8) 58%, rgba(8,15,33,.32)); content: ''; }
.page-hero-content { max-width: 850px; }
.page-hero h1 { margin: 0; font: 800 clamp(38px, 5vw, 64px)/1.08 'Manrope', sans-serif; }
.page-hero p { max-width: 720px; margin: 20px 0 0; color: #d8dfeb; font-size: 18px; }
.product-hero { min-height: 540px; }
.product-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.product-hero-actions .button { color: #fff; }
.breadcrumbs { border-bottom: 1px solid var(--line); background: #fff; }
.breadcrumbs ol { min-height: 58px; display: flex; align-items: center; gap: 10px; margin-block: 0; margin-inline: auto; padding: 0 8px; list-style: none; color: var(--ink-soft); font-size: 13px; }
.breadcrumbs li + li::before { margin-right: 10px; color: #9ba5b5; content: '/'; }
.breadcrumbs a:hover { color: var(--red); }
.page-main { padding-block: 88px; }
.page-lead { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; margin-bottom: 58px; }
.page-lead h2 { margin: 0; font: 800 clamp(30px, 4vw, 46px)/1.12 'Manrope', sans-serif; }
.page-lead-copy { color: var(--ink-soft); font-size: 18px; }
.page-lead-copy p { margin: 0 0 18px; }
.section-heading { max-width: 720px; margin: 78px 0 30px; }
.section-heading h2 { margin: 7px 0 0; font: 800 clamp(28px, 4vw, 42px)/1.15 'Manrope', sans-serif; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card { min-height: 255px; padding: 34px; border: 1px solid var(--line); background: #fff; }
.value-card svg { width: 29px; height: 29px; margin-bottom: 44px; color: var(--red); stroke-width: 1.7; }
.value-card h3 { margin: 0 0 12px; font: 750 21px/1.25 'Manrope', sans-serif; }
.value-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.detail-card { min-height: 250px; padding: 30px; background: #fff; }
.detail-card > span { display: block; margin-bottom: 28px; color: var(--red); font: 700 11px 'Manrope', sans-serif; }
.detail-card h2, .detail-card h3 { margin: 0 0 13px; font: 700 20px/1.3 'Manrope', sans-serif; }
.detail-card p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.portfolio-case-grid { grid-template-columns: repeat(2, 1fr); }
.portfolio-case-grid .detail-card { min-height: 330px; scroll-margin-top: 120px; }
.portfolio-case-grid .detail-card:target { position: relative; z-index: 1; outline: 3px solid var(--red); outline-offset: -3px; }
.portfolio-case-grid .detail-card p + p { margin-top: 14px; }
.portfolio-case-grid .detail-card p:first-of-type { color: var(--red); font: 700 11px/1.5 'Manrope', sans-serif; text-transform: uppercase; }
.page-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; margin-top: 72px; padding: 48px; background: var(--mist); }
.page-band h2 { margin: 0 0 25px; font: 800 30px/1.2 'Manrope', sans-serif; }
.outcome-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.outcome-list li { display: flex; gap: 10px; color: var(--ink); font-weight: 600; }
.outcome-list svg { flex: 0 0 19px; width: 19px; color: var(--teal); }
.delivery-section { padding-block: 88px; border-top: 1px solid var(--line); background: #fff; }
.delivery-heading { margin-top: 0; }
.delivery-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 42px 0 0; padding: 0; list-style: none; counter-reset: delivery; }
.delivery-steps li { position: relative; min-height: 225px; padding: 30px 28px 25px; border-top: 2px solid var(--line); }
.delivery-steps li::before { position: absolute; top: -7px; left: 28px; width: 12px; height: 12px; border: 3px solid #fff; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1px var(--red); content: ''; }
.delivery-steps span { display: block; margin-bottom: 42px; color: var(--red); font: 700 11px 'Manrope', sans-serif; }
.delivery-steps h3 { margin: 0 0 10px; font: 750 20px 'Manrope', sans-serif; }
.delivery-steps p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.related-section { padding-block: 78px; background: var(--navy); color: #fff; }
.related-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.related-head h2 { margin: 0; font: 800 34px/1.15 'Manrope', sans-serif; }
.related-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.18); }
.related-links a { min-height: 115px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; background: #182648; font: 600 16px 'Manrope', sans-serif; }
.related-links a:hover { background: #213158; }
.related-links svg { width: 18px; color: #ff6576; }
.page-cta { padding-block: 58px; background: var(--red); color: #fff; }
.page-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.page-cta .eyebrow { color: #fff; opacity: .78; }
.page-cta h2 { max-width: 760px; margin: 5px 0 0; font: 800 clamp(28px, 4vw, 42px)/1.12 'Manrope', sans-serif; }
.page-cta .button { flex: 0 0 auto; border-color: #fff; background: #fff; color: var(--navy); }
.page-cta .button:hover { background: var(--navy); color: #fff; }
.management-section { padding-block: 88px; background: var(--navy); color: #fff; }
.management-head { display: grid; grid-template-columns: 1fr .9fr; align-items: end; gap: 80px; margin-bottom: 46px; }
.management-head h2 { max-width: 650px; margin: 5px 0 0; font: 800 clamp(34px, 4.5vw, 52px)/1.08 'Manrope', sans-serif; }
.management-head > p { margin: 0; color: #c4ccda; font-size: 17px; }
.management-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.17); }
.management-card { min-height: 180px; display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 24px; padding: 30px; background: #182648; }
.management-avatar { width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #ff6979; font: 750 20px 'Manrope', sans-serif; }
.management-card h3 { margin: 0 0 5px; font: 750 21px 'Manrope', sans-serif; }
.management-card p { margin: 0; color: #d4dbe7; }
.management-card span { display: block; margin-top: 6px; color: #8795ad; font-size: 12px; text-transform: uppercase; }
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; }
.contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.form-field { display: grid; gap: 7px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 14px; border: 1px solid #cfd6df; border-radius: 3px; background: #fff; color: var(--ink); }
.form-field textarea { min-height: 150px; resize: vertical; }
.contact-form .button { width: max-content; border: 0; cursor: pointer; }
.contact-aside { padding: 34px; background: var(--mist); }
.contact-aside h2 { margin-top: 0; font: 700 25px 'Manrope', sans-serif; }
.contact-detail { padding: 18px 0; border-top: 1px solid var(--line); }
.contact-detail span, .contact-detail strong, .contact-detail a { display: block; }
.contact-detail span { margin-bottom: 4px; color: var(--ink-soft); font-size: 12px; text-transform: uppercase; }
.contact-detail a + a { margin-top: 4px; }
.contact-detail a:hover { color: var(--red); }
.product-faq { padding-block: 88px; background: var(--mist); }
.product-faq .section-heading { margin-top: 0; }
.faq-list { display: grid; gap: 10px; max-width: 900px; }
.faq-list details { padding: 22px 24px; border: 1px solid var(--line); background: #fff; }
.faq-list summary { font: 700 17px 'Manrope', sans-serif; cursor: pointer; }
.faq-list p { margin: 14px 0 0; color: var(--ink-soft); }
.resource-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.resource-filter button { min-height: 42px; padding: 8px 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; }
.resource-filter button:hover, .resource-filter button.is-active { border-color: var(--red); background: var(--red); color: #fff; }
.resource-library .resource-card[hidden] { display: none; }

.orientation-main .page-lead { margin-bottom: 46px; }
.orientation-grid .detail-card { min-height: 275px; }
.orientation-grid .detail-card > span { font-size: 13px; }

.about-hero { min-height: 680px; }
.about-hero .page-hero-content { max-width: 1040px; }
.about-hero h1 { max-width: 950px; }
.about-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 42px; background: rgba(255,255,255,.28); }
.about-hero-stats div { min-height: 112px; padding: 22px; background: rgba(9,16,34,.72); }
.about-hero-stats strong, .about-hero-stats span { display: block; }
.about-hero-stats strong { color: #fff; font: 800 24px/1.1 'Manrope', sans-serif; }
.about-hero-stats span { margin-top: 8px; color: #cbd4e2; font-size: 12px; line-height: 1.4; }
.about-section { padding-block: 92px; background: #fff; }
.about-origin { background: var(--mist); }
.about-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.about-split h2, .about-section-head h2, .about-proof-head h2 { margin: 0; font: 800 clamp(34px, 4.5vw, 52px)/1.08 'Manrope', sans-serif; }
.about-prose { color: var(--ink-soft); font-size: 17px; }
.about-prose p { margin: 0 0 20px; }
.about-prose strong { color: var(--ink); }
.about-six-m { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 56px; border: 1px solid var(--line); }
.about-six-m div { min-height: 130px; padding: 24px 18px; border-right: 1px solid var(--line); }
.about-six-m div:last-child { border-right: 0; }
.about-six-m strong, .about-six-m span { display: block; }
.about-six-m strong { color: var(--red); font: 750 17px/1.2 'Manrope', sans-serif; }
.about-six-m span { margin-top: 12px; color: var(--ink-soft); font-size: 13px; }
.about-proof { padding-block: 88px; background: var(--navy); color: #fff; }
.about-proof-head { max-width: 700px; margin-bottom: 42px; }
.about-proof-head .eyebrow { color: #ff6576; }
.about-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.18); }
.about-proof-grid article { min-height: 230px; padding: 32px 28px; background: #182648; }
.about-proof-grid strong { display: block; color: #ff6576; font: 800 38px/1.05 'Manrope', sans-serif; }
.about-proof-grid p { margin: 30px 0 0; color: #cbd4e2; font-size: 14px; }
.about-proof-grid .about-proof-wide { min-height: 160px; grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 40px; }
.about-proof-grid .about-proof-wide strong { font-size: 22px; }
.about-proof-grid .about-proof-wide p { margin: 0; font-size: 16px; }
.about-section-head { max-width: 820px; margin-bottom: 44px; }
.about-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.about-choice { min-height: 245px; padding: 32px; background: #fff; }
.about-choice > span { color: var(--red); font: 700 11px 'Manrope', sans-serif; }
.about-choice h3 { margin: 36px 0 12px; font: 750 21px/1.25 'Manrope', sans-serif; }
.about-choice p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.about-mascot { border-top: 1px solid var(--line); }
.about-poc { padding-block: 72px; background: var(--red); color: #fff; }
.about-poc-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.about-poc .eyebrow { color: #fff; opacity: .82; }
.about-poc h2 { margin: 0; font: 800 clamp(32px, 4vw, 48px)/1.08 'Manrope', sans-serif; }
.about-poc p:not(.eyebrow) { max-width: 760px; margin: 16px 0 0; }
.about-poc .button { flex: 0 0 auto; border-color: #fff; background: #fff; color: var(--navy); }

@media (max-width: 980px) {
  .page-lead, .contact-layout { grid-template-columns: 1fr; gap: 35px; }
  .value-grid, .detail-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card:last-child { grid-column: 1 / -1; }
  .page-band { grid-template-columns: 1fr; gap: 25px; }
  .related-links { grid-template-columns: 1fr 1fr; }
  .delivery-steps { grid-template-columns: repeat(2, 1fr); }
  .management-head { grid-template-columns: 1fr; gap: 24px; }
  .page-cta-inner { align-items: flex-start; flex-direction: column; }
  .about-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 1fr; gap: 34px; }
  .about-six-m { grid-template-columns: repeat(3, 1fr); }
  .about-six-m div:nth-child(3) { border-right: 0; }
  .about-six-m div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .about-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .about-poc-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
  .page-hero { min-height: 360px; padding-block: 65px 48px; }
  .page-hero h1 { font-size: 38px; }
  .page-hero p { font-size: 16px; }
  .product-hero { min-height: 440px; }
  .page-main { padding-block: 62px; }
  .section-heading { margin-top: 58px; }
  .value-grid, .detail-grid, .related-links, .contact-form, .delivery-steps { grid-template-columns: 1fr; }
  .value-card { min-height: 0; }
  .value-card:last-child { grid-column: auto; }
  .detail-card { min-height: 0; }
  .page-band { margin-top: 50px; padding: 32px 24px; }
  .delivery-section { padding-block: 62px; }
  .delivery-steps li { min-height: 0; padding-inline: 24px; }
  .page-cta { padding-block: 48px; }
  .page-cta .button { width: 100%; justify-content: center; }
  .management-section { padding-block: 62px; }
  .management-grid { grid-template-columns: 1fr; }
  .management-card { min-height: 0; grid-template-columns: 58px 1fr; padding: 24px 20px; }
  .management-avatar { width: 58px; height: 58px; font-size: 16px; }
  .form-field-full { grid-column: auto; }
  .related-head { display: block; }
  .about-hero { min-height: 640px; }
  .about-hero-stats { grid-template-columns: 1fr 1fr; }
  .about-hero-stats div { min-height: 102px; padding: 18px; }
  .about-section, .about-proof { padding-block: 64px; }
  .about-six-m { grid-template-columns: 1fr 1fr; }
  .about-six-m div, .about-six-m div:nth-child(3) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .about-six-m div:nth-child(even) { border-right: 0; }
  .about-six-m div:nth-last-child(-n+2) { border-bottom: 0; }
  .about-proof-grid, .about-choice-grid { grid-template-columns: 1fr; }
  .about-proof-grid .about-proof-wide { grid-template-columns: 1fr; gap: 8px; }
  .about-poc { padding-block: 56px; }
  .about-poc .button { width: 100%; justify-content: center; }
}