.premium-inner { background: var(--paper); }
.premium-inner .site-header { background: rgba(23,23,19,.96); }
.premium-inner .primary-nav a.is-current { color: var(--gold-light); }
.premium-inner .primary-nav a.is-current::after { transform: scaleX(1); }

.inner-hero {
  min-height: 680px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: calc(var(--header-height) + 90px) 0 94px;
  color: var(--white);
  background: var(--ink);
}
.inner-hero-media,
.inner-hero-shade { position: absolute; inset: 0; }
.inner-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.inner-hero-shade { background: linear-gradient(90deg, rgba(18,18,15,.95), rgba(18,18,15,.66) 42%, rgba(18,18,15,.12)), linear-gradient(0deg, rgba(18,18,15,.58), transparent 50%); }
.inner-hero-content { position: relative; z-index: 1; }
.inner-hero h1 { max-width: 900px; font-size: var(--fs-display); line-height: var(--lh-display); }
.inner-hero-lead { max-width: 680px; margin: 28px 0 0; color: rgba(255,255,255,.7); font-size: 18px; line-height: 1.9; }
.inner-hero-index { position: absolute; z-index: 1; right: max(28px, calc((100vw - var(--container))/2)); bottom: 96px; color: rgba(255,255,255,.4); font-family: "Outfit",sans-serif; font-size: 12px; letter-spacing: .18em; }

/* These video-referenced stills already have a dark copy area on the left. */
[data-video-reference-hero] .inner-hero-shade,
[data-video-reference-hero] .cap-hero-shade {
  background: linear-gradient(90deg, rgba(18,18,15,.76), rgba(18,18,15,.5) 42%, rgba(18,18,15,.05) 76%), linear-gradient(0deg, rgba(18,18,15,.4), transparent 58%);
}
@media (min-width: 1441px) {
  [data-video-reference-hero="capability"] .cap-hero-media img,
  [data-video-reference-hero="about"] .inner-hero-media img { object-position: center 28%; }
}
@media (max-width: 720px) {
  [data-video-reference-hero] .inner-hero-media img,
  [data-video-reference-hero] .cap-hero-media img { object-position: 78% center; }
  [data-video-reference-hero="about"] .inner-hero-media img { object-position: 83% center; }
  .premium-inner[data-active="quality"] .certification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-inner[data-active="quality"] .certification-card strong { overflow-wrap: anywhere; }
  [data-video-reference-hero] .inner-hero-shade,
  [data-video-reference-hero] .cap-hero-shade {
    background: linear-gradient(90deg, rgba(18,18,15,.82), rgba(18,18,15,.5)), linear-gradient(0deg, rgba(18,18,15,.8), transparent 80%);
  }
}

/* Card hero, for the functional-direction pages. Their image is a bright
   ivory-studio still life (3:2), which a full-bleed hero would have to bury
   under the dark shade the white headline needs; so it stands beside the
   copy as a card on desktop and below it on a phone. */
.inner-hero-card { align-items: center; }
.inner-hero-card .inner-hero-shade { display: none; }
.inner-hero-card .inner-hero-content { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(40px, 7vw, 112px); align-items: center; }
.inner-hero-card-media { margin: 0; }
.inner-hero-card-media img { display: block; width: min(560px, 42vw); height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }

.page-section { padding: 112px 0; }
.page-section-ivory { background: var(--ivory); }
.page-section-sand { background: #e5ded2; }
.page-section-dark { color: var(--white); background: var(--ink); }
.page-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); align-items: end; gap: clamp(50px,9vw,130px); margin-bottom: 64px; }
.page-heading p:not(.eyebrow) { max-width: 500px; margin: 0; color: var(--muted); }
.page-section-dark .page-heading p:not(.eyebrow) { color: rgba(255,255,255,.62); }
.page-title { font-size: var(--fs-h2); }
.display-statement { max-width: 1040px; font-family: "Noto Serif TC",serif; font-size: var(--fs-statement); font-weight: 500; line-height: 1.5; letter-spacing: -.035em; }
.display-statement em { color: #8d672b; font-style: normal; }

.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,9vw,130px); align-items: start; }
.story-aside { position: sticky; top: 116px; }
.story-aside strong { display: block; color: #8d672b; font-family: "Outfit",sans-serif; font-size: 44px; font-weight: 400; }
.story-aside span { color: var(--muted); font-size: 13px; }
.story-copy { display: grid; gap: 28px; }
.story-copy p { margin: 0; color: #555148; font-size: 18px; line-height: 2; }

.value-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--cell-line); }
.value-card { min-height: 300px; padding: 30px; border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
.value-card:first-child { border-left: 1px solid var(--cell-line); }
.value-card span { color: var(--cell-kicker); font-family: "Outfit",sans-serif; font-size: 12px; letter-spacing: .15em; }
.value-card h3 { margin: 90px 0 14px; color: var(--cell-title); font-family: "Noto Serif TC",serif; font-size: 30px; }
.value-card p { margin: 0; color: var(--cell-body); font-size: 14px; }

.timeline { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.2); }
.timeline li { min-height: 112px; display: grid; grid-template-columns: 160px minmax(0,1fr) minmax(280px,.8fr); align-items: center; gap: 30px; border-bottom: 1px solid rgba(255,255,255,.2); }
.timeline time { color: var(--gold-light); font-family: "Outfit",sans-serif; font-size: 18px; }
.timeline strong { font-size: 22px; font-weight: 400; }
.timeline p { margin: 0; color: rgba(255,255,255,.5); font-size: 14px; }

.service-overview { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.service-overview-card { min-height: 270px; padding: 28px; border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
.service-overview-card:nth-child(3n+1) { border-left: 1px solid var(--cell-line); }
.service-overview-card span { color: var(--cell-kicker); font-family: "Outfit",sans-serif; font-size: 12px; }
.service-overview-card h3 { margin: 72px 0 12px; color: var(--cell-title); font-size: 24px; }
.service-overview-card p { margin: 0; color: var(--cell-body); font-size: 14px; }
/* Direction image as a card thumbnail, at the images' own 3:2. */
.service-overview-card.has-media { padding-top: 22px; }
.function-card-media { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 22px; object-fit: cover; border-radius: 3px; background: var(--sand); }
.service-overview-card.has-media h3 { margin-top: 12px; }
.function-card-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding-bottom: 3px; color: #8d672b; border-bottom: 1px solid rgba(141,103,43,.42); font-size: 12px; font-weight: 500; letter-spacing: .04em; transition: gap var(--dur-spread) var(--ease), color var(--dur-base) ease, border-color var(--dur-base) ease; }
.function-card-cta:hover,
.function-card-cta:focus-visible { gap: 18px; color: var(--ink); border-bottom-color: var(--gold); }

.format-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--cell-line); border-left: 1px solid var(--cell-line); }
.format-card { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: var(--cell-title); border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); transition: transform var(--dur-quick) var(--ease), background var(--dur-quick) ease; }
.format-card span { color: var(--cell-kicker); font-family: "Outfit",sans-serif; font-size: 11px; letter-spacing: .12em; }
.format-card h3 { font-family: "Noto Serif TC",serif; font-size: 27px; }
.format-card small { color: var(--cell-body); }

.split-feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; }
.split-feature-media { min-height: 520px; }
.split-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.split-feature-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(54px,8vw,110px) clamp(32px,5vw,80px); background: var(--ivory); }
.split-feature-copy h2 { margin-bottom: 28px; }
.split-feature-copy p { color: var(--muted); }
.split-feature-copy .button { align-self: flex-start; margin-top: 20px; }

.research-pillars { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--cell-line); border-left: 1px solid var(--cell-line); }
.research-pillar { min-height: 290px; padding: 28px; border-right: 1px solid var(--cell-line); border-bottom: 1px solid var(--cell-line); }
.research-pillar span { color: var(--cell-kicker); font-family: "Outfit",sans-serif; font-size: 12px; }
/* The card sets its own dark background, so the heading has to set its own
   colour too: it otherwise inherits the surrounding section's dark heading
   colour and lands black-on-black. */
.research-pillar h3 { margin: 100px 0 12px; color: var(--cell-title); font-family: "Noto Serif TC",serif; font-size: 28px; }
.research-pillar p { margin: 0; color: var(--cell-body); font-size: 14px; }

.quality-system { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px,9vw,130px); }
.quality-system-intro p { color: var(--muted); }
.quality-list { border-top: 1px solid var(--line); }
.quality-row { min-height: 100px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.quality-row > span { color: #8d672b; font-family: "Outfit",sans-serif; font-size: 12px; }
.quality-row strong { font-size: 19px; font-weight: 500; }
.quality-row small { color: var(--muted); }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { min-height: 98px; display: grid; grid-template-columns: 44px minmax(0,1fr) 32px; align-items: center; gap: 22px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span { color: #8d672b; font-family: "Outfit",sans-serif; font-size: 11px; }
.faq-item summary strong { font-family: "Noto Serif TC",serif; font-size: clamp(20px,2.2vw,28px); font-weight: 500; transition: color var(--dur-base) ease; }
.faq-item summary i { color: #8d672b; font-family: "Outfit",sans-serif; font-size: 22px; font-style: normal; text-align: center; transition: transform var(--dur-spread) var(--ease), color var(--dur-base) ease; }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-item > div { display: grid; grid-template-columns: 66px minmax(0,760px); padding: 0 0 32px; }
.faq-item > div p { grid-column: 2; margin: 0; color: var(--muted); }
.faq-item summary:hover strong,
.faq-item summary:focus-visible strong { color: #8d672b; }

.certificate-evidence { margin-top: 66px; padding-top: 38px; border-top: 1px solid rgba(255,255,255,.2); }
.certificate-evidence-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.certificate-evidence-head h3 { max-width: 640px; font-family: "Noto Serif TC",serif; font-size: clamp(30px,3.4vw,46px); font-weight: 500; }
.certificate-evidence-head p { max-width: 420px; margin: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.certificate-evidence-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.certificate-evidence-card { position: relative; display: grid; grid-template-columns: minmax(0,.72fr) minmax(150px,1.28fr); min-height: 310px; overflow: hidden; color: var(--ink); background: var(--ivory); transition: transform var(--dur-spread) var(--lift-ease,ease), box-shadow .82s var(--wash-ease,ease); }
.certificate-evidence-card:hover,
.certificate-evidence-card:focus-visible { transform: translateY(var(--lift-distance)); box-shadow: 0 28px 62px rgba(0,0,0,.3); }
.certificate-evidence-media { min-height: 310px; overflow: hidden; background: #ddd7ca; }
.certificate-evidence-media img { width: 100%; height: 100%; padding: 12px; object-fit: contain; object-position: center; transition: transform var(--dur-wash) var(--ease); }
.certificate-evidence-card:hover img,
.certificate-evidence-card:focus-visible img { transform: scale(1.025); }
.certificate-evidence-copy { display: flex; flex-direction: column; padding: 24px 22px; }
.certificate-evidence-copy > span { color: #8d672b; font-family: "Outfit",sans-serif; font-size: 10px; letter-spacing: .14em; }
.certificate-evidence-copy strong { margin-top: auto; font-family: "Noto Serif TC",serif; font-size: 21px; font-weight: 500; }
.certificate-evidence-copy small { margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.certificate-evidence-copy i { margin-top: 18px; color: #8d672b; font-style: normal; font-size: 12px; }

.news-page { padding-top: 76px; }
.news-masthead { padding: 100px 0 76px; background: var(--ivory); }
.news-masthead h1 { max-width: 850px; color: var(--ink); font-size: var(--fs-display); line-height: var(--lh-display); }
.news-masthead .eyebrow { color: #8d672b; }
.news-masthead p { max-width: 600px; color: var(--muted); }
.news-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.news-filter button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.news-filter button.is-active { color: var(--white); background: var(--ink); border-color: var(--ink); }
.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.article-card { display: flex; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); }
.article-card[hidden] { display: none; }
.article-card-image { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.article-card-copy { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.article-card-copy > span { color: #8d672b; font-size: 12px; }
.article-card h2 { margin: 14px 0; font-family: "Noto Serif TC",serif; font-size: 24px; line-height: 1.5; }
.article-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
/* was #8c877e — 3.39:1 at 11px */
.article-card time { margin-top: auto; color: #6b6659; font-family: "Outfit",sans-serif; font-size: 11px; }

.contact-page { padding-top: 76px; }
.contact-masthead { padding: 100px 0 80px; color: var(--white); background: var(--ink); }
.contact-masthead-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 90px; }
.contact-masthead h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
.contact-masthead p { margin: 0; color: rgba(255,255,255,.58); }
.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(50px,8vw,110px); }
.contact-details { position: sticky; top: 112px; align-self: start; }
.contact-details h2 { font-size: 38px; }
.contact-detail-list { display: grid; gap: 22px; margin-top: 40px; }
.contact-detail { padding-top: 18px; border-top: 1px solid var(--line); }
.contact-detail span { display: block; color: #8d672b; font-family: "Outfit",sans-serif; font-size: 11px; letter-spacing: .14em; }
.contact-detail strong { display: block; margin-top: 7px; font-size: 16px; font-weight: 500; }
.premium-form { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px 18px; }
.form-intro { grid-column: 1 / -1; margin: 0 0 12px; padding: 18px 20px; color: #5d584f; background: rgba(185,138,61,.1); border-left: 2px solid var(--gold); font-size: 14px; }
.form-interest { grid-column: 1 / -1; margin: -12px 0 0; padding: 0 0 20px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; }
.form-field { display: grid; gap: 8px; }
.form-field-full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 500; }
.form-field input,
.form-field select,
.form-field textarea { width: 100%; min-height: 52px; padding: 12px 14px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #9f988d; border-radius: 0; font: inherit; outline: none; transition: border-color var(--dur-quick) ease, background var(--dur-quick) ease; }
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { background: rgba(185,138,61,.06); border-bottom-color: var(--gold); }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 14px; }
.premium-form .button { justify-self: start; cursor: pointer; }
.form-status { grid-column: 1 / -1; min-height: 28px; margin: 0; font-size: 14px; }

/* A compact reading index; it wraps on phones instead of hiding destinations. */
.catalogue-nav { background: var(--ivory); border-bottom: 1px solid var(--line); }
.catalogue-nav .container { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-block: 18px; }
.catalogue-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; gap: 12px; color: var(--ink); font-size: 16px; text-decoration: none; }
.catalogue-nav a span { color: var(--muted); font-family: "Outfit", sans-serif; font-size: 13px; }
.catalogue-nav a::after { content: ""; position: absolute; inset: auto 0 2px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform var(--dur-spread, .72s) var(--ease-hover, ease); }
.catalogue-nav a:hover::after, .catalogue-nav a:focus-visible::after { transform: scaleX(1); }
.catalogue-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* On 劑型與包材 the overview and value cards are links rather than static
   articles, so every format a customer sees is one click from its own page. */
a.service-overview-card,
a.value-card { color: inherit; text-decoration: none; }
.format-disclaimer { max-width: 640px; margin: 30px 0 0; color: var(--muted); font-size: 13px; }

/* Catalogue cards on 劑型與包材. The images are the client's own product
   photography, already in the mirror at 694x1030, so the media box keeps that
   portrait ratio rather than cropping it. Some items have a detail page and
   some do not — the same card renders as an anchor or a div, and only the
   anchor gets the lift and the "查看樣式" line. */
.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.catalogue-grid-3 { grid-template-columns: repeat(3, 1fr); }

.catalogue-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.catalogue-media {
  aspect-ratio: 694 / 1030;
  overflow: hidden;
  background: var(--sand);
}
.catalogue-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Cards holding the ivory-studio card set (dosage forms, finished products)
   show it at its own 3:2 rather than the catalogue's tall default. */
.catalogue-grid-photo .catalogue-media { aspect-ratio: 3 / 2; }
.catalogue-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 18px 22px;
}
.catalogue-en {
  color: #8d672b;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
}
.catalogue-card h3 {
  margin: 6px 0 0;
  font-family: "Noto Serif TC", serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.35;
}
.catalogue-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.catalogue-more {
  position: relative;
  align-self: flex-start;
  margin-top: 16px;
  padding-top: 14px;
  color: #8d672b;
  font-size: 14px;
  font-weight: 500;
}
.catalogue-card p + .catalogue-more { margin-top: auto; }
.catalogue-more::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .5;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--hv-spread, .72s) var(--hover-ease, ease);
}

/* Only the linked cards react. A card with no detail page behind it should not
   pretend to be clickable. */
a.catalogue-card {
  transition: transform var(--dur-lift) var(--lift-ease, ease),
              box-shadow var(--dur-spread) var(--wash-ease, ease),
              border-color var(--dur-base) ease;
}
a.catalogue-card:hover {
  transform: translateY(var(--lift-distance));
  box-shadow: 0 24px 52px rgba(25,24,19,.08);
  border-bottom-color: rgba(185,138,61,.4);
}
a.catalogue-card:hover .catalogue-more::after,
a.catalogue-card:focus-visible .catalogue-more::after { transform: scaleX(1); }

@media (max-width: 900px) {
  .catalogue-grid,
  .catalogue-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .catalogue-grid,
  .catalogue-grid-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .catalogue-copy { padding: 14px 12px 18px; }
  .catalogue-card p { font-size: 16px; }
  .catalogue-nav .container { column-gap: 24px; }
}

@media (max-width: 900px) {
  .inner-hero { min-height: 620px; }
  .inner-hero-card .inner-hero-content { grid-template-columns: 1fr; gap: 36px; }
  .inner-hero-card-media img { width: 100%; }
  .page-heading,
  .story-grid,
  .quality-system,
  .contact-masthead-grid,
  .contact-layout { grid-template-columns: 1fr; gap: 42px; }
  .story-aside,
  .contact-details { position: static; }
  .value-grid,
  .service-overview { grid-template-columns: repeat(2,1fr); }
  .value-card:nth-child(3) { border-left: 1px solid var(--cell-line); }
  .service-overview-card:nth-child(3n+1) { border-left: 0; }
  .service-overview-card:nth-child(2n+1) { border-left: 1px solid var(--line); }
  .timeline li { grid-template-columns: 100px minmax(0,1fr); padding: 20px 0; }
  .timeline p { grid-column: 2; }
  .format-grid,
  .research-pillars { grid-template-columns: repeat(2,1fr); }
  .split-feature { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: repeat(2,1fr); }
  .certificate-evidence-head { align-items: start; flex-direction: column; }
  .certificate-evidence-grid { grid-template-columns: 1fr; }
  .certificate-evidence-card { grid-template-columns: 220px 1fr; min-height: 280px; }
  .certificate-evidence-media { min-height: 280px; }
}

@media (max-width: 560px) {
  .inner-hero { min-height: 660px; padding-bottom: 70px; }
  .inner-hero-lead { font-size: 15px; }
  .inner-hero-index { display: none; }
  .page-section { padding: 82px 0; }
  .page-heading { margin-bottom: 44px; }
  .story-copy p { font-size: 16px; }
  .value-grid,
  .service-overview,
  .article-grid { grid-template-columns: 1fr; }
  .value-card,
  .service-overview-card { min-height: 230px; border-left: 1px solid var(--line) !important; }
  .value-card h3 { margin-top: 60px; }
  .timeline li { grid-template-columns: 70px minmax(0,1fr); }
  .timeline p { grid-column: 1 / -1; }
  .format-grid,
  .research-pillars { grid-template-columns: repeat(2,1fr); }
  .format-card,
  .research-pillar { min-height: 210px; padding: 18px; }
  .research-pillar h3 { margin-top: 70px; font-size: 22px; }
  .split-feature-copy { padding: 70px 20px; }
  .quality-row { grid-template-columns: 34px 1fr; padding: 16px 0; }
  .quality-row small { grid-column: 2; }
  .faq-item summary { grid-template-columns: 28px minmax(0,1fr) 26px; gap: 12px; }
  .faq-item > div { display: block; padding: 0 0 28px 40px; }
  .certificate-evidence { margin-top: 48px; }
  .certificate-evidence-card { grid-template-columns: 125px 1fr; min-height: 230px; }
  .certificate-evidence-media { min-height: 230px; }
  .certificate-evidence-copy { padding: 18px 16px; }
  .certificate-evidence-copy strong { font-size: 18px; }
  .contact-page,
  .news-page { padding-top: 66px; }
  .contact-masthead,
  .news-masthead { padding: 72px 0 60px; }
  .premium-form { grid-template-columns: 1fr; }
  .form-field-full,
  .form-intro,
  .form-note,
  .premium-form .button,
  .form-status { grid-column: auto; }
}

/* Diagram figure. Unlike .split-feature-media, this must not crop: it holds
   charts such as the sustainability committee structure, where cropping
   would cut off boxes. Sized to contain, on a panel that reads as a plate. */
.chart-figure { margin-top: clamp(38px,5vw,58px); padding: clamp(24px,3.5vw,44px); background: var(--ivory); border: 1px solid rgba(23,23,19,.09); }
.chart-figure img { display: block; width: 100%; height: auto; margin: 0 auto; }
.chart-figure figcaption { margin-top: 20px; color: var(--muted); font-size: 14px; text-align: center; }

@media (max-width: 560px) {
  .chart-figure { padding: 18px; }
}

/* Ingredient catalogue. Reuses .catalogue-card; the cards are articles rather
   than links because there is no detail page below an ingredient.

   The media keeps the same 694/1030 portrait as the packaging shots, because
   that is the format the client's own ingredient art already uses — their
   冰晶番茄 image is 695×1030 — so real photos drop straight in with no
   cropping and no CSS change. */
.catalogue-grid-ingredient { grid-template-columns: repeat(3, 1fr); }
.catalogue-grid-ingredient .catalogue-media { background: #e9e3d6; }
.catalogue-grid-ingredient .catalogue-media img { object-fit: cover; }
.ingredient-meta { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.ingredient-meta b { color: #6d675c; font-weight: 500; }

.placeholder-note { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; padding: 16px 20px; background: rgba(185,138,61,.09); border-left: 2px solid var(--gold); color: #6d675c; font-size: 13px; line-height: 1.7; }
.placeholder-note strong { color: #8d672b; font-weight: 600; }

@media (max-width: 900px) {
  .catalogue-grid-ingredient { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .catalogue-grid-ingredient { grid-template-columns: 1fr; }
}

/* Packaging / dosage spec gallery. These are product shots of tablets,
   capsules, bottles and pouches — very different silhouettes on white — so
   the cell is square and the image is contained rather than cropped. The
   caption carries the size, which is the actual spec the client is
   communicating (圓型-11.5mm and 圓型-13mm are different products). */
.spec-group + .spec-group { margin-top: clamp(48px, 6vw, 84px); }
.spec-group-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.spec-group-head span { color: #8d672b; font-family: "Outfit", sans-serif; font-size: 12px; letter-spacing: .14em; }
.spec-group-head h2 { margin: 0; font-family: "Noto Serif TC", serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; }

/* align-items:start stops the grid stretching each item to the tallest row,
   which was overriding .spec-media aspect-ratio and letterboxing every shot. */
.spec-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.2vw, 16px); align-items: start; }
.spec-item { display: flex; flex-direction: column; }
/* The client's product shots are a consistent 451x796 portrait card with the
   spec panel baked in, so the cell matches that rather than a square. Kept as
   contain, never cover: cropping would cut the printed spec off the image. */
.spec-media { aspect-ratio: 451 / 796; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--line); }
.spec-media img { width: 100%; height: 100%; object-fit: contain; }
.spec-item figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }

.spec-note { margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) { .spec-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .spec-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .spec-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Article pages ────────────────────────────────────────────────────────
   The news posts were the last thing still rendering as raw Enfold output.
   Their bodies are ordinary prose — headings, paragraphs, images, lists,
   local mp4s and a couple of Vimeo embeds — so the styling lives here rather
   than in per-post inline CSS, which is what the originals used. */
.article-page .news-masthead { padding-bottom: 40px; }
/* Post titles run 12–25 characters, against the listing's short two-line
   headline, so they get a smaller size and balanced lines. At the listing's
   96px a 13-character title broke with one word split across the lines. */
.article-page .news-masthead h1 { max-width: 900px; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.3; text-wrap: balance; }
.article-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: #8d672b; font-family: "Outfit", sans-serif; font-size: 12px; letter-spacing: .14em; }
.article-meta time { color: var(--muted); letter-spacing: .06em; }
.article-meta i { width: 3px; height: 3px; background: currentColor; border-radius: 50%; font-style: normal; }

.article-hero { max-width: 1000px; margin: 0 auto clamp(44px, 5vw, 72px); }
.article-hero img { width: 100%; height: auto; display: block; }

.article-body { max-width: 760px; margin: 0 auto; color: #35322c; font-size: 17px; line-height: 2.05; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.6em; }
.article-body h2 { margin: 2.2em 0 .7em; padding-bottom: .4em; border-bottom: 1px solid var(--line); font-family: "Noto Serif TC", serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; line-height: 1.4; }
.article-body h3 { margin: 1.9em 0 .6em; font-family: "Noto Serif TC", serif; font-size: clamp(19px, 2vw, 23px); font-weight: 500; line-height: 1.5; }
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body a { color: #8d672b; text-decoration: underline; text-underline-offset: 3px; }
.article-body ul,
.article-body ol { margin: 0 0 1.6em; padding-left: 1.3em; }
.article-body li { margin-bottom: .55em; }
.article-body img { width: 100%; height: auto; display: block; margin: 2em 0; }
.article-body figure { margin: 2em 0; }
.article-body figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.article-body blockquote { position: relative; margin: 2.4em 0; padding: 28px 30px 26px; border: 1px solid rgba(141,103,43,.22); background: rgba(255,255,255,.5); color: var(--ink); }
.article-body blockquote::before { content: "“"; position: absolute; top: 6px; left: 14px; color: rgba(141,103,43,.26); font-family: Georgia,serif; font-size: 44px; line-height: 1; }
.article-body blockquote p { margin: 0; padding-left: 16px; font-family: "Noto Serif TC",serif; font-size: 1.05em; }
.article-body blockquote footer { margin-top: 12px; padding-left: 16px; color: var(--muted); font-size: 13px; }
.article-body blockquote cite { font-style: normal; }
.article-body .article-content-video .bke-video-wrap,
.article-body .article-content-video iframe { margin-block: 0; }
.article-video-embed iframe { width: 100%; aspect-ratio: 16 / 9; }

/* Local mp4s ship as a landscape and a portrait cut of the same video. */
.article-body video,
.article-body iframe { width: 100%; height: auto; display: block; margin: 2em 0; background: var(--ink); }
.article-body iframe { aspect-ratio: 16 / 9; height: auto; border: 0; }
.bke-video-wrap { margin: 2em 0; }
.bke-video-wrap video { width: 100% !important; height: auto !important; }
/* Landscape cut on desktop, portrait cut on mobile. Targeted on the
   .desktop-video / .mobile-video classes alone rather than on a particular
   wrapper: the posts use three different wrapper conventions
   (bke-video-wrap, video-switcher, video-wrap) and only these two class
   names are common to all of them. */
.article-body .mobile-video { display: none; }
.article-body .desktop-video { display: block; }
@media (max-width: 700px) {
  .article-body .desktop-video { display: none; }
  .article-body .mobile-video { display: block; }
}

.article-back { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(48px, 6vw, 80px); padding-bottom: 3px; color: #8d672b; border-bottom: 1px solid rgba(141,103,43,.4); font-size: 13px; font-weight: 500; }
.article-back:hover { color: var(--ink); border-bottom-color: var(--gold); }

.article-video-lead { max-width: 1000px; margin: 0 auto; }
.article-video-lead iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; background: var(--ink); }

@media (max-width: 700px) {
  .article-body { font-size: 16px; line-height: 1.95; }
  .article-body blockquote { padding: 24px 20px 22px; }
}

/* Section headings keep their authored <br> on phones too. They used to drop
   it, because at the old 34-40px an 11-character line could not fit a 343px
   column; at the shared 32px it does, and the author's break reads better
   than the browser splitting a word like 放進 across two lines. Balance only
   matters if a line still has to wrap, on the narrowest phones. */
@media (max-width: 560px) {
  .page-title { text-wrap: balance; }
}