/* 數位服務的電影感場景；僅作用於本頁，不影響方案與合作表單。 */
.digital_services_body { --services_gutter: clamp(32px, 5vw, 108px); --digital_gutter: var(--services_gutter); background: #f5fafb; color: #173949; }
.digital_services_body .digital_main { overflow: clip; }
.digital_services_body .digital_header { height: 106px; display: flex; align-items: center; gap: 28px; padding-inline: var(--services_gutter); }
.digital_services_body .digital_brand { width: clamp(208px, 18.8vw, 282px); flex: 0 0 auto; }
.services_header_nav { display: flex; flex: 1; justify-content: center; gap: clamp(26px, 4.5vw, 85px); padding-right: 20px; pointer-events: auto; }
.services_header_nav a { position: relative; font-size: 11px; font-weight: 650; letter-spacing: .16em; padding: 16px 0; }
.services_header_nav a::after { content: ''; position: absolute; bottom: 7px; left: 0; right: .16em; height: 1px; background: #179cad; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.services_header_nav a:hover::after, .services_header_nav a[aria-current='page']::after { transform: scaleX(1); }
.services_header_cta { display: flex; gap: 20px; align-items: center; margin-right: 73px; padding: 10px 19px; border: 1px solid #3d687d80; border-radius: 30px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; pointer-events: auto; transition: background .35s, color .35s; }
.services_header_cta:hover { color: #fff; background: #153b4d; }
.services_header_cta span { display: inline-block; transition: transform .35s; }
.services_header_cta:hover span { transform: translateX(4px); }
.digital_services_body .nexus_menu_trigger { right: var(--services_gutter); top: 30px; width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 50%; background: #f6fbfc99; box-shadow: none; backdrop-filter: blur(8px); }
.digital_services_body .nexus_menu_trigger > span:first-child { display: none; }
.digital_services_body .nexus_menu_trigger .nexus_menu_icon { gap: 6px; }
.digital_services_body .nexus_menu_trigger:hover { background: #fff; }
@media (max-width: 1050px) { .services_header_nav { gap: 28px; padding: 0; } .services_header_cta { margin-right: 54px; gap: 12px; padding-inline: 13px; } .digital_services_body .digital_header { gap: 18px; } .digital_services_body .digital_brand { width: 205px; } }
@media (max-width: 900px) { .services_header_nav, .services_header_cta { display: none; } .digital_services_body .digital_header { height: 90px; padding-top: 0; } .digital_services_body .digital_brand { width: 235px; max-width: calc(100vw - 110px); } .digital_services_body .nexus_menu_trigger { top: 23px; } }
@media (max-width: 600px) { .digital_services_body { --services_gutter: 24px; } .digital_services_body .digital_header { height: 78px; } .digital_services_body .digital_brand { width: 220px; } .digital_services_body .nexus_menu_trigger { top: 17px; right: 20px; } }

/* 明亮 Hero：滿版山景、前景玻璃裝置與大型字形成同一個場景。 */
.digital_services_body .services_hero { position: relative; isolation: isolate; min-height: 760px; height: min(100svh, 1100px); max-height: none; padding: 0; background: linear-gradient(135deg,#d9eaf2,#f5f9fa 57%,#d5e7ef); overflow: clip; }
.services_hero_mountains { position: absolute; left: 0; bottom: -9%; width: 140%; height: 98%; max-width: none !important; object-fit: cover; object-position: left bottom; mask-image: linear-gradient(transparent 0%,#000 47%); opacity: .88; z-index: -3; }
.services_hero_wash { position: absolute; inset: 0; background: linear-gradient(90deg,#e6f0f5ed 0%,#f0f6f899 27%,#f5f9fa30 57%,transparent 76%),linear-gradient(#f3f8fa38,transparent 55%); z-index: -2; }
.services_hero_floor { position: absolute; inset: auto -8% -13% -7%; height: 31%; transform: rotate(-6deg); background: linear-gradient(160deg,#e6f3f5dd,#accbdad4 57%,#f9fcffb0); border-top: 1px solid #fff8; z-index: -1; }
.digital_services_body .services_hero_type { position: relative; padding: clamp(145px, 17vh, 210px) 0 0 var(--services_gutter); width: 55%; z-index: 3; pointer-events: auto; }
.digital_services_body .services_hero_type > .digital_eyebrow { font-size: 10px; letter-spacing: .21em; margin-bottom: 30px; color: #4b748b; }
.digital_services_body .services_hero_type h1 { font-size: clamp(98px, 10vw, 192px); font-weight: 460; letter-spacing: -.07em; line-height: .91; margin: 0 0 32px; }
.digital_services_body .services_hero_type h1 > span { display: block; }
.digital_services_body .services_hero_type h1 > span:nth-child(2) { padding-left: 0; }
.digital_services_body .services_hero_type h1 .digital_period { display: inline; color: #169caa; }
.digital_services_body .services_hero_type .digital_hero_chinese { font-size: clamp(22px, 2.05vw, 37px); line-height: 1.65; letter-spacing: .06em; margin: 0 0 18px; }
.services_hero_translation { color: #426c80; font-size: clamp(10px, .95vw, 15px); line-height: 1.85; letter-spacing: .045em; }
.digital_services_body .services_hero_art { position: absolute; z-index: 1; width: 61vw; max-width: 1240px; right: 0; left: auto; top: 17%; bottom: auto; margin: 0; mix-blend-mode: multiply; pointer-events: none; }
.digital_services_body .services_hero_art img { width: 100%; height: auto; }
.services_hero_side { position: absolute; z-index: 4; right: var(--services_gutter); top: 22%; font-size: 9px; font-weight: 600; letter-spacing: .12em; color: #355d74; line-height: 1.65; }
.services_hero_side p { margin-bottom: 80px; }
.services_hero_side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 17px; font-size: 8px; }
.services_hero_controls { position: absolute; z-index: 5; bottom: 10%; left: var(--services_gutter); right: var(--services_gutter); display: flex; justify-content: space-between; align-items: center; }
.services_hero_controls .digital_scroll_link { gap: 18px; font-size: 10px; letter-spacing: .2em; }
.services_hero_controls .digital_round_arrow { width: 45px; height: 45px; border-color: #527e915c; font-size: 20px; }
.services_showreel { border: 0; padding: 0; display: flex; gap: 20px; align-items: center; color: #23475a; background: none; text-align: left; font-size: 9px !important; letter-spacing: .17em; line-height: 1.8 !important; }
.services_showreel > i { font-style: normal; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #163e52; color: #f0faff; box-shadow: 0 0 0 1px #c6e5f499,0 5px 20px #163e5226; font-size: 19px; }
.services_showreel small { display: block; font-size: 8px; letter-spacing: .1em; margin-top: 3px; }
.digital_services_body .services_hero::after { content: ''; position: absolute; z-index: 6; pointer-events: none; left: -10%; bottom: -82px; width: 130%; height: 115px; border-radius: 50% 50% 0 0; background: #f5fafb; transform: rotate(-3deg); }
@media (min-width: 1800px) { .digital_services_body .services_hero_art { width: 62vw; right: 2%; top: 9%; } }
@media (max-width: 1050px) and (min-width: 701px) { .digital_services_body .services_hero { min-height: 690px; height: 90svh; max-height: 940px; } .digital_services_body .services_hero_type { padding-top: 155px; width: 64%; } .digital_services_body .services_hero_type h1 { font-size: 11vw; } .digital_services_body .services_hero_art { width: 75%; top: 30%; right: -7%; } .services_hero_side { top: 16%; right: 6%; } .services_hero_side p { margin-bottom: 25px; } .services_hero_side ul { display: none; } .services_hero_controls { bottom: 9%; } }
@media (max-width: 700px) { .digital_services_body .services_hero { min-height: 840px; height: auto; padding-bottom: 400px; } .digital_services_body .services_hero_type { width: 100%; padding: 123px var(--services_gutter) 0; } .digital_services_body .services_hero_type h1 { font-size: clamp(71px,16vw,111px); line-height: .94; letter-spacing: -.08em; margin-bottom: 26px; } .digital_services_body .services_hero_type > .digital_eyebrow { margin-bottom: 25px; font-size: 9px; } .digital_services_body .services_hero_type .digital_hero_chinese { font-size: 22px; } .services_hero_translation { font-size: 11px; } .digital_services_body .services_hero_art { width: 115%; max-width: none; right: -10%; top: auto; bottom: 54px; } .services_hero_side { display: none; } .services_hero_mountains { width: 195%; height: 55%; bottom: 0; object-position: left bottom; mask-image: linear-gradient(transparent,#000 48%); } .services_hero_wash { background: linear-gradient(#e9f2f7 3%,#eef5f8cc 38%,transparent 69%); } .services_hero_controls { bottom: 48px; gap: 15px; } .services_hero_controls .digital_scroll_link { font-size: 8px; gap: 9px; } .services_hero_controls .digital_round_arrow { width: 36px; height: 36px; } .services_showreel { gap: 10px; font-size: 8px !important; } .services_showreel > i { width: 40px; height: 40px; font-size: 16px; } .services_showreel small { font-size: 7px; } .services_hero_floor { height: 16%; } }
@media (max-width: 380px) { .digital_services_body .services_hero { min-height: 790px; padding-bottom: 345px; } .digital_services_body .services_hero_type h1 { font-size: 16vw; } .digital_services_body .services_hero_type .digital_hero_chinese { font-size: 19px; } }

/* 深藍理念場景：保留原始透明圓環，以低飽和反光融入山景。 */
.services_belief { position: relative; isolation: isolate; min-height: 650px; height: clamp(650px, 54vw, 920px); overflow: clip; background: #092633; color: #f1f7f8; }
.services_belief_landscape { position: absolute; z-index: -3; inset: -7% -5%; width: 110%; height: 114%; max-width: none !important; object-fit: cover; object-position: 20% 60%; filter: saturate(.5) brightness(.63); }
.services_belief::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg,#061f2eed 0%,#082434ac 28%,#173e5140 60%,#071f2bb3 100%); }
.services_belief::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 65% 38%,#d4f2ff2e,transparent 52%); opacity: .7; pointer-events: none; }
.services_belief_copy { position: relative; z-index: 4; width: 41%; padding: clamp(90px, 9vw, 175px) 0 60px var(--services_gutter); }
.services_belief_copy .digital_eyebrow { color: #cae0e6; font-size: 10px; margin-bottom: 34px; }
.services_belief_copy h2 { font-size: clamp(34px, 3.4vw, 65px); line-height: 1.65; letter-spacing: .035em; margin: 0 0 38px; }
.services_belief_copy > p:not(.digital_eyebrow) { color: #d1dfe4; font-size: clamp(12px, 1.08vw, 18px); line-height: 2.05; margin-bottom: 33px; }
.services_belief_copy .digital_text_link { font-size: 10px; letter-spacing: .16em; border: 0; gap: 22px; color: #f4fafb; }
.services_belief_copy .digital_text_link > span { color: #acdce5; }
.services_belief_ring { position: absolute; right: 0; top: -4%; width: 66%; height: 110%; pointer-events: none; }
.services_ring_art { position: absolute; inset: 0; transform: rotate(-10deg) scaleX(.87); }
.services_ring_art img { position: absolute; width: 242%; max-width: none !important; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: saturate(.025) brightness(.76) contrast(1.2); opacity: .78; mask-image: radial-gradient(circle closest-side at 50% 50%, transparent 36%, #000 43%, #000 51%, transparent 57%); }
.services_ring_wordmark { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #eff7f9; text-shadow: 0 2px 15px #031e2ed9; }
.services_ring_wordmark strong { font-size: clamp(22px, 2.65vw, 45px); font-weight: 500; letter-spacing: .46em; padding-left: .46em; white-space: nowrap; }
.services_ring_wordmark span { display: block; font-size: clamp(8px,.7vw,12px); letter-spacing: .19em; line-height: 1.85; margin-top: 20px; }
.services_belief_keywords { position: absolute; right: var(--services_gutter); bottom: 11%; z-index: 4; display: grid; gap: 12px; color: #dcebf0; text-align: right; font-size: 8px; letter-spacing: .12em; }
@media (max-width: 1050px) { .services_belief { min-height: 620px; height: 65vw; } .services_belief_copy { padding-top: 100px; width: 45%; } .services_belief_copy h2 { font-size: 35px; } .services_belief_ring { right: -7%; width: 74%; } .services_belief_keywords { display: none; } }
@media (max-width: 700px) { .services_belief { min-height: 870px; height: auto; padding-bottom: 410px; } .services_belief_copy { width: 100%; padding: 70px var(--services_gutter) 0; } .services_belief_copy .digital_eyebrow { margin-bottom: 26px; } .services_belief_copy h2 { font-size: 32px; line-height: 1.5; margin-bottom: 24px; } .services_belief_copy > p:not(.digital_eyebrow) { font-size: 13px; line-height: 1.95; max-width: 360px; margin-bottom: 18px; } .services_belief_ring { width: 114%; height: 430px; top: auto; right: -7%; bottom: -5px; } .services_belief_landscape { width: 140%; object-position: 35% bottom; } .services_ring_art img { width: 285%; } .services_ring_wordmark { top: 50%; } .services_ring_wordmark strong { font-size: 25px; } .services_ring_wordmark span { font-size: 8px; margin-top: 15px; } .services_belief::before { background: linear-gradient(#082330ee 0%,#0a2b3ca6 48%,#0e314366); } }

/* 最後以完整山景平台收束，標題與 CTA 覆於畫面留白。 */
.services_image_cta { position: relative; isolation: isolate; min-height: 480px; height: clamp(480px, 36vw, 680px); overflow: clip; padding: clamp(70px, 7vw, 130px) var(--services_gutter); background: #c8e0ec; }
.services_cta_landscape { position: absolute; z-index: -3; inset: -6% -3%; width: 106%; height: 112%; max-width: none !important; object-fit: cover; object-position: center 65%; }
.services_image_cta::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,#e5f2f4bd 0%,#d5e8f277 36%,transparent 80%),linear-gradient(#e3f1f170,transparent 70%); }
.services_image_cta .digital_eyebrow { margin-bottom: 27px; font-size: 10px; letter-spacing: .18em; color: #32586d; }
.services_image_cta h2 { max-width: 75%; font-size: clamp(57px, 6vw, 117px); line-height: 1.03; letter-spacing: -.055em; font-weight: 450; margin-bottom: 25px; }
.services_image_cta h2 > span { color: #446477; }
.services_image_cta > div > p:last-child { font-size: clamp(12px, 1.1vw, 19px); letter-spacing: .04em; color: #355870; }
.services_conversation_link { position: absolute; top: 24%; right: var(--services_gutter); display: flex; align-items: center; gap: 27px; }
.services_conversation_link > i { display: grid; place-items: center; width: clamp(70px, 6.5vw, 120px); aspect-ratio: 1; border: 1px solid #143d55; border-radius: 50%; font-style: normal; transition: background .5s, color .5s, transform .5s; }
.services_conversation_link > i > span { display: block; font-size: clamp(30px, 3vw, 45px); font-weight: 300; transition: transform .5s; }
.services_conversation_link > span { font-size: 11px; letter-spacing: .15em; font-weight: 600; line-height: 1.9; }
.services_conversation_link:hover > i { background: #193e50; color: #fff; transform: scale(1.06); }
.services_conversation_link:hover > i > span { transform: translate(4px,-4px); }
.digital_services_body .digital_footer { padding: 32px var(--services_gutter) 38px; min-height: 142px; gap: 8px 20px; background: #f7fbfc; }
.digital_services_body .digital_footer_brand { font-size: 17px; }
.digital_services_body .digital_footer > p { font-size: 10px; letter-spacing: .12em; }
.digital_services_body .digital_footer nav { gap: 40px; font-size: 11px; }
.digital_services_body .digital_footer > small { font-size: 10px; }
@media (max-width: 1050px) { .services_image_cta h2 { max-width: 78%; font-size: 6.5vw; } .services_conversation_link { gap: 15px; } .services_conversation_link > span { font-size: 9px; } }
@media (max-width: 700px) { .services_image_cta { height: auto; min-height: 600px; padding-top: 66px; } .services_cta_landscape { object-position: 58% center; width: 160%; left: -35%; } .services_image_cta::before { background: linear-gradient(#e4f1f6e0,#e9f2f37a 50%,#cbe0ee33); } .services_image_cta h2 { max-width: none; font-size: clamp(39px, 9.4vw, 68px); line-height: 1.08; letter-spacing: -.065em; } .services_image_cta .digital_eyebrow { margin-bottom: 30px; } .services_image_cta > div > p:last-child { font-size: 13px; max-width: 220px; line-height: 1.9; } .services_conversation_link { top: auto; right: auto; left: var(--services_gutter); bottom: 85px; gap: 20px; } .services_conversation_link > i { width: 70px; } .services_conversation_link > span { font-size: 10px; } .digital_services_body .digital_footer { gap: 10px; padding-block: 29px; } .digital_services_body .digital_footer nav { gap: 27px; margin-block: 8px; } }

/* 動畫以可見場景為限；降低動態與背景分頁保持靜態可閱讀。 */
.services_belief.is_in_view .services_ring_art { animation: services_ring_float 24s ease-in-out infinite alternate; }
@keyframes services_ring_float { from { transform: translateY(8px) rotate(-10deg) scaleX(.87); } to { transform: translateY(-9px) rotate(-8deg) scaleX(.87); } }
.services_belief:not([data-motion-visible='true']) .services_ring_art, .digital_services_body[data-motion-paused='true'] .services_ring_art { animation-play-state: paused; }
@media (max-width: 700px) { .services_belief.is_in_view .services_ring_art { animation: none; } }
@media (prefers-reduced-motion: reduce) { .digital_services_body .services_ring_art { animation: none !important; } .digital_services_body :is(.services_header_nav a::after,.services_header_cta,.services_header_cta span,.services_conversation_link i,.services_conversation_link i span) { transition: none; } }