/* ==========================================================================
   大邦白茶 · 视觉系统
   主色 #007278（客户确认）   金 ≈ #BFA15C   米白 #F6F4EF 为主基调
   ========================================================================== */

:root{
  --brand:        #007278;   /* 企业主色（客户确认为准） */
  --brand-deep:   #16393A;   /* 深墨青：标题，接近墨色，只留一点茶青 */
  --brand-soft:   #EDF3F2;   /* 极浅茶青，仅少量使用 */
  --gold:         #BFA15C;   /* 金：只用于小标签 */
  --gold-soft:    #E3D5B0;
  --white:        #FFFFFF;
  --paper:        #F6F4EF;   /* 米白：全站主底色 */
  --ink:          #1A1A1A;
  --muted:        #6E6E6E;
  --line:         #E3DFD7;   /* 暖灰细线：板块分割 */
  --line-dark:    rgba(255,255,255,.28);

  --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif SC","SimSun",Georgia,serif;
  --sans:  "PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
  --cn-sans:"Source Han Sans SC","Source Han Sans CN","Noto Sans SC","思源黑体","PingFang SC","Microsoft YaHei",sans-serif;
  --latin: "Cormorant Garamond","Optima","Times New Roman",Georgia,serif;
  --gold-on-brand: #E0CB96;   /* 品牌色底上的金：比 --gold 亮一点，小字才看得清 */

  --wrap: 1240px;
  --header-h: 64px;           /* 内页顶部那条窄栏的高度 */
  --sec-pad: clamp(72px, 9vw, 140px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; margin:0; letter-spacing:.04em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }

.wrap{ width:min(var(--wrap), 100% - 48px); margin-inline:auto; }

/* 只给搜索引擎和无障碍读屏看的内容：不影响视觉排版 */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ---------- 通用文字 ---------- */
.eyebrow{
  font-family:var(--latin);
  font-size:12px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.eyebrow-gold{ color:var(--gold); }
.eyebrow-line{ display:flex; align-items:center; gap:16px; }
.eyebrow-line::before{
  content:""; width:52px; height:1px; background:var(--gold); display:block;
}

.sec-title{
  font-size:clamp(28px, 3.4vw, 46px);
  line-height:1.34;
  color:var(--brand-deep);
}
.sec-title.on-dark{ color:var(--ink); }
.sec-desc{
  margin-top:20px;
  max-width:44em;
  color:var(--muted);
  font-size:15.5px;
  line-height:2.05;
}

.sec-head{ max-width:820px; margin-bottom:clamp(40px,5vw,72px); }
.sec-head-row{
  max-width:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 34px;
  font-size:14px;
  letter-spacing:.16em;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  cursor:pointer;
  transition:all .45s var(--ease);
  white-space:nowrap;
}
.btn-solid{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-solid:hover{ background:var(--brand-deep); border-color:var(--brand-deep); }

.btn-line{ border-color:var(--line); color:var(--brand-deep); }
.btn-line:hover{ border-color:var(--brand); color:var(--brand); }

.btn-ghost{ border-color:var(--brand); color:var(--brand-deep); }
.btn-ghost:hover{ background:var(--brand); color:#fff; }

.btn-gold{ border-color:var(--brand); color:var(--brand); }
.btn-gold:hover{ background:var(--brand); color:#fff; }

.btn-sm{ padding:11px 24px; font-size:13px; }
.btn-small{ padding:9px 20px; font-size:12.5px; border:1px solid var(--brand); color:var(--brand); }
.btn-small:hover{ background:var(--brand); color:#fff; }
/* 「更多」这类按钮：标准色实底 + 一点点圆角（全站统一） */
.btn-more{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
  border-radius:3px;
}
.btn-more:hover{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.btn-full{ width:100%; }

.link-more{
  display:inline-block; margin-top:22px;
  font-size:13.5px; letter-spacing:.12em; color:var(--brand);
  border-bottom:1px solid rgba(0,114,120,.28);
  padding-bottom:4px; transition:all .4s var(--ease);
}
.link-more:hover{ border-color:var(--brand); letter-spacing:.2em; }

/* ==========================================================================
   图片占位系统
   真实图片放入 assets/img/ 后会自动替换占位；缺图时显示标注框，不会出现裂图。
   ========================================================================== */
.photo{
  position:relative;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
}
.photo::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px;
  font-size:12px; letter-spacing:.22em; color:rgba(26,26,26,.42);
}
.photo img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover;
}

.photo-tall{ aspect-ratio:4/5; }
.photo-4x3{ aspect-ratio:4/3; }
.photo-4x5{ aspect-ratio:4/5; }
.photo-1x1{ aspect-ratio:1/1; }
.photo-book{ aspect-ratio:3/4; }
.photo-round{ aspect-ratio:1/1; border-radius:50%; border-color:rgba(0,114,120,.2); }
.qr-photo{ aspect-ratio:1/1; }

/* ==========================================================================
   页头（内页）：一条窄栏，品牌色底 + 金色栏目字
   ========================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--brand);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:box-shadow .5s var(--ease);
}
.site-header.is-scrolled{
  background:var(--brand);
  box-shadow:0 8px 26px rgba(0,48,51,.18);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  height:var(--header-h);
  transition:height .4s var(--ease);
}
.site-header.is-scrolled .header-inner{ height:56px; }

.logo{ display:flex; align-items:baseline; gap:12px; }
.logo-cn{
  font-family:var(--cn-sans);      /* 思源黑体，粗黑 */
  font-weight:800;
  font-size:20px;
  letter-spacing:.16em;
  color:#fff;
  line-height:1.1;
}
.logo-en{
  font-family:var(--latin);
  font-size:10px;
  letter-spacing:.3em;
  color:var(--gold-on-brand);
  line-height:1;
}

.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,38px); }
.nav a{
  position:relative;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--gold-on-brand);
  padding:6px 0;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:#fff;
  transition:width .45s var(--ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ width:100%; }
.nav a[aria-current="page"]{ color:#fff; }
.nav a[aria-current="page"]::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; width:40px; height:34px;
  border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{
  display:block; height:1px; width:24px; background:#fff;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   首屏
   ========================================================================== */
.hero{
  padding:calc(var(--header-h) + clamp(40px,5.6vw,84px)) 0 clamp(56px,7vw,110px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,80px);
  align-items:center;
}

.hero-title{
  font-size:clamp(34px, 4.8vw, 66px);
  line-height:1.3;
  color:var(--brand-deep);
  margin-bottom:30px;
  letter-spacing:.06em;
}
.hero-lead{
  color:var(--muted);
  font-size:16px;
  line-height:2.15;
  max-width:32em;
  margin-bottom:38px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-meta{
  display:flex; gap:44px; flex-wrap:wrap;
  margin-top:42px;
  padding-top:26px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--brand-deep);
}
.hero-meta span{
  display:block; font-size:11px; letter-spacing:.28em;
  color:var(--gold); margin-bottom:6px;
}

.hero-visual{ position:relative; }

/* ==========================================================================
   身份条
   ========================================================================== */
.strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.strip-item{
  padding:44px clamp(14px,2vw,34px);
  border-left:1px solid var(--line);
}
.strip-item:first-child{ border-left:0; padding-left:0; }
.strip-item h3{
  font-size:17px; color:var(--brand-deep); margin-bottom:10px; letter-spacing:.08em;
}
.strip-item p{ font-size:13.5px; color:var(--muted); line-height:1.9; }

/* ==========================================================================
   区块
   ========================================================================== */
.section{ padding:var(--sec-pad) 0; }
.section-paper{ background:var(--paper); }
.section-soft{ background:transparent; }
.section-dark{ background:transparent; color:var(--ink); }

/* 板块之间只用一根细线分割 */
main > section + section{ border-top:1px solid var(--line); }

/* ---------- 品牌矩阵（平铺 · 编辑感） ---------- */
.brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,44px); }
.brand-card{ display:flex; flex-direction:column; }
.brand-card .photo img{ transition:transform 1.4s var(--ease); }
.brand-card:hover .photo img{ transform:scale(1.035); }
.brand-card:hover .photo::after{ opacity:0; }
.brand-card .photo::after{ transition:opacity .6s var(--ease); }
.brand-body{ padding:28px 0 0; }
.brand-tag{ font-size:11px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px; }
.brand-body h3{ font-size:23px; color:var(--brand-deep); margin-bottom:14px; }
.brand-body p:last-child{ font-size:14px; color:var(--muted); line-height:2.05; }

/* ---------- 业务板块 ---------- */
.biz-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,44px); }
.biz-card{
  padding-top:34px;
  border-top:1px solid var(--line);
}
.biz-icon{ width:44px; height:44px; color:var(--brand); margin-bottom:28px; }
.biz-icon svg{ width:100%; height:100%; }
.biz-card h3{ font-size:20px; color:var(--brand-deep); margin-bottom:16px; line-height:1.5; }
.biz-card > p{ font-size:14px; color:var(--muted); line-height:2.05; }
.biz-entity{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px !important; color:var(--brand) !important; letter-spacing:.04em;
}

/* ---------- 产品（Aesop 式：图 + 细分隔线，无线框） ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,36px); }
.product-card{ }
.product-card .photo::after{ transition:opacity .6s var(--ease); }
.product-card:hover .photo::after{ opacity:0; }
.product-card .photo img{ transition:transform 1.4s var(--ease); }
.product-card:hover .photo img{ transform:scale(1.035); }
.product-body{ padding:22px 0 0; }
.product-cat{ font-size:11px; letter-spacing:.24em; color:var(--gold); margin-bottom:10px; }
.product-body h3{ font-size:19px; color:var(--brand-deep); margin-bottom:10px; }
.product-note{ font-size:13.5px; color:var(--muted); line-height:1.95; min-height:53px; }
.product-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
}
.price{ font-family:var(--latin); font-size:19px; color:var(--brand-deep); letter-spacing:.06em; }
.price-note{ font-size:12px; color:var(--muted); letter-spacing:.06em; line-height:1.6; }

/* ---------- 完整产品线 ---------- */
.product-line{
  margin-top:clamp(48px,5.5vw,84px);
  padding-top:clamp(32px,3.6vw,52px);
  border-top:1px solid var(--line);
}
.product-line-title{ font-family:var(--latin); font-size:11px; letter-spacing:.36em; color:var(--gold); margin-bottom:18px; }
.product-line-desc{ font-size:14px; color:var(--muted); line-height:2; margin-bottom:26px; max-width:44em; }
.product-line-list{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.product-line-list span{
  padding:9px 17px;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--brand-deep);
  border:1px solid var(--line);
  background:transparent;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.product-line-list span:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- 标准与专著（深色） ---------- */
.dark-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,84px); align-items:center; }
.dark-copy > p{
  margin-top:26px; font-size:15.5px; line-height:2.2;
  color:var(--muted); max-width:40em;
}
.dark-copy em{ font-style:normal; color:var(--brand); font-family:var(--serif); }
.dark-list{ margin:34px 0 40px; }
.dark-list li{
  position:relative; padding-left:26px; margin-bottom:14px;
  font-size:14.5px; color:var(--muted);
}
.dark-list li::before{
  content:""; position:absolute; left:0; top:.78em;
  width:12px; height:1px; background:var(--gold);
}

/* ---------- 观点 / Journal（Aesop 式编辑网格） ---------- */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,48px); }
.journal-card{ display:flex; flex-direction:column; }
.journal-card .photo img{ transition:transform 1.4s var(--ease); }
.journal-card:hover .photo img{ transform:scale(1.04); }
.journal-card:hover .photo::after{ opacity:0; }
.journal-card .photo::after{ transition:opacity .6s var(--ease); }
.journal-meta{
  display:flex; align-items:center; gap:14px;
  margin:22px 0 14px; font-size:11px; letter-spacing:.26em; color:var(--gold);
}
.journal-meta time{ color:var(--muted); letter-spacing:.16em; }
.journal-card h3{
  font-size:20px; line-height:1.6; color:var(--brand-deep); margin-bottom:12px;
  transition:color .4s var(--ease);
}
.journal-card:hover h3{ color:var(--brand); }
.journal-card p{ font-size:13.5px; color:var(--muted); line-height:2; }

/* ---------- 引语带 ---------- */
.quote-band{ padding:calc(var(--sec-pad) * .72) 0; text-align:center; }
.quote-band blockquote{
  margin:0 auto; max-width:24em;
  font-family:var(--serif);
  font-size:clamp(22px,2.8vw,36px);
  line-height:1.9;
  color:var(--brand-deep);
  letter-spacing:.08em;
}
.quote-band cite{
  display:block; margin-top:34px;
  font-family:var(--sans); font-style:normal;
  font-size:11.5px; letter-spacing:.34em; color:var(--gold);
}

/* ---------- 供应链 ---------- */
.supply-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.supply-copy .btn{ margin-top:34px; }
.supply-table{ padding:0; }
.supply-table .row{
  display:grid; grid-template-columns:1.4fr 1fr .8fr; gap:12px; align-items:center;
  padding:17px 4px; border-bottom:1px solid var(--line);
  font-size:14px; color:#3a3a3a;
}
.supply-table .row span:last-child{
  text-align:right; font-family:var(--latin); color:var(--brand); letter-spacing:.06em;
}
.supply-table .row-head{ border-bottom:1px solid var(--brand); }
.supply-table .row-head span{
  font-size:11.5px; letter-spacing:.24em; color:var(--gold);
}
.supply-table .row-head span:last-child{ font-family:var(--sans); }
.supply-note{ margin-top:20px; font-size:12.5px; color:var(--muted); line-height:1.9; }

/* ---------- 团队（Ippodo 式克制） ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px); }
.member{ text-align:center; }
.member .photo{ width:min(180px,62%); margin:0 auto 26px; }
.member h3{ font-size:18px; color:var(--brand-deep); margin-bottom:6px; }
.member-role{ font-size:11px; letter-spacing:.24em; color:var(--gold); margin-bottom:14px; }
.member-bio{ font-size:13px; color:var(--muted); line-height:1.95; }

/* ---------- 招聘 ---------- */
.jobs-band{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.jobs-band .sec-desc{ margin-top:14px; }
.jobs-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- 联系我们 ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,84px); align-items:start;
}
.contact-info dl{ margin:0; }
.contact-info dl > div{ padding:22px 0; border-bottom:1px solid var(--line); }
.contact-info dl > div:first-child{ padding-top:0; }
.contact-info dt{ font-size:11px; letter-spacing:.28em; color:var(--gold); margin-bottom:8px; }
.contact-info dd{
  margin:0; font-size:16px; color:var(--brand-deep);
  font-family:var(--serif); letter-spacing:.06em;
}
.contact-info dd a{ transition:color .35s var(--ease); }
.contact-info dd a:hover{ color:var(--brand); }

.qr-row{ display:flex; gap:34px; margin-top:36px; }
.qr{ text-align:center; }
.qr .photo{ width:112px; margin:0 auto 12px; }
.qr p{ font-size:12.5px; color:var(--muted); letter-spacing:.1em; }

.contact-form{
  display:grid; gap:22px;
}
.field{ display:grid; gap:9px; }
.field label{ font-size:11.5px; letter-spacing:.24em; color:var(--gold); }
.field input,.field select,.field textarea{
  width:100%; padding:13px 2px;
  background:transparent;
  border:0; border-bottom:1px solid #DCDCDC;
  font-size:15px;
  transition:border-color .4s var(--ease);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:#B4B4B4; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--brand);
}
.contact-form .btn{ margin-top:10px; }
.form-tip{ font-size:12px; color:var(--muted); text-align:center; }

.platforms{
  margin-top:clamp(48px,6vw,84px);
  padding-top:38px; border-top:1px solid var(--line);
  text-align:center;
}
.platforms-title{ font-size:11.5px; letter-spacing:.32em; color:var(--gold); margin-bottom:26px; }
.platform-list{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.platform{
  padding:12px 30px; border:1px solid var(--line);
  font-size:13.5px; color:var(--brand-deep);
  transition:all .45s var(--ease);
}
.platform:hover{ border-color:var(--brand); color:var(--brand); }

/* ==========================================================================
   页脚（内页通用）——整块用品牌色，和主页一个调子
   底上的 logo 用 white 字那版 logo.png（深色底上才是"正常颜色"）
   ========================================================================== */
.site-footer{
  background:var(--brand);
  color:rgba(255,255,255,.7);
  padding:clamp(56px,7vw,88px) 0 30px;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr;
  gap:clamp(28px,4vw,60px); padding-bottom:46px;
}
.footer-logo{ width:clamp(150px,15vw,210px); height:auto; }
.site-footer .logo-cn{ color:#fff; font-size:20px; }
.site-footer .logo-en{ margin-top:8px; display:block; }
.footer-desc{ margin-top:24px; font-size:13px; line-height:2; color:rgba(255,255,255,.7); }
.footer-slogan{
  margin-top:22px;
  font-size:15px; letter-spacing:.14em; line-height:1.9;
  color:rgba(255,255,255,.86);
}
.footer-nav h4{
  font-size:12px; letter-spacing:.28em; color:var(--gold-soft);
  font-family:var(--sans); font-weight:400; margin-bottom:20px;
}
.footer-nav a,.footer-nav p{
  display:block; font-size:13.5px; line-height:2.4;
  color:rgba(255,255,255,.7); transition:color .35s var(--ease);
}
.footer-nav a:hover{ color:#fff; }
.footer-bottom a{ color:rgba(255,255,255,.6); transition:color .35s var(--ease); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.2);
  font-size:12px; color:rgba(255,255,255,.5);
}

/* ==========================================================================
   滚动入场
   ========================================================================== */
/* ==========================================================================
   山场 · 整幅图
   ========================================================================== */
.band-photo{ background:var(--paper); }
.band-figure{ margin:0; overflow:hidden; }
.band-figure img{ width:100%; height:min(52vh, 540px); object-fit:cover; }
.band-caption{ padding:clamp(40px,5vw,68px) 0 clamp(52px,7vw,96px); }
.band-title{
  margin:16px 0 18px; max-width:15em;
  font-size:clamp(21px,2.5vw,32px); line-height:1.55; color:var(--brand-deep);
}
.band-text{
  max-width:44em; margin-bottom:28px;
  color:var(--muted); font-size:15.5px; line-height:2.05;
}

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1080px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }

  .nav.is-open{
    display:flex; flex-direction:column; align-items:flex-start;
    position:absolute; left:0; right:0; top:100%;
    background:var(--brand-deep);
    border-bottom:1px solid rgba(255,255,255,.16);
    padding:26px 24px 34px; gap:6px;
  }
  .nav.is-open a{
    width:100%; padding:12px 0; font-size:15px;
    color:var(--gold-on-brand);
    border-bottom:1px solid rgba(255,255,255,.16);
  }

  .hero-grid,.dark-grid,.supply-grid,.contact-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }

  .strip-grid{ grid-template-columns:repeat(2,1fr); }
  .strip-item{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-right:0; }
  .strip-item:nth-child(1),.strip-item:nth-child(2){ border-top:0; }

  .brand-grid,.biz-grid,.journal-grid{ grid-template-columns:1fr 1fr; }
  .brand-grid > :last-child,.biz-grid > :last-child,.journal-grid > :last-child{ grid-column:1 / -1; }
  .journal-grid > :last-child .photo{ aspect-ratio:16/9; }

  .product-grid,.team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:680px){
  body{ font-size:15.5px; }
  .wrap{ width:calc(100% - 40px); }
  .header-actions .btn{ display:none; }

  .hero{ padding-top:calc(72px + 40px); }
  .hero-meta{ gap:28px; }

  .strip-grid,.brand-grid,.biz-grid,.journal-grid,.product-grid,.team-grid,.footer-grid{ grid-template-columns:1fr; }
  .strip-item{ padding-block:28px; }
  .journal-grid > :last-child .photo{ aspect-ratio:4/3; }

  .jobs-band{ flex-direction:column; align-items:flex-start; }
  .qr-row{ gap:24px; }
  .footer-bottom{ flex-direction:column; gap:8px; }
}

/* ==========================================================================
   小程序购买弹层
   产品卡与页脚"微信小程序"都走这里：电脑显示小程序码扫码，手机长按识别。
   缺图时沿用 .photo 的标注占位框，不会出现裂图。
   ========================================================================== */
.buy-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.buy-modal[hidden]{ display:none; }

.buy-backdrop{
  position:absolute; inset:0;
  background:rgba(0,60,63,.45);
  opacity:0; transition:opacity .28s var(--ease);
}

.buy-panel{
  position:relative; z-index:1;
  width:min(384px,100%);
  padding:clamp(32px,4vw,46px) clamp(24px,3.4vw,40px);
  background:var(--white);
  text-align:center;
  box-shadow:0 30px 80px rgba(0,60,63,.2);
  opacity:0; transform:translateY(14px);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.buy-modal.is-open .buy-backdrop{ opacity:1; }
.buy-modal.is-open .buy-panel{ opacity:1; transform:none; }

.buy-close{
  position:absolute; top:10px; right:12px;
  width:38px; height:38px;
  font-size:22px; line-height:1;
  color:var(--muted); background:none; border:0; cursor:pointer;
  transition:color .3s var(--ease);
}
.buy-close:hover{ color:var(--brand-deep); }

.buy-panel .eyebrow{ margin-bottom:14px; }
.buy-panel h3{ font-size:20px; color:var(--brand-deep); margin-bottom:8px; }
.buy-product{ font-size:13px; letter-spacing:.16em; color:var(--brand); margin-bottom:24px; }
.buy-qr{ width:200px; margin:0 auto 22px; }
.buy-tip{ font-size:12.5px; color:var(--muted); line-height:1.9; }

.no-scroll{ overflow:hidden; }

/* ==========================================================================
   独立主页（index.html）· 一屏、不可下拉
   只做两件事：① 品牌配色与格调 —— logo 是这一页唯一的主视觉
              ② 四个入口按钮：品牌 / 产品 / 供应链 / 我们
   光沿 logo 的边线扫过：logo 静止不动，只有光在走。
   光带用 logo-edge.png 当蒙版，所以只会亮在 logo 的边线上。
   ========================================================================== */
body.page-home{
  height:100vh; height:100dvh;
  overflow:hidden;
  background:var(--brand);
}

.home{
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:var(--brand);
  color:#fff;
}

/* ---------- logo：正中偏上 ---------- */
.home-stage{
  display:flex; flex-direction:column; align-items:center;
  /* 顶部留白 19vh：logo 的上沿再往上一点点 */
  padding:19vh clamp(20px,4vw,64px) clamp(8px,1.6vh,24px);
  min-height:0;
}
.home-logo-wrap{ position:relative; display:block; }
.home-logo{ display:block; width:clamp(180px, 20vw, 420px); height:auto; }

/* 光带：不支持遮罩的浏览器直接不显示，避免出现一条横着扫的光 */
.home-logo-light{ display:none; }

@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) {
  .home-logo-light{
    display:block;
    position:absolute; inset:0; pointer-events:none; overflow:hidden;
    -webkit-mask-image:url("../img/logo-edge.png");
            mask-image:url("../img/logo-edge.png");
    -webkit-mask-size:100% 100%;
            mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
  }
  .home-logo-light i{
    position:absolute; top:-2%; left:0;
    width:58%; height:104%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,238,199,.30) 36%,
      rgba(255,250,236,.98) 50%,
      rgba(255,238,199,.30) 64%,
      rgba(255,255,255,0) 100%);
    animation:homeLight 8.5s cubic-bezier(.45,0,.55,1) infinite;
  }
}

@keyframes homeLight{
  0%   { transform:translateX(-110%); }
  41%  { transform:translateX(185%); }   /* 约 3.5 秒扫完 */
  100% { transform:translateX(185%); }
}

@media (prefers-reduced-motion:reduce){
  .home-logo-light i{ animation:none; opacity:0; }
}

/* ---------- 四个入口按钮：排在 logo 之下一行 ----------
   每块默认是"蒙版画面"：照片 + 模糊 + 深色罩，悬停时模糊退掉、画面变清晰 */
.home-nav{
  /* 四个入口：一行四块、等宽，四张图之间留出"约六成张图"的空白。
     4 块 + 3 个约 0.625 块 = 5.875 块宽 = 整行宽度
     → 块宽 = 整行/5.875，间隙 ≈ 整行 × 0.106。
     想更宽松就加大下面的间距系数，想更紧凑就减小它。
     这是按电脑屏幕定的尺寸；手机上另有单独一套（见文件末尾的手机端一段）。 */
  width:min(80vw, 1400px);
  margin-top:17vh;              /* 与 logo 的间距：再拉开一点 */
  display:flex; flex-wrap:wrap; justify-content:center;
  /* 间隙 ≈ 图片宽度的 56%（上一版 62.5% 略宽，再收一点） */
  column-gap:calc(min(80vw, 1400px) * 0.099);
  row-gap:calc(min(80vw, 1400px) * 0.099);
}
.home-btn{
  position:relative; overflow:hidden;
  flex:1 1 0; min-width:0;      /* 四块等宽 */
  min-height:clamp(118px, 15.5vh, 196px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:14px clamp(8px,1vw,16px);
  border:0;                     /* 不要框 */
  background:none;              /* 不要底 */
  color:#fff; text-align:center;
  transition:opacity .6s var(--ease);
}
/* 直接显示图片（不做毛玻璃、不留底色） */
.home-btn img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.home-btn::after{
  content:""; position:absolute; inset:0;
  z-index:1;
  /* 一层很轻、很均匀的暗色（不是渐变"底"），只是让正中间的白字在照片上看得清 */
  background:rgba(0,42,45,.30);
  opacity:1;
  transition:opacity .6s var(--ease);
}
.home-btn:hover img{ transform:scale(1.04); }
.home-btn:hover::after{ opacity:.46; }
.home-btn-cn,.home-btn-en{ position:relative; z-index:2; white-space:nowrap; }
.home-btn-cn{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(16px,1.35vw,20px);
  letter-spacing:.3em; text-indent:.3em;
  /* 文字直接压在照片正中间，只给一点点投影保证任何底图上都清楚 */
  text-shadow:0 1px 10px rgba(0,38,41,.6);
}
.home-btn-en{
  font-family:var(--latin); font-size:9px;
  letter-spacing:.24em; text-indent:.24em;
  color:rgba(255,255,255,.62);
  text-shadow:0 1px 8px rgba(0,38,41,.6);
  transition:color .5s var(--ease);
}
.home-btn:hover .home-btn-en{ color:rgba(255,255,255,.9); }

.home-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 26px; flex-wrap:wrap;
  padding:0 clamp(20px,4vw,56px) clamp(16px,2.2vh,26px);
  font-size:11.5px; letter-spacing:.16em; color:rgba(255,255,255,.55);
}
/* 左下角一行：公司名 · 英文 · 已服务时长（同一个字体字号） */
.home-foot-left{
  display:flex; align-items:center; gap:0 14px; flex-wrap:wrap;
}
.home-dot{ color:rgba(255,255,255,.3); }
.home-foot b{
  font-weight:400;
  font-variant-numeric:tabular-nums;   /* 跳秒时整行不左右抖 */
  font-feature-settings:"tnum" 1;
}
/* 右下角：进后台的入口，做得很低调，鼠标移上去才亮 */
.home-foot-right{ display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; }
.home-icp,
.home-admin{
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:2px;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.home-icp:hover,
.home-admin:hover{ color:#fff; border-color:rgba(255,255,255,.7); }

@media (max-width:820px){
  .home-logo{ width:clamp(170px,46vw,280px); }
  .home-stage{ padding-top:16vh; }
  /* 手机端 2×2：两列 + 一个 20% 的间隔 → 每块 = 40% 宽，间隔正好是半块。
     注意 flex 换行是按 flex-basis 判断的，basis 必须 ≤40%，否则会变成一行一块。 */
  .home-nav{ width:100%; margin-top:9vh; column-gap:20%; row-gap:22px; }
  .home-btn{ flex:1 1 38%; min-width:0; padding:18px 10px; }
  /* 手机上一行排不下就折行，整体居中 */
  .home-foot{ justify-content:center; gap:10px 18px; font-size:11px; }
  .home-foot-left{ justify-content:center; gap:0 10px; }
}

/* 窗口偏窄时英文小标收紧一点，避免顶到按钮边 */
@media (max-width:1100px){
  .home-btn-en{ font-size:8px; letter-spacing:.14em; text-indent:.14em; }
}

/* ==========================================================================
   图文（文章列表 / 详情）
   由后台发布的内容使用这部分样式
   ========================================================================== */
.journal-card{ cursor:pointer; }
.journal-card:hover h3{ color:var(--brand); }

.article-head{ max-width:820px; margin:0 auto clamp(28px,4vw,48px); text-align:center; }
.article-title{
  font-size:clamp(24px,3vw,38px); line-height:1.5;
  color:var(--brand-deep); letter-spacing:.04em;
}
.article-meta{
  display:flex; justify-content:center; gap:14px; margin-top:18px;
  font-size:11.5px; letter-spacing:.24em; color:var(--gold);
}
.article-cover{ max-width:1000px; margin:0 auto clamp(32px,4vw,56px); }
.article-cover img{ width:100%; height:auto; display:block; }

.article-body{ max-width:44em; margin:0 auto; font-size:16.5px; line-height:2.15; color:#333; }
.article-body p{ margin:0 0 1.35em; }
.article-body h2{ font-size:23px; line-height:1.6; margin:2em 0 .7em; color:var(--brand-deep); }
.article-body h3{ font-size:19px; line-height:1.6; margin:1.8em 0 .6em; color:var(--brand-deep); }
.article-body h4{ font-size:17px; margin:1.6em 0 .5em; color:var(--brand-deep); }
.article-body img{ max-width:100%; height:auto; margin:1.3em auto; display:block; }
.article-body blockquote{
  margin:1.5em 0; padding:2px 0 2px 20px;
  border-left:2px solid var(--gold); color:var(--muted); font-size:15.5px;
}
.article-body ul,.article-body ol{ margin:0 0 1.35em; padding-left:1.5em; list-style:revert; }
.article-body li{ margin-bottom:.4em; }
.article-body a{ color:var(--brand); border-bottom:1px solid rgba(0,114,120,.3); }
.article-body a:hover{ border-color:var(--brand); }
.article-body hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.article-body table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:14.5px; }
.article-body th,.article-body td{ border:1px solid var(--line); padding:10px 12px; text-align:left; }
.article-body th{ background:var(--paper); font-weight:600; }
.article-body figcaption{ font-size:13px; color:var(--muted); text-align:center; margin-top:-.8em; }

.article-foot{
  max-width:44em; margin:clamp(40px,5vw,72px) auto 0;
  padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.article-more{ max-width:44em; margin:clamp(40px,5vw,64px) auto 0; }
.article-more ul{ margin-top:14px; }
.article-more li{ border-bottom:1px solid var(--line); }
.article-more li a{ display:block; padding:14px 0; color:var(--brand-deep); }
.article-more li a:hover{ color:var(--brand); }

/* ==========================================================================
   图文总览（公众号历史消息式：只列标题与概要）
   ========================================================================== */
.archive{ max-width:52em; margin:0 auto; border-top:1px solid var(--line); }
.archive-item{ display:block; padding:clamp(22px,2.8vw,34px) 0; border-bottom:1px solid var(--line); }
.archive-item h3{ font-size:19px; line-height:1.6; color:var(--brand-deep); margin-bottom:10px; transition:color .4s var(--ease); }
.archive-item p{ font-size:14px; line-height:1.95; color:var(--muted); }
.archive-item:hover h3{ color:var(--brand); }
.archive-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:11px; letter-spacing:.22em; color:var(--gold); }
.archive-meta time{ color:var(--muted); letter-spacing:.12em; }
.archive-col{ color:var(--brand); }

/* ==========================================================================
   产品详情页
   ========================================================================== */
.product-detail{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,80px); align-items:start; }
.product-detail-photo{ margin:0; }
.product-detail .hero-cta{ margin-top:30px; }
.product-spec{ margin:28px 0 0; }
.product-spec > div{ display:flex; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.product-spec dt{ width:5em; color:var(--muted); font-size:12px; letter-spacing:.18em; }
.product-spec dd{ margin:0; color:var(--brand-deep); }
.product-detail-body{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); color:#3a3a3a; }
.product-detail-body p{ margin:0 0 1.2em; line-height:2.05; }
@media (max-width:900px){ .product-detail{ grid-template-columns:1fr; } }

/* 产品详情页里的"关于这款茶"文章列表（放在购买按钮下方） */
.product-articles{ margin-top:clamp(32px,4vw,52px); }
.product-articles .archive{ max-width:none; margin:0; }
.product-articles .archive-item h3{ font-size:17.5px; }
.product-articles .archive-item p{ font-size:13.5px; }
.product-articles .archive-meta{ margin-bottom:10px; }
@media (max-width:900px){ .product-articles .archive-item{ padding:18px 0; } }

/* ==========================================================================
   品牌页：企业动态列表 + 品牌构成
   ========================================================================== */
.section-journal{ padding-top:clamp(46px,5.5vw,86px); }
.section-journal .archive{ max-width:46em; }
.section-journal .archive-item{ padding:clamp(20px,2.4vw,30px) 0; }
.section-journal .archive-item h3{ font-size:18px; }

/* 摘要最多三行 */
.archive-item p{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  line-clamp:3; overflow:hidden;
}

/* 主品牌 / 副品牌 */
.brand-meta-band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.brand-meta{ display:flex; flex-wrap:wrap; gap:clamp(36px,6vw,104px); padding:clamp(20px,2.4vw,30px) 0; }
.brand-meta > div{ display:flex; flex-direction:column; gap:6px; }
.brand-meta span{ font-size:11px; letter-spacing:.28em; color:var(--gold); }
.brand-meta strong{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--brand-deep); letter-spacing:.08em; }

/* ==========================================================================
   品牌页四个方块（可点击，进各自导读页）
   ========================================================================== */
.strip-grid{ grid-template-columns:repeat(4,1fr); }
a.strip-item{ transition:background .45s var(--ease); }
a.strip-item h3{ transition:color .4s var(--ease); }
.strip-arrow{
  display:inline-block; margin-left:10px; font-size:13px; color:var(--gold);
  transform:translateX(0); transition:transform .45s var(--ease);
}
a.strip-item:hover{ background:rgba(0,114,120,.05); }
a.strip-item:hover h3{ color:var(--brand); }
a.strip-item:hover .strip-arrow{ transform:translateX(5px); }
@media (max-width:980px){
  .strip-grid{ grid-template-columns:repeat(2,1fr) !important; }
}

/* 导读页底部的"更多" */
.archive-more{ margin-top:clamp(28px,3.4vw,44px); text-align:center; }

/* ==========================================================================
   图文列表里的小图 + 文字（公众号历史消息式的两栏结构）
   archiveList() 生成的是 .archive-item > .archive-thumb + .archive-text
   ========================================================================== */
.archive-item{
  display:grid;
  grid-template-columns:clamp(96px, 9.5vw, 128px) minmax(0, 1fr);
  gap:clamp(18px, 2.2vw, 30px);
  align-items:start;
}
.archive-thumb{
  aspect-ratio:4/3; overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
}
.archive-thumb img{ width:100%; height:100%; object-fit:cover; }
.archive-thumb.is-empty{
  display:flex; align-items:center; justify-content:center;
}
.archive-thumb.is-empty::after{
  content:"无图";
  font-size:11px; letter-spacing:.2em; color:rgba(26,26,26,.3);
}
.archive-text{ min-width:0; }
.archive-text h3{ margin-top:0; }

@media (max-width:680px){
  .archive-item{ grid-template-columns:88px minmax(0,1fr); gap:16px; }
  .archive-item h3{ font-size:16.5px; }
}

/* ==========================================================================
   品牌页第一屏：左边图文列表 + 右边 4:5 轮播
   左边按"10 条以上"设计，右边轮播随滚动停在视口里（sticky）
   ========================================================================== */
.feature-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(300px, 460px);
  gap:clamp(32px, 4.6vw, 74px);
  align-items:start;
}
.feature-head{ margin-bottom:clamp(6px, 1vw, 14px); }
.feature-head .sec-desc{ margin-top:14px; }
.feature-list .archive{ max-width:none; margin:0; }
.feature-list .archive-item{ padding:clamp(16px, 1.9vw, 24px) 0; }
.feature-list .archive-item h3{ font-size:18px; }
.feature-list .archive-meta{ margin-bottom:9px; }
.feature-more{ margin-top:clamp(24px, 3vw, 38px); }

.feature-slide{ position:sticky; top:calc(var(--header-h) + 24px); }
.slides{
  position:relative;
  aspect-ratio:4/5;              /* 约 460×575 */
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
}
.slides img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity 1.2s var(--ease);   /* 每 5 秒淡入切换 */
}
.slides img.on{ opacity:1; }
.slides a{ position:absolute; inset:0; display:block; }
.slides.is-empty{ display:flex; align-items:center; justify-content:center; }
.slides.is-empty::after{
  content:attr(data-label);
  font-size:12px; letter-spacing:.22em; color:rgba(26,26,26,.42);
}

@media (max-width:980px){
  .feature-grid{ grid-template-columns:1fr; }
  .feature-slide{ position:static; }
  .slides{ aspect-ratio:4/5; max-width:460px; margin-inline:auto; }
}

/* ==========================================================================
   产品中心：按品牌 / 品类分组，每组一行一款（左主图 + 右信息），多的给「更多」
   ========================================================================== */
.product-block{ margin-top:clamp(48px,5.5vw,84px); }
.product-block:first-of-type{ margin-top:clamp(20px,2.6vw,36px); }
.product-block-head{
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.product-block-head h2{ font-size:22px; letter-spacing:.1em; color:var(--brand-deep); }

.product-rows{ }
.product-row{
  display:grid;
  /* 左边一张小缩略图，右边全部文字 */
  grid-template-columns:clamp(96px, 9vw, 128px) minmax(0, 1fr);
  gap:clamp(20px, 2.8vw, 40px);
  align-items:start;
  padding:clamp(24px, 3vw, 40px) 0;
  border-bottom:1px solid var(--line);
}
.product-row-photo{ margin:0; width:100%; }
.product-row-photo img{ transition:transform 1.4s var(--ease); }
.product-row:hover .product-row-photo img{ transform:scale(1.035); }
.product-row-name{
  font-size:clamp(17px, 1.5vw, 19px);
  font-weight:600;
  line-height:1.7;
  color:var(--brand-deep);
  margin:0;
}
.product-row-line{
  margin-top:4px;
  font-size:15px; line-height:1.9; color:var(--brand-deep);
}
.product-lbl{ color:var(--muted); }
.product-row-note{ max-width:34em; color:var(--muted); }
.product-row-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:16px;
}
.product-row-actions .btn{ min-width:96px; border-radius:3px; }
.product-group-foot{ margin-top:clamp(22px,2.6vw,32px); }
.product-group-back{ margin-top:clamp(32px,4vw,52px); text-align:center; }
@media (max-width:900px){
  .product-row{ grid-template-columns:96px minmax(0, 1fr); gap:16px; }
  .product-row-name{ font-size:17px; }
  .product-row-line{ font-size:14px; }
  .product-block{ margin-top:44px; }
}

/* ==========================================================================
   招商加盟（产品页底部 / join.html）
   ========================================================================== */
.join-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 460px);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.join-grid .archive{ max-width:none; margin:0; }
.join-steps{ border-top:1px solid var(--line); }
.join-steps li{ padding:clamp(18px,2.2vw,28px) 0; border-bottom:1px solid var(--line); }
.join-steps h3{ font-size:18px; color:var(--brand-deep); margin-bottom:8px; }
.join-steps p{ font-size:14px; line-height:2; color:var(--muted); }
.join-form{ margin:0; }
.join-form .field textarea{ min-height:104px; }
.join-note{ margin-top:18px; font-size:12.5px; color:var(--muted); line-height:1.9; }
.join-ok{
  max-width:44em; margin:0 auto; text-align:center;
  padding:clamp(28px,4vw,46px) clamp(20px,3vw,40px);
  border:1px solid var(--line); background:var(--white);
}
.join-ok h2{ font-size:22px; color:var(--brand-deep); margin-bottom:14px; }
.join-ok p{ color:var(--muted); line-height:2.05; }
.join-ok .btn{ margin-top:26px; }
@media (max-width:980px){
  .join-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   手机端（≤820px）：按手机的窄长比例重排，不是把电脑版面等比缩小
   —— 一列到底、一行一款改上下排、首页方块 2×2 用手机上更顺眼的 4:3
   ========================================================================== */
@media (max-width:820px){
  .wrap{ width:calc(100% - 36px); }
  .sec-head{ margin-bottom:34px; }
  .sec-head-row{ align-items:flex-start; }
  .sec-desc{ font-size:15px; line-height:1.95; }

  /* 表单控件字号不小于 16px：iPhone 上点了输入框不会把整页放大 */
  .field input,.field select,.field textarea{ font-size:16px; }

  /* 品牌页第一屏：先标题 → 再轮播 → 再图文列表 → 最后"更多" */
  .feature-grid{ grid-template-columns:1fr; gap:22px; }
  .feature-list{ display:contents; }
  .feature-head{ order:1; }
  .feature-slide{ order:2; }
  .feature-list .archive{ order:3; }
  .feature-more{ order:4; margin-top:4px; }
  .slides{ aspect-ratio:4/3; max-width:none; }   /* 手机上横图比竖图更合比例、不用划很久 */

  /* 产品：手机上也保持"小缩略图 + 文字"的排法，不放大图 */
  .product-block{ margin-top:36px; }
  .product-block-head h2{ font-size:19px; }
  .product-row{ grid-template-columns:84px minmax(0, 1fr); gap:14px; padding:20px 0; }
  .product-row-name{ font-size:16px; }
  .product-row-line{ font-size:13.5px; }
  .product-row-actions{ gap:10px; margin-top:12px; }
  .product-row-actions .btn{ flex:1 1 auto; text-align:center; min-width:0; padding:9px 12px; }

  /* 供应链价格表：等级在上、形态在下、价格在右侧居中 */
  .supply-table .row{
    grid-template-columns:1fr auto; gap:2px 14px;
    padding:14px 2px; font-size:13.5px;
  }
  .supply-table .row span:nth-child(1){ grid-column:1; grid-row:1; }
  .supply-table .row span:nth-child(2){ grid-column:1; grid-row:2; font-size:12.5px; color:var(--muted); }
  .supply-table .row span:nth-child(3){ grid-column:2; grid-row:1 / span 2; align-self:center; }

  /* 首页四个入口：2×2，块用 4:3（手机上的画幅比例） */
  .home-btn{ min-height:0; aspect-ratio:4/3; }
  .home-foot{ padding-bottom:calc(clamp(16px,2.2vh,26px) + env(safe-area-inset-bottom,0px)); }

  /* 图文正文：手机上每行大约 18 个字，行距略收 */
  .article-body{ font-size:16px; line-height:2; }
  .article-body h2{ font-size:20px; }
  .article-body h3{ font-size:17.5px; }
  .article-meta{ gap:10px 12px; }

  /* 长英文/长链接不要撑破版面 */
  .article-body,.join-note,.footer-desc{ overflow-wrap:anywhere; }

  /* 页脚在手机上改为左右两块并排（不至于拉很长） */
  .footer-grid{ gap:22px; padding-bottom:34px; }
}

@media (max-width:420px){
  .home-logo{ width:clamp(150px,44vw,220px); }
  .home-stage{ padding-top:16vh; }
  .home-nav{ margin-top:6vh; row-gap:16px; }   /* 左右间距仍是半块宽（20% 列间距） */
  .sec-title{ font-size:26px; }
  .article-title{ font-size:23px; }
}