/* =========================================================
   KARDNEE — Static Site  (Silueta-inspired direction)
   ---------------------------------------------------------
   Typography : Heebo (self-hosted, variable 300–900)
   Palette    : warm off-white + ink black + Silueta red
   Language   : full-bleed imagery · bold uppercase display
                · generous whitespace · "Read more" cards
   ========================================================= */

/* ---- Self-hosted Heebo (no external CDN — loads instantly) ---- */
@font-face{
  font-family:'Heebo';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/heebo.woff2') format('woff2');
}

:root{
  --bg:#F7F6F3;          /* warm off-white content field   */
  --white:#FFFFFF;
  --ink:#141414;         /* deep charcoal — sidebar & dark fields */
  --ink-2:#2B2B2B;
  --muted:#636363;       /* secondary grey text            */
  --red:#C8A977;         /* matte champagne gold (brand accent) */
  --red-d:#B1833E;       /* gold hover / deeper gold       */
  --line:#E6E4DF;        /* hairline                      */
  --nav-1:#E6E6E6;       /* L1 menu  (HOME / WHO WE ARE)   */
  --nav-2:#999999;       /* L2 submenu (About us / …)      */
  --nav-foot:#707070;    /* footer note                    */
  --sidebar-muted:#999999;
  --sidebar-w:300px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:auto;background:var(--ink);overflow-y:auto;scrollbar-gutter:stable;scroll-snap-type:y proximity;}
/* legacy fallback: if scrollbar-gutter unsupported, force an always-on track so layout never shifts */
@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll;}
}
body{
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;outline:none;}

/* Chinese typography fallback when the site is viewed in 中文 */
html.lang-zh,
html.lang-zh body,
html.lang-zh button,
html.lang-zh input,
html.lang-zh textarea,
html.lang-zh select{
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Heiti SC','Source Han Sans SC','Noto Sans CJK SC',sans-serif;
  letter-spacing:0;
}

/* ---- shared type helpers ---- */
.eyebrow,
.section-label{
  font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red);
}
/* larger treatment for the three primary section titles */
.section-label.section-title{
  font-size:20px;letter-spacing:.18em;
}
.display{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;line-height:.98;
}
.read-more{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);transition:gap .25s ease,color .25s ease;
}
.read-more::after{content:"\2192";font-size:15px;line-height:1;}
.read-more:hover{gap:16px;color:var(--red-d);}

/* base intro paragraph (used in section heads, value heads, group heads) */
.cap-intro{font-size:16px;font-weight:300;color:var(--muted);line-height:1.6;}

/* =========================================================
   FIXED SIDEBAR
   ========================================================= */
.sidebar{
  position:fixed;top:0;left:0;
  width:var(--sidebar-w);height:100vh;height:100svh;
  background:var(--ink);color:#F2EAE1;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:46px 32px;z-index:200;overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(242,234,225,.18);border-radius:3px;}
.sidebar .brand{display:inline-block;}
.sidebar .brand img{width:200px;height:auto;display:block;}
.nav{display:flex;flex-direction:column;margin-top:42px;}
.nav > a{
  font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nav-1);
  display:flex;align-items:baseline;gap:14px;transition:color .25s ease;
  margin-bottom:14px;
}
.nav > a:last-child{margin-bottom:0;}
.nav a .num{font-size:12px;color:var(--nav-foot);font-weight:700;letter-spacing:.1em;}
.nav a:hover{color:var(--red);}
.nav a.active{color:var(--red);font-weight:700;}
.nav a.active .num{color:var(--red);}

/* ---- nested sidebar nav ---- */
.nav-group{display:block;}
.nav-group > summary{
  list-style:none;cursor:pointer;
  font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nav-1);
  display:flex;align-items:baseline;gap:14px;transition:color .25s ease;padding:0;
}
.nav-group > summary::-webkit-details-marker{display:none;}
.nav-group > summary::after{content:"+";margin-left:auto;font-size:15px;font-weight:400;line-height:1;color:var(--nav-foot);}
.nav-group[open] > summary::after{content:"\2212";}
.nav-group > summary:hover{color:var(--red);}
.nav-group > summary .num{font-size:12px;color:var(--nav-foot);font-weight:700;letter-spacing:.1em;}
.nav-group[open] > summary{color:var(--red);}
.nav-group[open] > summary .num{color:var(--nav-foot);}
.subnav{
  list-style:none;margin:0 0 0 8px;padding-left:18px;
  border-left:1px solid rgba(242,234,225,.20);
  display:flex;flex-direction:column;gap:14px;
  max-height:0;overflow:hidden;
  transition:max-height .3s ease, margin .3s ease;
}
.subnav.open{max-height:440px;margin:0 0 14px 8px;}
/* accordion indicator on group titles that own a subnav */
.nav a.has-sub::after{
  content:"+";margin-left:auto;font-size:15px;font-weight:400;line-height:1;color:var(--nav-foot);
}
.nav a.has-sub.open::after{content:"\2212";}
.subnav a{
  font-size:13px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nav-2);transition:color .25s ease;display:block;
}
.subnav a:hover{color:var(--red);}
.subnav a.active{color:var(--red);font-weight:700;}

.sidebar .meta{display:flex;flex-direction:column;gap:9px;margin-top:auto;padding-top:34px;}
.sidebar .meta span{
  font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--nav-foot);
  text-transform:uppercase;
}
.sidebar .meta-social{display:flex;gap:16px;align-items:center;margin-bottom:4px;}
.sidebar .meta-social a{
  display:inline-flex;width:18px;height:18px;color:var(--nav-foot);
  transition:color .25s ease, transform .25s ease;
}
.sidebar .meta-social a:hover{color:#F2EAE1;transform:translateY(-2px);}
.sidebar .meta-social svg{width:100%;height:100%;fill:currentColor;}
/* ---- language toggle ---- */
.sidebar .meta .lang-toggle{
  align-self:flex-start;
  margin-bottom:12px;
  background:transparent;border:1px solid rgba(242,234,225,.35);border-radius:2px;
  color:#F2EAE1;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 14px;cursor:pointer;line-height:1;
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.sidebar .meta .lang-toggle:hover{border-color:var(--red);color:var(--red);}
.sidebar .meta .lang-toggle:active{background:rgba(242,234,225,.08);}
/* Careers nav entry hidden on request — remove this rule or the nav-careers class to restore */
.sidebar .nav a.nav-careers{display:none;}

/* ---- mobile hamburger (hidden on desktop, shown ≤1024) ---- */
.nav-toggle{
  display:none;
  width:42px;height:42px;flex:0 0 auto;
  background:transparent;border:1px solid rgba(242,234,225,.25);border-radius:2px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color .25s ease;
}
.nav-toggle span{display:block;width:20px;height:2px;background:#F2EAE1;transition:transform .3s ease,opacity .3s ease;}
.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);}

/* =========================================================
   CONTENT
   ========================================================= */
.content{margin-left:var(--sidebar-w);}
.section{width:100%;}
/* anchored sections: land flush at viewport top (no residue of the
   previous section); mobile adds an offset for the sticky top bar */
.content section[id]{scroll-margin-top:0;}

/* ---- HERO (full-bleed) ---- */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px 80px;
  background:var(--ink) url('../images/srilanka.webp') center/cover no-repeat;
  color:#F2EAE1;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,15,.26) 0%,rgba(15,15,15,.10) 40%,rgba(15,15,15,.62) 100%);
}
.hero > *{position:relative;z-index:1;}
.hero .eyebrow{color:#F2EAE1;opacity:.85;margin-bottom:26px;}
.hero h1{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(48px,6.4vw,104px);line-height:.95;
  max-width:16ch;margin-bottom:30px;color:#F2EAE1;
}
.hero p.lead{
  font-size:18px;font-weight:300;line-height:1.65;color:#ECECEA;max-width:50ch;
}
.hero .hero-cta{margin-top:42px;}

/* ---- STATEMENT (Silueta intro) ---- */
.statement{
  background:var(--bg);
  padding:130px 80px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:64px;
  align-items:start;
}
.statement .section-label{display:block;margin-bottom:0;padding-top:12px;}
.statement p{
  font-weight:300;font-size:clamp(26px,3vw,42px);line-height:1.3;color:var(--ink);
  max-width:34ch;letter-spacing:-.01em;margin:0;
}
.statement p .accent{color:var(--red);font-weight:500;}

/* =========================================================
   CAPABILITY GRID  (Silueta "What We Do" cards)
   ========================================================= */
.cap-section{
  background:var(--white);
  padding:110px 80px;
}
.cap-section .cap-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-bottom:54px;
}
.cap-section .cap-head h2{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(34px,4.4vw,60px);line-height:.98;max-width:14ch;
}
.cap-section .cap-head .cap-intro{font-size:16px;font-weight:300;color:var(--muted);max-width:38ch;line-height:1.6;}

.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cap-card{
  position:relative;display:block;min-height:440px;overflow:hidden;
  background:var(--ink) center/cover no-repeat;
}
.cap-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,15,.05) 0%,rgba(15,15,15,.10) 45%,rgba(15,15,15,.80) 100%);
  transition:opacity .3s ease;
}
.cap-card .cap-inner{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:36px 34px;color:#F2EAE1;
}
.cap-card .cap-idx{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#F2EAE1;opacity:.8;margin-bottom:14px;
}
.cap-card h3{
  font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:30px;line-height:1.02;margin-bottom:18px;
}
.cap-card .read-more{color:#F2EAE1;}
.cap-card .read-more::after{color:#F2EAE1;}
.cap-card .cap-desc{
  font-size:14px;font-weight:300;line-height:1.6;color:#E8E4DE;max-width:42ch;
  margin-top:14px;margin-bottom:18px;
}

/* ---- GROUP HEADERS (Components / Finished / Services) ---- */
.group-head{background:var(--white);padding:120px 80px 64px;}
.group-head .eyebrow{display:block;margin-bottom:18px;}
.group-head h2{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(34px,4.4vw,60px);line-height:.98;max-width:18ch;
}
.group-head p{margin-top:22px;font-size:16px;font-weight:300;color:var(--muted);max-width:56ch;line-height:1.65;}

/* ---- SERVICE CARDS (values-grid) bullet lists ---- */
.value-card ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.value-card ul li{font-size:14px;font-weight:400;color:var(--ink);padding-left:20px;position:relative;}
.value-card ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--red);border-radius:50%;}

/* =========================================================
   SPLIT / FACTORY TEASER
   ========================================================= */
.factory-teaser{
  background:var(--bg);
  padding:0 80px 110px;
}
.factory-teaser .section-label{display:block;margin-bottom:40px;}
.factory-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.factory-card{display:block;background:var(--white);overflow:hidden;}
.factory-card .photo{
  width:100%;height:340px;background:var(--ink) center/cover no-repeat;
}
.factory-card .fc-body{padding:34px 34px 38px;}
.factory-card .fc-body h3{
  font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:26px;margin-bottom:12px;
}
.factory-card .fc-body p{
  font-size:15px;font-weight:300;color:var(--muted);line-height:1.7;margin-bottom:20px;
}
.factory-card .fc-body p strong{color:var(--ink);font-weight:500;}

/* =========================================================
   CTA / FOOTER
   ========================================================= */
.cta{
  background:var(--ink);color:#F2EAE1;padding:120px 80px;
  display:flex;flex-direction:column;gap:26px;
}
.cta h2{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(34px,4.6vw,62px);line-height:.98;max-width:20ch;
}
.cta .contact-line{font-size:15px;color:var(--sidebar-muted);letter-spacing:.02em;font-weight:300;}
.cta .contact-line a{border-bottom:1px solid var(--red);padding-bottom:2px;transition:color .25s ease;}
.cta .contact-line a:hover{color:#F2EAE1;}

/* =========================================================
   SUBPAGE HERO
   ========================================================= */
.page-hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px 80px;
  background:var(--ink) center/cover no-repeat;color:#F2EAE1;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,15,15,.42) 0%,rgba(15,15,15,.22) 45%,rgba(15,15,15,.84) 100%);
}
.page-hero > *{position:relative;z-index:1;}
.ph-products{background-image:url('../images/products.webp');}
.ph-manufacturing{background-image:url('../images/dongguan.webp');}
.ph-contact{background-image:url('../images/careers.webp');}
.page-hero .eyebrow{color:#F2EAE1;opacity:.85;display:block;margin-bottom:24px;}
.page-hero h1{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(46px,5.6vw,90px);line-height:.96;max-width:18ch;
}
.page-hero p{
  margin-top:26px;font-size:17px;font-weight:300;line-height:1.65;color:#E2E2E0;max-width:54ch;
}

/* compact page head (Contact — no full image) */
.page-head{background:var(--ink);color:#F2EAE1;padding:96px 80px 56px;}
.page-head .eyebrow{color:#F2EAE1;opacity:.85;display:block;margin-bottom:22px;}
.page-head h1{
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(44px,5.4vw,82px);line-height:.98;max-width:18ch;
}
.page-head p{margin-top:24px;font-size:17px;font-weight:300;line-height:1.65;color:#CBCBC9;max-width:54ch;}

/* =========================================================
   CAPABILITY DETAIL BLOCKS (alternating full-bleed)
   ========================================================= */
.family{
  display:flex;align-items:stretch;min-height:560px;
  background:var(--white);
}
.family .f-media{
  flex:1;background:var(--ink) center/cover no-repeat;min-height:560px;
}
.family.reverse .f-media{order:2;}
.family .f-text{
  width:560px;padding:88px 72px;display:flex;flex-direction:column;justify-content:center;gap:20px;
}
.family .f-text .idx{
  font-weight:900;font-size:34px;color:var(--red);line-height:1;
}
.family .f-text h2{
  font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(32px,3.4vw,48px);line-height:1.0;
}
.family .f-text p{font-size:15px;font-weight:300;line-height:1.8;color:var(--muted);max-width:46ch;}
.family .f-text ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:11px;}
.family .f-text li{font-size:14px;font-weight:400;color:var(--ink);padding-left:20px;position:relative;}
.family .f-text li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--red);border-radius:50%;}
.family .f-text .read-more{margin-top:6px;}

/* ---- WHAT WE DO — one product per screen ---- */
.product{display:flex;align-items:stretch;min-height:100vh;background:var(--white);scroll-snap-align:start;scroll-margin-top:0;}
.product .p-media{flex:1;background:var(--ink) center/cover no-repeat;min-height:100vh;}
/* Product photography (opaque white-bg cutouts): show the whole item,
   centred on a near-white studio panel instead of cropping with cover. */
.product .p-media.photo{
  background:var(--white) center/auto 78% no-repeat,
             var(--white);
  background-color:#faf9f7;
}
.product .p-media.photo::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.product .p-text{width:600px;padding:96px 80px;display:flex;flex-direction:column;justify-content:center;gap:24px;}
.product.reverse .p-media{order:2;}
.product .p-text .p-lead{font-weight:300;font-size:clamp(26px,2.6vw,40px);line-height:1.22;color:var(--ink);letter-spacing:-.01em;}
.product .p-text .p-lead .accent{color:var(--red);font-weight:500;}
.product .p-text .p-desc{font-size:16px;font-weight:300;line-height:1.85;color:var(--muted);max-width:48ch;}
.product .p-list{list-style:none;display:flex;flex-direction:column;gap:12px;}
.product .p-list li{font-size:15px;font-weight:400;color:var(--ink);padding-left:22px;position:relative;}
.product .p-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--red);border-radius:50%;}
.product .p-text .read-more{margin-top:8px;}

/* ---- ABOUT (two-column: supporting image + narrative + stats) ---- */
.about-split{display:flex;align-items:stretch;min-height:560px;background:var(--white);}
.about-split .as-media{flex:1;background:var(--ink) center/cover no-repeat;min-height:560px;}
.about-split .as-text{width:560px;padding:88px 72px;display:flex;flex-direction:column;justify-content:center;gap:22px;}
.about-split .as-text .lead{font-weight:300;font-size:clamp(25px,2.5vw,38px);line-height:1.25;color:var(--ink);letter-spacing:-.01em;}
.about-split .as-text .lead .accent{color:var(--red);font-weight:500;}
.about-split .as-text .body{font-size:15px;font-weight:300;line-height:1.8;color:var(--muted);}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.about-stats .stat .n{font-weight:900;font-size:38px;color:var(--red);line-height:1;}
.about-stats .stat .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:9px;}

/* ---- Who we are — each sub-section fills a full screen (parity with What we do) ---- */
#about{min-height:100vh;}
#timeline{min-height:100vh;display:flex;flex-direction:column;justify-content:center;}

/* ---- OUR CULTURE (split layout + value cards) ---- */
.culture{background:var(--white);}
.culture .as-text .cv{border-top:1px solid var(--line);padding-top:22px;}
.culture .as-text .cv .section-label{display:block;margin-bottom:12px;}
.culture .as-text .cv p{font-size:19px;font-weight:300;line-height:1.55;color:var(--ink);letter-spacing:-.005em;}
.culture .as-text .cv p .accent{color:var(--red);font-weight:500;}
.culture-cards{padding:36px 80px 56px;border-top:1px solid var(--line);margin-top:8px;}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline-section{background:var(--bg);padding:110px 80px;}
.timeline-section .section-label{display:block;margin-bottom:46px;}
.timeline{max-width:820px;}
.tl-item{
  display:flex;gap:40px;padding:30px 0;border-top:1px solid var(--line);
}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-item .year{
  font-weight:900;font-size:26px;color:var(--red);min-width:140px;line-height:1.1;
}
.tl-item .ev h4{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;}
.tl-item .ev p{font-size:15px;font-weight:300;color:var(--muted);line-height:1.65;}

/* =========================================================
   CONTACT PAGE (single-screen)
   ========================================================= */
.content.contact-page{height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.contact-page .page-head{flex:0 0 auto;padding:56px 80px 30px;}
.contact-page .page-head h1{font-size:clamp(40px,4.6vw,64px);}
.contact-page .page-head p{margin-top:18px;font-size:15px;}
.contact-page .contact-wrap{flex:1 1 auto;min-height:0;display:flex;}
.contact-info{
  width:430px;background:var(--white);padding:64px 60px;display:flex;flex-direction:column;justify-content:center;gap:30px;
}
.contact-page .contact-info{padding:40px 60px;gap:20px;}
.contact-info .block .k{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:8px;}
.contact-info .block .v{font-size:15px;font-weight:300;color:var(--ink);line-height:1.6;}
.contact-info .block .v a{border-bottom:1px solid var(--line);transition:border-color .2s ease;}
.contact-info .block .v a:hover{border-color:var(--red);}
.contact-info .ci-title{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:26px;line-height:1.04;margin-bottom:6px;}
.contact-info .ci-sub{font-size:13px;font-weight:300;color:var(--muted);margin-bottom:26px;}
.contact-form{
  flex:1;background:var(--bg);padding:64px 80px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.contact-page .contact-form{padding:36px 80px;}
.contact-form h2{font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:34px;margin-bottom:8px;}
.contact-form .sub{font-size:14px;font-weight:300;color:var(--muted);margin-bottom:34px;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:500;}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--line);background:var(--white);
  padding:14px 16px;font-family:'Heebo',sans-serif;font-size:15px;color:var(--ink);font-weight:400;
  border-radius:0;transition:border-color .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);}
.field textarea{resize:vertical;min-height:130px;}
.contact-page .field{margin-bottom:10px;}
.contact-page .field label{margin-bottom:6px;}
.contact-page .field input,.contact-page .field textarea,.contact-page .field select{padding:11px 14px;font-size:14px;}
.contact-page .field textarea{min-height:62px;}
.contact-page .contact-form h2{font-size:26px;margin-bottom:6px;}
.contact-page .contact-form .sub{margin-bottom:16px;font-size:13px;}

.btn{
  display:inline-block;background:var(--red);color:#F2EAE1;border:none;cursor:pointer;
  font-family:'Heebo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:17px 40px;border-radius:0;transition:background .2s ease;
}
.btn:hover{background:var(--red-d);}
.form-note{margin-top:18px;font-size:14px;font-weight:400;color:var(--red);min-height:20px;}
.form-note.ok{color:#2e7d32;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  :root{--sidebar-w:0px;}
  .sidebar{
    position:sticky;top:0;width:100%;height:auto;flex-direction:row;align-items:center;
    justify-content:space-between;padding:16px 22px;
  }
  .sidebar .brand{order:1;}
  .sidebar .brand img{width:150px;}
  .sidebar .nav-toggle{order:3;}
  .sidebar .meta{
    display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
    gap:16px;margin:0;padding:0 70px 0 0;order:2;
  }
  .sidebar .meta span{display:none;}
  .sidebar .meta .meta-social{margin-bottom:0;}
  .sidebar .meta .lang-toggle{margin:0;}
  /* sticky top bar: brand on the left, hamburger on the right; the menu
     itself collapses into an absolute dropdown panel below the bar */
  html{scroll-snap-type:none;}
  .nav-toggle{display:inline-flex;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:2px;margin:0;
    background:var(--ink);padding:18px 22px 26px;
    max-height:calc(100svh - 62px);overflow-y:auto;
    border-top:1px solid rgba(242,234,225,.12);
  }
  .nav.open{display:flex;}
  .nav > a{
    margin-bottom:0;padding:12px 0;font-size:15px;letter-spacing:.1em;
    border-bottom:1px solid rgba(242,234,225,.08);
  }
  .nav a .num{display:none;}
  .nav-group{display:block;}
  .nav-group > summary{font-size:15px;letter-spacing:.1em;padding:12px 0;}
  .nav-group > summary .num{display:none;}
  .nav-group > summary::after{display:inline-block;margin-left:8px;}
  .subnav{
    display:none;flex-direction:column;border-left:1px solid rgba(242,234,225,.20);
    padding-left:16px;margin:2px 0 10px 4px;gap:10px;max-height:none;overflow:visible;
  }
  .subnav.open{display:flex;}
  .subnav a{font-size:13px;letter-spacing:.06em;}
  .nav a.has-sub::after{display:none;}
  .content section[id]{scroll-margin-top:62px;}
  .content{margin-left:0;}
  .hero,.statement,.cap-section,.factory-teaser,.cta,.page-hero,.page-head,.timeline-section,.contact-form,.contact-info{
    padding-left:28px;padding-right:28px;
  }
  .statement{grid-template-columns:1fr;gap:22px;}
  .statement .section-label{padding-top:0;}
  .hero,.page-hero{min-height:calc(100svh - 62px);}
  .family{scroll-margin-top:62px;}
  .content.contact-page{height:auto;display:block;overflow:visible;}
  .contact-page .contact-wrap{flex:none;}
  .contact-page .contact-form{overflow:visible;display:block;padding:32px 28px;}
  .contact-page .contact-info{padding:32px 28px;}
  .contact-page .page-head{padding:40px 28px 18px;}
  .cap-grid{grid-template-columns:1fr;}
  .group-head{padding:80px 28px 40px;}
  .factory-grid{grid-template-columns:1fr;}
  .cap-section .cap-head{flex-direction:column;align-items:flex-start;gap:18px;}
  .family{flex-direction:column;}
  .family .f-text{width:100%;padding:56px 28px;}
  .family.reverse .f-media{order:0;}
  .product{flex-direction:column;min-height:auto;}
  .product .p-media{order:0;min-height:58vh;}
  .product.reverse .p-media{order:0;}
  .product .p-text{width:100%;padding:64px 28px;}
  .about-split{flex-direction:column;}
  .about-split .as-text{width:100%;padding:56px 28px;}
  .about-split .as-media{order:0;min-height:340px;}
  #about,#culture,#timeline{min-height:auto;display:block;}
  .contact-wrap{flex-direction:column;}
  .contact-info{width:100%;}
}

/* ---- VALUES GRID (Our Culture / Clients) ---- */
.values{background:var(--white);padding:110px 80px;}
.values .values-head{margin-bottom:54px;}
.values .values-head h2{font-weight:900;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(34px,4.4vw,60px);line-height:.98;max-width:16ch;}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.values-grid.three{grid-template-columns:repeat(3,1fr);}
.value-card{background:var(--bg);padding:40px 38px;border-top:3px solid var(--red);}
.value-card h3{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:22px;margin-bottom:14px;}
.value-card p{font-size:15px;font-weight:300;color:var(--muted);line-height:1.75;}
@media (max-width:1024px){
  .values{padding-left:28px;padding-right:28px;}
  .values-grid{grid-template-columns:1fr;}
  .values-grid.three{grid-template-columns:1fr;}
  .culture-cards{padding:32px 28px 48px;margin-top:8px;}
}
/* ---- small tablet / large phone ---- */
@media (max-width:768px){
  .hero,.statement,.cap-section,.factory-teaser,.cta,.page-hero,.page-head,.timeline-section,
  .contact-form,.contact-info,.values,.roles,.group-head{
    padding-left:22px;padding-right:22px;
  }
  .factory-card .photo{height:260px;}
  .cap-card{min-height:380px;}
  .family .f-text,.about-split .as-text,.product .p-text{padding:48px 22px;}
  .nav > a,.nav-group > summary{font-size:14px;}
  .cap-section .cap-head h2{font-size:38px;}
}

/* ---- phone ---- */
@media (max-width:560px){
  .hero,.statement,.cap-section,.factory-teaser,.cta,.page-hero,.page-head,.timeline-section,
  .contact-form,.contact-info,.values,.roles,.group-head{
    padding-left:18px;padding-right:18px;
  }
  .statement{padding-top:84px;padding-bottom:84px;}
  .cap-section{padding:80px 18px;}
  .cap-section .cap-head h2{font-size:32px;}
  .factory-card .photo{height:220px;}
  .cap-card{min-height:330px;}
  .cap-card h3{font-size:24px;}
  .factory-card .fc-body{padding:26px 22px 30px;}
  .cta{padding:84px 18px;}
  .cta h2{font-size:34px;}
  .value-card{padding:30px 26px;}
  .tl-item{flex-direction:column;gap:8px;}
  .tl-item .year{min-width:0;}
  .hero h1{font-size:clamp(38px,11vw,58px);}
  .page-hero h1,.page-head h1{font-size:clamp(34px,10vw,56px);}
  .hero p.lead,.page-hero p,.page-head p{font-size:15px;}
  .family .f-text,.about-split .as-text,.product .p-text{padding:44px 18px;}
  .about-stats{grid-template-columns:1fr 1fr;}
  .contact-info{width:100%;padding:30px 22px;}
  .contact-form{padding:30px 22px;}
  .roles-grid{grid-template-columns:1fr;}
  .role-card{padding:26px 24px;}
  .cap-intro{font-size:15px;}
}

/* ---- CAREERS — Open Roles (rendered from careers-data.js) ---- */
.roles{background:var(--white);padding:110px 80px;}
.roles .roles-intro{margin-top:20px;font-size:16px;font-weight:300;color:var(--muted);max-width:58ch;line-height:1.6;}
.roles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;}
.role-card{background:#fff;border:1px solid var(--line);padding:34px 32px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s ease,transform .2s ease;}
.role-card:hover{border-color:var(--red);transform:translateY(-3px);}
.role-card h3{font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.01em;line-height:1.15;}
.role-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.role-meta span{position:relative;padding-right:16px;}
.role-meta span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:3px;height:3px;border-radius:50%;background:var(--line);transform:translateY(-50%);}
.role-card p{font-size:14px;font-weight:300;line-height:1.65;color:var(--muted);flex:1;}
.role-apply{margin-top:4px;align-self:flex-start;color:var(--red);font-weight:600;font-size:14px;border-bottom:1px solid var(--red);padding-bottom:2px;transition:opacity .2s ease;}
.role-apply:hover{opacity:.7;}
@media (max-width:1024px){
  .roles{padding-left:28px;padding-right:28px;}
  .roles-grid{grid-template-columns:1fr;}
}

/* ===== 中文模式字号微调：展示型大标题缩小，避免撑到第二行 ===== */
html.lang-zh .hero h1{font-size:clamp(27px,3.3vw,52px);line-height:1.2;max-width:none;}
html.lang-zh .statement p{font-size:clamp(20px,2.1vw,30px);}
html.lang-zh .cap-head h2{font-size:clamp(25px,3.2vw,44px);}
html.lang-zh .product .p-text .p-lead{font-size:clamp(20px,1.9vw,28px);}
html.lang-zh .about-split .as-text .lead{font-size:clamp(19px,1.9vw,27px);}
html.lang-zh .page-hero h1{font-size:clamp(30px,3.5vw,56px);line-height:1.2;max-width:none;}
html.lang-zh .page-head h1{font-size:clamp(28px,3.3vw,52px);line-height:1.2;}
html.lang-zh .contact-page .page-head h1{font-size:clamp(28px,3.2vw,46px);line-height:1.2;}
html.lang-zh .values .values-head h2{font-size:clamp(25px,3.2vw,44px);}
html.lang-zh .cta h2{font-size:clamp(25px,3.2vw,44px);}
html.lang-zh .cap-card h3{font-size:22px;}
html.lang-zh .culture .as-text .cv p{font-size:15px;}
html.lang-zh .timeline-section .year,html.lang-zh .tl-item .year{font-size:21px;}

@media (max-width:560px){
  html.lang-zh .hero h1{font-size:clamp(26px,7.5vw,38px);line-height:1.18;max-width:none;}
  html.lang-zh .page-hero h1,html.lang-zh .page-head h1{font-size:clamp(25px,7vw,36px);line-height:1.18;max-width:none;}
  html.lang-zh .cap-head h2{font-size:25px;}
  html.lang-zh .statement p{font-size:21px;}
  html.lang-zh .cta h2{font-size:25px;}
  html.lang-zh .cap-card h3{font-size:20px;}
  html.lang-zh .timeline-section .year,html.lang-zh .tl-item .year{font-size:19px;}
}