/* =====================================================================

   www.feiyanggroup.cn — redesign.css

   2026-10 light "Plan A" layer: the incumbent navy + gold identity kept and

   refined, with the credential/CTA surfaces moved to the Hontai cobalt.

   Load LAST (after css/site.css, before css/hg-animate.css). Purely additive:

   delete the <link> in _build/tpl.mjs and the site reverts to the old look.

   1. tokens     — palette, rhythm, link/ink roles

   2. base       — type balance, selection, focus, scrollbar, .nb

   3. chrome     — utility bar, navbar, dropdown, progress, to-top

   4. hero       — left-weighted cobalt scrim, inner-page banner

   5. sections   — section head, eyebrow, value band, stats, applications

   6. components — cards, product cards, bands, chips, tables, news, forms

   7. footer     — deep cobalt-navy

   8. responsive

   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* ink + surfaces */
  --hg-navy:#0F2440;
  --hg-navy-2:#1F5FA8;
  --hg-ink:#1B2733;
  --hg-body:#4B5563;
  --hg-muted:#64748B;
  --hg-bg:#FFFFFF;
  --hg-bg-alt:#F4F7FB;
  --hg-line:#E3E9F1;
  --hg-radius:14px;
  --hg-shadow:0 8px 28px rgba(15,36,64,.07);
  --hg-shadow-lg:0 18px 50px rgba(15,36,64,.13);
  /* brand gold — kept, but deepened so small gold text clears 4.5:1 */
  --hg-gold:#BE9440;
  --hg-gold-dark:#8F6C22;
  --hg-gold-soft:rgba(190,148,64,.15);
  /* cobalt family (from the Hontai system) used for fills and links */
  --cf-cobalt:#1F5FA8;
  --cf-cobalt-d:#16467C;
  --cf-cobalt-tint:#E4EEF9;
  --cf-cobalt-ink:#14406F;
  --cf-link:#17549B;
  --cf-nav-h-shadow:0 6px 26px rgba(15,36,64,.14);
  /* rhythm */
  --cf-gap:72px;
  --cf-gap-lg:96px;
}

/* ---------- 2. base ---------- */
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
/* phrases that must never break mid-word (honour titles, grade names) */
.nb{white-space:nowrap}
::selection{background:rgba(31,95,168,.20);color:var(--hg-navy)}
html{scrollbar-color:#B9C6D6 #F1F5F9}
a:focus-visible,button:focus-visible,.hg-btn:focus-visible{outline:2px solid var(--cf-cobalt);outline-offset:3px}
.hg-h1,.hg-h2,.hg-h3,.hg-h4{color:var(--hg-navy);letter-spacing:-.01em}
.hg-h2{font-size:clamp(21px,2.4vw,28px);line-height:1.45;margin-bottom:.5em}
.desc,.hg-lead{color:var(--hg-body)}
.mg{margin-top:var(--cf-gap)}
.mg-lg{margin-top:var(--cf-gap-lg)}
.hg-pb{padding-bottom:var(--cf-gap)}

/* ---------- 3. chrome ---------- */
#header.is-scrolled{box-shadow:var(--cf-nav-h-shadow)}
.cf-topbar{background:linear-gradient(90deg,var(--hg-navy) 0%,#16365B 100%)}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a{color:var(--cf-cobalt)}
.navbar-default .navbar-nav>li>a:after{background:var(--hg-gold)}
.cf-dd-menu>li>a:hover,.cf-dd-menu>li>a:focus{background:var(--cf-cobalt-tint)}
.cf-dd-grade{color:var(--cf-cobalt-ink)}
.cf-dd-all>a{color:var(--cf-link)}
.cf-dd-all>a:hover{color:var(--cf-cobalt-d)}
.cf-progress{background:linear-gradient(90deg,var(--hg-gold),var(--hg-gold-dark))}
.cf-to-top{background:var(--hg-navy);box-shadow:0 10px 26px rgba(15,36,64,.26)}
.cf-to-top:hover{background:var(--cf-cobalt)}
.cf-skip:focus{background:var(--hg-navy)}

/* ---------- 4. buttons ---------- */
.hg-btn{letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s,color .2s,border-color .2s}
.hg-btn-gold{background:linear-gradient(135deg,#B08634,#8A6620);box-shadow:0 8px 20px rgba(138,102,32,.26)}
.hg-btn-gold:hover{box-shadow:0 12px 26px rgba(138,102,32,.34)}
.hg-btn-navy,.hg-btn-primary{background:var(--cf-cobalt);color:#fff}
.hg-btn-navy:hover,.hg-btn-primary:hover{background:var(--cf-cobalt-d);color:#fff}
.hg-btn-outline{border-color:#BCCCE0;color:var(--cf-link)}
.hg-btn-outline:hover{background:var(--cf-cobalt);border-color:var(--cf-cobalt);color:#fff}
.hg-btn-ghost{border-color:rgba(255,255,255,.85)}

/* ---------- 5. hero + inner banner: cobalt scrim, copy left ---------- */
.cf-hero{background:var(--hg-navy)}
.cf-hero:after{background:linear-gradient(96deg,rgba(8,28,56,.80) 0%,rgba(8,28,56,.46) 46%,rgba(8,28,56,.08) 78%)}
.cf-hero .bannercont{text-align:left;left:50%;right:auto;width:min(1170px,100%);bottom:auto;top:50%;transform:translate(-50%,-42%)}
.cf-hero .banner_text{max-width:17em;line-height:1.18;text-shadow:0 4px 26px rgba(6,20,40,.45)}
.cf-hero .banner_sub{max-width:36em;margin-left:0;margin-right:0}
.cf-hero .banner_ctas{justify-content:flex-start}
.cf-hero .banner_ctas .hg-btn-ghost:hover{background:rgba(255,255,255,.16)}
/* the locale photo lives in background-image (site.css); swap the scrim that sits
   on top of it for the same left-weighted cobalt used by the home hero */
.lanmu{background-image:linear-gradient(96deg,rgba(8,28,56,.74) 0%,rgba(8,28,56,.44) 56%,rgba(8,28,56,.12) 100%),url(../images/opt/lanmu-cn.jpg)!important;background-position:center 38%!important}
.lanmu.cf-lanmu-en{background-image:linear-gradient(96deg,rgba(8,28,56,.74) 0%,rgba(8,28,56,.44) 56%,rgba(8,28,56,.12) 100%),url(../images/opt/lanmu-en.jpg)!important}
.lanmu:before{background:linear-gradient(96deg,rgba(8,28,56,.34) 0%,rgba(8,28,56,.06) 62%,rgba(8,28,56,0) 100%)}
.lanmu .linktit{text-shadow:0 3px 18px rgba(6,20,40,.45);text-align:left!important;max-width:18em}
.lanmu .cf-lanmu-sub{max-width:44em}
/* the audit flagged all-caps breadcrumbs; sentence case reads better and is calmer */
.lanmu .breadcrumb_text{text-transform:none;letter-spacing:.01em}
.lanmu .breadcrumb_text:hover{color:var(--hg-gold)}

/* ---------- 6. section heads ---------- */
.hg-section-head{
  display:grid;grid-template-columns:minmax(0,1fr);align-items:end;gap:0 48px;
  max-width:none;margin:0 auto 42px;text-align:left;
}
.hg-section-head:has(> p){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hg-section-head .eyebrow{grid-column:1;grid-row:1;margin-bottom:8px}
.hg-section-head h2{grid-column:1;grid-row:2;margin-bottom:0}
.hg-section-head .hg-rule{grid-column:1;grid-row:3;width:52px;height:3px;margin:16px auto 0 0;
  background:linear-gradient(90deg,var(--hg-gold),#E4CC93)}
.hg-section-head p{grid-column:2;grid-row:2 / span 2;margin:0;font-size:15.5px;line-height:1.8;color:var(--hg-muted)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--hg-gold-dark)}
/* heads that sit inside a flex row (credential strip) keep their own flow */
.cf-eyebrow-row .hg-section-head{display:block}
.cf-eyebrow-row .hg-section-head .hg-rule{margin-top:12px}

/* ---------- 7. value band + stats ---------- */
.hg-value-band .eyebrow{margin-bottom:14px}
.hg-stat-row{margin-top:40px}
.hg-stat{padding:20px 12px}
.hg-stat .num{font-size:clamp(26px,3vw,34px);color:var(--cf-cobalt);font-variant-numeric:tabular-nums}
.hg-stat .num em{color:var(--hg-gold-dark)}
.hg-stat .lbl{font-size:12.5px;letter-spacing:.1em;color:var(--hg-muted)}

/* ---------- 8. applications: one hairline grid, not six floating cards ---------- */
.cf-app-band{background:var(--hg-bg-alt);padding:var(--cf-gap) 0}
.cf-app-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hg-line);border:1px solid var(--hg-line);border-radius:var(--hg-radius);overflow:hidden;
}
.cf-app{background:#fff;border:0;border-radius:0;box-shadow:none;padding:28px 26px;text-align:left;transition:background .22s}
.cf-app:hover{background:#FBFCFE;transform:none;box-shadow:none}
.cf-app svg{color:var(--hg-gold-dark);margin-bottom:12px}
.cf-app b{font-size:16px;letter-spacing:0}
.cf-app span{font-size:13.5px;margin-top:5px;line-height:1.6}

/* ---------- 9. cards ---------- */
.hg-card{border:1px solid var(--hg-line);box-shadow:var(--hg-shadow);transition:transform .25s,box-shadow .25s,border-color .25s}
.hg-card:hover{transform:translateY(-4px);box-shadow:var(--hg-shadow-lg);border-color:rgba(190,148,64,.5)}
.hg-card:before{background:linear-gradient(90deg,var(--hg-gold),#E4CC93)}
.hg-card h3{font-size:18.5px}
.hg-card-icon{flex:0 0 52px;width:52px;height:52px;border-radius:13px;background:var(--hg-gold-soft)}

/* home "why us" row: hairline list in two columns, CTA spanning the full width */
/* Bootstrap .row emits :before/:after clearfix boxes; inside a grid they become
   anonymous items and shove the first card into column two, so they are removed.
   The negative .row margins go too, so the hairlines sit on the container edge. */
.cf-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-left:0;margin-right:0}
.cf-why:before,.cf-why:after{content:none}
.cf-why>[class*="col-"]{float:none;width:auto;max-width:none;padding:0;margin-bottom:0}
.cf-why .hg-card{background:transparent;border:0;border-bottom:1px solid var(--hg-line);border-radius:0;
  box-shadow:none;padding:22px 6px 24px;transform:none;align-items:flex-start}
.cf-why .hg-card:before{display:none}
.cf-why .hg-card:hover{transform:none;box-shadow:none;background:#FAFBFD;border-color:var(--hg-line)}
.cf-why .hg-card-icon{flex:0 0 26px;width:auto;height:auto;background:none;border-radius:0;margin-top:3px}
.cf-why .hg-card-icon svg{width:24px;height:24px}
.cf-why .hg-card h3{font-size:17px;margin-bottom:6px}
.cf-why .hg-card p{font-size:14.5px;line-height:1.75}
.cf-why>[class*="col-"]:nth-last-child(2),.cf-why>[class*="col-"]:last-child{grid-column:1 / -1}
.cf-why-cta{background:linear-gradient(120deg,var(--cf-cobalt) 0%,var(--cf-cobalt-d) 100%);
  border-radius:var(--hg-radius);padding:28px 32px;margin-top:28px;
  display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;box-shadow:0 18px 44px rgba(22,70,124,.22)}
.cf-why-cta:after{display:none}
.cf-why-cta h2{margin:0;font-size:20px}
.cf-why-cta p{margin:0;flex:1 1 260px;color:rgba(226,238,250,.92)}

/* ---------- 10. product cards + product detail ---------- */
.hg-product-card{border:1px solid var(--hg-line);box-shadow:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.hg-product-card:hover{transform:translateY(-4px);box-shadow:var(--hg-shadow-lg);border-color:#D3DEEA}
.hg-product-card .hg-product-img{min-height:236px;padding:20px;background:linear-gradient(180deg,#F2F6FB,#FFF)}
.hg-product-card .hg-product-img img{max-height:236px!important;object-fit:contain}
.hg-product-card .hg-grade{font-size:21px;font-variant-numeric:tabular-nums}
.hg-product-card .hg-grade-tag{align-self:flex-start;color:var(--cf-cobalt-ink);background:var(--cf-cobalt-tint);letter-spacing:.04em;text-transform:none;font-size:12px}
.hg-product-card p{color:var(--hg-body)}
.hg-product-card .hg-more{color:var(--cf-link)}
.hg-product-card:hover .hg-more{color:var(--cf-cobalt-d);text-decoration:underline;text-underline-offset:3px}
.hg-detail-img{border:1px solid var(--hg-line);box-shadow:var(--hg-shadow);background:linear-gradient(180deg,#F2F6FB,#FFF)}
.hg-grade-chips a{color:var(--cf-cobalt-ink);background:var(--cf-cobalt-tint);border-color:#D5E3F2}
.hg-grade-chips a:hover{background:var(--cf-cobalt);border-color:var(--cf-cobalt);color:#fff}
.hg-spec-highlight .item b{color:var(--cf-cobalt)}
.hg-badge-cert{background:linear-gradient(135deg,var(--hg-navy),var(--cf-cobalt));border-color:var(--hg-gold)}

/* ---------- 11. bands, chips, plain links ---------- */
.hg-cta-band{background:linear-gradient(120deg,var(--cf-cobalt) 0%,var(--cf-cobalt-d) 100%);box-shadow:0 18px 44px rgba(22,70,124,.20)}
.hg-cta-band:after{display:none}
.hg-cta-band h2,.hg-cta-band h3{color:#fff}
.hg-cta-band p{color:rgba(226,238,250,.92)}
.hg-cta-band .hg-chip{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;padding:6px 15px}
.hg-cta-band .hg-link-plain{color:#fff}
.hg-cta-band .hg-link-plain:hover{color:var(--hg-gold)}
.hg-cta-band .eyebrow{color:#EFD9A6}
.hg-chip{color:var(--cf-cobalt-ink);background:var(--cf-cobalt-tint)}
.hg-link-plain{color:var(--cf-link)}
.hg-link-plain:hover{color:var(--cf-cobalt-d)}

/* ---------- 12. tables ---------- */
.hg-tds-head{background:linear-gradient(135deg,var(--hg-navy),var(--cf-cobalt))}
.hg-tds th,.hg-tds-table th{background:#EDF2F9;color:var(--hg-navy)}
.hg-tds td:first-child,.hg-tds-table td.prop{color:var(--hg-ink)}
.hg-tds tbody tr:hover td,.hg-tds-table tbody tr:hover td{background:#F5F9FE}
.cf-spec-wrap thead th{background:#EDF2F9}
.cf-cmp thead th{background:var(--hg-navy)}
.cf-cmp td.best{background:var(--cf-cobalt-tint)!important;color:var(--cf-cobalt-ink)}
.cf-cmp tbody th{background:#F6F9FC}
.cf-tds-bar{background:#F6F9FC}
.cf-tds-bar b{color:var(--hg-navy)}

/* ---------- 13. news + article ---------- */
.cf-news-card{border:1px solid var(--hg-line);box-shadow:none}
.cf-news-card:hover{box-shadow:var(--hg-shadow-lg);border-color:#D3DEEA}
/* the generated news card is one big <a>, so its heading must be given an ink
   colour explicitly or it inherits the link blue (h2 on the index, h3 elsewhere) */
.cf-news-card h2,.cf-news-card h3{color:var(--hg-navy);font-family:var(--hg-head);font-weight:700;
  font-size:17px;line-height:1.55;margin:0 0 8px;text-wrap:balance}
.cf-news-card:hover h2,.cf-news-card:hover h3{color:var(--cf-cobalt)}
.cf-news-grid .cf-news-card h2{font-size:16.5px}
.cf-news-card p{color:var(--hg-body)}
.cf-news-card .cf-news-more{color:var(--cf-link)}
.cf-news-tag,.cf-cert-tag{color:var(--hg-gold-dark);background:var(--hg-gold-soft)}
.cf-article h2{color:var(--hg-navy)}
.cf-article strong{color:var(--hg-navy)}
.cf-article a{color:var(--cf-link)}
.cf-article a:hover{color:var(--cf-cobalt-d)}
.cf-article ul li:before{background:var(--hg-gold)}

/* ---------- 14. evidence blocks: certs, patents, gallery, timeline, culture ---------- */
.cf-cert-fig,.cf-info-card{border:1px solid var(--hg-line);box-shadow:var(--hg-shadow)}
.cf-pat{border:1px solid var(--hg-line);box-shadow:var(--hg-shadow)}
.cf-pat:hover{box-shadow:var(--hg-shadow-lg)}
.cf-pat-yr{color:var(--hg-gold-dark)}
.cf-pat-arrow:hover{border-color:var(--cf-cobalt);color:var(--cf-cobalt)}
.cf-gallery figure,.cf-gallery .cf-shot{box-shadow:var(--hg-shadow)}
.cf-timeline:before{background:linear-gradient(180deg,var(--hg-gold),#E4CC93,rgba(190,148,64,.2))}
.cf-tl-item:before{border-color:var(--hg-gold)}
.cf-tl-item .yr{color:var(--hg-gold-dark)}
.cf-culture-item{border-left-color:var(--hg-gold)}
.cf-permit-facts b{color:var(--hg-navy)}

/* ---------- 15. forms ---------- */
.hg-form-panel{border:1px solid var(--hg-line);box-shadow:var(--hg-shadow)}
.hg-inquiry input[type=text],.hg-inquiry input[type=email],.hg-inquiry input[type=tel],
.hg-inquiry input[type=number],.hg-inquiry select,.hg-inquiry textarea{background:#FBFCFE;border:1.5px solid #DCE3EC}
.hg-inquiry input:focus,.hg-inquiry select:focus,.hg-inquiry textarea:focus{
  border-color:var(--cf-cobalt);box-shadow:0 0 0 3px rgba(31,95,168,.14);background:#fff}
.hg-inquiry label .req{color:#B3341F}
.hg-note-err{color:#B3341F}
.hg-note-ok{color:#12693A}
.cf-form-alt a,.cf-contact-list a{color:var(--cf-link)}
.cf-form-alt a:hover,.cf-contact-list a:hover{color:var(--cf-cobalt-d)}
.cf-contact-list .ic{color:var(--hg-gold-dark)}
.cf-field-err{color:#B3341F}

/* ---------- 16. filter pills ---------- */
.cf-filter button:hover{color:var(--cf-cobalt);border-color:#C2D4E8}
.cf-filter button.is-on{background:var(--hg-navy);border-color:var(--hg-navy)}

/* ---------- 17. footer ---------- */
.footer_sec1{background:linear-gradient(180deg,var(--hg-navy) 0%,#0A1A2E 100%);margin-top:var(--cf-gap-lg)}
.footer_sec1 a.list_item:hover{color:var(--hg-gold)}
.footer_sec1 .connect_icons{filter:brightness(0) invert(.72)}
.footer_sec2{background:#081527}

/* ---------- 18. responsive ---------- */
@media (max-width:1099px){
  .cf-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991px){
  :root{--cf-gap:56px;--cf-gap-lg:72px}
  .hg-section-head,.hg-section-head:has(> p){grid-template-columns:minmax(0,1fr)}
  .hg-section-head p{grid-column:1;grid-row:auto;margin-top:12px}
  .cf-why{grid-template-columns:minmax(0,1fr);gap:0}
}
@media (max-width:767px){
  .cf-app-grid{grid-template-columns:minmax(0,1fr)}
  .cf-app{padding:22px 20px}
  .cf-why-cta{padding:24px 22px}
  .cf-hero .banner_text{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .hg-card,.hg-product-card,.cf-app,.hg-btn{transition:none}
}