/*
 * TY Cosmetic — theme layer on top of Bootstrap 5.
 *
 * Colours, type sizes and spacing are taken from the live tyoemcosmetic.com
 * design tokens. Bootstrap does the grid, navbar, dropdown, accordion, modal
 * and form work; everything below is presentation only.
 *
 * Contents
 *   1. Tokens
 *   2. Base typography
 *   3. Buttons, forms, section helpers
 *   4. Header / navigation
 *   5. Footer + floating contact
 *   6. Home page sections
 *   7. Inner page sections
 *   8. Inquiry modal
 *   9. Responsive
 */

/* ------------------------------------------------------------- 1. Tokens */

:root {
  --ty-primary: #333333;
  --ty-secondary: #9e866e;
  --ty-text: #333333;
  --ty-blue: #4fa6dd;
  --ty-hover: #a41476;
  --ty-muted: #666666;
  --ty-light-muted: #999999;
  --ty-border: #dddddd;
  --ty-soft: #f6f6f6;
  --ty-white: #ffffff;

  --ty-body-font: Arial, Helvetica, sans-serif;
  /* The reference site declares Manrope for buttons without shipping a
     webfont, so it falls back to the system sans — mirrored here. */
  --ty-button-font: Manrope, Arial, Helvetica, sans-serif;

  --ty-section-pad: 120px;
  --ty-section-pad-lg: 180px;
  --ty-stats-band-pad: 90px;
}

/* --------------------------------------------------- 2. Base typography */

html { scroll-behavior: smooth; }

.reveal-target {
  will-change: opacity, transform;
}

.reveal-target.is-revealed {
  will-change: auto;
}

/* The source site's entrance animation (animate.css fadeInUp): the block
   rises a full element-height while fading in — 1.25s, or 2s with a 150ms
   delay for the blocks it marks as slow. Percentage travel is why this is a
   CSS animation: it resolves against each element's own height. */
@keyframes ty-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: none; }
}

[data-reveal].is-pending { opacity: 0; }
[data-reveal].is-revealed { animation: ty-fade-in-up 1250ms ease both; }

[data-reveal="slow"].is-revealed {
  animation-duration: 2000ms;
  animation-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-target { will-change: auto; }
  [data-reveal].is-pending { opacity: 1; }
  [data-reveal].is-revealed { animation: none; }
}

body {
  color: var(--ty-text);
  font-family: var(--ty-body-font);
  font-size: 18px;
  line-height: 1.5;
  background: var(--ty-white);
}

a { color: var(--ty-blue); text-decoration: none; }
a:hover { color: var(--ty-hover); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ty-primary);
  font-family: var(--ty-body-font);
  font-weight: 400;
  line-height: 1.3;
}

h1 { font-size: 52px; }
h2 { font-size: 40px; }
h3 { font-size: 30px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }

p:last-child { margin-bottom: 0; }

/* Images carry width/height attributes so the browser can reserve space, but
   the layout decides the rendered size — without this the height attribute
   would win wherever only the width is set in CSS. */
img[width][height] { height: auto; }

/* ------------------------------ 3. Buttons, forms, section helpers */

/* Two container widths, matching the source site:
   .container-xl  — boxed 1200px, used by the header, footer and mega menu.
   .container-wide — full width with a 50px gutter, used by page sections.
   Both keep a gutter of at least 24px so rows using Bootstrap's `g-5`
   (-24px margin) still sit inside the viewport. */
.container-xl { max-width: 1248px; padding-left: 24px; padding-right: 24px; }
.container-wide { width: 100%; margin: 0 auto; padding-left: 50px; padding-right: 50px; }

.section-pad { padding: var(--ty-section-pad) 0; }
.section-pad-lg { padding: var(--ty-section-pad-lg) 0; }
.bg-soft { background: var(--ty-soft); }

.eyebrow {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.6px;
}

.section-copy { color: var(--ty-muted); max-width: 660px; }
.section-note { color: var(--ty-light-muted); font-size: 15px; font-style: italic; }

/* A left-hand heading column separated from the body copy by a hairline. */
.split-heading { border-right: 1px solid var(--ty-border); }

.btn {
  font-family: var(--ty-button-font);
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 20px 30px;
}

.btn-ty {
  background: var(--ty-blue);
  border-color: var(--ty-blue);
  color: var(--ty-white);
}

.btn-ty:hover, .btn-ty:focus-visible {
  background: var(--ty-hover);
  border-color: var(--ty-hover);
  color: var(--ty-white);
}

.btn-sm { padding: 12px 22px; font-size: 14px; }

/* The header call to action is a slightly larger, uppercase variant. */
.btn-nav {
  font-family: var(--ty-body-font);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 15px 20px;
}

.navbar .btn-mobile-inquiry {
  width: auto;
  margin-top: 0;
  padding: 9px 13px;
  font-size: 11px;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Most in-page calls to action are arrow links rather than filled buttons. */
.link-cta {
  display: inline-block;
  color: var(--ty-blue);
  font-size: 24px;
  font-weight: 400;
  border: 0;
  background: none;
  padding: 0;
}

.link-cta::after { content: " \2794"; }
.link-cta:hover { color: var(--ty-hover); }

/* Hover motion carried over from the source site: calls to action lift,
   social icons shrink. */
.link-cta, .btn-nav { transition: transform 300ms ease, color 200ms ease, background-color 200ms ease; }
.link-cta:hover, .btn-nav:hover { transform: translateY(-6px); }
.footer-social a { transition: transform 300ms ease, background-color 200ms ease; }
.footer-social a:hover { transform: scale(0.9); }

@media (prefers-reduced-motion: reduce) {
  .link-cta, .btn-nav, .footer-social a, .whatsapp-icon, .video-panel .play-button { transition: none; }
  .link-cta:hover, .btn-nav:hover, .footer-social a:hover { transform: none; }
}

.form-control, .form-select {
  border: 1px solid var(--ty-border);
  border-radius: 0;
  padding: 14px 15px;
  min-height: 52px;
}

.form-control:focus, .form-select:focus {
  border-color: var(--ty-blue);
  box-shadow: 0 0 0 0.2rem rgba(79, 166, 221, 0.16);
}

.form-note { color: var(--ty-light-muted); font-size: 14px; }

/* -------------------------------------------- 4. Header / navigation */

/* The header stays pinned to the top of the viewport on every page. */
[data-site-header] {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar { min-height: 81px; padding-top: 0; padding-bottom: 0; }
.brand-logo { width: 94px; height: auto; display: block; }
.navbar .nav-link { color: var(--ty-muted); font-size: 16px; padding: 28px 12px; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #000; }
.navbar .btn { padding: 13px 26px; font-size: 16px; }
.navbar .dropdown-menu { border: 0; border-radius: 0; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09); }
.navbar .dropdown-item { padding: 8px 20px; font-size: 16px; }
.navbar .dropdown-item:hover { background: var(--ty-soft); color: var(--ty-blue); }

/* The Products dropdown spans a boxed 1200px panel over a photo of the lab.
   The image file is already faded, so it is used as-is with no overlay — the
   source site does the same. Popper is switched off with
   data-bs-display="static" so the panel can be centred against the navbar. */
.navbar .dropdown-menu.mega-menu {
  top: 100%;
  left: 50%;
  width: min(1200px, calc(100vw - 40px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  transform: translateX(-50%);
  gap: 0;
  padding: 34px 40px;
  background-color: var(--ty-white);
  background-image: url('../images/mega-menu-bg.jpg');
  background-size: cover;
  background-position: center;
}

/* Decorative figure anchored to the bottom-right of the panel. */
.mega-figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 366px;
  max-width: 34%;
  height: auto;
  pointer-events: none;
}

.navbar .dropdown-menu.mega-menu.show { display: flex; }

.mega-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  align-content: start;
}

.mega-column-title {
  display: block;
  color: var(--ty-blue);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 14px;
}

.mega-column-title::before { content: "> "; }
.mega-column-title:hover { color: var(--ty-hover); }
.mega-sub { margin: 0 0 26px; }
.mega-sub li { margin-bottom: 8px; }
.mega-sub a { color: #000; font-size: 14px; }
.mega-sub a:hover { color: var(--ty-blue); }

.mega-aside { flex: 0 0 280px; padding-left: 34px; }
.mega-aside p { color: var(--ty-primary); font-size: 16px; margin-bottom: 22px; }
.mega-search { display: flex; margin-top: 22px; }
.mega-search .form-control { min-height: 46px; padding: 8px 14px; font-size: 15px; border-radius: 0; }

.mega-search .btn {
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 8px 16px;
}

/* -------------------------------------- 5. Footer + floating contact */

.site-footer { background: #3a3a3a; color: #ddd; font-size: 15px; }
.site-footer a { color: #ddd; }
.site-footer a:hover { color: var(--ty-white); }
.footer-logo { width: 145px; height: auto; }

.footer-contact li {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.footer-contact svg { flex: none; margin-top: 4px; }
.footer-contact strong { color: var(--ty-white); }
.footer-links li { margin-bottom: 14px; }

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: #4a4a4a;
}

.footer-social a:hover { background: var(--ty-blue); }
.footer-search { display: flex; max-width: 250px; }
.footer-search .form-control { min-height: 40px; padding: 8px 12px; font-size: 14px; border-radius: 0; }

.footer-search .btn {
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 8px 14px;
}

.catalog-cover { width: 100%; max-width: 245px; height: auto; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.13); color: #bbb; text-align: center; }

.whatsapp-float {
  position: fixed;
  right: 30px;
  bottom: 34px;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ty-primary);
}

.chat-label {
  background: var(--ty-white);
  padding: 10px 14px;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-size: 12px;
}

.whatsapp-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #19be54;
  color: var(--ty-white);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 200ms ease;
}

.whatsapp-float:hover .whatsapp-icon { transform: scale(1.08); }

/* Chat panel: the sales team, each reachable on their own WhatsApp number. */
.chat-panel {
  position: fixed;
  right: 30px;
  bottom: 106px;
  z-index: 1041;
  width: 351px;
  max-width: calc(100vw - 50px);
  max-height: min(560px, calc(100vh - 160px));
  overflow-y: auto;
  border-radius: 5px 5px 8px 8px;
  background: var(--ty-white);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.chat-panel-head { background: #2db742; color: #d9ebc6; padding: 15px 20px 17px; }
.chat-panel-title { color: var(--ty-white); font-size: 18px; line-height: 24px; margin: 0; }
.chat-panel-intro { font-size: 12px; line-height: 20px; margin: 4px 0 0; }
.chat-panel-body { padding: 13px 19px 21px; }
.chat-panel-note { color: #a5abb7; font-size: 11px; font-weight: 500; margin: 0 0 12px; }
.chat-agents li + li { border-top: 1px solid #eee; }

.chat-agents a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  color: var(--ty-primary);
}

.chat-agents a:hover { color: var(--ty-primary); background: #f5f7f9; }
/* 头像是公司 logo 不是人像,所以要整个装进圆里(contain),不能像人像那样 cover 裁切;
   白底 logo 在白面板上没有边界,补一圈浅描边。 */
.chat-agents img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #e6e9ee;
  padding: 5px;
  background: var(--ty-white);
  object-fit: contain;
}
.chat-agents strong { display: block; font-size: 15px; font-weight: 700; }
.chat-agent-role { display: block; color: var(--ty-muted); font-size: 12px; }
.chat-agent-status { display: block; color: #a5abb7; font-size: 11px; }
.chat-agent-icon { margin-left: auto; color: #2db742; display: flex; }
.chat-agent-icon svg { width: 22px; height: 22px; }

/* --------------------------------------------- 6. Home page sections */

.hero-home {
  position: relative;
  min-height: 777px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ty-white);
}

.hero-home video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 手机端顶替视频的那张图(手机上视频是隐藏的,原站也一样)。
   以前它写在下面 media query 的 background-image 里,而后台编辑器只认
   <img>/<video>,碰不到 CSS 背景 —— 跟当初那 6 个头图一个毛病。
   改成真 <img> 客户才能自己换。桌面端有视频,先藏起来。 */
.hero-home .hero-mobile-bg { display: none; }

.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(51, 51, 51, 0.42);
}

.hero-home .container-wide { position: relative; z-index: 1; }
.hero-home h1 { color: var(--ty-white); font-size: 66px; line-height: 1.1; font-weight: 500; max-width: 760px; }
.hero-home .eyebrow { color: var(--ty-white); }
.hero-home .hero-copy { max-width: 760px; }

/* Six figures in three columns; the home page puts them beside the video, the
   inner pages give them the full width. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 20px;
}

.stats-grid-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Figures band sitting above the heading and video on the home page. The
   padding is deliberately equal top and bottom so the numbers sit centred
   between the top of the section and the rule, rather than hugging the rule.
   The section itself drops its top padding to let this band own that space. */
.stats-band {
  padding-top: var(--ty-stats-band-pad);
  padding-bottom: var(--ty-stats-band-pad);
  margin-bottom: 60px;
  border-bottom: 1px solid var(--ty-border);
}
.stat-number { color: var(--ty-blue); font-size: 42px; line-height: 1.1; font-weight: 400; }
.stat-number .unit { font-size: 30px; }
.stat-label { color: #000; margin-top: 6px; }

/* Company video: poster until the visitor presses play, then it plays inline. */
.video-panel { position: relative; display: block; }
.video-panel video { width: 100%; height: auto; display: block; background: #000; }

.video-panel .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--ty-white);
  transition: background 200ms ease, transform 200ms ease;
}

.video-panel:hover .play-button { background: var(--ty-blue); transform: translate(-50%, -50%) scale(1.08); }
.video-panel.is-playing .play-button { display: none; }

/* In-video lead capture, mirroring the source site's player overlay. */
.video-cta {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  border-radius: 50px;
  padding: 7px 18px;
  background: var(--ty-hover);
  color: var(--ty-white);
  font-size: 14px;
  transition: background-color 200ms ease;
}

.video-cta:hover { background: #8d1165; }

.video-whatsapp {
  position: absolute;
  right: 14px;
  bottom: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ty-hover);
  color: var(--ty-white);
}

.video-whatsapp svg { width: 20px; height: 20px; }

.video-form {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}

.video-form form {
  position: relative;
  width: min(420px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 24px 24px;
  border-radius: 8px;
  background: var(--ty-white);
}

.video-form h3 { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 18px; }
.video-form .form-control { min-height: 44px; margin-bottom: 12px; border-radius: 4px; font-size: 15px; }
.video-form textarea { margin-bottom: 2px; }
.video-form-count { color: var(--ty-light-muted); font-size: 12px; text-align: right; margin: 0 0 12px; }
.video-form-privacy { color: var(--ty-muted); font-size: 13px; text-align: center; margin: 0 0 14px; }

.video-form-submit {
  width: 100%;
  border-radius: 50px;
  padding: 12px 20px;
  background: var(--ty-hover);
  border-color: var(--ty-hover);
  color: var(--ty-white);
}

.video-form-submit:hover { background: #8d1165; border-color: #8d1165; color: var(--ty-white); }

.video-form-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: none;
  color: var(--ty-light-muted);
  font-size: 24px;
  line-height: 1;
}

.product-line-art { max-width: 300px; }
.certification-logos { width: 100%; max-width: 470px; height: auto; }

/* Category cards flip on hover to reveal the product shot behind them. */
.category-strip { display: grid; grid-template-columns: repeat(5, 1fr); }

.category-card {
  position: relative;
  min-height: 445px;
  overflow: hidden;
  perspective: 1200px;
  display: block;
}

.category-card .flip-inner {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.category-card:hover .flip-inner,
.category-card:focus-visible .flip-inner { transform: rotateY(180deg); }

/* Inside the admin editor preview (assets/js/site.js sets data-cms-preview from
   ?cms-preview=) the card must not flip: the pointer has to land on the card
   before anything can be clicked, and the flip would swap the front photo out
   from under the cursor, so only the back one was ever selectable. Freeze the
   card and park the hover photo in the corner as a labelled thumbnail — that
   way both photos can be picked. */
html[data-cms-preview] .category-card .flip-inner,
html[data-cms-preview] .category-card:hover .flip-inner,
html[data-cms-preview] .category-card:focus-visible .flip-inner {
  transition: none;
  transform: none;
}

html[data-cms-preview] .category-card .flip-back {
  inset: 10px 10px auto auto;
  z-index: 2;
  width: 96px;
  height: 96px;
  transform: none;
  outline: 2px solid #1677ff;
}

html[data-cms-preview] .category-card .flip-back::after {
  content: "HOVER";
  position: absolute;
  inset: auto 0 0;
  padding: 2px 0;
  color: #fff;
  font: 10px/12px Arial, sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
  background: #1677ff;
}

.category-card .flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
}

.category-card .flip-face img { width: 100%; height: 100%; object-fit: cover; }
.category-card .flip-back { transform: rotateY(180deg); }

.category-card .category-name {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 56px 18px 22px;
  color: var(--ty-white);
  font-size: 23px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
}

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
.service-card img { width: 100%; aspect-ratio: 1.55; object-fit: cover; display: block; }
.service-card h3 { font-size: 24px; margin: 20px 0 10px; }
.service-card p { color: var(--ty-muted); }

.cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cert-card { border: 5px solid #232323; background: var(--ty-white); }
.cert-card img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; display: block; }

/* Certificate slider: six certificates in view, stepping one at a time on a
   loop. The track is widened by a duplicate row in JS so it can wrap. */
.cert-slider { overflow: hidden; }

.cert-track {
  display: flex;
  gap: 12px;
  transition: transform 250ms ease;
}

.cert-track > * { flex: 0 0 calc((100% - 5 * 12px) / 6); }

.cert-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }

.cert-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
}

.cert-dots button.active { background: var(--ty-primary); }

.advantage-wrap { border-radius: 24px; background: var(--ty-soft); padding: 56px 48px; }
.advantage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.advantage-grid img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 18px; }
.advantage-grid h3 { font-size: 18px; color: var(--ty-blue); }
.advantage-grid p { font-size: 14px; color: #555; }

.partner-logo-sheet { width: 100%; height: auto; }

.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.review-card {
  height: 100%;
  border: 1px solid #e5e5e5;
  background: var(--ty-white);
  display: flex;
  flex-direction: column;
}

.review-head { display: flex; align-items: center; gap: 10px; padding: 16px; }
.review-card .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.review-card .reviewer { font-size: 14px; }
.review-card .work { width: 100%; aspect-ratio: 1.6; object-fit: cover; background: #edf3f7; }
.review-card blockquote { font-size: 15px; color: #555; margin: 0; }
.review-body { padding: 16px; }

.about-review-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px;
  border: 0;
}

.about-review-card .avatar {
  width: 58px;
  height: 58px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.about-review-card .review-body { padding: 0; }
.quote-mark { color: #d5d5d5; font-size: 54px; line-height: 0.7; }

/* 团队合影只放 4 个人。人像原图最大就是 300×400,所以整行限宽到
   4 张 300px + 间距再居中,让它撑满整行的话图会被放大糊掉。 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 1224px;
  margin-left: auto;
  margin-right: auto;
}

.team-member img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.team-member strong { display: block; text-align: center; margin-top: 14px; font-size: 16px; font-weight: 400; }

.inquiry-band { background: #353535; color: var(--ty-white); }
.inquiry-band h2, .inquiry-band h3, .inquiry-band label { color: var(--ty-white); }
.inquiry-band .form-note { color: #bbb; }

/* ------------------------------------------- 7. Inner page sections */

.inner-hero { min-height: 328px; background: var(--ty-soft); display: flex; align-items: center; }
.inner-hero h1 { font-size: 54px; line-height: 1.25; }

.photo-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  color: var(--ty-white);
}

/* 头图用真正的 <img> 而不是 CSS 背景图,客户才能在后台点它换图。
   三层自下而上:图片 → 色罩 → 文字,所以 z-index 要写明。
   选择器带上 img 是为了压过上面的 `img[width][height] { height: auto }`,
   那条规则会把铺满用的 height:100% 打回 auto。 */
.photo-hero img.photo-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Warm taupe wash over the photo — the site's secondary colour at 50%. */
.photo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--ty-secondary);
  opacity: 0.5;
}

.photo-hero > .container-wide, .photo-hero > .container-xl { position: relative; z-index: 2; }
.photo-hero h1, .photo-hero h2, .photo-hero p { color: var(--ty-white); }
.photo-hero h1 { font-size: 52px; line-height: 1.25; }
.photo-hero .eyebrow { font-weight: 700; text-transform: uppercase; }

/* Listing pages centre their banner copy; article and case pages keep it left. */
.photo-hero-center { text-align: center; }
.photo-hero-center .section-copy { margin-left: auto; margin-right: auto; }

.icon-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 20px; }
.icon-card h3 { font-size: 24px; margin-bottom: 12px; }
.icon-card p { color: var(--ty-muted); font-size: 16px; }

.photo-card { height: 100%; background: var(--ty-white); border: 1px solid #e6e6e6; overflow: hidden; }
.photo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-card .photo-card-body { padding: 24px; }
.photo-card h3 { font-size: 22px; margin-bottom: 12px; }
.photo-card p { color: var(--ty-muted); font-size: 15px; }

.model-card { height: 100%; border: 1px solid #e3e3e3; overflow: hidden; background: var(--ty-white); }
.model-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.model-card .model-card-body { padding: 30px; }
.model-card h3 { font-size: 24px; margin-bottom: 12px; }
.model-card p { color: var(--ty-muted); font-size: 16px; }

.process-diagram { width: 100%; height: auto; }
.process-step { border-top: 3px solid var(--ty-blue); padding-top: 18px; }
.process-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 16px; }
.process-step h3 { font-size: 18px; margin-bottom: 8px; }
.process-step p { color: var(--ty-muted); font-size: 14px; }
.process-number { color: var(--ty-blue); font-size: 36px; font-weight: 700; line-height: 1; }

.rd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.rd-card img { width: 100%; aspect-ratio: 0.8; object-fit: cover; display: block; }
.rd-card strong { display: block; margin-top: 14px; font-size: 17px; }
.rd-card .rd-role { color: var(--ty-blue); font-size: 14px; }
.rd-card .rd-focus { color: var(--ty-muted); font-size: 13px; }

.feature-card { border: 1px solid #e3e3e3; padding: 30px; height: 100%; }
.feature-card h3 { font-size: 24px; margin-bottom: 12px; }
.feature-card p { color: var(--ty-muted); font-size: 16px; }

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.badge-item { display: flex; align-items: center; gap: 16px; }
.badge-item img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.badge-item p { color: var(--ty-muted); font-size: 16px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; display: block; }

.old-quote { font-size: 40px; line-height: 1.3; }
.quote-attribution { color: var(--ty-muted); }
.mission-copy { max-width: 1040px; }

/* Highlighted note, e.g. the Indonesian halal deadline. */
.callout {
  border-left: 4px solid var(--ty-blue);
  background: var(--ty-soft);
  padding: 36px 40px;
}

.callout h2 { font-size: 30px; }
.video-band { background: #f0f4f8; }
.video-band .video-panel { max-width: 1200px; }

/* Certificate and document thumbnails on the Certificates page. */
.cert-doc { margin: 0; }
.cert-doc img { width: 100%; height: auto; display: block; border: 1px solid #e3e3e3; }
.cert-doc a:hover img { border-color: var(--ty-blue); }
.cert-doc figcaption { margin-top: 10px; color: var(--ty-muted); font-size: 14px; }

.catalog-card {
  height: 100%;
  background: #eeedf1;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.catalog-card h2 { font-size: 27px; padding: 20px 20px 0; margin: 0; }
.catalog-card p { padding: 10px 20px 20px; margin: 0; font-size: 15px; color: #555; }
.catalog-card img { margin-top: auto; width: 100%; height: 240px; object-fit: cover; display: block; }

.catalog-hero-section { padding: 72px 0; background: #f7f7f7; overflow: hidden; }
.catalog-hero-section h1 { max-width: 560px; }
.catalog-hero-section img { display: block; width: min(100%, 720px); margin: 0 auto; }

.sample-cta-band {
  color: #fff;
  background: var(--ty-blue);
  text-align: center;
}

.sample-cta-band h2,
.sample-cta-band .section-copy,
.sample-cta-band .section-note { color: #fff; margin-left: auto; margin-right: auto; }
.sample-cta-band .row { justify-content: center; }
.sample-cta-band .col-lg-5,
.sample-cta-band .col-lg-7 { flex: 0 0 100%; max-width: 100%; }
.sample-cta-band .split-heading { border: 0; padding-bottom: 0; margin-bottom: 0; }
.sample-cta-band .link-cta {
  padding: 12px 22px;
  border-radius: 3px;
  color: var(--ty-blue);
  background: #fff;
  font-size: 17px;
}
.sample-cta-band .link-cta:hover { color: var(--ty-hover); }

.oem-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.oem-category-grid a {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #222;
}

.oem-category-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 500ms ease;
}

.oem-category-grid span {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 16px;
  color: #fff;
  font-size: 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

.oem-category-grid a:hover img { transform: scale(1.035); }

.sunscreen-guide { background: #fff; }
.sunscreen-guide-nav { position: sticky; top: 110px; align-self: flex-start; }
.sunscreen-guide-nav nav { display: grid; gap: 8px; margin-top: 28px; }
.sunscreen-guide-nav nav a { padding: 8px 0; border-bottom: 1px solid var(--ty-border); color: var(--ty-muted); }
.sunscreen-guide-nav nav a:hover { color: var(--ty-blue); }
.sunscreen-guide-copy > section { padding: 0 0 56px; margin: 0 0 56px; border-bottom: 1px solid var(--ty-border); scroll-margin-top: 120px; }
.sunscreen-guide-copy > section:last-child { margin-bottom: 0; border-bottom: 0; }
.sunscreen-guide-copy h2 { margin-bottom: 22px; }
.sunscreen-guide-copy h3 { font-size: 22px; margin: 24px 0 10px; }
.sunscreen-guide-copy p { color: var(--ty-muted); }
.guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

/* 图按自身比例显示,不要写死比例。原先这里钉的是 300/188 —— 那是防晒页那批图的
   形状,别的品类页图形状不一样(洗发水那两张是 600x288 的横幅),套进去会被
   object-fit: cover 裁掉一截。同一行里的图在原站本来就是同一比例,交给图片
   自己的 width/height 撑,行高自然就齐了。 */
.product-type img { width: 100%; height: auto; display: block; }
.product-type h3 { font-size: 20px; margin-top: 16px; }
.product-type p { color: var(--ty-muted); font-size: 15px; }

.product-shot { border: 1px solid #ececec; background: var(--ty-white); }
.product-shot img { width: 100%; height: auto; display: block; }
.product-shot span { display: block; padding: 12px 14px; font-size: 14px; }

.case-card img, .blog-card img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.blog-card img { aspect-ratio: 4 / 3; }
.blog-card h3 { font-size: 22px; margin: 18px 0 10px; }
.blog-card p { color: var(--ty-muted); font-size: 15px; }

.case-step img { width: 100%; object-fit: cover; display: block; }
.case-step figcaption { color: var(--ty-muted); font-size: 14px; margin-top: 10px; }

/* The source case study is intentionally a narrow, editorial column rather
   than a full-width gallery. Keeping two screenshots per row preserves their
   readable size and the long-form rhythm of the original case page. */
.case-study-article .container-wide {
  width: 898px;
  max-width: calc(100% - 70px);
  margin-left: 70px;
  margin-right: 0;
}

.faq-item .accordion-button { font-size: 19px; color: var(--ty-primary); }
.faq-item .accordion-button:not(.collapsed) { background: var(--ty-soft); color: var(--ty-primary); box-shadow: none; }
.faq-item .accordion-button:focus { box-shadow: none; border-color: var(--ty-border); }
.faq-item .accordion-body a { overflow-wrap: anywhere; }

@media (min-width: 992px) {
  .faq-item .accordion-button { padding: 26px 20px; }
  .faq-item .accordion-body { padding: 30px 20px; }
}

.article-content { max-width: 820px; }
.article-content h2 { font-size: 32px; margin-top: 48px; }
.article-content h3 { font-size: 25px; margin-top: 32px; }
.article-content img { width: 100%; height: auto; margin: 28px 0; }
.article-meta { color: var(--ty-light-muted); font-size: 15px; }

.contact-card { border: 1px solid #e3e3e3; padding: 30px; height: 100%; }
.contact-card h3 { font-size: 20px; margin-bottom: 14px; }
.contact-person img { width: 100%; max-width: 200px; height: auto; }

/* -------------------------------------------------- 8. Inquiry modal */

#inquiryModal .modal-content {
  border: 0;
  border-radius: 0;
  background-color: var(--ty-white);
  background-image: linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
    url('../images/lab-inquiry-bg.jpg');
  background-size: cover;
  background-position: center;
}
.inquiry-intro img { width: 100%; max-width: 320px; height: auto; }
.inquiry-intro h2 { font-size: 28px; margin: 20px 0 14px; }
.inquiry-intro p { color: var(--ty-muted); font-size: 16px; }
.inquiry-staff { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.inquiry-staff img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

/* --------------------------------------------------- 9. Responsive */

@media (max-width: 1199.98px) {
  .stats-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rd-grid { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  h1 { font-size: 42px; }
  h2 { font-size: 36px; }
  h3 { font-size: 30px; }
  :root { --ty-section-pad: 90px; --ty-section-pad-lg: 110px; --ty-stats-band-pad: 70px; }
  .hero-home h1 { font-size: 56px; }
  .inner-hero h1 { font-size: 46px; }
  .advantage-grid { grid-template-columns: repeat(3, 1fr); }
  .badge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
  .container-wide { padding-left: 24px; padding-right: 24px; }
  .navbar { min-height: 72px; }
  .brand-logo { width: 78px; }
  .navbar .nav-link { padding: 10px 0; }
  .navbar-collapse { padding: 16px 0 24px; max-height: 78vh; overflow-y: auto; }
  .navbar .btn { width: 100%; margin-top: 12px; }
  .navbar .btn-mobile-inquiry {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    font-size: 11px;
  }
  .navbar .dropdown-menu.mega-menu {
    position: static;
    width: 100%;
    max-height: none;
    left: auto;
    transform: none;
    flex-direction: column;
    gap: 20px;
    padding: 16px 0;
    box-shadow: none;
  }
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-aside { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--ty-border); padding: 20px 0 0; }
  .hero-home { min-height: 680px; }
  .split-heading {
    border-right: 0;
    border-bottom: 1px solid var(--ty-border);
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .cert-track > * { flex-basis: calc((100% - 2 * 12px) / 3); }
  .category-strip { grid-template-columns: repeat(3, 1fr); }
  .category-card { min-height: 380px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .oem-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sunscreen-guide-nav { position: static; }
  .case-study-article .container-wide {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767.98px) {
  body { font-size: 16px; }
  h1 { font-size: 36px; }
  h2 { font-size: 32px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
  :root { --ty-section-pad: 60px; --ty-section-pad-lg: 60px; --ty-stats-band-pad: 48px; }
  .eyebrow { font-size: 14px; letter-spacing: 0; }
  .btn { padding: 14px 24px; }
  .hero-home {
    min-height: 620px;
    background: #d9b99e;
  }
  .hero-home video { display: none; }

  /* 图铺在最底下:DOM 里它排在视频前面,又都没写 z-index,所以色罩(::after)
     和文字(z-index 1)照样压在它上面。选择器带上 img 是为了压过
     styles.css 开头那条 `img[width][height] { height: auto }`,
     否则铺满用的 height:100% 会被打回 auto。 */
  .hero-home img.hero-mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-home h1 { font-size: 42px; }
  .hero-home .btn { display: block; width: max-content; margin-bottom: 8px; }
  .stats-grid, .stats-grid-wide { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .stat-number { font-size: 36px; }
  .link-cta { font-size: 20px; }
  .category-strip { grid-template-columns: 1fr; }
  .category-card { min-height: 430px; }
  .service-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-track > * { flex-basis: calc((100% - 2 * 12px) / 3); }
  .advantage-wrap { padding: 38px 22px; border-radius: 16px; }
  .advantage-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .rd-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .mega-grid { grid-template-columns: 1fr; }
  .badge-grid, .gallery-grid { grid-template-columns: 1fr; }
  .guide-columns { grid-template-columns: 1fr; }
  .case-study-article .col-6 { width: 100%; }
  .inner-hero { padding: 60px 0; }
  .inner-hero h1 { font-size: 40px; }
  .photo-hero { min-height: 400px; }
  .photo-hero h1 { font-size: 36px; }
  .old-quote { font-size: 26px; }
  .chat-label { display: none; }
  .whatsapp-float { right: 18px; bottom: 22px; }
}