/* 正道官网 —— 页面样式（由 02/03 设计稿抽取，服务端与设计稿共用） */

/* ══════════ Hero — 让大船本身当主角 ══════════ */
.hero{ position:relative; height:100vh; min-height:680px; background:#0C1013; color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
/* 每张幻灯片一层，交叉淡入 + 缓慢推近 */
.slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.5s cubic-bezier(.4,0,.2,1);
  pointer-events:none; }
.slide.is-on{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; filter:saturate(.84) contrast(1.06);
  transform:scale(1.02); transition:transform 9s linear; }
.slide.is-on img{ transform:scale(1.09); }
/* 只在文字落点压暗，船体本身几乎不压 */
.hero__media::after{ content:''; position:absolute; inset:0; background:
  linear-gradient(97deg, rgba(12,16,19,.88) 0%, rgba(12,16,19,.66) 28%, rgba(12,16,19,.20) 60%, rgba(12,16,19,.04) 100%),
  linear-gradient(180deg, rgba(12,16,19,.60) 0%, rgba(12,16,19,0) 20%, rgba(12,16,19,0) 44%, rgba(12,16,19,.86) 100%); }

.hero__in{ position:relative; height:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gutter) 178px; display:grid; align-items:end; }
.cap{ grid-area:1/1; opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,.84,.28,1), visibility .7s; }
.cap.is-on{ opacity:1; visibility:visible; transform:none; }
.hero .eyebrow{ color:rgba(255,255,255,.6); margin-bottom:30px;
  animation:rise 1s .5s cubic-bezier(.16,.84,.28,1) both; }
.hero h1{ font-family:var(--display); font-weight:500;
  font-size:clamp(34px, 4.3vw, 64px); line-height:1.06; letter-spacing:-.03em;
  margin:0; max-width:none; text-shadow:0 2px 40px rgba(0,0,0,.35);
  animation:rise 1.1s .64s cubic-bezier(.16,.84,.28,1) both; }
.hero__sub{ margin:28px 0 0; max-width:44ch; font-size:17.5px; font-weight:300;
  line-height:1.72; color:rgba(255,255,255,.76);
  animation:rise 1.1s .8s cubic-bezier(.16,.84,.28,1) both; }
.hero__act{ margin:44px 0 0; animation:rise 1.1s .94s cubic-bezier(.16,.84,.28,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
/* 中文字符宽度是拉丁的两倍，ch 限宽会误断行——交给 <br> 控制 */
html[data-lang="zh"] .hero__sub{ max-width:30em; }

/* 船名铭牌 —— 让照片成为有出处的记录，而不是配图 */
.hero__cap{ position:absolute; right:var(--gutter); bottom:122px; text-align:right;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.5); animation:rise 1.2s 1.3s cubic-bezier(.16,.84,.28,1) both; }
.hero__cap::before{ content:''; display:block; width:30px; height:1px;
  background:rgba(255,255,255,.34); margin:0 0 10px auto; }

/* 数据横条 —— 通栏铭牌式 */
.hero__rail{ position:absolute; left:0; right:0; bottom:0;
  border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(12,16,19,0), rgba(12,16,19,.42));
  animation:rise 1.2s 1.15s cubic-bezier(.16,.84,.28,1) both; }
.hero__rail-in{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:stretch; }
.hero__k{ flex:0 0 auto; padding:26px 52px 30px 0; margin-right:52px;
  border-right:1px solid rgba(255,255,255,.14); display:flex; align-items:baseline; gap:13px; }
.hero__k:nth-child(3){ border-right:0; margin-right:0; }
.hero__k b{ font-family:var(--display); font-weight:500; font-size:30px;
  letter-spacing:-.026em; line-height:1; }
.hero__k span{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.5); }

/* 三十年 —— 全站唯一一处用强调色的数字 */
.hero__k--30{ align-items:center; padding-right:56px; margin-right:56px; }
.hero__k--30 b{ font-size:54px; color:var(--accent); letter-spacing:-.04em; }
.hero__k--30 span{ display:flex; flex-direction:column; gap:6px; color:rgba(255,255,255,.78); }
.hero__k--30 em{ font-style:normal; font-size:10.5px; letter-spacing:.2em; }
.hero__k--30 i{ font-style:normal; font-size:9.5px; letter-spacing:.16em;
  color:rgba(255,255,255,.42); }
.hero__nav{ margin-left:auto; display:flex; align-items:center; gap:0; padding:22px 0 26px; }
.dot{ position:relative; width:58px; height:34px; background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-end; padding:0 0 12px; }
.dot::before{ content:''; position:absolute; left:0; right:8px; bottom:11px; height:1px;
  background:rgba(255,255,255,.24); }
.dot::after{ content:''; position:absolute; left:0; bottom:11px; height:1px; width:0;
  background:var(--accent); }
.dot.is-on::after{ width:calc(100% - 8px); transition:width 7s linear; }
.dot em{ font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em;
  color:rgba(255,255,255,.34); transition:color .3s ease; }
.dot.is-on em{ color:#fff; }
.arrows{ display:flex; gap:2px; margin-left:22px; }
.arrows button{ width:38px; height:38px; border:1px solid rgba(255,255,255,.2); background:none;
  cursor:pointer; color:rgba(255,255,255,.7); display:grid; place-items:center; transition:.2s ease; }
.arrows button:hover{ border-color:#fff; color:#fff; background:rgba(255,255,255,.08); }

.hero__scroll{ margin-left:auto; display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding:26px 0 30px; }
.hero__scroll i{ display:block; width:1px; height:22px; background:rgba(255,255,255,.34);
  animation:drop 2.4s ease-in-out infinite; }
@keyframes drop{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* ══════════ 通栏大船间隔带 ══════════ */
.band{ position:relative; overflow:hidden; background:#0C1013; }
.band img{ width:100%; height:clamp(380px, 62vh, 660px); object-fit:cover;
  object-position:50% 42%; filter:saturate(.9) contrast(1.05); }
.band::after{ content:''; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(180deg, rgba(12,16,19,.30) 0%, rgba(12,16,19,0) 26%, rgba(12,16,19,0) 58%, rgba(12,16,19,.66) 100%); }
.band__cap{ position:absolute; left:0; right:0; bottom:34px; z-index:2; }
.band__cap span{ display:block; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.62); }

/* ══════════ 章节标题 ══════════ */
.shead{ max-width:60ch; margin-bottom:104px; }
.shead .lede{ margin-top:28px; }

/* ══════════ 价值主张 ══════════ */
.vrow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--gutter); align-items:center; margin-bottom:150px; }
.vrow:last-child{ margin-bottom:0; }
.vrow:nth-child(even) .vrow__fig{ order:2; }
.vrow__fig{ aspect-ratio:4/3; }
.vrow__body{ padding:0 6% 0 0; }
.vrow:nth-child(even) .vrow__body{ padding:0 0 0 6%; }
.vrow__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:24px; }
.vrow h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.3vw,34px);
  line-height:1.22; letter-spacing:-.018em; margin:0 0 24px; max-width:18ch; }
.vrow p{ font-size:16.5px; line-height:1.82; color:var(--ink-2); margin:0; max-width:46ch; }
.vrow__p{ margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); }

/* ══════════ 业务与服务 ══════════ */
.srv__lead{ aspect-ratio:21/9; margin-bottom:96px; }
.srv__list{ border-top:1px solid var(--line); }
.srv__i{ display:grid; grid-template-columns:76px minmax(0,.85fr) minmax(0,1.45fr) 170px;
  gap:var(--gutter); padding:46px 0; border-bottom:1px solid var(--line);
  align-items:start; transition:opacity .35s ease; }
.srv__n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--ink-4); padding-top:9px; }
.srv__i h3{ font-family:var(--display); font-weight:500; font-size:23px;
  line-height:1.3; letter-spacing:-.014em; margin:0; }
.srv__i p{ font-size:15.5px; line-height:1.78; color:var(--ink-2); margin:0; max-width:52ch; }
.srv__tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); padding-top:9px; text-align:right; line-height:1.6; }

/* ══════════ 客户案例 ══════════ */
.prj{ display:block; margin-bottom:130px; }
.prj:last-of-type{ margin-bottom:0; }
.prj__fig{ aspect-ratio:16/9; margin-bottom:44px; }
.prj__meta{ display:flex; gap:26px; align-items:baseline; flex-wrap:wrap; margin-bottom:22px; }
.prj__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); }
.prj__m{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); }
.prj__body{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--gutter); align-items:start; }
.prj h3{ font-family:var(--display); font-weight:500; font-size:clamp(24px,2.5vw,36px);
  line-height:1.2; letter-spacing:-.02em; margin:0; max-width:20ch; }
.prj p{ font-size:16.5px; line-height:1.82; color:var(--ink-2); margin:0; max-width:48ch; }
.prj:hover h3{ color:var(--ink-2); }

/* ══════════ 网络 ══════════ */
.net{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:64px; align-items:center; }
.net__fig{ aspect-ratio:3/2; background:#D8EEFC; }
.net__fig img{ object-fit:cover; object-position:46% 50%; transform:scale(1.16); }
.net__fig:hover img{ transform:scale(1.2); }
.yards{ border-top:1px solid var(--line); }
.yard{ display:flex; align-items:baseline; justify-content:space-between; gap:12px 20px;
  padding:16px 0; border-bottom:1px solid var(--line); }
.yard__identity{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; min-width:0; }
.yard b{ font-weight:500; font-size:15.5px; overflow-wrap:anywhere; }
.yard__location{ font-family:var(--body); font-size:14px; line-height:1.5;
  color:var(--ink-2); text-align:right; max-width:52%; overflow-wrap:anywhere; }
.yard__badge{ font-family:var(--body); font-size:11px; font-weight:500; line-height:1.5;
  padding:2px 7px; border-radius:3px; color:#08664F; background:#E0F3EC; }
.yard--hq b{ color:var(--ink); }

.reach{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:88px; align-items:center; }
.flags{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; margin-top:36px; }
.flags span{ font-size:15px; color:var(--ink-2); padding:11px 0; border-bottom:1px solid var(--line); }

/* ══════════ 质量（深色） ══════════ */
.section--dark#quality{ position:relative; overflow:hidden; }
.section--dark#quality::before{ content:''; position:absolute; inset:0;
  background:url('site/uploadfile/image/20180816/20180816061740_82707.jpg') center/cover no-repeat;
  opacity:.16; filter:grayscale(.4) contrast(1.12); }
.section--dark#quality > .wrap{ position:relative; z-index:1; }

.creed{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 88px; }
.creed__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.creed__v{ font-family:var(--display); font-weight:400; font-size:22px;
  line-height:1.42; letter-spacing:-.01em; color:rgba(255,255,255,.9); }

.certs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter); }
.cert__f{ aspect-ratio:3/4; background:rgba(255,255,255,.05); overflow:hidden; }
.cert__f img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.cert__c{ margin-top:20px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }

/* ══════════ 大引言 ══════════ */
.pull{ max-width:1000px; margin:0 auto; text-align:center; }
.pull + .pull{ margin-top:80px; padding-top:80px; border-top:1px solid rgba(255,255,255,.14); }
.pull__photo{ display:block; width:96px; height:96px; object-fit:cover; border-radius:50%; margin:0 auto 28px; }
.pull q{ quotes:none; font-family:var(--display); font-weight:400;
  font-size:clamp(22px,2.6vw,38px); line-height:1.42; letter-spacing:-.016em;
  color:rgba(255,255,255,.94); display:block; }
.pull q::before{ content:'“'; color:var(--accent); }
.pull q::after{ content:'”'; color:var(--accent); }
.pull footer{ margin-top:44px; }
.pull footer b{ display:block; font-family:var(--display); font-weight:500; font-size:15px; }
.pull footer span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.44); }

/* ══════════ CTA ══════════ */
.cta{ text-align:center; }
.cta h2{ margin:0 auto; max-width:22ch; }
.cta__l{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin-top:56px; }
.cta__l a{ font-family:var(--display); font-weight:500; font-size:clamp(17px,1.5vw,22px);
  letter-spacing:-.008em; border-bottom:1px solid var(--line-2); padding-bottom:9px; transition:border-color .3s; }
.cta__l a:hover{ border-color:var(--ink); }

/* ══════════ 页脚 ══════════ */
.ftr{ background:var(--navy); color:rgba(255,255,255,.62); padding:100px 0 44px; }
.ftr__top{ display:grid; grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.65fr));
  gap:var(--gutter); padding-bottom:72px; }
.ftr img{ height:34px; width:auto; margin-bottom:30px; }
.ftr h4{ font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.36); margin:0 0 22px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.ftr a{ color:rgba(255,255,255,.68); font-size:14px; transition:color .25s; }
.ftr a:hover{ color:#fff; }
.ftr__addr{ font-size:14px; line-height:1.85; color:rgba(255,255,255,.6); margin:0; max-width:32ch; }
.ftr__bot{ padding-top:30px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.34); }

/* ══════════ 响应式 ══════════ */
@media (max-width:1080px){
  .shead{ margin-bottom:64px; }
  .vrow{ grid-template-columns:1fr; gap:36px; margin-bottom:96px; }
  .vrow:nth-child(even) .vrow__fig{ order:0; }
  .vrow__body, .vrow:nth-child(even) .vrow__body{ padding:0; }
  .srv__i{ grid-template-columns:56px minmax(0,1fr); gap:24px; padding:34px 0; }
  .srv__tag{ display:none; }
  .srv__i h3{ margin-bottom:14px; }
  .prj{ margin-bottom:86px; }
  .prj__body{ grid-template-columns:1fr; gap:22px; }
  .net, .reach{ grid-template-columns:1fr; gap:48px; }
  .creed{ gap:44px 56px; }
  .ftr__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
}
@media (max-width:1080px){
  .hero__rail-in{ flex-wrap:wrap; }
  .hero__scroll{ display:none; }
  .hero__cap{ bottom:auto; top:calc(50% + 40px); }
}
@media (max-width:720px){
  .hero{ height:auto; min-height:0; padding-top:118px; }
  .hero__in{ padding-bottom:150px; }
  .hero__cap{ display:none; }
  .hero__nav{ padding:14px 0 18px; }
  .dot{ width:40px; }
  .arrows{ display:none; }
  .hero__k{ padding:18px 24px 20px 0; margin-right:24px; }
  .hero__k b{ font-size:21px; }
  .hero__k--30 b{ font-size:36px; }
  .hero__k--30{ padding-right:24px; margin-right:24px; }
  .hero__k span{ font-size:9px; letter-spacing:.14em; }
  .band img{ height:300px; }
  .creed{ grid-template-columns:1fr; gap:38px; }
  .certs{ grid-template-columns:1fr; gap:32px; }
  .flags{ grid-template-columns:1fr; }
  .cta__l{ flex-direction:column; gap:26px; align-items:center; }
  .ftr__top{ grid-template-columns:1fr; gap:44px; }
}


/* ══════════ Masthead ══════════ */
.mast{ position:relative; background:#0C1013; color:#fff; overflow:hidden;
  min-height:82vh; display:flex; align-items:flex-end; }
.mast__media{ position:absolute; inset:0; }
.mast__media img{ width:100%; height:100%; object-fit:cover; object-position:56% 46%;
  filter:saturate(.84) contrast(1.05); }
.mast__media::after{ content:''; position:absolute; inset:0;
  background:
    linear-gradient(97deg, rgba(12,16,19,.9) 0%, rgba(12,16,19,.68) 30%, rgba(12,16,19,.22) 64%, rgba(12,16,19,.06) 100%),
    linear-gradient(180deg, rgba(12,16,19,.62) 0%, rgba(12,16,19,0) 24%, rgba(12,16,19,0) 48%, rgba(12,16,19,.86) 100%); }
.mast__in{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gutter) 72px; }
.crumb{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.44); margin:0 0 34px; }
.mast h1{ font-family:var(--display); font-weight:500;
  font-size:clamp(36px,5vw,74px); line-height:1.05; letter-spacing:-.03em;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
  margin:0 0 28px; max-width:16ch; }
.mast p{ font-size:18px; font-weight:300; line-height:1.72;
  color:rgba(255,255,255,.68); max-width:52ch; margin:0; }
.subnav{ display:flex; gap:36px; margin-top:64px; padding-top:26px;
  border-top:1px solid var(--line-dark); overflow-x:auto; }
.subnav a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap;
  padding-bottom:4px; border-bottom:1px solid transparent; transition:.25s ease; }
.subnav a:hover{ color:#fff; }
.subnav a[aria-current]{ color:#fff; border-bottom-color:var(--accent); }

/* ══════════ 大事记 · 流程 ══════════ */
.flow__head{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:70px; flex-wrap:wrap; }
.flow__hint{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center; gap:12px; }

/* 进度条 */
.flow__bar{ height:1px; background:var(--line); position:relative; margin-bottom:0; }
.flow__bar i{ position:absolute; left:0; top:0; height:1px; width:20%;
  background:var(--ink); transition:.12s linear; }

/* 横向滚动轨道 */
.flow{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
  scrollbar-width:none; -ms-overflow-style:none;
  margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); }
.flow::-webkit-scrollbar{ display:none; }
.flow__track{ display:flex; align-items:stretch; padding-top:0; }

.phase{ flex:0 0 clamp(290px, 25vw, 380px); scroll-snap-align:start;
  padding:0 44px 0 0; position:relative; }
.phase:last-child{ flex-basis:clamp(290px, 25vw, 380px); padding-right:var(--gutter); }
.phase__node{ height:34px; display:flex; align-items:flex-start; }
.phase__node i{ width:9px; height:9px; border-radius:50%; background:var(--ink); display:block; margin-top:-4px; }
.phase--now .phase__node i{ background:var(--accent); }

.phase__n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); }
.phase__y{ font-family:var(--display); font-weight:500; font-size:15px;
  letter-spacing:.01em; color:var(--ink-3); margin-top:6px; }
.phase h3{ font-family:var(--display); font-weight:500; font-size:29px;
  line-height:1.2; letter-spacing:-.02em; margin:20px 0 16px; }
.phase__d{ font-size:15px; line-height:1.75; color:var(--ink-2); margin:0 0 30px; }

.phase__h{ border-left:1px solid var(--accent); padding:2px 0 2px 16px; margin-bottom:34px; }
.phase__h span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-4); display:block; margin-bottom:7px; }
.phase__h b{ font-weight:500; font-size:14.5px; line-height:1.55; color:var(--ink); }

.phase__list{ border-top:1px solid var(--line); }
.phase__e{ padding:15px 0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:46px 1fr; gap:14px; align-items:start; }
.phase__e time{ font-family:var(--mono); font-size:12px; color:var(--ink-3); padding-top:2px; }
.phase__e p{ font-size:13.5px; line-height:1.68; color:var(--ink-2); margin:0; }

/* ══════════ 文化 ══════════ */
.values{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gutter); }
.value__n{ font-family:var(--display); font-weight:500; font-size:29px;
  letter-spacing:-.02em; padding-bottom:22px; border-bottom:1px solid var(--line); }
.value__d{ margin-top:22px; font-size:15px; line-height:1.78; color:var(--ink-2); }

/* ══════════ 企业生活 ══════════ */
.gal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter); }
.gal figure{ margin:0; }
.gal figcaption{ margin-top:20px; font-size:15px; font-weight:500; }
.gal small{ display:block; margin-top:7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }

/* ══════════ 质量方针 ══════════ */
.qp{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:88px; align-items:start; }

/* ══════════ 联系 ══════════ */
.contact{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gutter); }
.contact__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:20px; border-bottom:1px solid var(--line); }
.contact__v{ margin-top:22px; font-family:var(--display); font-weight:400;
  font-size:19px; line-height:1.6; letter-spacing:-.006em; }
.contact__v a{ border-bottom:1px solid var(--line-2); transition:border-color .25s; }
.contact__v a:hover{ border-color:var(--ink); }

@media (max-width:1080px){
  .values{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px var(--gutter); }
  .gal{ grid-template-columns:1fr; gap:56px; }
  .qp{ grid-template-columns:1fr; gap:44px; }
  .contact{ grid-template-columns:1fr; gap:40px; }
  .ftr__top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
  .mast{ min-height:0; padding-top:150px; }
}
@media (max-width:720px){
  .values{ grid-template-columns:1fr; }
  .phase{ flex-basis:82vw; padding-right:28px; }
  .subnav{ gap:24px; }
  .ftr__top{ grid-template-columns:1fr; gap:44px; }
}


/* ══════════ 询价表单 —— 服务端接收，写入数据库 ══════════ */
.rfq{ max-width:920px; }
.rfq__g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
.rfq label{ display:block; }
.rfq label span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px; }
.rfq input, .rfq textarea{ width:100%; border:0; border-bottom:1px solid var(--line-2);
  background:none; font:inherit; font-size:16px; padding:8px 0; outline:0;
  transition:border-color .25s ease; color:var(--ink); }
.rfq input:focus, .rfq textarea:focus{ border-bottom-color:var(--ink); }
.rfq textarea{ resize:vertical; line-height:1.7; }
.rfq__full{ margin-top:24px; }
.rfq__act{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin-top:52px; }
.rfq__note{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-4); }
.rfq__ok{ margin-top:30px; padding:18px 22px; border-left:2px solid var(--accent);
  background:var(--wash); font-size:15px; }
.rfq__ok b{ font-family:var(--mono); font-weight:500; letter-spacing:.06em; }
.rfq.is-sent .rfq__g, .rfq.is-sent .rfq__full, .rfq.is-sent .rfq__act{ display:none; }

/* 语言切换（服务端多 URL，不是 JS 切换） */
.hdr__lang a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  padding:6px 9px; color:rgba(255,255,255,.42); transition:color .25s ease; }
.hdr__lang a:hover{ color:rgba(255,255,255,.8); }
.hdr__lang a[aria-current="true"]{ color:#fff; }

@media (max-width:720px){ .rfq__g{ grid-template-columns:1fr; } }

.rfq__err{ margin-top:30px; padding:18px 22px; border-left:2px solid #C0392B;
  background:#FDF3F1; font-size:15px; color:#8E2C21; }

/* History: fixed five-year chapters, chronological annual rows. */
.history__intro{margin-bottom:36px}
.history__intro .lede{margin-top:22px}
.history__nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:48px}
.history__nav a{padding:10px 14px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink-2);transition:background .2s,color .2s}
.history__nav a:hover,.history__nav a:focus-visible{background:var(--ink);color:var(--paper)}
.history-period{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.4fr);gap:48px;border-top:1px solid var(--ink);padding:32px 0 56px;scroll-margin-top:110px}
.history-period__head h3{font-family:var(--display);font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.035em;margin:16px 0}
.history-period__head .eyebrow{font-size:10px}
.history-period__current{font-size:12px;color:var(--ink-3)}
.history-year{display:grid;grid-template-columns:64px minmax(0,1fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.history-year:first-child{padding-top:0}
.history-year time{font-family:var(--mono);font-size:14px;color:var(--ink);line-height:1.8}
.history-year p{margin:0;font-size:15px;line-height:1.85;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.history-year--empty p{color:var(--ink-3)}
@media(max-width:760px){
  .history-period{grid-template-columns:1fr;gap:22px;padding:24px 0 36px}
  .history-period__head h3{margin:10px 0 0;font-size:30px}
  .history-period__current{display:block;margin-top:8px}
  .history__nav{margin-bottom:32px;gap:6px}
  .history__nav a{font-size:11px;padding:9px 10px}
  .history-year{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:16px 0}
  .history-year p{font-size:14px}
}

/* ══════════ 船东评价轮播 ══════════ */
.voices__rule{margin-bottom:88px}
.voices{position:relative;overflow:hidden}
.voices__viewport{overflow:hidden}
.voices__track{display:flex;align-items:flex-start;transition:transform .72s cubic-bezier(.22,.61,.36,1);will-change:transform}
.voices__slide{flex:0 0 100%;width:100%;max-width:none;margin:0;padding:0 28px;box-sizing:border-box}
.voices__slide + .voices__slide{margin-top:0;padding-top:0;border-top:0}
.voices__slide q{max-width:1000px;margin-left:auto;margin-right:auto}
.voices__nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:18px;max-width:420px;margin:64px auto 0}
.voices__arrow{appearance:none;width:44px;height:44px;margin:0;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:0;background:transparent;display:grid;place-items:center;color:#fff;cursor:pointer;transition:border-color .25s,background .25s}
.voices__arrow:hover,.voices__arrow:focus-visible{border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.08)}
.voices__dots{display:flex;justify-content:center;align-items:center;gap:6px}
.voices__dot{appearance:none;position:relative;min-width:34px;height:32px;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:rgba(255,255,255,.38);font-family:var(--mono);font-size:9px;letter-spacing:.08em;cursor:pointer;transition:color .25s}
.voices__dot::after{content:'';position:absolute;left:5px;right:5px;bottom:2px;height:1px;background:rgba(255,255,255,.2);transition:background .25s,transform .25s}
.voices__dot:hover,.voices__dot:focus-visible,.voices__dot.is-on{color:#fff}
.voices__dot.is-on::after{background:var(--accent);transform:scaleY(2)}
@media(max-width:760px){
  .voices__rule{margin-bottom:64px}
  .voices__slide{padding:0 4px}
  .voices__nav{margin-top:44px;grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
  .voices__arrow{width:40px;height:40px}
  .voices__dot{min-width:28px}
}
@media(prefers-reduced-motion:reduce){.voices__track{transition:none}}

/* Private inquiry attachments: retain the form's restrained visual style. */
.rfq input[type="file"]{font:inherit;max-width:100%;padding:16px 0;color:var(--ink-2)}
.rfq input[type="file"]::file-selector-button{font:inherit;border:1px solid currentColor;background:transparent;padding:8px 12px;margin-right:12px;cursor:pointer}
.rfq__full small{display:block;font-size:12px;line-height:1.6;margin-top:8px;color:var(--ink-3)}

/* Native fallback without JS; enhanced labels follow the page, not browser locale. */
.rfq label .rfq__picker{margin:0;position:relative;max-width:100%;min-width:0}
.rfq label .rfq__picker-display{display:none;margin:0}
.rfq__picker.is-enhanced input[type="file"]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;z-index:1}
.rfq__picker.is-enhanced .rfq__picker-display{display:flex;align-items:center;gap:12px;min-height:80px;padding:16px 0}
.rfq__picker .rfq__picker-button,.rfq__picker .rfq__picker-status{margin:0;font:inherit;font-family:var(--body);font-size:16px;letter-spacing:normal;text-transform:none;color:var(--ink-2)}
.rfq__picker .rfq__picker-button{flex-shrink:0;border:1px solid var(--ink);padding:8px 12px;color:var(--ink)}
.rfq__picker .rfq__picker-status{min-width:0;overflow-wrap:anywhere}
.rfq__picker:focus-within{outline:2px solid var(--ink);outline-offset:4px}
.rfq__picker:hover .rfq__picker-button{background:var(--ink);color:var(--paper)}

/* Uploaded hero videos retain the image as a fallback and never preload off-screen slides. */
.hero .slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.06);}
.hero .slide video.is-failed{display:none;}
.hero__playback{position:absolute;left:var(--gutter);bottom:130px;z-index:3;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:80%;font-size:12px;}
.hero__playback button{background:rgba(12,16,19,.7);border:1px solid rgba(255,255,255,.5);color:#fff;padding:7px 12px;cursor:pointer;border-radius:2px;}
.hero__playback [hidden]{display:none;}
.hero__playback button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hero__playback [role=status]{text-shadow:0 1px 3px #000;}
.hero.has-video .dot.is-on::after,.hero.is-paused .dot.is-on::after{transition:none;}
@media(prefers-reduced-motion:reduce){.hero .slide,.hero .slide img{transition:none;transform:none;}}

/* Keep copy, controls and the wrapping KPI rail in normal flow on smaller screens. */
@media(max-width:1080px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding-top:140px;}
  .hero__in{height:auto;flex:1;width:100%;padding-bottom:32px;}
  .hero__playback{position:relative;left:auto;bottom:auto;margin:0 var(--gutter) 24px;max-width:none;}
  .hero__rail{position:relative;margin-top:auto;}
  .hero__cap{display:none;}
}
@media(max-width:720px){.hero{min-height:0;padding-top:118px;}}