/* Jiangsu Taosheng Pharmaceutical — shared stylesheet */
:root{
  --navy:#0F2036;
  --navy-2:#152C48;
  --ink:#13181F;
  --paper:#F6F7F3;
  --paper-2:#EDEFE8;
  --card:#FFFFFF;
  --jade:#0E7C74;
  --jade-dark:#0A5F59;
  --amber:#C6893A;
  --amber-dark:#A66F28;
  --steel:#5B6B76;
  --line:#DADDD3;
  --line-dark:rgba(255,255,255,0.16);
  --radius:2px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{
  font-family:'Space Grotesk', Arial, sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--navy);
}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* ---------- NAV ---------- */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(15,32,54,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-dark);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:16px 28px;
}
.brand{
  color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:19px; letter-spacing:0.01em; display:flex; flex-direction:column; line-height:1.15;
  text-decoration:none;
}
.brand span{font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:11px; color:#9FB2BE; letter-spacing:0.08em;}
nav.links{display:flex; gap:24px; align-items:center;}
nav.links a{
  color:#D8DEE2; text-decoration:none; font-family:'Space Grotesk',sans-serif;
  font-size:14px; font-weight:500; letter-spacing:0.01em; padding-bottom:3px;
  border-bottom:2px solid transparent;
}
nav.links a:hover{color:#fff;}
nav.links a.active{color:#fff; border-bottom-color:var(--amber);}
.navRight{display:flex; align-items:center; gap:18px;}
.langBtn{
  background:transparent; border:1px solid var(--line-dark); color:#D8DEE2;
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:6px 10px; cursor:pointer;
  border-radius:var(--radius);
}
.langBtn:hover{border-color:#fff; color:#fff;}
.cta{
  background:var(--amber); color:#1A1204; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  padding:9px 18px; border-radius:var(--radius); white-space:nowrap;
  border:1px solid var(--amber);
}
.cta:hover{background:var(--amber-dark); border-color:var(--amber-dark);}
.burger{display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer;}
.mobileMenu{display:none; flex-direction:column; background:var(--navy); padding:10px 28px 20px; border-bottom:1px solid var(--line-dark);}
.mobileMenu.open{display:flex;}
.mobileMenu a{color:#D8DEE2; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-size:15px; padding:10px 0; border-bottom:1px solid var(--line-dark);}

/* ---------- HOME HERO ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(15,32,54,0.35) 0%, rgba(11,20,32,0.55) 55%, rgba(9,15,24,0.92) 100%), url('../images/hero-aerial.jpg') center/cover no-repeat;
}
.heroInner{width:100%;}
.heroTop{max-width:1180px; margin:0 auto; padding:150px 28px 40px;}
.eyebrow{
  color:#8FD9CE; font-family:'IBM Plex Mono',monospace; font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px;
}
.hero h1{color:#fff; font-size:clamp(34px, 5.4vw, 62px); line-height:1.08; max-width:820px;}
.hero p.lede{color:#C9D3D8; font-family:'Source Serif 4',serif; font-size:19px; max-width:600px; margin-top:22px; line-height:1.6;}
.heroBtns{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
.btnGhost{
  border:1px solid rgba(255,255,255,0.45); color:#fff; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:14px;
  padding:12px 22px; border-radius:var(--radius);
}
.btnGhost:hover{border-color:#fff; background:rgba(255,255,255,0.08);}
.btnSolid{
  background:var(--amber); color:#1A1204; text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:var(--radius); border:none; cursor:pointer;
}
.btnSolid:hover{background:var(--amber-dark);}

/* COA strip - signature element (home hero) */
.coaStrip{border-top:1px solid var(--line-dark); background:rgba(9,15,24,0.55);}
.coaGrid{max-width:1180px; margin:0 auto; padding:22px 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.coaField{border-left:1px solid rgba(255,255,255,0.2); padding-left:16px;}
.coaField .lbl{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#8FA3AF; margin-bottom:6px;}
.coaField .val{font-family:'Space Grotesk',sans-serif; font-weight:600; color:#fff; font-size:17px;}

/* ---------- SUBPAGE HERO (banner) ---------- */
.pageHero{
  background:linear-gradient(160deg, var(--navy) 0%, #0A1728 100%);
  padding:150px 0 64px; color:#fff;
}
.pageHero .kicker{color:#8FD9CE;}
.pageHero h1{color:#fff; font-size:clamp(30px,4.4vw,46px); line-height:1.12; max-width:760px;}
.pageHero p.lede{color:#B9C4C9; font-size:17.5px; max-width:600px; margin-top:16px;}
.crumb{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8FA3AF; margin-bottom:18px; letter-spacing:0.04em;}
.crumb a{color:#8FA3AF; text-decoration:none;}
.crumb a:hover{color:#fff;}

/* ---------- SECTION SHELL ---------- */
section{padding:96px 0;}
.sectionHead{max-width:680px; margin-bottom:52px;}
.kicker{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--jade-dark); margin-bottom:14px; display:block;}
.sectionHead h2{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}
.sectionHead p{color:var(--steel); font-size:17px; margin-top:16px;}
.alt{background:var(--paper-2);}
.darkSec{background:var(--navy); color:#EDEFE8;}
.darkSec .kicker{color:#8FD9CE;}
.darkSec h2{color:#fff;}
.darkSec p{color:#B9C4C9;}

/* ---------- ABOUT ---------- */
.aboutGrid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:start;}
.aboutGrid img{border-radius:var(--radius); width:100%; height:auto;}
.aboutText p{margin:0 0 16px; color:#2C333A;}
.factList{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px;}
.factList li{display:flex; gap:12px; font-size:15px; color:var(--steel); border-top:1px solid var(--line); padding-top:12px; flex-wrap:wrap;}
.factList li strong{color:var(--navy); font-family:'Space Grotesk',sans-serif; font-weight:600; min-width:150px; flex-shrink:0;}

/* ---------- STAT / SPEC BLOCK ---------- */
.specPanel{background:var(--navy); color:#fff; border-radius:var(--radius); padding:0; margin-top:56px; overflow:hidden;}
.specHead{display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid var(--line-dark); font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.1em; color:#8FA3AF; text-transform:uppercase; flex-wrap:wrap; gap:8px;}
.specGrid{display:grid; grid-template-columns:repeat(5,1fr);}
.specCell{padding:28px 22px; border-right:1px solid var(--line-dark); border-top:1px solid var(--line-dark);}
.specCell:nth-child(5n){border-right:none;}
.specCell .num{font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:#fff;}
.specCell .unit{font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8FD9CE; margin-top:4px;}
.specCell .lab{font-family:'Source Serif 4',serif; font-size:13.5px; color:#B9C4C9; margin-top:10px; line-height:1.4;}

/* ---------- FACILITY / PHASES ---------- */
.phaseGrid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.phaseCard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px;}
.phaseCard .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--jade-dark); text-transform:uppercase; border:1px solid var(--jade); display:inline-block; padding:4px 9px; border-radius:2px; margin-bottom:16px;}
.phaseCard h3{font-size:22px; margin-bottom:10px;}
.phaseCard p{color:var(--steel); font-size:15.5px; margin:0 0 18px;}
.buildList{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.buildList li{font-size:14px; color:#2C333A; display:flex; gap:10px; align-items:baseline; border-top:1px dashed var(--line); padding-top:8px;}
.buildList li .bno{font-family:'IBM Plex Mono',monospace; color:var(--amber-dark); font-size:12px; flex-shrink:0;}
.masterplanImg{margin-top:56px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.masterplanImg img{width:100%;}
.capWrap{padding:18px 24px; background:var(--card); border-top:1px solid var(--line); font-size:14px; color:var(--steel); font-family:'IBM Plex Mono',monospace;}

/* ---------- WORKSHOPS ---------- */
.wsList{display:grid; gap:2px; background:var(--line); border:1px solid var(--line);}
.wsRow{background:var(--card); display:grid; grid-template-columns:280px 1fr 1fr; gap:0;}
.wsRow.noPhoto{grid-template-columns:1fr 1fr;}
.wsPhoto{background-size:cover; background-position:center; min-height:220px;}
.wsBody{padding:30px 32px;}
.wsBody .wsno{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--jade-dark); letter-spacing:0.08em;}
.wsBody h3{font-size:21px; margin-top:8px;}
.wsBody .wsLoc{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--steel); margin-top:6px;}
.wsEquip{padding:30px 32px; border-left:1px solid var(--line);}
.wsEquip .lbl2{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin-bottom:10px;}
.wsEquip p{font-size:14.5px; color:#2C333A; margin:0; line-height:1.6;}

/* ---------- PRODUCTS ---------- */
.prodGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
.prodCard{background:var(--card); padding:30px 28px; min-height:200px; display:flex; flex-direction:column; text-decoration:none;}
.prodCard .pno{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber-dark);}
.prodCard h3{font-size:19px; margin-top:12px; line-height:1.3;}
.prodCard p{font-size:14px; color:var(--steel); margin-top:12px; flex-grow:1;}
.prodCard .goto{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--jade-dark); margin-top:16px;}

/* product detail blocks on products.html */
.prodDetail{border-top:1px solid var(--line); padding:64px 0;}
.prodDetail:first-child{border-top:none; padding-top:0;}
.prodDetailGrid{display:grid; grid-template-columns:0.5fr 1fr; gap:48px;}
.prodDetailNum{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--amber-dark);}
.prodDetailGrid h3{font-size:26px; margin-top:10px;}
.specTable{width:100%; border-collapse:collapse; margin-top:22px; font-size:14.5px;}
.specTable tr{border-top:1px solid var(--line);}
.specTable td{padding:11px 4px; vertical-align:top;}
.specTable td:first-child{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--steel); width:180px; text-transform:uppercase; letter-spacing:0.04em;}
.specTable td:last-child{color:#2C333A;}
.itemList{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px;}
.itemList li{font-size:15px; color:#2C333A; padding-left:18px; position:relative;}
.itemList li::before{content:"—"; position:absolute; left:0; color:var(--amber-dark);}

/* ---------- QUALITY / CERTS ---------- */
.certGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.certCard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.certCard img{width:100%; height:170px; object-fit:cover; border-bottom:1px solid var(--line);}
.certCard .cap{padding:14px 16px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--navy); letter-spacing:0.02em;}

/* ---------- HOME TEASER CARDS ---------- */
.teaserGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.teaserCard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px; text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s;}
.teaserCard:hover{border-color:var(--jade);}
.teaserCard .tno{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--jade-dark);}
.teaserCard h3{font-size:20px; margin-top:12px;}
.teaserCard p{font-size:14.5px; color:var(--steel); margin-top:10px; flex-grow:1;}
.teaserCard .goto{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--amber-dark); margin-top:18px;}

/* ---------- CONTACT ---------- */
.contactGrid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px;}
.contactInfo .lbl3{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#8FD9CE; margin-bottom:8px;}
.contactInfo .item{margin-bottom:28px;}
.contactInfo .item .v{font-family:'Space Grotesk',sans-serif; font-size:17px; color:#fff;}
.contactInfo .item .v small{display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#8FA3AF; margin-top:4px; font-weight:400;}
form.inquiry{display:grid; gap:16px;}
form.inquiry .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
form.inquiry label{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8FD9CE; letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:7px;}
form.inquiry input, form.inquiry select, form.inquiry textarea{
  width:100%; background:rgba(255,255,255,0.06); border:1px solid var(--line-dark); color:#fff;
  font-family:'Source Serif 4',serif; font-size:15px; padding:11px 13px; border-radius:var(--radius);
}
form.inquiry input::placeholder, form.inquiry textarea::placeholder{color:#7C8B94;}
form.inquiry button{
  justify-self:start; background:var(--amber); color:#1A1204; border:none;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
  padding:13px 28px; border-radius:var(--radius); cursor:pointer; margin-top:6px;
}
form.inquiry button:hover{background:var(--amber-dark);}
.formNote{font-size:12.5px; color:#7C8B94; font-family:'IBM Plex Mono',monospace; margin-top:-4px;}

/* ---------- FOOTER ---------- */
footer{background:#0A1420; color:#7C8B94; padding:36px 0; font-size:13px;}
.footInner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.footInner .fb{font-family:'IBM Plex Mono',monospace;}
.footLinks{display:flex; gap:18px; flex-wrap:wrap;}
.footLinks a{color:#9FB2BE; text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:12.5px;}
.footLinks a:hover{color:#fff;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  nav.links{display:none;}
  .burger{display:block;}
  .coaGrid{grid-template-columns:repeat(2,1fr); row-gap:20px;}
  .aboutGrid{grid-template-columns:1fr; gap:36px;}
  .specGrid{grid-template-columns:repeat(2,1fr);}
  .specCell:nth-child(2n){border-right:none;}
  .phaseGrid{grid-template-columns:1fr;}
  .wsRow, .wsRow.noPhoto{grid-template-columns:1fr;}
  .wsEquip{border-left:none; border-top:1px solid var(--line);}
  .prodGrid{grid-template-columns:1fr 1fr;}
  .prodDetailGrid{grid-template-columns:1fr;}
  .certGrid{grid-template-columns:1fr 1fr;}
  .teaserGrid{grid-template-columns:1fr;}
  .contactGrid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .pageHero{padding-top:120px;}
}
@media (max-width:560px){
  .coaGrid{grid-template-columns:1fr 1fr;}
  .prodGrid{grid-template-columns:1fr;}
  .certGrid{grid-template-columns:1fr;}
  .heroTop{padding-top:120px;}
}
