/* About HITEC: engineering, company history and integration. Footer is deliberately outside this scope. */
.about-industrial .ai-wrap { width: min(1320px,calc(100% - 112px)); margin-inline: auto; }
.ai-hero { display: grid; grid-template-columns: 1fr; min-height: 440px; background: #202b30; }
.ai-hero__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ai-label { margin: 0 0 20px; font-size: 14px; color: #59666f; font-weight: 500; letter-spacing: .035em; }
.ai-link { display: inline-flex; gap: 30px; align-items: center; font-size: 16px; color: #303b43; font-weight: 500; border-bottom: 1px solid #b9c2c7; padding-block: 9px; }
.ai-link:hover { color: #b8222b; border-color: #b8222b; }
/* One restrained brand introduction; layout stays fixed while letters appear. */
.htw { --htw-bg:#202b30; --htw-fg:#f4f6f6; --htw-accent:#b8222b; position:relative; overflow:hidden; background:var(--htw-bg) url("../../img/about-poster.webp?v=20261022-1") center / cover; color:var(--htw-fg); min-width:0; min-height:0; }
.htw-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.htw::after { content:""; position:absolute; inset:0; background:rgba(13,22,27,.57); pointer-events:none; }
.htw-bg { z-index:1; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; user-select:none; font-family:'Inter','Noto Sans TC',sans-serif; }
.htw-composition { display:grid; justify-items:center; gap:26px; }
.htw-line { display:flex; align-items:center; gap:.3em; white-space:pre; font-size:clamp(28px,6vw,100px); font-weight:600; letter-spacing:-.045em; line-height:1.1; }
.htw-word { display:grid; position:relative; }
.htw-word::before { content:attr(data-full-text); visibility:hidden; grid-area:1/1; padding-right:calc(.09em + 2px); }
.htw-typed { grid-area:1/1; justify-self:start; display:flex; align-items:center; }
.htw-caret { display:inline-block; flex:none; width:2px; height:.76em; margin-left:.09em; background:#b9c7cd; opacity:0; }
.htw.is-typing .htw-caret { opacity:1; animation:htw-caret-blink .7s step-end infinite; }
.htw-since { margin:0; font-size:clamp(12px,1.05vw,15px); font-weight:500; letter-spacing:.18em; color:#b6c4cb; line-height:1.5; opacity:1; transition:opacity .65s ease; }
.htw.is-typing:not(.is-revealed) .htw-since { opacity:0; }
@keyframes htw-caret-blink { 50% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .htw-video { display:none; } .htw-since { transition:none; } .htw.is-typing .htw-caret { animation:none; opacity:0; } }
.ai-intro { display: grid; grid-template-columns: minmax(260px,.75fr) 1.65fr; gap: 18px 56px; padding-block: 48px 30px; scroll-margin-top: 104px; }
.ai-intro__heading { display: contents; }
.ai-intro__heading .ai-label { grid-column: 1 / -1; margin-bottom: 0; }
.ai-intro__heading h2 { grid-column: 1; }
.about-industrial h2 { font-size: clamp(27px,2.5vw,38px); font-weight: 600; line-height: 1.5; letter-spacing: -.03em; margin: 0; white-space: pre-line; text-wrap: balance; }
.ai-intro__body { padding-top: 0; grid-column: 2; }
.ai-intro__body > p { font-size: 17px; line-height: 2; color: #53616b; margin: 0 0 16px; }
.ai-capabilities { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding-block: 15px 55px; }
.ai-intro > div:first-child .ai-label { display: flex; align-items: center; gap: 12px; color: #a9232c; }
.ai-intro > div:first-child .ai-label::before { content: ''; width: 26px; height: 2px; background: #b8222b; }
.ai-capabilities article { min-width: 0; background: #f0f4f4; }
.ai-capability-photo { margin: 0; height: 180px; overflow: hidden; }
.ai-capability-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-capabilities article:first-child .ai-capability-photo img { object-position: center 56%; }
.ai-capabilities article:nth-child(2) .ai-capability-photo img { object-position: center 65%; }
.ai-capabilities article:last-child .ai-capability-photo img { object-position: center 65%; }
.ai-capability-copy { position: relative; padding: 24px 25px 26px; }
.ai-capability-copy::before { content: ''; position: absolute; top: 0; left: 25px; width: 32px; height: 3px; background: #b8222b; }
.ai-capabilities h3 { margin: 0 0 13px; font-size: 20px; font-weight: 600; color: #2b363e; }
.ai-capabilities p { font-size: 16px; line-height: 1.9; color: #53616b; margin: 0; max-width: 350px; }
.ai-history { border-top: 1px solid #e3e7e9; padding-block: 40px 48px; }
.ai-section-head { display: block; margin-bottom: 24px; }
.ai-section-head .ai-label { margin: 0 0 8px; }
.ai-section-head h2 { font-size: 28px; }
.ai-timeline { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); list-style: none; padding: 0; margin: 0; gap: 0; background: #f4f6f6; }
.ai-timeline li { position: relative; border-top: 1px solid #c8d1d4; padding: 22px 22px 24px; }
.ai-timeline li:last-child { background: #f8eeee; border-color: #b8222b; }
.ai-timeline li:last-child .ai-year { color: #b8222b; }
.ai-timeline li::before { content: ''; position: absolute; top: -5px; left: 22px; width: 9px; height: 9px; outline: 4px solid #fff; background: #b8222b; border-radius: 50%; }
.ai-year { font-family: Saira,var(--font-sans); font-size: 30px; font-weight: 500; line-height: 1.4; color: #303b43; }
.ai-timeline p { font-size: 16px; line-height: 1.85; color: #59666f; margin: 12px 0 0; }
.ai-global { background: #f2f4f4; padding-block: 56px; }
.ai-global__grid { display: grid; grid-template-columns: .85fr 1.6fr; gap: 55px; align-items: center; }
.ai-global__copy h2 { font-size: 29px; }
.ai-global__number { margin: 22px 0 0; color: #b0222b; font-family: Saira,var(--font-sans); font-size: 88px; font-weight: 500; line-height: 1.1; letter-spacing: -.045em; }
.ai-global__number span { font-size: 44px; vertical-align: top; padding-left: 5px; }
.ai-global__caption { font-size: 16px; color: #45525b; margin: 8px 0 20px; }
.ai-global__body { font-size: 16px; line-height: 1.9; color: #59666f; margin: 0; max-width: 360px; }
.ai-global__map { margin: 0; }
.ai-global__map img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.ai-systems { background: #20272c; color: #fff; padding-block: 65px 52px; }
.ai-systems__head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 75px; margin-bottom: 38px; }
.ai-systems .ai-label { color: #b8c2c9; }
.ai-systems__head h2 { font-size: clamp(32px,3.1vw,44px); font-weight: 500; line-height: 1.45; letter-spacing: -.025em; margin: 0; }
.ai-systems__head .ai-label { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ai-systems__head .ai-label::before { content: ''; width: 22px; height: 2px; background: #ed4751; }
.ai-systems__copy { max-width: 540px; }
.ai-systems__copy > p { margin: 0; font-size: 19px; line-height: 1.9; color: #d7dfe4; text-wrap: pretty; }
.ai-systems__copy > .ai-systems__note { margin-top: 18px; font-size: 15px; line-height: 1.8; color: #a8b6c0; }
.ai-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; list-style: none; margin: 0 0 36px; padding: 0; }
.ai-flow li { position: relative; min-width: 0; padding: 0 28px 20px; }
.ai-flow li:first-child { padding-left: 0; }
.ai-flow li:last-child { padding-right: 0; }
.ai-diagram { container-type: inline-size; position: relative; height: 200px; display: grid; place-items: center; margin-bottom: 25px; color: #b7c5cd; }
.ai-diagram svg { width: min(100%,340px); height: 100%; position: relative; z-index: 1; background: #20272c; }
.ai-diagram__accent { stroke: #ed4751; }
.ai-flow li:not(:last-child) .ai-diagram::after { content: ''; position: absolute; top: 50%; left: calc(50% + 155px); width: calc(100% - 255px); height: 1px; background: #56616a; z-index: 2; }
.ai-flow li:not(:last-child) .ai-diagram::before, .ai-output-packet {
 content: ''; position: absolute; top: calc(50% - 4px); left: calc(50% + 155px);
 width: calc(100% - 255px); height: 8px; z-index: 3;
 background-image: radial-gradient(ellipse 3px 2px at calc(100% - 3px) 50%, #ffe2e4 0%, #f6747d 40%, transparent 100%), linear-gradient(90deg, transparent, #ed475130 25%, #ed4751 90%, transparent);
 background-size: 32px 8px, 32px 2px; background-repeat: no-repeat;
 background-position: -32px 50%; filter: drop-shadow(0 0 3px #ed475160);
 animation: ai-signal 5.4s linear infinite;
}
.ai-flow li:nth-child(2) .ai-diagram::before { animation-delay: 2.4s; }
.ai-flow li:first-child .ai-diagram::before, .ai-flow li:first-child .ai-diagram::after { display: none; }
.ai-machine-links {
 --wire-art: min(100cqw,340px); --wire-next-art: min(calc(100cqw - 28px),340px);
 position: absolute; left: calc(50% + var(--wire-art) * .375 + 24px); top: 50%;
 width: calc(100% + 18px - var(--wire-art) * .375 - var(--wire-next-art) * .403125);
 height: calc(var(--wire-art) * .3); transform: translateY(-50%); z-index: 2; pointer-events: none;
}
.ai-machine-links i { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #56616a; }
.ai-machine-links i:nth-child(2) { top: 50%; }
.ai-machine-links i:nth-child(3) { top: 100%; }
.ai-machine-links i b {
 position: absolute; inset: -4px 0 auto; height: 8px; opacity: 0;
 background-image: radial-gradient(ellipse 3px 2px at calc(100% - 3px) 50%, #ffe2e4 0%, #f6747d 40%, transparent 100%), linear-gradient(90deg, transparent, #ed475130 25%, #ed4751 90%, transparent);
 background-size: 32px 8px,32px 2px; background-repeat: no-repeat; background-position: -32px 50%;
 filter: drop-shadow(0 0 3px #ed475160);
}
@media (prefers-reduced-motion: reduce) { .ai-machine-links i b { animation: none; opacity: 0; } }
.ai-flow li:nth-child(2) .ai-diagram::before { display: none; }
.ai-output-packet { animation: none; opacity: 0; }
.ai-monitor-chart { opacity: 0; transition: opacity .2s ease; }
.ai-monitor-chart.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ai-monitor-chart { transition: none; } }
.ai-flow__copy { width: min(100%,280px); margin: auto; text-align: left; padding-top: 4px; }
.ai-flow h3 { font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: .015em; margin: 0 0 13px; }
.ai-flow p { font-size: 16px; color: #b7c5ce; line-height: 1.9; margin: 0; white-space: pre-line; text-wrap: pretty; }
@keyframes ai-signal {
 0%,8% { background-position: -32px 50%; opacity: 0; }
 12% { opacity: 1; }
 42% { opacity: 1; }
 48%,100% { background-position: calc(100% + 32px) 50%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ai-flow li .ai-diagram::before { animation: none; opacity: 0; } }
.ai-system-details { border-top: 1px solid #47535c; border-bottom: 1px solid #47535c; }
.ai-system-details summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 17px; font-size: 16px; color: #d0d8de; cursor: pointer; list-style: none; }
.ai-system-details summary::-webkit-details-marker { display: none; }
.ai-details-symbol::after { content: '+'; font-size: 22px; font-weight: 400; }
.ai-system-details[open] .ai-details-symbol::after { content: '−'; }
.ai-system-details__content { padding-block: 0 20px; }
.ai-system-details__lead { font-size: 16px; line-height: 1.9; color: #c6d0d7; max-width: 900px; margin: 10px 0 28px; }
.ai-system-details__content article { display: grid; grid-template-columns: .8fr 1.4fr 1.4fr; gap: 28px; border-top: 1px solid #3f4c56; padding-block: 20px; }
.ai-system-details__content h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.8; }
.ai-system-details__content article p { font-size: 16px; line-height: 1.9; color: #c6d0d7; margin: 0; }
.ai-contact { display: flex; align-items: center; justify-content: space-between; gap: 45px; padding-block: 65px; }
.ai-contact h2 { font-size: 30px; }
.ai-contact__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ai-contact__actions .show-button { font-size: 16px; min-height: 50px; }
@media(max-width:1100px) {
 .ai-intro { column-gap: 36px; }
 .ai-global__grid { grid-template-columns: 1fr 1.3fr; gap: 30px; }
 .ai-contact { align-items: flex-start; }
 .ai-contact__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media(max-width:980px) {
 .about-industrial .ai-wrap { width: calc(100% - 64px); }
 .ai-hero { min-height: 390px; }
 .ai-intro { grid-template-columns: minmax(230px,.85fr) 1.35fr; gap: 16px 28px; padding-block: 40px 28px; }
 .ai-capabilities { gap: 25px; }
 .ai-timeline li { padding-inline: 14px; }
 .ai-timeline li::before { left: 14px; }
 .ai-year { font-size: 26px; }
 .ai-global__copy h2 { font-size: 25px; }
 .ai-systems__head { gap: 40px; }
}
@media(max-width:600px) {
 .about-industrial .ai-wrap { width: calc(100% - 40px); }
 .ai-hero { min-height: 0; }
 .ai-hero__animation { height: 300px; }
 .ai-intro { grid-template-columns: 1fr; gap: 14px; padding-block: 32px 24px; }
 .ai-intro__body { grid-column: 1; }
 .ai-intro__body > p { font-size: 16px; }
 .ai-capabilities { grid-template-columns: 1fr; gap: 24px; padding-block: 0 40px; }
 .ai-capabilities article { display: grid; grid-template-columns: 96px minmax(0,1fr); }
 .ai-capability-photo { height: 100%; min-height: 160px; }
 .ai-capability-copy { padding: 18px 16px; }
 .ai-capability-copy::before { left: 16px; width: 24px; }
 .ai-capabilities h3 { margin-bottom: 9px; }
 .ai-capabilities h3 { font-size: 19px; }
 .ai-capabilities p { max-width: none; }
 .ai-history { padding-block: 36px 40px; }
 .ai-section-head { margin-bottom: 22px; }
 .ai-section-head .ai-label { margin-bottom: 8px; }
 .ai-section-head h2 { font-size: 25px; }
 .ai-timeline { display: block; background: transparent; }
 .ai-timeline li { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 15px; border-top: 0; border-left: 1px solid #cfd6db; padding: 0 0 22px 20px; }
 .ai-timeline li:last-child { padding-block: 12px; border-color: #b8222b; }
 .ai-timeline li::before { top: 13px; left: -5px; }
 .ai-timeline li:last-child::before { top: 25px; }
 .ai-year { font-size: 24px; }
 .ai-timeline p { margin-top: 5px; }
 .ai-global { padding-block: 36px; }
 .ai-global__grid { grid-template-columns: 1fr; gap: 24px; }
 .ai-global__number { font-size: 72px; margin-top: 20px; }
 .ai-global__copy h2 { font-size: 28px; }
 .ai-global__body { max-width: none; }
 .ai-systems { padding-block: 40px; }
 .ai-systems__head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 25px; }
 .ai-systems__head h2 { font-size: 32px; line-height: 1.4; }
 .ai-systems__copy > p { font-size: 17px; }
 .ai-systems__copy > .ai-systems__note { margin-top: 12px; font-size: 15px; }
 .ai-flow { grid-template-columns: 1fr; gap: 0; margin-bottom: 18px; }
 .ai-flow li, .ai-flow li:first-child, .ai-flow li:last-child { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 20px; align-items: center; padding: 14px 0; }
 .ai-diagram { height: 110px; margin: 0; }
 .ai-flow__copy { margin: 0; text-align: left; padding-top: 0; }
 .ai-flow h3 { font-size: 19px; margin-bottom: 7px; }
 .ai-flow p { font-size: 15px; }
 .ai-flow li:not(:last-child) .ai-diagram::after { left: 50%; top: calc(100% - 10px); width: 1px; height: 48px; }
 .ai-flow li:not(:last-child) .ai-diagram::before, .ai-output-packet {
  left: calc(50% - 4px); top: calc(100% - 10px); width: 8px; height: 48px;
  background-image: radial-gradient(ellipse 2px 3px at 50% calc(100% - 3px), #ffe2e4 0%, #f6747d 40%, transparent 100%), linear-gradient(180deg, transparent, #ed475130 25%, #ed4751 90%, transparent);
  background-size: 8px 18px, 2px 18px; background-position: 50% -18px;
  animation-name: ai-signal-vertical;
 }
 .ai-machine-links { left: calc(50% - 8px); top: calc(100% - 10px); width: 16px; height: 48px; transform: none; }
 .ai-machine-links i, .ai-machine-links i:nth-child(2), .ai-machine-links i:nth-child(3) { top: 0; width: 1px; height: 100%; }
 .ai-machine-links i:nth-child(2) { left: 50%; }
 .ai-machine-links i:nth-child(3) { left: 100%; }
 .ai-machine-links i b {
  inset: 0 auto 0 -4px; width: 8px; height: 100%;
  background-image: radial-gradient(ellipse 2px 3px at 50% calc(100% - 3px), #ffe2e4 0%, #f6747d 40%, transparent 100%), linear-gradient(180deg, transparent, #ed475130 25%, #ed4751 90%, transparent);
  background-size: 8px 18px, 2px 18px; background-position: 50% -18px;
 }
 @keyframes ai-signal-vertical {
  0%,8% { background-position: 50% -18px; opacity: 0; }
  12% { opacity: 1; }
  42% { opacity: 1; }
  48%,100% { background-position: 50% calc(100% + 18px); opacity: 0; }
 }

 .ai-system-details__content article { grid-template-columns: 1fr; gap: 12px; }
 .ai-contact { flex-direction: column; align-items: flex-start; gap: 25px; padding-block: 40px; }
 .ai-contact h2 { font-size: 27px; }
 .ai-contact__actions { flex-direction: row; gap: 14px 22px; }
}