:root{
  --bg:#0e1518;
  --bg-2:#131d21;
  --surface:#1f343c;
  --surface-2:#24363b;
  --fg:#f5f7f5;
  --muted:#9ba8aa;
  --line:rgba(245,247,245,.14);
  --line-strong:rgba(245,247,245,.26);
  --accent:#88c027;
  --accent-2:#24a9c2;
  --deep:#1a5b79;
  --on-accent:#0b1013;
  --wrap:1240px;
  --font:"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h,78px) + 1rem)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
body:lang(en){--font:"Segoe UI",Arial,Helvetica,sans-serif}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,summary{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.wrap{width:min(calc(100% - 4rem),var(--wrap));margin-inline:auto}
.skip{position:fixed;left:1rem;top:-8rem;z-index:100;background:var(--accent);color:var(--on-accent);padding:.7rem 1rem;font-weight:700}
.skip:focus{top:1rem}
.preview-bar{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.preview-inner{display:flex;justify-content:space-between;gap:1rem;padding-block:.4rem}
.preview-inner span:first-child{display:flex;align-items:center;gap:.5rem;color:var(--fg);font-weight:600}
.preview-inner i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(14,21,24,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.header-inner{display:flex;align-items:center;gap:1.4rem;min-height:78px;flex-wrap:wrap;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.7rem;flex:none;min-height:48px}
.logo-plate{display:grid;place-items:center;background:var(--fg);padding:4px 6px;border-radius:2px}
.logo-plate img{width:47px;height:40px;object-fit:contain}
.brand-text strong{display:block;font-size:1.05rem;line-height:1.3;letter-spacing:.01em}
.brand-text small{display:block;font-size:.56rem;letter-spacing:.16em;color:var(--muted)}
.desktop-nav{display:flex;gap:1.6rem;margin-left:auto;font-size:.86rem;font-weight:600}
.desktop-nav a{position:relative;display:flex;align-items:center;min-height:44px;white-space:nowrap}
.desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)}
.lang-menu{position:relative;flex:none;font-size:.82rem}
.lang-menu summary{display:flex;align-items:center;gap:.45rem;min-height:44px;padding-inline:.5rem;list-style:none;color:var(--fg)}
.lang-menu summary::-webkit-details-marker{display:none}
.globe{width:15px;height:15px;border:1.5px solid var(--accent-2);border-radius:50%;position:relative;flex:none}
.globe::after{content:"";position:absolute;inset:4px 2px;border-block:1px solid var(--accent-2)}
.chev{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.lang-menu[open] .chev{transform:rotate(225deg);margin-top:2px}
.lang-list{position:absolute;right:0;top:calc(100% + .4rem);min-width:170px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 14px 32px rgba(0,0,0,.5);padding:.35rem;z-index:60}
.lang-list a{display:block;min-height:44px;display:flex;align-items:center;padding:.55rem .75rem}
.lang-list a:hover{background:var(--surface-2)}
.lang-list a[aria-current="page"]{color:var(--accent);font-weight:700}
.header-cta{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.55rem .95rem;border:1px solid var(--accent);color:var(--accent);font-size:.84rem;font-weight:600;white-space:nowrap;transition:background-color .18s,color .18s}
.header-cta:hover{background:var(--accent);color:var(--on-accent)}
.mobile-menu{display:none;position:relative}
.mobile-menu summary{display:flex;align-items:center;gap:.5rem;min-height:44px;list-style:none;font-size:.84rem;padding-inline:.4rem}
.mobile-menu summary::-webkit-details-marker{display:none}
.bars{width:15px;height:9px;border-block:1.5px solid currentColor;flex:none}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + .6rem);width:min(300px,84vw);background:var(--surface);border:1px solid var(--line-strong);padding:.5rem;z-index:60}
.mobile-menu nav a{display:flex;align-items:center;min-height:48px;padding:.6rem .8rem}
.mobile-menu nav a:hover{background:var(--surface-2)}

/* hero */
.hero{padding-block:3.6rem 2.2rem;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:3.2rem;align-items:center}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.eyebrow::before{content:"";width:1.8rem;height:2px;background:var(--accent);flex:none}
.values-title{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1.4rem;margin-top:1.4rem;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.18;font-weight:800;letter-spacing:.02em}
.values-title span{min-width:0;overflow-wrap:break-word}
.values-title span:nth-child(5){grid-column:1/-1;color:var(--accent);margin-top:.35rem}
.hero-lead{margin-top:1.6rem;color:var(--muted);font-size:1rem;max-width:34rem;line-height:1.85}
body:lang(en) .values-title{font-size:clamp(1.5rem,2.7vw,2.2rem);letter-spacing:0;gap:.2rem 1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.9rem;min-height:50px;padding:.8rem 1.15rem;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.9rem;transition:background-color .18s}
.btn:hover{background:#9ad92f}
.text-link{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-size:.86rem;font-weight:600;border-bottom:1px solid var(--line-strong);padding-block:.4rem}
.text-link:hover{color:var(--accent);border-color:var(--accent)}
.hero-visual{position:relative;background:var(--surface);border:1px solid var(--line)}
.hero-visual img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hero-visual figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;font-size:.74rem;color:var(--muted);border-top:1px solid var(--line)}
.hero-visual figcaption b{color:var(--fg);font-weight:700}
.hero-tags{display:flex;gap:1.6rem;padding-block:1.4rem;font-size:.76rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;flex-wrap:wrap}
.hero-tags span::before{content:"— ";color:var(--accent-2)}

/* sections */
.section{padding-block:4.6rem;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:2.4rem;align-items:start;margin-bottom:2.6rem}
.section-head h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.28;font-weight:800;letter-spacing:-.01em}
.section-note{margin-top:1rem;color:var(--muted);font-size:.94rem;max-width:44rem}
.boundary-note{margin-top:1.8rem;font-size:.78rem;color:var(--muted);line-height:1.85;max-width:74rem}
.source-link{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
.source-link:hover{color:var(--accent)}

/* scope blocks */
.scope-block{margin-top:2.6rem}
.scope-head{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;padding-bottom:.9rem;border-bottom:1px solid var(--line-strong)}
.scope-head h3{font-size:1.25rem;font-weight:800}
.scope-head .en{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.scope-head .idx{margin-left:auto;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.scope-note{color:var(--muted);font-size:.87rem;margin-top:.9rem;max-width:52rem}
/* 横向手风琴：一排竖条图，鼠标指到哪条哪条滑开 */
.panel-row{display:flex;gap:.3rem;margin-top:1.4rem;height:clamp(340px,40vw,470px)}
.panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--bg-2);
  transition:flex-grow .55s cubic-bezier(.33,.55,.18,1)}
.panel-row:hover .panel{flex-grow:.92}
.panel-row .panel:hover,.panel-row .panel:focus-visible{flex-grow:3.05}
.panel:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.panel-media{position:absolute;inset:0}
.panel-media img,.panel-media .tile-art{width:100%;height:100%;object-fit:cover;display:block;opacity:.94;
  transform:scale(1.02);transition:opacity .45s ease,transform .9s cubic-bezier(.33,.55,.18,1)}
.panel:hover .panel-media img,.panel:focus-visible .panel-media img{opacity:1;transform:scale(1.08)}
.panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,15,18,.78),rgba(10,15,18,.12) 46%,rgba(10,15,18,.78))}
.panel-text{position:absolute;inset:0;z-index:2;padding:1rem .85rem;display:flex;flex-direction:column;
  color:#fff;pointer-events:none}
.panel-text h4{margin:0;font-size:1rem;line-height:1.35;font-weight:700;max-width:9em;overflow-wrap:anywhere;
  text-shadow:0 1px 8px rgba(6,10,12,.75)}
.panel-text .rule{display:block;width:2.1rem;height:1px;background:rgba(255,255,255,.72);margin:.62rem 0 .55rem}
.panel-text .en{margin:0;font-size:.74rem;line-height:1.45;max-width:9em;overflow-wrap:break-word;
  hyphens:auto;-webkit-hyphens:auto;
  text-shadow:0 1px 8px rgba(6,10,12,.75)}
.panel-body{margin-top:auto;max-width:33ch;opacity:0;transform:translateY(10px);
  transition:opacity .38s ease .08s,transform .38s ease .08s}
.panel:hover .panel-body,.panel:focus-visible .panel-body{opacity:1;transform:none}
.panel-q{margin:0;font-size:.8rem;font-weight:700;line-height:1.5;color:var(--accent)}
.panel-a{margin:.4rem 0 0;font-size:.78rem;line-height:1.7;color:rgba(245,247,245,.88)}
.panel.is-art .panel-media{display:grid;place-items:center;background:var(--bg-2)}
@media (hover:none){.panel-row:hover .panel{flex-grow:1}}

/* 手机／平板：改成上下图文卡片，说明文字常显 */
@media (max-width:900px){
  .panel-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;height:auto}
  .panel{flex:none}
  .panel-media{position:relative;aspect-ratio:16/10}
  .panel-media img{transform:none;opacity:.95}
  .panel::after{background:linear-gradient(180deg,rgba(10,15,18,.2),rgba(10,15,18,.7))}
  .panel-text{position:relative;inset:auto;background:var(--bg-2);padding:.9rem 1rem 1.05rem;
    display:block;pointer-events:auto;color:var(--fg)}
  .panel-text h4{max-width:none;font-size:.98rem;text-shadow:none}
  .panel-text .rule{display:none}
  .panel-text .en{margin-top:.2rem;max-width:none;font-size:.68rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent);text-shadow:none}
  .panel-body{margin-top:.55rem;max-width:none;opacity:1;transform:none}
  .panel-q{color:var(--accent-2)}
  .panel-a{color:var(--muted)}
}

.tile-art{width:100%;height:100%;display:block;color:var(--accent)}
.hero-art{display:grid;grid-template-rows:1fr auto}
.hero-art .tile-art{aspect-ratio:4/3;height:auto}

/* services */
.phase-title{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.phase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.phase{background:var(--bg);padding:1.6rem 1.5rem;min-height:9.5rem}
.phase small{display:block;font-size:.72rem;letter-spacing:.1em;color:var(--accent-2);text-transform:uppercase}
.phase h3{margin-top:.7rem;font-size:1.08rem;font-weight:700;line-height:1.45}
.phase p{margin-top:.55rem;color:var(--muted);font-size:.88rem}

/* scenes */
.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.scene{background:var(--surface);border:1px solid var(--line);padding:1.6rem 1.5rem}
.scene small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.scene h3{margin-top:.8rem;font-size:1.15rem;font-weight:700}
.scene p{margin-top:.5rem;color:var(--muted);font-size:.9rem}

/* insights */
.insight-head{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:end;margin-bottom:2.2rem}
.insight-head h2{font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.3;font-weight:800;margin-top:.9rem}
.insight-head>p{color:var(--muted);font-size:.93rem}
.questions{border-top:1px solid var(--line-strong)}
.question{border-bottom:1px solid var(--line-strong)}
.question summary{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1.2rem 0;min-height:64px;list-style:none;font-weight:700;font-size:1rem}
.question summary::-webkit-details-marker{display:none}
.question summary span{color:var(--accent);font-size:.8rem;font-variant-numeric:tabular-nums;flex:none}
.question summary h3{font-size:1rem;font-weight:700;margin-right:auto;line-height:1.6}
.question summary::after{content:"+";color:var(--accent);font-size:1.3rem;font-weight:400;flex:none}
.question[open] summary::after{content:"−"}
.answer{padding:0 0 1.4rem 2.1rem;color:var(--muted);font-size:.92rem}
.answer p+p{margin-top:.8rem}
.answer cite{display:block;margin-top:1rem;font-style:normal}

/* impact */
.impact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.impact-layout h2{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:800;margin-top:.9rem}
.impact-layout .intro{color:var(--muted);margin-top:.9rem;font-size:.94rem}
.impact-layout .minor{color:var(--muted);font-size:.78rem;margin-top:.8rem}
.impact-board{display:grid;gap:.9rem}
.impact-tile{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:var(--surface);border:1px solid var(--line);padding:1.3rem}
.impact-tile .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:.5rem}
.impact-tile h3{font-size:1rem;font-weight:700}
.impact-tile p{color:var(--muted);font-size:.87rem;margin-top:.3rem}

/* contact */
.contact{background:var(--bg-2)}
#enquiry{scroll-margin-top:96px}
.enquiry-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:3rem;align-items:start}
.enquiry-intro h2{font-size:clamp(1.7rem,2.8vw,2.3rem);font-weight:800;margin-top:.9rem;line-height:1.3}
.enquiry-intro>p:not(.eyebrow){color:var(--muted);margin-top:1rem;font-size:.94rem}
.enquiry-points-title{margin-top:1.6rem;font-size:.8rem;letter-spacing:.06em;color:var(--fg)!important}
.enquiry-points{margin-top:.7rem;display:grid;gap:.5rem}
.enquiry-points li{position:relative;padding-left:1.3rem;font-size:.9rem;color:var(--fg)}
.enquiry-points li::before{content:"";position:absolute;left:0;top:.55rem;width:7px;height:7px;background:var(--accent-2)}
.enquiry-privacy{margin-top:1.7rem;font-size:.78rem!important;line-height:1.85;color:var(--muted)!important;
  border-left:2px solid var(--line-strong);padding-left:.85rem}

.enquiry-form{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);padding:1.5rem 1.6rem 1.7rem}
.enquiry-form .field{margin-bottom:.95rem}
.enquiry-form label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.enquiry-form label .req{color:var(--accent);margin-left:.2rem}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;background:var(--bg);
  border:1px solid var(--line);color:var(--fg);font:inherit;font-size:.9rem;padding:.62rem .7rem;
  border-radius:2px;color-scheme:dark}
.enquiry-form textarea{resize:vertical;min-height:5.4rem;line-height:1.7}
.enquiry-form input::placeholder,.enquiry-form textarea::placeholder{color:rgba(155,168,170,.72)}
.enquiry-form input:focus-visible,.enquiry-form select:focus-visible,.enquiry-form textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.enquiry-form [aria-invalid="true"]{border-color:#e07a6a}
.field-hint{margin:.34rem 0 0;font-size:.74rem;line-height:1.6;color:var(--muted)}
.field-err{margin:.32rem 0 0;font-size:.76rem;color:#f0a08f}
.enq-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.2rem}
.enq-required{font-size:.74rem;color:var(--muted)}
.enq-result{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.2rem}
.enq-result label{font-size:.78rem;color:var(--accent)}
.enq-result textarea{margin-top:.5rem;font-size:.84rem;line-height:1.75;min-height:9rem}
.enq-result-actions{display:flex;align-items:center;gap:.8rem;margin-top:.7rem}
.enq-copy-state{font-size:.76rem;color:var(--accent)}
.enq-hint{margin-top:.7rem;font-size:.74rem;color:var(--muted)}
.btn-ghost{background:transparent;border:1px solid var(--line-strong);color:var(--fg);box-shadow:none}
.btn[hidden],.btn-ghost[hidden]{display:none}
.btn-ghost:hover{background:rgba(245,247,245,.06);border-color:var(--accent)}

/* footer */
.site-footer{padding-block:2.2rem;background:var(--bg)}
.footer-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.footer-inner strong{font-size:.95rem}
.footer-inner p{color:var(--muted);font-size:.75rem;margin-top:.4rem;line-height:1.9}
.footer-inner a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.footer-inner>a{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem}

@media(max-width:1080px){
  .wrap{width:calc(100% - 3rem)}
  .desktop-nav{display:none}
  .mobile-menu{display:block;margin-left:auto}
  .lang-menu{margin-left:0}
  .header-cta{margin-left:0}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .section-head{grid-template-columns:1fr;gap:1rem}
  .phase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scene-grid{grid-template-columns:1fr}
  .insight-head{grid-template-columns:1fr;gap:1rem}
  .impact-layout,.enquiry-grid{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:650px){
  .wrap{width:calc(100% - 2rem)}
  .preview-inner{font-size:.66rem}
  .preview-inner>span:last-child{display:none}
  .header-inner{min-height:70px;gap:.6rem}
  .brand-text small{display:none}
  .header-cta{display:none}
  .hero{padding-block:2.4rem 1.6rem}
  .values-title{font-size:clamp(1.9rem,9vw,2.6rem);gap:.1rem 1rem}
  body:lang(en) .values-title{grid-template-columns:1fr;font-size:clamp(1.6rem,7vw,2rem)}
  .section{padding-block:3.2rem}
  .phase-grid{grid-template-columns:1fr}
  .phase{min-height:0}
  .answer{padding-left:0}
  .hero-tags{gap:1rem;font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  .preview-bar,.site-header,.mobile-menu{display:none}
  body{background:#fff;color:#111}
}