/* The browser paints its own background between unloading one page and the
   first paint of the next. That default is white, and against the dark
   page-transition curtain it showed up as a flash on every navigation.
   Matching html to the curtain colour makes that gap invisible; body still
   sets its own colour, so nothing else changes. */
html { background: #171713; }

:root {
  --ink: #171713;
  --ink-soft: #262620;
  --ivory: #f4f0e7;
  --paper: #fbf9f4;
  --sand: #ddd5c6;
  --line: #cfc7b8;
  --gold: #b98a3d;
  --gold-light: #d9b875;
  /* Darkened from #716c62, which measured 3.58:1 against the sand sections —
     under the 4.5:1 minimum. #605b50 clears it on all three surfaces
     (paper 6.42, ivory 5.94, sand 4.63) while keeping the muted feel. */
  --muted: #605b50;
  --white: #ffffff;
  --header-height: 88px;
  --container: 1240px;
  /* Type scale. Every page title and every section heading on the site
     draws from these, so a heading looks the same wherever it sits; the
     breakpoints below change the tokens, not individual components.
     Before this, page titles ran at 84, 92, 94 and 96px and section
     headings at 64, 66 and 68px, and in half-width columns the larger
     ones split words across lines. The homepage hero's proportions were
     the ones that worked, so they became the reference. */
  --fs-display: clamp(48px, 6vw, 84px);
  --lh-display: 1.16;
  --fs-h2: clamp(34px, 3.6vw, 52px);
  --lh-h2: 1.28;
  --fs-statement: clamp(28px, 3.2vw, 44px);
  /* Cell grids: the hairline-ruled card grids used throughout. Their colours
     are set once here for light ground and redefined for dark sections just
     below, and every card component reads them - so no card can end up with
     light-ground text on a dark section. One did: the sustainability cards
     sat on ink with #605b50 body text, about 2.6:1. */
  --cell-line: var(--line);
  --cell-kicker: #8d672b;
  --cell-title: var(--ink);
  --cell-body: var(--muted);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
main[id], main [id] { scroll-margin-top: calc(var(--header-height, 90px) + 24px); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--ink); background: var(--gold-light); }

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-180%);
  transition: transform var(--dur-quick) ease;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(calc(100% - 56px), var(--container));
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: var(--header-height);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.16);
  transition: height var(--dur-quick) var(--ease), background var(--dur-quick) ease, color var(--dur-quick) ease, box-shadow var(--dur-quick) ease;
}
.site-header.is-scrolled {
  height: 76px;
  color: var(--white);
  background: rgba(23,23,19,.95);
  box-shadow: 0 12px 35px rgba(0,0,0,.14);
  backdrop-filter: blur(16px);
}
.header-inner {
  width: min(calc(100% - 56px), 1320px);
  height: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
  margin-inline: auto;
}
.brand { display: inline-flex; width: 146px; align-items: center; }
.brand img { width: 100%; height: auto; }
.primary-nav > a.nav-contact { display: none; }
.primary-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.3vw, 34px);
}
.primary-nav > a{
  position: relative;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
}
.primary-nav > a::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-quick) var(--ease);
}
.primary-nav > a:hover::after,
.primary-nav > a:focus-visible::after{ transform: scaleX(1); }
.primary-nav > a.is-current::after { transform: scaleX(1); }

          

/* Stage shortcuts: a real second group, not a trailing row. */

.header-cta {
  min-width: 138px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 17px;
  color: var(--ink);
  background: var(--gold);
  font-size: 14px;
  letter-spacing: .08em;
  transition: background var(--dur-quick) ease, transform var(--dur-quick) var(--ease);
}
.menu-toggle { display: none; }

.section { padding: 124px 0; }
.section-dark { color: var(--white); background: var(--ink); }
.section-dark,
.page-section-dark {
  --cell-line: rgba(255,255,255,.16);
  --cell-kicker: var(--gold-light);
  --cell-title: var(--white);
  --cell-body: rgba(255,255,255,.58);
}
.eyebrow {
  margin: 0 0 20px;
  color: var(--gold-light);
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .22em;
}
.eyebrow-dark { color: #8d672b; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2 {
  margin: 0;
  font-family: "Noto Serif TC", serif;
  font-weight: 500;
  letter-spacing: -.035em;
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.45; }

.hero {
  min-height: 830px;
  height: min(100vh, 960px);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-media,
.hero-shade { position: absolute; inset: 0; }
.hero-media img,
.hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-media { transform: scale(1.035); animation: heroSettle 1.6s var(--ease) forwards; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(19,19,16,.96) 0%, rgba(19,19,16,.88) 29%, rgba(19,19,16,.40) 58%, rgba(19,19,16,.08) 100%),
    linear-gradient(0deg, rgba(19,19,16,.48), transparent 42%);
}
@keyframes heroSettle { to { transform: scale(1); } }
.hero-content { position: relative; z-index: 2; padding-top: var(--header-height); }
.hero h1 {
  max-width: 850px;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.hero-lead {
  max-width: 650px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: .02em;
}

.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 40px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 0 22px;
  border: 1px solid transparent;
  font-size: 14px;
  letter-spacing: .06em;
  transition: color var(--dur-quick) ease, background var(--dur-quick) ease, border-color var(--dur-quick) ease, transform var(--dur-quick) var(--ease);
}
.button-gold { color: var(--ink); background: var(--gold); }

.button-dark { color: var(--white); background: var(--ink); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(23,23,19,.55);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  transition: gap var(--dur-quick) var(--ease), color var(--dur-quick) ease;
}
.text-link:hover { gap: 23px; color: #8d672b; }
.text-link-light { color: var(--white); border-bottom-color: rgba(255,255,255,.48); }
.text-link-light:hover { color: var(--gold-light); }
.hero-side-note {
  position: absolute;
  z-index: 2;
  right: 29px;
  top: 50%;
  color: rgba(255,255,255,.58);
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}
.hero-scroll {
  position: absolute;
  z-index: 2;
  right: max(28px, calc((100vw - var(--container)) / 2));
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,255,255,.65);
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
}
.hero-scroll i { width: 48px; height: 1px; background: currentColor; position: relative; }
.hero-scroll i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(-45deg); }

.proof-strip { color: var(--ink); background: var(--sand); border-bottom: 1px solid var(--line); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-item {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 28px clamp(18px, 2.5vw, 36px);
  border-right: 1px solid rgba(23,23,19,.17);
}
.proof-item:first-child { border-left: 1px solid rgba(23,23,19,.17); }
.proof-item strong {
  font-family: "Outfit", sans-serif;
  font-size: clamp(25px, 2.5vw, 38px);
  font-weight: 400;
  letter-spacing: -.02em;
}
.proof-item sup { color: #8d672b; font-size: .55em; vertical-align: super; }
.proof-item span { color: #5f5b53; font-size: 13px; }

.split-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: end;
  gap: clamp(46px, 10vw, 150px);
  margin-bottom: 68px;
}
.section-intro-copy { padding-bottom: 8px; }
.section-intro-copy p { max-width: 470px; margin: 0 0 28px; color: var(--muted); }

.solution-row {
  min-height: 114px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) minmax(110px,.6fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color var(--dur-quick) ease, padding var(--dur-quick) var(--ease);
}
.solution-row:hover { color: var(--gold-light); padding-left: 18px; }
.solution-row > span { color: var(--gold-light); font-family: "Outfit", sans-serif; font-size: 12px; }
.solution-row strong { font-size: clamp(21px, 2.1vw, 30px); font-weight: 400; }
.solution-row small { color: rgba(255,255,255,.48); font-family: "Outfit", sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.solution-row i { font-style: normal; font-size: 18px; opacity: .6; }

.process { background: #e8e1d5; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 0; padding: 1px; list-style: none; background: rgba(23,23,19,.22); }
.process-step {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--ivory);
  transition: background var(--dur-quick) ease;
}
.process-step > span { margin-bottom: auto; color: #8d672b; font-family: "Outfit", sans-serif; font-size: 13px; }
.process-step strong { margin-top: 30px; font-size: 17px; font-weight: 500; }
.process-step small { margin-top: 7px; color: var(--muted); font-family: "Outfit", sans-serif; font-size: 10px; letter-spacing: .14em; }

.quality { padding: 132px 0; }
.quality-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(48px, 7vw, 110px); }
.quality-copy > p:not(.eyebrow) { max-width: 490px; margin: 30px 0; color: rgba(255,255,255,.62); }
.certification-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--cell-line); border-left: 1px solid var(--cell-line); }
.certification-card { min-height: 230px; padding: 26px; color: var(--cell-title); border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
.certification-card span { color: var(--cell-kicker); font-family: "Outfit", sans-serif; font-size: 12px; }
.certification-card strong { display: block; margin-top: 54px; font-family: "Noto Serif TC", serif; font-size: clamp(24px,2.5vw,34px); font-weight: 500; }
.certification-card p { margin: 6px 0 0; color: var(--cell-body); font-size: 13px; }

.insights { background: var(--paper); }
.insights-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 62px; }
.insight-grid { display: grid; grid-template-columns: 1.28fr .86fr .86fr; gap: 18px; }
.insight-card { background: var(--ivory); border-bottom: 1px solid var(--line); transition: transform var(--dur-quick) var(--ease), box-shadow var(--dur-quick) ease; }
.insight-image { aspect-ratio: 4/3; overflow: hidden; background: #d7d1c5; }
.insight-card-featured .insight-image { aspect-ratio: 16/10; }
.insight-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-spread) var(--ease); }
.insight-copy { padding: 24px; }
.insight-copy > span { color: #8d672b; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.insight-copy h3 { margin: 12px 0; }
.insight-copy p { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
/* was #8a857b, 3.49:1 */
.insight-copy time { color: #6b6659; font-family: "Outfit", sans-serif; font-size: 11px; letter-spacing: .08em; }

.project-cta { padding: 100px 0; background: var(--gold); }
.project-cta-inner { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: clamp(50px, 10vw, 140px); }
.project-cta h2 { font-size: var(--fs-h2); }
/* This copy sits on the gold CTA panel, where .72 alpha measured 3.72:1.
   .9 gives 5.07:1. It is the conversion CTA — the last place that should be
   losing legibility. */
.project-cta-copy p { max-width: 440px; margin: 0 0 28px; color: rgba(23,23,19,.9); }

.site-footer { color: var(--white); background: var(--ink); }
.footer-main { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding-top: 76px; padding-bottom: 68px; }
.footer-brand img { width: 168px; height: auto; }
.footer-brand p { max-width: 390px; margin: 26px 0 0; color: rgba(255,255,255,.48); font-size: 14px; }
.footer-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.footer-nav > div { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-nav strong { margin-bottom: 10px; color: var(--gold-light); font-size: 13px; font-weight: 500; }
.footer-nav a { color: rgba(255,255,255,.62); font-size: 13px; transition: color var(--dur-quick) ease; }
.footer-nav a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 22px; padding-bottom: 22px; color: rgba(255,255,255,.36); border-top: 1px solid rgba(255,255,255,.12); font-family: "Outfit", sans-serif; font-size: 10px; letter-spacing: .06em; }

.floating-consult {
  position: fixed;
  z-index: 900;
  right: 26px;
  bottom: 26px;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .06em;
  text-align: center;
  transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) ease;
}
.floating-consult i { position: absolute; top: 12px; right: 15px; font-style: normal; font-size: 11px; }

/* Gated on .motion-ready, which premium-motion.js sets on <body> as soon as
   it starts. Without the gate this rule hides every .reveal element with no
   way back if the script fails to load at all — the markup carries .reveal,
   so the hidden state would simply stick. Now: no script, no hiding. */
body.motion-ready .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-spread) var(--ease), transform var(--dur-spread) var(--ease); }
body.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero .reveal:nth-child(2) { transition-delay: calc(var(--stagger, 90ms) * 1); }
.hero .reveal:nth-child(3) { transition-delay: calc(var(--stagger, 90ms) * 2); }
.hero .reveal:nth-child(4) { transition-delay: calc(var(--stagger, 90ms) * 3); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Looping and entrance animations stop outright. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* This used to be `transition-duration: .01ms` on `*`, which killed every
     transition on the site including plain colour changes. The preference is
     about movement — vestibular triggers are travel, parallax and scaling, not
     a link changing colour — and a page where nothing responds at all reads as
     broken rather than as calm. So the property list is narrowed to the
     non-moving ones and the durations are left alone.

     Note this also fires for anyone whose OS animation setting is off, which
     on Windows is Settings > Ease of Access > Display > "Show animations". */
  *, *::before, *::after {
    transition-property: color, background-color, border-color, outline-color,
                         opacity, box-shadow, fill, stroke !important;
    transition-duration: .35s !important;
    transition-timing-function: ease !important;
  }

  /* The centre-out underlines are 1px of decoration that travels a few dozen
     pixels; they are kept, slightly quicker. */
  .primary-nav a::after,
  .footer-nav a::after,
  .contact-detail strong a::after,
  .proof-item::after {
    transition-property: transform !important;
    transition-duration: .45s !important;
  }

  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  :root { --header-height: 76px; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand { width: 132px; }
  .primary-nav { gap: 18px; }
  .primary-nav > a{ font-size: 13px; }
  .header-cta { min-width: 124px; }
  
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .insight-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr .85fr; }
  .insight-card-featured .insight-image { aspect-ratio: auto; }
}

@media (max-width: 820px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .site-header { height: 70px; background: rgba(23,23,19,.94); }
  .site-header.is-scrolled { height: 66px; }
  .header-inner { width: calc(100% - 36px); grid-template-columns: auto 1fr auto; gap: 14px; }
  .brand { width: 124px; }
  .header-cta { display: none; }
  .menu-toggle {
    grid-column: 3;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .menu-toggle-lines { width: 22px; display: grid; gap: 7px; }
  .menu-toggle-lines i { display: block; height: 1px; background: currentColor; transition: transform var(--dur-quick) var(--ease); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-lines i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .primary-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 92px 36px 44px;
    overflow-y: auto;
    color: var(--white);
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity var(--dur-quick) ease, visibility var(--dur-quick) ease, transform .4s var(--ease);
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav > a{ width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-family: "Noto Serif TC", serif; font-size: 24px; letter-spacing: 0; }
  .primary-nav > a::after{ display: none; }
  .primary-nav > a.nav-contact { width: auto; display: inline-flex; gap: 10px; margin-top: 30px; padding: 14px 22px; border: 0; color: var(--ink); background: var(--gold); font-family: inherit; font-size: 15px; font-weight: 500; }
  
  
  
  
  
  
  
  
  
  
  
  
  .section { padding: 88px 0; }
  .hero { min-height: 760px; height: 100svh; align-items: flex-end; padding-bottom: 94px; }
  .hero-media img,
  .hero-media video { object-position: 50% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(19,19,16,.98) 0%, rgba(19,19,16,.86) 38%, rgba(19,19,16,.18) 78%, rgba(19,19,16,.3) 100%); }
  :root { --fs-display: clamp(40px, 8vw, 60px); }
  .hero-lead { max-width: 560px; font-size: 16px; line-height: 1.8; }
  .hero-side-note { display: none; }
  .hero-scroll { left: 18px; right: auto; bottom: 24px; }
  .proof-grid { grid-template-columns: repeat(2,1fr); }
  .proof-item:first-child { border-left: 0; }
  .proof-item:nth-child(2n) { border-right: 0; }
  .proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(23,23,19,.17); }
  .split-intro { grid-template-columns: 1fr; align-items: start; gap: 30px; margin-bottom: 48px; }
  
  
  
  
   .quality-grid { grid-template-columns: 1fr; gap: 64px; }
  
  .solution-row { grid-template-columns: 42px minmax(0,1fr) auto; }
  .solution-row small { display: none; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .project-cta-inner { grid-template-columns: 1fr; gap: 38px; }
  .footer-main { grid-template-columns: 1fr; gap: 54px; }
}

@media (max-width: 560px) {
  .container { width: min(calc(100% - 32px), var(--container)); }
  /* Fluid below 400px: at a fixed 38px a 9-character title line overflows a
     360px phone and strands its last character. */
  :root { --fs-display: clamp(30px, 9.3vw, 38px); --fs-h2: clamp(28px, 8.2vw, 32px); --fs-statement: clamp(23px, 6.6vw, 26px); }
  .hero { min-height: 720px; padding-bottom: 80px; }
  .hero-lead { margin-top: 22px; font-size: 15px; }
  
  
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 30px; }
  .proof-item { min-height: 136px; padding: 20px 14px; }
  .proof-item strong { font-size: 24px; }
  .proof-item span { font-size: 11px; line-height: 1.55; }
  
  
  
  
   .quality { padding: 92px 0; }
  .solution-row { min-height: 90px; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; }
  .solution-row strong { font-size: 21px; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .process-step { min-height: 156px; padding: 18px 15px; }
  .process-step strong { font-size: 15px; line-height: 1.55; }
  .certification-card { min-height: 175px; padding: 18px; }
  .certification-card strong { margin-top: 35px; font-size: 21px; }
  .certification-card p { font-size: 11px; }
  .insights-head { align-items: flex-start; flex-direction: column; margin-bottom: 42px; }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-card-featured { grid-column: auto; display: block; }
  .insight-card-featured .insight-image { aspect-ratio: 4/3; }
  .project-cta { padding: 78px 0; }
  .footer-nav { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .floating-consult { right: 16px; bottom: 16px; width: 62px; height: 62px; font-size: 10px; }
  .floating-consult i { top: 8px; right: 10px; }
}

/* Touch targets. On a phone several inline links measured 23–30px tall —
   under the 24px WCAG 2.5.8 minimum, let alone the 44px both Apple and
   Google recommend. Padding is added rather than font-size so nothing
   reflows: the text stays where it is, the tappable box grows around it. */
@media (max-width: 820px) {
  .text-link,
  .function-card-cta,
  .catalogue-more,
  .article-back,
  .hero-scroll,
  .footer-nav a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer link lists sit close together; give them room to be hit. */
  .footer-nav a{ padding: 6px 0; }
}

/* Two gold-on-gold contrast failures.
   .eyebrow-dark was #8d672b: fine on paper (4.86) and ivory (4.50), but only
   3.51 on the sand sections. #75541f clears all three (6.56 / 6.07 / 4.73).
   On the gold CTA panel no gold works at all — it measured 1.65 — so the
   eyebrow and body copy there switch to ink instead. */
.eyebrow-dark { color: #75541f; }

/* Solid rather than translucent: alpha over a gold panel is hard to reason
   about and easy to measure wrongly. Ink on gold is 5.79:1. */
.project-cta .eyebrow,
.project-cta .eyebrow-dark { color: var(--ink); }
.project-cta-copy p { color: var(--ink); }

/* ── CJK headline breaking on phones ──────────────────────────────────────
   Every display heading carries an authored <br> chosen for desktop. In a
   343px column those breaks overflow and drop one or two characters onto a
   line of their own: the homepage h1 ended 「品。」 alone at 83px, and
   .page-title on 劑型與包材 broke as 270 / 77 / 270 / 77 — both halves
   orphaned. Measured across every page, the longest single authored line is
   9 CJK characters for the heroes and 11 for .page-title.

   Two fixes, because the two groups differ: premium-motion.js rewrites the
   hero <br> into .motion-line spans for the line-rise animation, so there is
   no <br> left to suppress there — those are sized to fit instead. The rest
   keep their <br>, so it is simply dropped and the browser allowed to
   balance the lines itself. */
@media (max-width: 560px) {
  /* Heroes: split into spans by the motion script, so size to the break.
     9 chars x 0.965em must clear 343px -> 38px. */

  /* Everything else: let the browser choose, and balance the result so no
     line is left with two characters on it. */
  .project-cta h2,
  .split-feature-copy h2,
  .display-statement { text-wrap: balance; }
  .project-cta h2 br,
  .split-feature-copy h2 br,
  .display-statement br { display: none; }

  /* "ONE-STOP HEALTH SUPPLEMENT ODM / OEM" needed 344px at .22em tracking
     and dropped "OEM" onto its own 35px line. */
  .eyebrow { letter-spacing: .14em; }
}

/* --------------------------------------------------------------------------
   Inquiry list (premium-inquiry.js)
   Toggles on catalogue styles, dosage/packaging cards and functional
   directions; the floating button becomes the list once something is in it.
   -------------------------------------------------------------------------- */
.inquiry-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.inquiry-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-quick) ease, color var(--dur-quick) ease, border-color var(--dur-quick) ease;
}
.inquiry-toggle:hover { border-color: var(--gold); }
.inquiry-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.inquiry-toggle[aria-pressed="true"] { color: var(--white); background: var(--ink); border-color: var(--ink); }
.inquiry-toggle-block { width: 100%; margin-top: 10px; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.inquiry-toggle-inline { margin-top: 18px; }
.inquiry-host { position: relative; display: flex; }
.inquiry-host > .catalogue-card { flex: 1; }
.inquiry-toggle-overlay { position: absolute; z-index: 2; top: 10px; right: 10px; background: rgba(251,249,244,.94); box-shadow: 0 6px 18px rgba(23,23,19,.12); }
.inquiry-toggle-hero { margin-top: 30px; color: var(--white); background: transparent; border-color: rgba(255,255,255,.42); }
.inquiry-toggle-hero:hover { border-color: var(--gold-light); }
.inquiry-toggle-hero[aria-pressed="true"] { color: var(--ink); background: var(--gold-light); border-color: var(--gold-light); }
/* A picked card keeps a gold rule, so the page shows what is already in. */
.is-inquiry-selected { box-shadow: 0 0 0 2px var(--gold); }
.inquiry-hint { margin: 0 0 22px; color: var(--muted); font-size: 13px; }

.inquiry-tray { display: none; border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.has-inquiry .inquiry-tray { display: flex; }
.has-inquiry a.floating-consult { display: none; }
.inquiry-tray-count {
  position: absolute;
  top: -4px;
  left: -4px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  color: var(--white);
  background: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 13px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
/* `scale`, not `transform`: the button's magnet effect owns transform. */
.inquiry-tray.is-bumped { animation: inquiryBump .5s var(--ease); }
@keyframes inquiryBump { 40% { scale: 1.12; } 100% { scale: 1; } }

.inquiry-open { overflow: hidden; }
.inquiry-drawer { position: fixed; inset: 0; z-index: 1200; }
.inquiry-drawer[hidden] { display: none; }
.inquiry-backdrop { position: absolute; inset: 0; background: rgba(23,23,19,.5); }
.inquiry-panel-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--paper);
  box-shadow: -24px 0 60px rgba(0,0,0,.25);
}
.inquiry-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 28px 28px 18px; border-bottom: 1px solid var(--line); }
.inquiry-drawer-head .eyebrow { margin: 0 0 8px; }
.inquiry-drawer-head h2 { font-size: 30px; }
.inquiry-close { width: 44px; height: 44px; flex: none; color: var(--ink); background: transparent; border: 1px solid var(--line); font-size: 24px; line-height: 1; cursor: pointer; }
.inquiry-list { flex: 1; margin: 0; padding: 8px 28px; overflow-y: auto; list-style: none; }
.inquiry-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.inquiry-thumb { width: 56px; height: 56px; display: block; object-fit: cover; object-position: top; background: var(--sand); border-radius: 2px; }
.inquiry-row-text { min-width: 0; display: grid; gap: 3px; }
.inquiry-row-text small { color: #8d672b; font-size: 11px; letter-spacing: .06em; }
.inquiry-row-text a,
.inquiry-row-text strong { color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.inquiry-row-text a:hover { text-decoration: underline; }
.inquiry-remove,
.inquiry-clear { min-height: 40px; padding: 6px 10px; color: var(--muted); background: transparent; border: 0; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.inquiry-remove:hover,
.inquiry-clear:hover { color: var(--ink); }
.inquiry-empty { padding: 30px 0; color: var(--muted); }
.inquiry-drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px 24px; border-top: 1px solid var(--line); }

.inquiry-inline { margin-bottom: 28px; padding: 20px 22px; background: var(--ivory); border: 1px solid var(--line); }
.inquiry-inline[hidden] { display: none; }
/* Sits inside the two-column form, across both columns. */
.premium-form > .inquiry-inline { grid-column: 1 / -1; margin-bottom: 0; }
.inquiry-inline-head h3:focus { outline: none; }
.inquiry-inline-head h3:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.inquiry-inline-head { display: flex; align-items: center; gap: 12px; }
.inquiry-inline-head h3 { margin: 0; font-size: 18px; }
.inquiry-inline-count { color: #8d672b; font-size: 13px; }
.inquiry-inline-head .inquiry-clear { margin-left: auto; }
.inquiry-inline-note { margin: 4px 0; color: var(--muted); font-size: 13px; }
.inquiry-inline .inquiry-list { max-height: 360px; padding: 0; }

@media (max-width: 560px) {
  .inquiry-panel-drawer { top: auto; width: 100%; max-height: 86vh; }
  .inquiry-drawer-head,
  .inquiry-list,
  .inquiry-drawer-foot { padding-left: 20px; padding-right: 20px; }
  .inquiry-drawer-foot { flex-direction: column-reverse; align-items: stretch; }
  .inquiry-go { justify-content: center; }
  /* Two cards abreast leave each image ~170px wide; an overlaid button would
     cover half of it. Below the card it keeps its full touch height. */
  .inquiry-host { flex-direction: column; }
  .inquiry-toggle-overlay { position: static; width: 100%; margin-top: 8px; background: var(--paper); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-tray.is-bumped { animation: none; }
}