/*
 * PANDA 2.0 — shared visual system.
 * Load this file after the page's original <style> block.
 * All interactive decoration is enabled by panda-v2.js; the site remains
 * fully readable when JavaScript or an optional browser API is unavailable.
 */
:root {
  --forest: #08281d;
  --ivory: #faf7f0;
  --gold: #b58a44;
  --graphite: #2b2b2b;
  --sage: #dde7dd;
  --line: #d9e1d7;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(15, 46, 34, .08);
  --panda-ease: cubic-bezier(.2, .65, .25, 1);
  --header-height: 96px;
  --panda-header-height: var(--header-height);
}

html { scroll-padding-top: calc(var(--header-height) + 22px); }

.panda-v2 {
  background: var(--ivory);
  color: var(--graphite);
  font-size: 17px;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
}
.panda-v2 ::selection { background: #b58a4438; color: var(--forest); }
.panda-v2 :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}
.panda-v2 .container { width: min(1320px, calc(100% - 80px)); }
.panda-v2 .section { position: relative; padding: 120px 0; }
.panda-v2 .section-sage {
  background: linear-gradient(125deg, #e7ece1 0%, var(--sage) 100%);
}
.panda-v2 .section-dark {
  background: radial-gradient(ellipse at 95% 0, #16483755, transparent 58%), var(--forest);
}
.panda-v2 .section-heading { max-width: 850px; margin-bottom: 48px; }
.panda-v2 :is(.section-heading h2, .copy h2) {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.15;
  text-wrap: balance;
}
.panda-v2 :is(.section-heading > p:last-child, .copy p) {
  font-size: 17px;
  line-height: 1.85;
}
.panda-v2 :is(.section-kicker, .eyebrow) {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .17em;
}
.panda-v2 :is(.section-kicker, .eyebrow)::before {
  content: "";
  width: 30px;
  height: 1px;
  flex: 0 0 30px;
  background: currentColor;
  transform-origin: left;
}
.panda-v2 .v2-heading-rule {
  display: block;
  width: 78px;
  height: 1px;
  margin-top: 25px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.15s var(--panda-ease);
}
.panda-v2 .v2-detail-visible > .v2-heading-rule { transform: scaleX(1); }

/* Fixed navigation: readable labels and comfortable touch targets. */
.panda-v2 .site-header {
  height: var(--panda-header-height);
  border-bottom: 1px solid #faf7f024;
  background: linear-gradient(180deg, #08281d73, #08281d00);
  transition: background .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.panda-v2 .site-header.scrolled {
  background: rgba(8, 40, 29, .96);
  border-color: #faf7f01e;
  box-shadow: 0 8px 30px #08281d19;
  backdrop-filter: blur(18px);
}
.panda-v2 .nav-shell { width: min(1440px, calc(100% - 64px)); gap: 22px; }
.panda-v2 .site-nav { gap: clamp(18px, 1.7vw, 27px); }
.panda-v2 .site-nav a { padding: 14px 0; font-size: 15px; font-weight: 550; letter-spacing: .015em; }
.panda-v2 .site-nav a::after { bottom: 8px; transition: transform .45s var(--panda-ease); }
.panda-v2 .brand-text strong { font-size: 22px; letter-spacing: .11em; }
.panda-v2 .brand-text small { font-size: 8px; letter-spacing: .13em; }
.panda-v2 .language-select { min-height: 44px; font-size: 12px; border-color: #faf7f04f; background: #08281d73; }

/* Cinematic scale without a permanent screen overlay. */
.panda-v2 .hero { min-height: min(860px, 94svh); }
.panda-v2 .hero-copy { width: min(1320px, calc(100% - 80px)); margin: 72px auto 0; }
.panda-v2 .hero h1 { font-size: clamp(90px, 11vw, 154px); letter-spacing: -.06em; line-height: .98; }
.panda-v2 .hero-copy > p { max-width: 650px; font-size: clamp(23px, 2.3vw, 30px); line-height: 1.5; }
.panda-v2 .hero::after {
  background: linear-gradient(90deg, #08281de6 0%, #08281d9e 48%, #08281d26 100%), linear-gradient(0deg, #08281d80 0%, transparent 45%);
}
.panda-v2 .page-hero { min-height: 470px; padding: 170px 0 70px; }
.panda-v2 .page-hero h1 { font-size: clamp(60px, 7.2vw, 94px); line-height: 1.07; letter-spacing: -.05em; text-wrap: balance; }
.panda-v2 .page-hero p { max-width: 780px; font-size: 19px; line-height: 1.7; }
.panda-v2 .page-hero::after {
  background: linear-gradient(90deg, #08281de0, #08281d88 60%, #08281d36), linear-gradient(0deg, #08281d4d, transparent 60%);
}
.panda-v2 :is(.hero-image, .page-hero-image) {
  inset: -24px 0;
  transform: translate3d(0, var(--panda-parallax-y, 0px), 0);
}
.panda-v2 .hero-controls { gap: 12px; margin-top: 34px; }
.panda-v2 .hero-dot { height: 4px; border-radius: 2px; }
.panda-v2 .hero-toggle { margin-left: 8px; font-size: 10px; }
.panda-v2 .v2-scroll-cue {
  position: absolute;
  z-index: 2;
  right: max(40px, calc((100vw - 1320px) / 2));
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 0;
  padding: 12px 0 12px 12px;
  background: transparent;
  color: #faf7f0db;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.panda-v2 .v2-scroll-cue svg { width: 19px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.5; transition: transform .35s ease; }
.panda-v2 .v2-scroll-cue:hover svg { transform: translateY(4px); }

/* Unified cards: warm photographic color, consistent image ratios and edges. */
.panda-v2 .grid { gap: 24px; }
.panda-v2 :is(.card, .news-card, .region-card) {
  position: relative;
  border: 1px solid #08281d14;
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: var(--shadow);
  transition: transform .45s var(--panda-ease), box-shadow .45s ease, border-color .45s ease, opacity .8s ease-out;
}
.panda-v2 :is(.card, .news-card):hover {
  border-color: #b58a4459;
  box-shadow: 0 18px 42px rgba(15, 46, 34, .13);
}
.panda-v2 .card:hover,
.panda-v2 .card.reveal.is-visible:hover { transform: translateY(-5px); }
.panda-v2 .news-card.reveal.is-visible:hover { transform: translateY(-3px); }
.panda-v2 .card-image { position: relative; background: #e9ebe4; }
.panda-v2 .product-card .card-image { aspect-ratio: 1; }
.panda-v2 .grid-2 > a.card .card-image { aspect-ratio: 1100 / 773; }
.panda-v2 :is(#packingCases, .section-sage .grid-5) .card-image { aspect-ratio: 4 / 3; }
.panda-v2 :is(.card-image, .photo-frame, .news-photo) img {
  filter: saturate(.94) contrast(1.015);
  transition: transform 1.1s var(--panda-ease);
}
.panda-v2 .card:hover .card-image img { transform: scale(1.045); }
.panda-v2 .card-body { padding: 23px; }
.panda-v2 .card-body h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -.015em; margin: 12px 0 8px; }
.panda-v2 .product-card .card-body { padding: 20px 19px 23px; }
.panda-v2 .product-card .card-body h3 { font-size: 20px; margin-top: 0; }
.panda-v2 .card-body p { font-size: 14px; line-height: 1.75; }
.panda-v2 .tag { padding: 6px 9px; border-color: #b58a448c; font-size: 10px; letter-spacing: .1em; }
.panda-v2 .photo-frame { position: relative; min-height: 440px; border: 1px solid #08281d14; box-shadow: var(--shadow); }
.panda-v2 .split { gap: clamp(40px, 7vw, 100px); }

/* Image reveals run once. The photograph is never replaced by a generated fill. */
.panda-v2 .v2-image-window { overflow: hidden; }
.panda-v2 .v2-image-window.v2-image-awaiting img { clip-path: inset(0 0 100% 0); }
.panda-v2 .v2-image-window img { transition: clip-path 1.05s var(--panda-ease), transform 1.2s var(--panda-ease); }
.panda-v2 .v2-image-window.v2-detail-visible img { clip-path: inset(0 0 0 0); }
.panda-v2 .v2-card-light::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(330px circle at var(--panda-spot-x, 50%) var(--panda-spot-y, 0%), #b58a4417, transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
}
.panda-v2 .v2-card-light.v2-card-active::after { opacity: 1; }
.panda-v2 .v2-card-light.v2-card-active,
.panda-v2 .card.reveal.is-visible.v2-card-active {
  transform: perspective(1000px) translateY(-5px) rotateX(var(--panda-rx, 0deg)) rotateY(var(--panda-ry, 0deg));
}
.panda-v2 .reveal { transform: translateY(16px); }
.panda-v2 .reveal.is-visible { transform: translateY(0); }
.panda-v2 .grid > .reveal { transition-delay: var(--panda-delay, 0ms); }

/* Controls share one scale, with visible focus and restrained hover feedback. */
.panda-v2 .btn {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.panda-v2 .btn:hover { box-shadow: 0 7px 19px #08281d1f; }
.panda-v2 .btn-gold { background: #08281d1f; border-color: var(--gold); }
.panda-v2 .btn-gold:hover { background: var(--gold); }
.panda-v2 .tabs { gap: 12px; margin-bottom: 52px; }
.panda-v2 .filter-tab { min-height: 54px; padding: 14px 26px; border-radius: 4px; font-size: 14px; letter-spacing: .07em; transition: color .3s, background .3s, border-color .3s; }
.panda-v2 .filter-tab.active { border-color: var(--gold); background: var(--forest); color: var(--ivory); }
.panda-v2 .field label { font-size: 13px; }
.panda-v2 .field :is(input, select, textarea) { min-height: 54px; border-radius: 4px; padding: 13px 15px; font-size: 16px; transition: background .25s, border-color .25s, box-shadow .25s; }
.panda-v2 .field :is(input, select, textarea):focus { background: #faf7f016; border-color: var(--gold); box-shadow: 0 0 0 3px #b58a441a; }
.panda-v2 .inquiry-form { max-width: 1020px; gap: 23px 26px; }
.panda-v2 .case-cta { padding: 42px; border: 1px solid #b58a445c; }
.panda-v2 .case-cta h2 { font-size: clamp(27px, 3vw, 36px); letter-spacing: -.025em; }
.panda-v2 .news-list { gap: 30px; }
.panda-v2 .news-card { grid-template-columns: minmax(290px, .45fr) 1fr; }
.panda-v2 .news-photo { min-height: 285px; }
.panda-v2 .news-copy { padding: 34px 38px; }
.panda-v2 .news-copy h2 { font-size: clamp(24px, 2.5vw, 31px); letter-spacing: -.03em; line-height: 1.3; }
.panda-v2 .news-copy > p { font-size: 16px; line-height: 1.8; }
.panda-v2 .news-meta { font-size: 11px; line-height: 1.55; }
.panda-v2 .news-copy details summary { min-height: 42px; align-items: center; border-bottom: 1px solid var(--gold); font-size: 13px; }
.panda-v2 .article-detail { font-size: 16px; line-height: 1.85; }
.panda-v2 .region-card { padding: 28px; }
.panda-v2 .country-chip { font-size: 13px; }
.panda-v2 .map-panel { border-radius: 12px; box-shadow: var(--shadow); }
.panda-v2 .site-footer { padding: 70px 0 30px; border-top: 1px solid #b58a4447; }
.panda-v2 .footer-brand { font-size: 28px; letter-spacing: .13em; }
.panda-v2 .footer-grid { gap: 60px; }
.panda-v2 .footer-grid h3 { font-size: 16px; }
.panda-v2 .footer-grid :is(p, a) { font-size: 14px; }
.panda-v2 .footer-bottom { font-size: 12px; padding-top: 26px; }
.panda-v2 .wa-float { z-index: 100; }

/* Progress line and keyboard-accessible return control sit below the splash. */
.panda-v2 .v2-reading-progress { position: fixed; z-index: 110; top: 0; left: 0; width: 100%; height: 2px; pointer-events: none; background: transparent; }
.panda-v2 .v2-reading-progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--panda-scroll-progress, 0)); transform-origin: left; }
.panda-v2 .v2-back-top {
  position: fixed;
  z-index: 99;
  right: 23px;
  bottom: 92px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #b58a4473;
  border-radius: 50%;
  background: #faf7f0f2;
  color: var(--forest);
  box-shadow: 0 6px 18px #08281d13;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s, visibility .3s, transform .3s, background .3s;
  cursor: pointer;
}
.panda-v2 .v2-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.panda-v2 .v2-back-top:hover { background: var(--sage); transform: translateY(-2px); }
.panda-v2 .v2-back-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

@media (max-width: 1180px) {
  .panda-v2 .site-nav { gap: 17px; }
  .panda-v2 .nav-shell { gap: 16px; width: calc(100% - 40px); }
  .panda-v2 .site-nav a { font-size: 14px; }
  .panda-v2 .translate-label { display: none; }
}
@media (max-width: 1080px) {
  :root { --header-height: 84px; }
  .panda-v2 .site-header { background: rgba(8, 40, 29, .96); }
  .panda-v2 .nav-shell { min-height: var(--panda-header-height); }
  .panda-v2 .site-nav { top: var(--panda-header-height); max-height: calc(100svh - var(--panda-header-height)); }
  .panda-v2 .site-nav a { min-height: 58px; padding: 17px 7px; font-size: 18px; }
  .panda-v2 .menu-toggle { width: 48px; height: 48px; border-color: #faf7f05c; border-radius: 4px; }
  .panda-v2 .container, .panda-v2 .hero-copy { width: calc(100% - 48px); }
  .panda-v2 .hero h1 { font-size: clamp(88px, 12vw, 130px); }
  .panda-v2 .grid { gap: 20px; }
  .panda-v2 .card-body { padding: 20px; }
  .panda-v2 .grid-5 .card-body h3 { font-size: 20px; }
}
@media (max-width: 700px) {
  :root { --header-height: 82px; }
  .panda-v2 { font-size: 16px; }
  .panda-v2 .container, .panda-v2 .hero-copy { width: calc(100% - 36px); }
  .panda-v2 .nav-shell { width: calc(100% - 28px); gap: 10px; }
  .panda-v2 .brand-text strong { font-size: 19px; }
  .panda-v2 .brand-text small { font-size: 6px; }
  .panda-v2 .language-select { font-size: 11px; width: 122px; max-width: 122px; }
  .panda-v2 .section { padding: 64px 0; }
  .panda-v2 .section-heading { margin-bottom: 30px; }
  .panda-v2 :is(.section-heading h2, .copy h2) { font-size: clamp(33px, 8.8vw, 46px); line-height: 1.18; }
  .panda-v2 :is(.section-heading > p:last-child, .copy p) { font-size: 16px; line-height: 1.8; }
  .panda-v2 :is(.section-kicker, .eyebrow) { font-size: 10px; gap: 10px; margin-bottom: 15px; letter-spacing: .12em; }
  .panda-v2 :is(.section-kicker, .eyebrow)::before { width: 22px; flex-basis: 22px; }
  .panda-v2 .hero { display: flex; min-height: min(780px, 92svh); padding: 125px 0 100px; }
  .panda-v2 .hero-copy { margin: 0 auto; }
  .panda-v2 .hero h1 { font-size: clamp(68px, 18vw, 106px); }
  .panda-v2 .hero-copy > p { max-width: 29ch; font-size: clamp(21px, 5.2vw, 25px); }
  .panda-v2 .hero-controls { margin-top: 27px; }
  .panda-v2 .v2-scroll-cue { right: 20px; bottom: 28px; font-size: 9px; }
  .panda-v2 .page-hero { min-height: 365px; padding: 145px 0 50px; }
  .panda-v2 .page-hero h1 { font-size: clamp(44px, 12vw, 67px); }
  .panda-v2 .page-hero p { font-size: 16px; }
  .panda-v2 :is(.hero-image, .page-hero-image) { inset: 0; transform: none; }
  .panda-v2 .grid { gap: 15px; }
  .panda-v2 .split { gap: 32px; }
  .panda-v2 .photo-frame { min-height: 0; aspect-ratio: 4 / 3; }
  .panda-v2 .card-body { padding: 18px; }
  .panda-v2 .card-body h3 { font-size: 21px; }
  .panda-v2 .grid-5 .card-body h3 { font-size: 18px; }
  .panda-v2 .card-body p { font-size: 13px; }
  .panda-v2 .product-card .card-body { padding: 15px 13px 17px; }
  .panda-v2 .product-card .card-body h3 { font-size: 18px; }
  .panda-v2 .btn { min-height: 53px; padding-inline: 22px; }
  .panda-v2 .tabs { margin-bottom: 36px; }
  .panda-v2 .filter-tab { min-height: 51px; font-size: 13px; }
  .panda-v2 .news-card { grid-template-columns: minmax(0, 1fr); }
  .panda-v2 .news-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .panda-v2 .news-copy { padding: 25px 22px; }
  .panda-v2 .news-copy h2 { font-size: 26px; }
  .panda-v2 .news-copy > p { font-size: 15px; }
  .panda-v2 .news-meta { gap: 10px; flex-wrap: wrap; font-size: 10px; }
  .panda-v2 .region-card { padding: 23px; }
  .panda-v2 .case-cta { padding: 26px; }
  .panda-v2 .footer-grid { gap: 30px; }
  .panda-v2 .site-footer { padding-top: 54px; }
  .panda-v2 .v2-back-top { right: 16px; bottom: 80px; width: 42px; height: 42px; }
}
@media (max-width: 390px) {
  .panda-v2 .brand-text small { display: none; }
  .panda-v2 .language-select { width: 102px; max-width: 102px; }
  .panda-v2 .nav-actions { gap: 6px; }
  .panda-v2 .menu-toggle { width: 42px; height: 44px; }
  .panda-v2 .hero h1 { font-size: 68px; }
  .panda-v2 .card-body { padding: 15px; }
  .panda-v2 .product-card .card-body h3 { font-size: 17px; }
  .panda-v2 .news-copy h2 { font-size: 24px; }
}
/* Keep the logo, language menu and touch control inside a 320px viewport. */
@media (max-width: 360px) {
  .panda-v2 .nav-shell { gap: 6px; }
  .panda-v2 .brand { gap: 6px; }
  .panda-v2 .brand-text strong { font-size: 17px; }
  .panda-v2 .language-select { width: 88px; max-width: 88px; }
  .panda-v2 .menu-toggle { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .panda-v2 .v2-image-window img,
  .panda-v2 .v2-image-window.v2-image-awaiting img,
  .panda-v2 .v2-image-window.v2-detail-visible img { clip-path: none; transform: none; }
  .panda-v2 :is(.hero-image, .page-hero-image) { transform: none; }
  .panda-v2 .v2-heading-rule { transform: none; }
  .panda-v2 :is(.card, .news-card, .v2-card-light.v2-card-active):hover,
  .panda-v2 .card.reveal.is-visible:hover,
  .panda-v2 .card.reveal.is-visible.v2-card-active,
  .panda-v2 .news-card.reveal.is-visible:hover { transform: none; }
  .panda-v2 .v2-scroll-cue:hover svg { transform: none; }
}