/* Huayu Energy: typography, content rhythm and responsive interaction. */
:root { --ease-out: cubic-bezier(.23,1,.32,1); --shadow: 0 12px 36px rgba(20,51,92,.07); --line:#e5ebf2; }
html { scroll-padding-top: 96px; -webkit-text-size-adjust:100%; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; line-height:1.6; }
button,a,[role="button"] { touch-action:manipulation; }
button { -webkit-tap-highlight-color:transparent; }
button:active,.primary-btn:active,.secondary-btn:active,.header-consult:active { transform:scale(.97); }
:focus-visible { outline:3px solid #1685eb; outline-offset:5px; }
[hidden] { display:none !important; }
.site-header { height:84px; padding-inline:max(24px,calc((100vw - 1376px)/2)); gap:24px; background:rgba(255,255,255,.94); }
.brand { min-width:0; flex-shrink:0; }
.brand strong { font-weight:700; font-size:clamp(17px,1.35vw,21px); }
.brand small { font-size:9px; font-weight:600; letter-spacing:.025em; }
.brand img { width:62px; }
.nav { gap:24px; }
.nav a { font-size:14px; font-weight:600; white-space:nowrap; }
.nav a::after { left:0; width:100%; transform:scaleX(0); transition:transform 180ms var(--ease-out); }
.nav a.active::after,.nav a:hover::after { width:100%; transform:scaleX(1); }
.header-consult { flex-shrink:0; display:inline-flex; align-items:center; gap:12px; min-height:42px; padding:0 18px; border-radius:8px; color:var(--blue); background:#edf4ff; font-size:14px; font-weight:600; transition:transform 120ms var(--ease-out); }
.hero { min-height:650px; min-height:clamp(580px,76svh,790px); }
.hero-slide { transform:none; transition:opacity 450ms var(--ease-out),visibility 450ms; }
.hero-slide .hero-content { visibility:hidden; }
.hero-slide.active .hero-content { visibility:visible; }
.hero-bg,.hero-slide.active .hero-bg { transform:none; transition:none; }
.hero-slide-left::before { background:linear-gradient(90deg,rgba(242,249,255,.8),rgba(242,249,255,.28) 48%,transparent 75%); }
.hero-content { width:min(1280px,calc(100% - 96px)); padding-top:clamp(74px,11svh,126px); }
.hero-eyebrow { display:block; margin-bottom:22px; color:#26568b; font-size:12px; font-weight:600; letter-spacing:.12em; }
.hero h1,.hero h2 { font-size:clamp(40px,4.3vw,64px); font-weight:700; line-height:1.28; letter-spacing:-.025em; margin-bottom:24px; }
.hero p { max-width:510px; font-size:17px; font-weight:400; line-height:1.85; margin-bottom:32px; }
.hero-slide-right .hero-eyebrow { color:#c6e5ff; }
.hero .hero-slide-right p { max-width:540px; }
.hero-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.primary-btn,.secondary-btn { min-height:52px; height:auto; padding:13px 22px; border-radius:9px; font-weight:600; font-size:15px; transition:transform 120ms var(--ease-out),background-color 180ms ease; }
.primary-btn { min-width:166px; box-shadow:0 6px 18px rgba(7,89,214,.15); }
.secondary-btn { display:inline-flex; justify-content:center; gap:16px; border:1px solid rgba(9,52,99,.22); color:#163e6f; background:rgba(255,255,255,.82); }
.hero-controls { position:absolute; bottom:65px; left:50%; z-index:5; display:flex; align-items:center; gap:12px; transform:translateX(-50%); padding:0 12px; border-radius:999px; background:rgba(255,255,255,.9); box-shadow:0 2px 16px #08204f12; }
.slider-dots { position:static; transform:none; gap:0; }
.slider-dots button { position:relative; width:44px; height:44px; background:transparent; box-shadow:none; }
.slider-dots button::before { content:""; position:absolute; left:8px; right:8px; top:19px; height:5px; background:#a2b1c4; border-radius:99px; }
.slider-dots button.on { background:transparent; }
.slider-dots button.on::before { background:var(--blue); }
.slider-dots button:hover,.slider-dots button:focus-visible { transform:none; }
.hero-controls { width:max-content; }
.energy-earth-section.experience-load-failed { height:100svh; min-height:600px; }
.energy-earth-section.experience-load-failed .energy-earth-scroll-hint { display:none; }
.advantages { width:min(1280px,calc(100% - 64px)); min-height:136px; margin-top:-36px; margin-bottom:88px; border:1px solid #e9eef5; border-radius:16px; }
.advantages article { gap:18px; padding:26px; }
.advantages svg { width:34px; height:34px; }
.advantages h3 { font-size:18px; font-weight:600; margin-bottom:8px; }
.advantages p,.card-body p,.section-title p { font-weight:400; }
.solutions { width:min(1280px,calc(100% - 64px)); }
.section-title { margin-bottom:40px; }
.section-title h2 { font-size:clamp(28px,3vw,40px); font-weight:650; line-height:1.35; margin-bottom:14px; }
.section-title p::after { display:none; }
.section-title p { padding-bottom:0; line-height:1.75; }
.section-title > span { font-weight:600; letter-spacing:.13em; }
.solution-grid { gap:24px; }
.solution-card { border-radius:14px; box-shadow:0 4px 18px #142c4805; transition:transform 200ms var(--ease-out); display:flex; flex-direction:column; }
.solution-card > img { aspect-ratio:16/9; }
.card-body { padding:24px; display:flex; flex:1; flex-direction:column; }
.card-body h3 { font-size:19px; font-weight:600; line-height:1.5; gap:10px; }
.card-body p { min-height:0; flex:1; line-height:1.8; }
.card-body a { min-height:40px; font-weight:600; align-self:flex-start; }
.company-stats { margin-block:52px; border-radius:14px; box-shadow:none; }
.company-stats h3 { font-weight:650; font-variant-numeric:tabular-nums; }
.company-stats p { font-weight:500; }
.energy-earth-section { height:380vh; height:380svh; }
.energy-earth-stage,.business-story-stage { height:100svh; min-height:600px; }
.energy-earth-brand h2,.energy-earth-story h3 { font-weight:600; }
.energy-earth-story p { font-weight:400; }
.experience-skip { position:absolute; top:110px; right:48px; z-index:8; display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:0 16px; border:1px solid #ffffff40; border-radius:99px; background:#06142ad9; color:#e4f4ff; font-size:13px; pointer-events:auto; }
.business-story-track { height:500vh; height:500svh; }
#business-story-app[v-cloak] { display:block; visibility:hidden; }
.business-skip { background:#fff; color:#245185; border-color:#d4dfeb; }
.business-scene-content { background:rgba(246,251,255,.94); border-color:#dce8f3; box-shadow:0 12px 40px #1e487a12; }
.business-scene h3,.business-scene.is-long-title h3 { font-weight:650; letter-spacing:-.025em; }
.news-section { width:min(1280px,calc(100% - 64px)); margin-block:80px; }
.news-latest-item a { font-weight:600; line-height:1.55; overflow-wrap:anywhere; }
.news-latest-item time { border:0; padding:0; border-radius:0; color:#69798e; font-weight:400; }
.partners-section { padding-block:72px; }
.partners-grid { max-width:1280px; margin:36px auto 0; gap:16px; }
.partner-card { min-height:116px; opacity:1; transform:none; transition:none; }
.partner-logo-file,.partner-logo-art { transition:transform 180ms var(--ease-out); will-change:auto; }
.partner-card:hover .partner-logo-file,.partner-card:hover .partner-logo-art { transform:scale(1.035); }
.contact-section { padding-block:80px; }
.contact-layout { max-width:1200px; gap:64px; }
.contact-information,.contact-form { opacity:1; transform:none; transition:none; }
.contact-information h3,.contact-form h3 { font-weight:600; line-height:1.5; }
.contact-form { border-radius:18px; background:#fff; box-shadow:0 8px 40px #193a5e08; padding:36px; min-width:0; }
.contact-form label { font-weight:500; }
.contact-form input,.contact-form textarea { font-size:16px; line-height:1.6; }
.contact-form button { font-weight:600; background:var(--blue); box-shadow:none; transition:transform 120ms var(--ease-out); }
.contact-form-status { line-height:1.6; overflow-wrap:anywhere; }
.contact-detail > div,.card-body,.news-page-card > div { min-width:0; }
.contact-detail p { overflow-wrap:anywhere; }
.about-hero h1,.solutions-page-hero h1,.news-page-hero h1,.cases-page-hero h1,.news-detail-article h1 { font-weight:650; line-height:1.3; }
.about-overview-content p,.solution-lead,.markdown-body { line-height:1.9; }
.news-page-card,.case-card,.about-capability-grid article { border-radius:14px; }
.news-page-card h3,.case-card h3,.solution-detail h2 { font-weight:600; overflow-wrap:anywhere; }
.news-page-list,.news-page-card,.news-page-card h2 { min-width:0; overflow-wrap:anywhere; }
.news-page-card h2 { font-weight:600; }
.energy-earth-progress span,.business-story-progress span { transition:background-color 160ms ease; }
@media (min-width:1101px) { .advantages { grid-template-columns:repeat(4,minmax(0,1fr)); } .advantages article:nth-child(n) { border-top:0; } .advantages article+article { border-left:1px solid var(--line); } }
@media (max-width:1150px) { .site-header { gap:18px; padding-inline:24px; } .nav { gap:15px; } .header-consult { display:none; } }
@media (max-width:900px) {
  .site-header { height:76px; padding-inline:max(18px,env(safe-area-inset-left)); }
  .brand img { width:50px; }
  .brand strong { font-size:16px; }
  .brand { flex:1; min-width:0; max-width:calc(100% - 62px); }
  .brand > span { min-width:0; }
  .brand strong { white-space:normal; line-height:1.4; }
  .menu-toggle { flex-shrink:0; border-radius:8px; }
  .nav { display:grid; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-6px); transform-origin:top right; transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 180ms; max-height:calc(100svh - 76px); overflow-y:auto; overscroll-behavior:contain; }
  .nav.open { visibility:visible; opacity:1; pointer-events:auto; transform:none; }
  .nav a { min-height:52px; }
  .hero-content { width:calc(100% - 48px); }
  .advantages { margin-bottom:60px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .advantages article:nth-child(n) { border:0; padding:24px; }
  .advantages article:nth-child(2n) { border-left:1px solid var(--line); }
  .advantages article:nth-child(n+3) { border-top:1px solid var(--line); }
  .hero-slide-right .hero-content { padding-left:0; }
  .experience-skip { right:24px; }
}
@media (max-width:700px) {
  .hero { min-height:650px; min-height:max(620px,82svh); }
  .hero-content { padding-top:54px; width:calc(100% - 40px); }
  .hero h1,.hero h2 { font-size:clamp(32px,9vw,46px); line-height:1.3; }
  .hero-eyebrow { font-size:10px; margin-bottom:18px; }
  .hero p,.hero .hero-slide-right p { font-size:15px; max-width:340px; line-height:1.8; margin-bottom:26px; }
  .hero-slide-left::before { background:linear-gradient(180deg,rgba(236,247,255,.94),rgba(236,247,255,.84) 40%,rgba(236,247,255,.08) 76%); }
  .hero-slide-right::before { background:linear-gradient(180deg,rgba(3,20,48,.9),rgba(3,20,48,.72) 45%,rgba(3,20,48,.15)); }
  .hero-slide-right .hero-content { align-items:flex-start; text-align:left; padding-left:0; }
  .hero-actions { gap:10px; }
  .primary-btn,.secondary-btn { min-width:0; font-size:14px; padding:12px 16px; min-height:48px; }
  .hero-controls { bottom:55px; }
  .advantages { width:calc(100% - 32px); margin-top:-28px; border-radius:12px; }
  .advantages article:nth-child(n) { display:block; padding:20px 16px; }
  .advantages svg { width:28px; height:28px; margin-bottom:12px; }
  .advantages h3 { font-size:17px; }
  .advantages p { font-size:13px; line-height:1.75; }
  .solutions,.news-section { width:calc(100% - 32px); }
  .solution-grid { grid-template-columns:1fr; gap:20px; }
  .card-body { padding:22px; }
  .company-stats { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; margin-block:36px; }
  .company-stats article:nth-child(n) { display:block; padding:18px 10px; margin:0; border:0; text-align:center; }
  .company-stats article:nth-child(2n) { border-left:1px solid #ffffff29; }
  .company-stats article:nth-child(n+3) { border-top:1px solid #ffffff29; }
  .company-stats article > svg { display:none; }
  .company-stats h3 { font-size:26px; }
  .company-stats span { font-size:12px; }
  .energy-earth-section { height:320svh; }
  .energy-earth-stage { min-height:560px; }
  .energy-earth-brand { top:100px; left:20px; }
  .energy-earth-brand h2 { font-size:27px; }
  .energy-earth-story { left:20px; right:30px; bottom:74px; }
  .energy-earth-story h3 { font-size:27px; }
  .energy-earth-story p { font-size:14px; }
  .experience-skip { top:auto; bottom:30px; right:20px; min-height:40px; font-size:12px; }
  .business-skip { display:none; }
  .partners-section,.contact-section { padding-block:56px; }
  .partners-grid { gap:10px; }
  .partner-card { min-height:96px; }
  .partner-logo-file { height:56px; }
  .contact-layout { gap:32px; }
  .contact-form { padding:24px 20px; }
  .news-section { margin-block:56px; }
}
/* Compact business overview keeps every service readable without a long scroll story. */
.business-story.is-reduced .business-story-stage { height:auto; min-height:0; padding:56px 20px; }
.business-story.is-reduced #business-story-canvas,.business-story.is-reduced .business-story-heading,.business-story.is-reduced .business-skip { display:none; }
.business-story.is-reduced .business-final-route { position:relative; inset:auto; }
.business-story.is-reduced .business-final-copy { position:static; }
.business-story.is-reduced .business-final-route ol { position:relative; inset:auto; transform:none; width:min(1100px,100%); margin:32px auto 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; grid-template-rows:none; }
.business-story.is-reduced .business-final-route ol::before,.business-story.is-reduced .business-final-route li > i { display:none; }
.business-story.is-reduced .business-final-route li { padding:0; min-width:0; }
.business-story.is-reduced .business-final-card { display:grid; grid-template-columns:100px minmax(0,1fr); width:100%; min-height:110px; border:1px solid #dce8f3; background:#fff; border-radius:12px; overflow:hidden; }
.business-story.is-reduced .business-final-card img { height:100%; min-height:110px; object-fit:cover; }
.business-story.is-reduced .business-final-card > div { padding:16px; }
.business-story.is-reduced .business-final-card strong { font-size:18px; }
.business-story.is-reduced .business-final-card small { display:block; font-size:11px; }
@media(max-width:700px) { .business-story.is-reduced .business-final-route ol { grid-template-columns:1fr; } }
@media(max-width:700px) { #business-story-app[v-cloak] { height:1100px; } }
@media (hover:none),(pointer:coarse) {
  .solution-card:hover,.case-card:hover,.contact-form button:hover,.partner-card:hover .partner-logo-file,.partner-card:hover .partner-logo-art { transform:none; box-shadow:none; }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) { .site-header,.advantages { background:#fff; backdrop-filter:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .energy-earth-section { height:100svh; min-height:600px; }
  .energy-earth-scroll-hint { display:none; }
  .solution-card:hover,.case-card:hover { transform:none; }
}

.business-fallback { display:none; padding:64px 24px; text-align:center; }
.business-story.experience-load-failed .business-story-track { display:none !important; }
.business-story.experience-load-failed .business-fallback { display:block; color:#173957; }
.keyboard-navigation :is(button,a,.nav) { transition:none !important; }