@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

:root {
  --navy: #14283a;
  --ink: #26323d;
  --muted: #667380;
  --green: #1c7c68;
  --green-2: #2a9a82;
  --bg: #f4f5f6;
  --strip: #f1f5f7;
  --line: #d9dee3;
  --sans: 'Montserrat', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
  --hdr: 70px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--hdr); background: rgba(244,244,245,.97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(20,40,58,.06); }
.site-header .inner { height: 100%; width: min(1500px, 100% - 120px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 48px; height: 48px; }
.brand .esg { font-size: 34px; font-weight: 600; letter-spacing: .02em; color: #1b3a4e; line-height: 1; }
.brand .co { font-size: 14.5px; color: #3b4a58; white-space: nowrap; font-weight: 400; margin-left: 2px; }
.nav { margin-left: 60px; }
.nav ul { display: flex; gap: 36px; }
.nav a { position: relative; display: block; height: var(--hdr); line-height: var(--hdr); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; color: #1d2b38; padding: 0 2px; }
.nav a::after { content: ''; position: absolute; left: -8px; right: -8px; bottom: -1px; height: 2px; background: var(--green); transform: scaleX(0); transition: transform .3s; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.tools { display: flex; align-items: center; justify-content: flex-end; gap: 28px; }
.icon-btn, .lang { background: none; border: 0; cursor: pointer; color: #1d2b38; }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 1.6; }
.lang { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 400; }
.lang svg { width: 10px; height: 7px; stroke-width: 1.5; }
.menu-btn { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; color: var(--navy); }
.menu-btn span { display: block; width: 22px; height: 1.6px; background: currentColor; margin: 5px auto; transition: .3s; }

/* ---------- hero ---------- */
.hero { position: relative; height: clamp(420px, 27.4vw, 560px); overflow: hidden; background: #c9dbe8; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: url('../img/hero.jpg') center / cover no-repeat; transition: transform 6s ease-out; transform: scale(1.02); }
.hero.s1 .hero-bg { background-position: 40% center; }
.hero.s2 .hero-bg { background-position: 80% center; }
.hero-copy { position: absolute; left: clamp(40px, 6.6vw, 140px); top: 0; bottom: 0; width: min(720px, 60%); }
.slide { position: absolute; left: 0; top: 50%; translate: 0 -50%; margin-top: -10px; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease, visibility .7s; }
.slide.on { opacity: 1; visibility: visible; transform: none; }
.eyebrow { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: #2a3a4a; font-weight: 400; margin-bottom: 22px; }
.slide h1 { font-size: clamp(34px, 3.35vw, 56px); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; color: #12263a; margin-bottom: 28px; }
.lead { font-size: clamp(14px, 1.05vw, 17.5px); line-height: 1.6; color: #1f3043; border-left: 2px solid var(--green); padding-left: 16px; margin-bottom: 38px; font-weight: 400; }
.btn-outline { display: inline-flex; align-items: center; gap: 22px; padding: 13px 20px; border: 1px solid #2a3b4b; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #1d2b38; background: rgba(255,255,255,.18); transition: background .3s, color .3s; }
.btn-outline svg { width: 17px; height: 11px; stroke-width: 1.3; transition: transform .3s; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline:hover svg { transform: translateX(4px); }
.hero-tag { position: absolute; right: clamp(30px, 4.4vw, 80px); top: clamp(36px, 3vw, 52px); font-size: 12px; letter-spacing: .24em; line-height: 1.65; text-transform: uppercase; color: rgba(255,255,255,.85); border-left: 1px solid rgba(255,255,255,.7); padding-left: 16px; text-shadow: 0 1px 8px rgba(10,30,40,.35); }
.pager { position: absolute; right: clamp(30px, 3.4vw, 60px); bottom: 20px; display: flex; align-items: center; gap: 22px; color: #fff; text-shadow: 0 1px 8px rgba(10,30,40,.45); }
.count { position: relative; display: flex; align-items: baseline; gap: 10px; font-size: 13px; letter-spacing: .1em; padding-top: 10px; }
.count .bar { position: absolute; left: 0; top: 0; width: 56px; height: 1px; background: rgba(255,255,255,.4); }
.count .bar i { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #fff; }
.hero.run .count .bar i { animation: prog 6s linear forwards; }
@keyframes prog { to { width: 100%; } }
.count .sep, .count span:last-child { opacity: .7; }
.arr { background: none; border: 0; width: 34px; height: 24px; color: #fff; cursor: pointer; display: grid; place-items: center; transition: transform .25s; }
.arr svg { width: 22px; height: 12px; stroke-width: 1.4; }
#prev:hover { transform: translateX(-3px); }
#next:hover { transform: translateX(3px); }

/* ---------- value strip ---------- */
.values { background: var(--strip); }
.values-in { width: min(1500px, 100% - 120px); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 120px; align-items: center; }
.val { display: flex; align-items: center; gap: 20px; padding: 24px 28px; position: relative; }
.val:first-child { padding-left: 0; }
.val + .val::before { content: ''; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: #d3d9de; }
.ring { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1.2px solid var(--green); display: grid; place-items: center; color: var(--green); }
.ring svg { width: 28px; height: 28px; stroke-width: 1.3; }
.val h3 { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: #1d2b38; margin-bottom: 6px; }
.val p { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* ---------- materials ---------- */
.materials { display: grid; grid-template-columns: 50.5% 1fr; min-height: 292px; background: #f6f8fa; }
.mat-intro { position: relative; background: #0a151f; color: #fff; display: flex; align-items: center; isolation: isolate; overflow: hidden; }
.mat-intro::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 62%; z-index: -1; background: url('../img/panel.jpg') right center / cover no-repeat; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); }
.mat-intro-txt { padding: 28px 40px 28px clamp(40px, 6.5vw, 110px); max-width: 640px; }
.kicker { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #b7c3cd; margin-bottom: 14px; }
.mat-intro h2 { font-size: clamp(24px, 1.8vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: 0; }
.mat-intro hr { width: 36px; border: 0; height: 1px; background: rgba(255,255,255,.6); margin: 18px 0 16px; }
.desc { font-size: 12.5px; line-height: 1.7; color: #dbe3ea; max-width: 400px; margin-bottom: 22px; font-weight: 300; }
.link-arrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: #fff; }
.link-arrow svg { width: 17px; height: 11px; stroke-width: 1.3; transition: transform .3s; }
.link-arrow:hover svg { transform: translateX(5px); }

.mat-cards { display: grid; grid-template-columns: repeat(4, 1fr); padding: 26px 24px 26px 28px; gap: 0; }
.card { position: relative; display: flex; flex-direction: column; padding: 0 20px 0 0; margin-right: 20px; border-right: 1px solid #dde3e8; min-width: 0; }
.card:last-child { border-right: 0; margin-right: 0; padding-right: 41px; }
.card .pic { overflow: hidden; margin-bottom: 18px; }
.card img { width: 100%; aspect-ratio: 1.48; object-fit: cover; transition: transform .6s ease; }
.card:hover img { transform: scale(1.04); }
.card h3 { font-size: 13.5px; font-weight: 500; color: #1b2a37; padding-left: 8px; margin-bottom: 8px; }
.card p { font-size: 11px; line-height: 1.7; color: #6a7681; padding-left: 8px; }
.card .go { width: 16px; height: 11px; stroke-width: 1.3; margin: auto 0 0 8px; padding-top: 0; color: #1b2a37; transition: transform .3s; }
.card:hover .go { transform: translateX(6px); color: var(--green); }
.card { padding-bottom: 4px; }
.card .go { margin-top: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .brand .co { font-size: 12.5px; }
  .brand .esg { font-size: 30px; }
  .nav ul { gap: 24px; }
  .site-header .inner { width: calc(100% - 64px); }
}
@media (max-width: 1180px) {
  .brand .co { display: none; }
  .site-header .inner { grid-template-columns: auto 1fr auto; gap: 24px; }
  .nav { justify-self: center; }
  .values-in { width: calc(100% - 64px); grid-template-columns: repeat(2, 1fr); padding: 10px 0; }
  .val:nth-child(3) { padding-left: 0; }
  .val:nth-child(3)::before { display: none; }
  .materials { grid-template-columns: 1fr; }
  .mat-intro { min-height: 300px; }
  .mat-cards { padding: 28px 32px; }
}
@media (max-width: 860px) {
  :root { --hdr: 64px; }
  .site-header .inner { width: calc(100% - 40px); grid-template-columns: 1fr auto; }
  .menu-btn { display: block; }
  .tools { gap: 12px; }
  .lang { font-size: 13px; gap: 8px; }
  .lang-menu { right: -4px; }
  .nav { position: fixed; inset: var(--hdr) 0 auto 0; background: #f4f4f5; padding: 8px 24px 24px; border-bottom: 1px solid var(--line); transform: translateY(-130%); transition: transform .35s; z-index: -1; grid-column: 1 / -1; }
  .nav.open { transform: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { height: auto; line-height: 1; padding: 18px 0; border-bottom: 1px solid #e4e7ea; }
  .nav a::after { display: none; }
  .hero { height: 520px; }
  .hero-bg { background-position: 62% center; }
  .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(235,243,249,.82) 0, rgba(235,243,249,.45) 60%, transparent 100%); }
  .hero-copy { left: 24px; right: 24px; width: auto; }
  .hero-tag { display: none; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .lead br { display: none; }
  .pager { right: 20px; bottom: 16px; }
  .values-in { grid-template-columns: 1fr; width: calc(100% - 40px); }
  .val, .val:first-child { padding: 18px 0; }
  .val + .val::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .mat-intro-txt { padding: 40px 24px; }
  .mat-intro::before { width: 100%; opacity: .45; -webkit-mask-image: none; mask-image: none; }
  .mat-cards { grid-template-columns: repeat(2, 1fr); padding: 24px 20px; gap: 28px 0; }
  .card:nth-child(2n) { border-right: 0; margin-right: 0; padding-right: 0; }
  .nav { margin-left: 0; }
}
@media (max-width: 520px) {
  .mat-cards { grid-template-columns: 1fr; }
  .card, .card:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- language switcher ---------- */
.lang-wrap { position: relative; }
.lang { white-space: nowrap; }
.lang svg { transition: transform .25s; }
.lang[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 24px); min-width: 150px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 32px rgba(20,40,58,.14); padding: 6px 0; z-index: 60; }
.lang-menu[hidden] { display: none; }
.lang-menu a { display: block; padding: 11px 20px; font-size: 14px; color: #1d2b38; white-space: nowrap; }
.lang-menu a:hover { background: var(--strip); }
.lang-menu a[aria-current] { color: var(--green); font-weight: 600; }
@media (max-width: 860px) { .lang-menu { top: calc(100% + 18px); } }

/* ---------- Traditional Chinese / Japanese typography ---------- */
:lang(zh-Hant) { --sans: 'Montserrat', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; }
:lang(ja) { --sans: 'Montserrat', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
:is(html:lang(zh-Hant), html:lang(ja)) .nav a { font-size: 13px; letter-spacing: .08em; }
:is(html:lang(zh-Hant), html:lang(ja)) .eyebrow { font-size: 13.5px; letter-spacing: .12em; }
:is(html:lang(zh-Hant), html:lang(ja)) .slide h1 { line-height: 1.3; letter-spacing: 0; }
:is(html:lang(zh-Hant), html:lang(ja)) .lead { font-size: clamp(14.5px, 1.1vw, 18px); line-height: 1.85; }
:is(html:lang(zh-Hant), html:lang(ja)) .btn-outline,
:is(html:lang(zh-Hant), html:lang(ja)) .link-arrow { letter-spacing: .1em; font-size: 13px; }
:is(html:lang(zh-Hant), html:lang(ja)) .hero-tag { font-size: 13px; letter-spacing: .18em; line-height: 1.9; }
:is(html:lang(zh-Hant), html:lang(ja)) .val h3 { font-size: 13px; letter-spacing: .06em; }
:is(html:lang(zh-Hant), html:lang(ja)) .val p { font-size: 13px; line-height: 1.7; }
:is(html:lang(zh-Hant), html:lang(ja)) .kicker { font-size: 13px; letter-spacing: .16em; }
:is(html:lang(zh-Hant), html:lang(ja)) .mat-intro h2 { line-height: 1.4; font-weight: 400; }
:is(html:lang(zh-Hant), html:lang(ja)) .desc { font-size: 13.5px; line-height: 1.95; letter-spacing: .02em; max-width: 440px; font-weight: 400; }
:is(html:lang(zh-Hant), html:lang(ja)) .card h3 { font-size: 14.5px; }
:is(html:lang(zh-Hant), html:lang(ja)) .card p { font-size: 12px; line-height: 1.8; }
html:lang(ja) { line-break: strict; }
html:lang(ja) .val h3 { letter-spacing: .02em; }
/* Japanese company name (first slide) has a 13-character katakana line: size it so that line never wraps and the
   three-line title still fits inside the hero */
html:lang(ja) .slide[data-i="0"] h1 { font-size: clamp(30px, 2.9vw, 50px); line-height: 1.2; }
@media (max-width: 860px) { html:lang(ja) .slide[data-i="0"] h1 { font-size: clamp(18px, 5.9vw, 28px); } }

/* ---------- logo (full "ESG" wordmark, transparent PNG) ---------- */
.brand .logo { width: auto; height: 36px; }
@media (max-width: 1360px) { .brand .logo { height: 34.2px; } }
@media (max-width: 860px) { .brand .logo { height: 34px; } }

/* ---------- desktop: the whole page fits the viewport exactly (no page scrollbar) ---------- */
@media (min-width: 1025px) and (min-height: 600px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; }
  .site-header { flex: none; }
  body > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

  /* hero takes whatever height is left */
  .hero { flex: 1 1 0; height: auto; min-height: 0; }
  .eyebrow { font-size: clamp(11px, 1.6vh, 12.5px); margin-bottom: clamp(8px, 2.2vh, 22px); }
  .slide h1 { font-size: clamp(24px, min(3.35vw, 5vh), 56px); margin-bottom: clamp(12px, 2.6vh, 28px); }
  .lead { font-size: clamp(12.5px, min(1.05vw, 2vh), 17.5px); margin-bottom: clamp(14px, 3.4vh, 38px); }
  .btn-outline { padding: clamp(8px, 1.4vh, 13px) 20px; }
  html:lang(ja) .slide[data-i="0"] h1 { font-size: clamp(22px, min(2.9vw, 4.2vh), 50px); }
  :is(html:lang(zh-Hant), html:lang(ja)) .lead { font-size: clamp(12.5px, min(1.1vw, 2vh), 18px); }
  :is(html:lang(zh-Hant), html:lang(ja)) .eyebrow { font-size: clamp(12px, 1.7vh, 13.5px); }

  /* value strip */
  .values { flex: none; }
  .values-in { min-height: clamp(76px, 12vh, 120px); }
  .val { padding-block: clamp(8px, 2vh, 24px); }
  .ring { width: clamp(40px, 6vh, 54px); height: clamp(40px, 6vh, 54px); }
  .ring svg { width: clamp(20px, 3.2vh, 28px); height: clamp(20px, 3.2vh, 28px); }

  /* materials: height follows the viewport, card photos stretch to fill */
  .materials { flex: 0 0 clamp(210px, 36vh, 360px); min-height: 0; }
  .mat-intro-txt { padding-block: clamp(10px, 2.4vh, 28px); }
  .kicker { font-size: clamp(10.5px, 1.5vh, 12px); margin-bottom: clamp(6px, 1.4vh, 14px); }
  .mat-intro h2 { font-size: clamp(18px, 3.3vh, 30px); }
  .mat-intro hr { margin: clamp(8px, 1.8vh, 18px) 0 clamp(7px, 1.6vh, 16px); }
  .desc { font-size: clamp(11px, 1.55vh, 12.5px); line-height: 1.6; margin-bottom: clamp(8px, 2vh, 22px); max-width: 460px; }
  .mat-cards { padding-block: clamp(10px, 2.4vh, 26px); min-height: 0; }
  .card { min-height: 0; }
  .card .pic { flex: 1 1 0; min-height: 0; margin-bottom: clamp(8px, 1.8vh, 18px); }
  .card img { height: 100%; aspect-ratio: auto; }
  .card .go { margin-top: clamp(8px, 1.8vh, 18px); }
  .card p { font-size: clamp(10px, 1.4vh, 11px); line-height: 1.55; }
  :is(html:lang(zh-Hant), html:lang(ja)) .desc { font-size: clamp(11.5px, 1.6vh, 13.5px); line-height: 1.75; }
  :is(html:lang(zh-Hant), html:lang(ja)) .card p { font-size: clamp(10.5px, 1.5vh, 12px); line-height: 1.6; }
  :is(html:lang(zh-Hant), html:lang(ja)) .val p { font-size: clamp(11px, 1.6vh, 13px); line-height: 1.55; }
}
/* the long katakana value title ("グローバルサプライチェーン") must stay on one line so the value strip keeps its height */
html:lang(ja) .val h3 { font-size: clamp(10.5px, .92vw, 13px); white-space: nowrap; }

/* shortage of height is shared: hero and materials both start from their normal height and shrink in proportion */
@media (min-width: 1025px) and (min-height: 600px) {
  .hero { flex: 1 1 clamp(420px, 27.4vw, 560px); }
  .materials { flex: 0 1 300px; }
}
/* 1025-1180px: keep the single-screen desktop layout instead of the stacked tablet layout */
@media (min-width: 1025px) and (max-width: 1180px) and (min-height: 600px) {
  .values-in { grid-template-columns: repeat(4, 1fr); width: calc(100% - 64px); padding: 0; }
  .val { gap: 12px; padding-inline: 14px; }
  .val:first-child { padding-left: 0; }
  .val:nth-child(3) { padding-left: 14px; }
  .val:nth-child(3)::before { display: block; }
  .val p br { display: none; }
  .materials { grid-template-columns: 50.5% 1fr; }
  .mat-intro { min-height: 0; }
  .mat-cards { padding: clamp(10px, 2.4vh, 26px) 18px clamp(10px, 2.4vh, 26px) 20px; }
  .card { padding-right: 12px; margin-right: 12px; }
  .card:last-child { padding-right: 12px; }
}

/* short desktop screens: drop secondary copy so the shrunken bands still fit */
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 780px) {
  .card .go { display: none; }
  .card h3 { font-size: 12.5px; margin-bottom: 4px; }
  .mat-intro h2 { font-size: clamp(16px, 2.9vh, 24px); }
  .mat-intro hr { margin: 8px 0; }
  .desc { margin-bottom: 8px; }
  html:lang(ja) .slide[data-i="0"] h1 { font-size: clamp(20px, min(2.9vw, 3.9vh), 50px); }
}
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 700px) {
  .desc, .card p { display: none; }
  .mat-intro h2 { margin-bottom: 4px; }
}
@media (min-width: 1025px) and (min-height: 600px) { .materials { flex-basis: clamp(300px, 24vh, 400px); } }
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 660px) {
  html:lang(ja) .slide[data-i="0"] h1 { font-size: clamp(18px, min(2.9vw, 3.4vh), 50px); }
}

/* ---------- mobile menu: full width, translucent frosted glass, unfolds under the header ---------- */
@media (max-width: 860px) {
  /* the header must not have its own backdrop-filter, otherwise the menu could only blur the header's contents */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(244,244,245,.97); }
  .nav { justify-self: stretch; width: auto; left: 0; right: 0; background: rgba(244,245,246,.6); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(20,40,58,.08); transform: none; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .35s ease, visibility 0s linear .35s; }
  .nav.open { clip-path: inset(0); visibility: visible; transition: clip-path .35s ease, visibility 0s; }
  .nav a { border-bottom-color: rgba(20,40,58,.07); }
}

/* desktop header: the menu is centred in the free space between the company name and the search button,
   so the gap on its left always equals the gap on its right, in every language */
@media (min-width: 861px) {
  .site-header .inner { grid-template-columns: auto 1fr auto; column-gap: 24px; }
  .nav { margin-left: 0; justify-self: center; }
}
@media (min-width: 861px) and (max-width: 960px) { .nav ul { gap: 14px; } .tools { gap: 16px; } }
@media (min-width: 861px) and (max-width: 940px) {
  .nav ul { gap: 10px; }
  .nav a { font-size: 11px; letter-spacing: .03em; }
  .tools { gap: 12px; }
  .site-header .inner { width: calc(100% - 40px); column-gap: 14px; }
  .lang { font-size: 13px; gap: 8px; }
}
@media (min-width: 861px) and (max-width: 879px) {
  .nav ul { gap: 5px; }
  .nav a { font-size: 10.5px; letter-spacing: .02em; padding: 0; }
  .tools { gap: 8px; }
  .brand .logo { height: 28.8px; }
}

/* ---------- hero: only the text changes between slides; the button stays put ---------- */
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding-bottom: 20px; }
.slides { display: grid; }
.slide { position: relative; top: auto; left: auto; translate: none; margin-top: 0; grid-area: 1 / 1; align-self: end; }
.hero-cta { align-self: flex-start; }

/* slide text: the new text slides up and fades in (0.7s) as before; the old text fades out in place (it does not
   sink). Its resting offset only snaps back after the fade has finished, while it is invisible. */
.slide { transform: translateY(14px); transition: opacity .7s ease, transform 0s linear .7s, visibility .7s; }
.slide.on { transform: none; transition: opacity .7s ease, transform 1s ease, visibility .7s; }

/* company name next to the logo: +3px so it is noticed at first glance */
.brand .co { font-size: 17.5px; }
@media (max-width: 1360px) { .brand .co { font-size: 15.5px; } }

/* company name next to the logo: another +3px */
.brand .co { font-size: 20.5px; }
@media (max-width: 1360px) { .brand .co { font-size: 18.5px; } }

/* English and Japanese names are long: keep them at the previous size (Traditional Chinese stays larger) */
html:lang(en) .brand .co, html:lang(ja) .brand .co { font-size: 17.5px; }
@media (max-width: 1360px) { html:lang(en) .brand .co, html:lang(ja) .brand .co { font-size: 15.5px; } }

/* company name next to the logo: another +4px (all three languages) */
.brand .co { font-size: 24.5px; }
@media (max-width: 1360px) { .brand .co { font-size: 22.5px; } }
html:lang(en) .brand .co, html:lang(ja) .brand .co { font-size: 21.5px; }
@media (max-width: 1360px) { html:lang(en) .brand .co, html:lang(ja) .brand .co { font-size: 19.5px; } }

/* ---------- version label ---------- */
.site-version { position: fixed; right: 12px; bottom: 3px; padding: 0; z-index: 5; font-size: 10px; letter-spacing: .08em; color: #8a96a2; pointer-events: none; text-shadow: 0 0 6px rgba(246,248,250,.9); }

/* =====================================================================
   Inner pages (products / technology & sustainability / about / contact)
   They reuse the home page skeleton: hero, 4-item strip, dark band + right side.
   ===================================================================== */
body.page-products .hero-bg { background-position: 38% center; }
body.page-technology .hero-bg { background-position: 72% center; }
body.page-about .hero-bg { background-position: 55% center; }
body.page-contact .hero-bg { background-position: 18% center; }

/* strip with figures: the figure is the title */
.val.stat h3 { font-size: 20px; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--green); margin-bottom: 4px; white-space: nowrap; }

/* cards without a photo: icon on a soft panel (applications, process steps) */
.card .pic.icon-pic { position: relative; display: grid; place-items: center; aspect-ratio: 1.48; background: linear-gradient(135deg, #e6f0ee, #f1f5f8); }
.card:hover img { transform: none; }
.ring.big { width: 64px; height: 64px; background: rgba(255,255,255,.75); }
.ring.big svg { width: 34px; height: 34px; }
.card .step { position: absolute; left: 12px; top: 9px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--green); }
div.card .go { display: none; }

/* about: vision quote instead of cards */
.mat-quote { display: flex; flex-direction: column; justify-content: center; padding: 28px clamp(28px, 5vw, 80px); background: #f6f8fa; min-width: 0; }
.q-label { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); margin-bottom: 16px; font-weight: 500; }
.mat-quote blockquote { max-width: 640px; font-size: clamp(18px, 1.7vw, 26px); font-weight: 300; line-height: 1.5; color: var(--navy); border-left: 2px solid var(--green); padding-left: 20px; }
.q-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; }
.q-points li { position: relative; padding-left: 16px; font-size: 13px; color: #3b4a58; }
.q-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* contact: message form on the right of the dark band */
.mat-form { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 26px clamp(28px, 5vw, 80px); background: #f6f8fa; min-width: 0; }
.mat-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; }
.field span { display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.field input, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #cdd5dc; background: #fff; font: inherit; font-size: 14px; color: var(--ink); border-radius: 0; outline: none; transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(28,124,104,.12); }
.field textarea { resize: none; height: 84px; display: block; }
.f-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-outline.solid { background: var(--navy); color: #fff; border-color: var(--navy); cursor: pointer; font-family: inherit; }
.btn-outline.solid:hover { background: var(--green); border-color: var(--green); }
.f-note { font-size: 12px; color: var(--muted); }

/* CJK tweaks for the new pieces */
:is(html:lang(zh-Hant), html:lang(ja)) .mat-quote blockquote { font-weight: 400; line-height: 1.7; }
:is(html:lang(zh-Hant), html:lang(ja)) .q-label, :is(html:lang(zh-Hant), html:lang(ja)) .field span { letter-spacing: .1em; }
:is(html:lang(zh-Hant), html:lang(ja)) .q-points li { font-size: 13.5px; }
:is(html:lang(zh-Hant), html:lang(ja)) .card .step { letter-spacing: .1em; }
html .val.stat h3 { font-size: 20px; letter-spacing: .01em; white-space: nowrap; }
html:lang(ja) .val.stat h3 { font-size: 20px; }

/* mobile / tablet */
@media (max-width: 1180px) { .mat-quote, .mat-form { padding: 28px 32px; } }
@media (max-width: 860px) {
  .mat-quote { padding: 32px 24px; }
  .mat-form { padding: 28px 24px 32px; }
  .mat-form .f-row { grid-template-columns: 1fr; }
  .val.stat h3, html .val.stat h3 { font-size: 18px; }
}

/* desktop: keep the single-screen layout */
@media (min-width: 1025px) and (min-height: 600px) {
  .ring.big { width: clamp(38px, 7.4vh, 64px); height: clamp(38px, 7.4vh, 64px); }
  .ring.big svg { width: clamp(20px, 3.9vh, 34px); height: clamp(20px, 3.9vh, 34px); }
  .card .pic.icon-pic { aspect-ratio: auto; }
  .card .step { top: clamp(5px, 1.2vh, 10px); font-size: clamp(10px, 1.5vh, 12px); }
  .val.stat h3, html .val.stat h3 { font-size: clamp(15px, 2.5vh, 20px); margin-bottom: 2px; }
  .mat-quote { padding-block: clamp(10px, 2.4vh, 28px); }
  .mat-quote blockquote { font-size: clamp(15px, min(1.7vw, 3.3vh), 26px); }
  .q-points { margin-top: clamp(10px, 2.4vh, 24px); }
  .mat-form { padding-block: clamp(10px, 2.4vh, 26px); gap: clamp(7px, 1.6vh, 14px); }
  .field input { padding-block: clamp(6px, 1.2vh, 10px); }
  .field span { margin-bottom: clamp(2px, .6vh, 5px); font-size: clamp(10px, 1.4vh, 11px); }
  .field textarea { height: clamp(40px, 8vh, 90px); padding-block: clamp(6px, 1.2vh, 10px); }
  .btn-outline.solid { padding-block: clamp(8px, 1.4vh, 13px); }
}
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 700px) {
  .q-points { display: none; }
  .f-note { display: none; }
}
/* narrower and shorter desktops: the icon cards drop their captions so the icons keep some height */
@media (min-width: 1025px) and (max-width: 1280px) and (min-height: 600px) and (max-height: 780px) { div.card p { display: none; } }

/* contact form: the visible label is replaced by the placeholder on short desktops (the label stays for screen readers) */
.field input::placeholder, .field textarea::placeholder { color: transparent; }
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 700px) {
  .field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .field input::placeholder, .field textarea::placeholder { color: #8a96a2; }
  .field textarea { height: clamp(34px, 7vh, 48px); }
  .mat-form { gap: 7px; }
  .slide h1 { margin-bottom: 8px; }
  .eyebrow { margin-bottom: 6px; }
  .lead { margin-bottom: 10px; line-height: 1.5; }
}
@media (min-width: 1025px) and (min-height: 600px) {
  :is(html:lang(zh-Hant), html:lang(ja)) .desc { max-width: 500px; }
}

/* the dark band's texts can run over the photo on its right edge: a soft shadow keeps them readable */
.mat-intro-txt h2, .mat-intro-txt .desc, .mat-intro-txt .kicker, .mat-intro-txt .link-arrow { text-shadow: 0 1px 10px rgba(8, 18, 28, .85); }

/* =====================================================================
   v1.7 design (from the page mock-ups): light page, hero photo per page,
   white cards with thin borders, line-icon rings, kicker with a green bar.
   The earlier dark band (.materials / .mat-*) is no longer used.
   ===================================================================== */
body { background: linear-gradient(180deg, #f4f8fa 0%, #ecf2f6 100%); }
body.page-products .hero-bg { background-image: url('../img/m/hero-products.jpg'); background-position: right center; }
body.page-about .hero-bg { background-image: url('../img/m/hero-tech.jpg'); background-position: 80% center; }
body.page-contact .hero-bg { background-position: 20% center; }

.kick::before { content: ''; display: inline-block; width: 3px; height: 1.05em; background: var(--green); margin-right: 10px; vertical-align: -.15em; flex: none; }

/* shared pieces */
.pg { padding: clamp(10px, 2vh, 22px) clamp(22px, 3.6vw, 72px); display: grid; gap: clamp(10px, 1.8vh, 18px); min-height: 0; min-width: 0; }
.kick { display: flex; align-items: center; margin-bottom: 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.blk-head h2 { font-size: clamp(18px, 3.1vh, 28px); font-weight: 500; line-height: 1.25; color: var(--navy); margin-bottom: 8px; }
.pg .desc, .app .desc { font-size: clamp(11.5px, 1.55vh, 13px); line-height: 1.65; color: #4a5866; font-weight: 400; max-width: 46ch; margin: 0; }
.more { display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--navy); }
.more svg { width: 16px; height: 10px; stroke-width: 1.3; transition: transform .3s; }
.more:hover svg { transform: translateX(5px); }
.pg .ring { width: clamp(34px, 5.2vh, 46px); height: clamp(34px, 5.2vh, 46px); background: rgba(255,255,255,.8); }
.pg .ring svg { width: clamp(18px, 2.8vh, 25px); height: clamp(18px, 2.8vh, 25px); }

.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); min-height: 0; }
.pcard { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border: 1px solid #dfe7ed; transition: box-shadow .3s, transform .3s; }
a.pcard:hover { box-shadow: 0 10px 24px rgba(20,40,58,.1); transform: translateY(-2px); }
.pcard .ph { position: relative; flex: 1 1 0; min-height: 40px; }
.pcard .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard .tx { flex: none; padding: clamp(6px, 1.2vh, 11px) 14px clamp(4px, .8vh, 8px); }
.pcard h3 { font-size: clamp(12.5px, 1.75vh, 14px); font-weight: 600; color: #1b2a37; line-height: 1.35; }
.pcard p { margin-top: 3px; font-size: clamp(10.5px, 1.4vh, 11.5px); line-height: 1.5; color: #6a7681; }
.pcard .go { flex: none; width: 16px; height: 10px; margin: 0 14px clamp(6px, 1.2vh, 12px); stroke-width: 1.3; color: var(--navy); transition: transform .3s; }
a.pcard:hover .go { transform: translateX(6px); color: var(--green); }
.pcard .badge { position: absolute; left: 12px; bottom: -17px; width: 36px; height: 36px; z-index: 2; box-shadow: 0 2px 8px rgba(20,40,58,.12); }
.pcard.step .tx { padding-top: clamp(14px, 2.6vh, 24px); }
.pcard.step h3 b { margin-right: 8px; font-size: 12px; letter-spacing: .1em; color: var(--green); font-weight: 600; }

.ilist { display: flex; flex-direction: column; min-height: 0; }
.ilist li { display: flex; align-items: center; gap: 14px; padding: clamp(5px, 1.1vh, 10px) 0; border-bottom: 1px solid #e8eef2; }
.ilist li:last-child { border-bottom: 0; }
.ilist .ring { flex: none; }
.ilist h3 { font-size: clamp(12.5px, 1.8vh, 14px); font-weight: 600; color: #1b2a37; line-height: 1.3; }
.ilist p { font-size: clamp(10.5px, 1.4vh, 11.5px); line-height: 1.45; color: #6a7681; margin-top: 2px; }

/* ---------- home & contact: text + cards / form band ---------- */
.pg-band { grid-template-columns: minmax(0, .85fr) minmax(0, 3fr); gap: clamp(18px, 3vw, 48px); align-items: stretch; }
.pg-band .blk-head { align-self: center; }
.pg-contact { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.ct-map { position: relative; min-width: 0; min-height: 0; background: #e8eef3; border: 1px solid #dfe7ed; }
.ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.panel-form { display: flex; flex-direction: column; justify-content: center; gap: clamp(7px, 1.5vh, 14px); padding: clamp(10px, 2.4vh, 24px) clamp(18px, 3vw, 40px); background: #fff; border: 1px solid #dfe7ed; min-width: 0; min-height: 0; }
.panel-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel-form .f-grow { flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; }
.panel-form .f-grow textarea { flex: 1 1 0; min-height: 0; height: auto; }
.f-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: #5b6b78; cursor: pointer; }
.f-consent input { flex: none; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--green); cursor: pointer; }
.f-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.panel-form .f-note { display: block; }
.panel-form .btn-outline.solid:disabled { opacity: .6; cursor: default; }
.f-priv { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
/* send button: the right end of the form, 19% lower than at first (10% twice) */
.panel-form .f-actions { flex-direction: row-reverse; justify-content: flex-start; }
@media (min-width: 1025px) and (min-height: 600px) { .panel-form .btn-outline.solid { padding-block: calc(.81 * clamp(8px, 1.4vh, 13px) - 1.98px); } }
/* contact form on desktop: the placeholders replace the labels (the labels stay for screen readers) so the message box keeps some height */
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 1000px) {
  .panel-form .field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .panel-form .field input::placeholder, .panel-form .field textarea::placeholder { color: #8a96a2; }
  .panel-form { gap: clamp(6px, 1.2vh, 12px); }
  .panel-form .f-row { gap: 12px; }
  .panel-form .field input { padding-block: clamp(6px, 1.1vh, 10px); }
  .panel-form .f-grow { min-height: 44px; }
}
@media (min-width: 1025px) and (min-height: 600px) and (max-height: 760px) {
  .f-consent { font-size: 11px; line-height: 1.3; gap: 6px; }
  .panel-form { padding-block: 8px; gap: 5px; }
  .panel-form .f-grow { min-height: 34px; }
  .panel-form .field input { padding-block: 5px; font-size: 13px; }
  .panel-form .btn-outline.solid { padding-block: calc(.81 * 7px - 1.98px); }
}

/* ---------- products ---------- */
.pg-products { grid-template-columns: clamp(190px, 17vw, 290px) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.side { display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); min-height: 0; }
.side-t { padding-left: 12px; border-left: 3px solid var(--green); font-size: 15px; font-weight: 600; color: var(--navy); line-height: 1.2; }
.cat { background: #fff; border: 1px solid #dfe7ed; }
.cat a { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: clamp(7px, 1.5vh, 13px) 16px; font-size: 13px; color: #26323d; border-bottom: 1px solid #edf1f4; border-left: 3px solid transparent; }
.cat li:last-child a { border-bottom: 0; }
.cat a.on { background: #eef5f4; border-left-color: var(--green); font-weight: 600; }
.cat a:hover { color: var(--green); }
.cat svg { flex: none; width: 14px; height: 9px; stroke-width: 1.3; }
.side-img { position: relative; flex: 1 1 0; min-height: 50px; overflow: hidden; }
.side-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.side-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,40,40,.78), rgba(8,40,40,.05) 70%); }
.side-img p { position: absolute; left: 16px; right: 12px; bottom: 12px; z-index: 2; color: #fff; font-size: clamp(13px, 1.9vh, 17px); font-weight: 300; line-height: 1.35; }

.pr { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.6vh, 16px); min-width: 0; min-height: 0; }
.pr-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.3fr) auto; gap: clamp(12px, 1.8vw, 26px); align-items: center; }
.feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feat li { text-align: center; padding: 0 10px; border-left: 1px solid #d9e2e8; }
.feat .ring { margin: 0 auto 6px; }
.feat h3 { font-size: clamp(12px, 1.7vh, 13.5px); font-weight: 600; color: var(--navy); }
.feat p { margin-top: 3px; font-size: clamp(10px, 1.35vh, 11px); line-height: 1.45; color: #6a7681; }
.pr-head .more { margin-top: 0; white-space: nowrap; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); background: #fff; border: 1px solid #dfe7ed; min-height: 0; }
.app-img { position: relative; display: flex; align-items: center; overflow: hidden; padding: clamp(10px, 2vh, 20px) 22px; color: #fff; }
.app-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,28,40,.9), rgba(10,28,40,.55)); }
.app-img .blk-head { position: relative; z-index: 2; }
.app-img h2, .app-img .more { color: #fff; }
.app-img .kick { color: #b7c3cd; }
.app-img .desc { color: #dbe3ea; }
.app .ilist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; padding: clamp(6px, 1.4vh, 14px) 22px; align-content: center; }
.app .ilist li:nth-last-child(2) { border-bottom: 0; }

/* ---------- about ---------- */
.pg-about { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(14px, 2.2vw, 36px); align-items: stretch; }
.ab-text { display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2vh, 22px); min-width: 0; }
.icons4 { display: none; }   /* the four short notes are switched off for now (markup kept in src/pages/about.html) */
.icons4 li { border-left: 1px solid #d9e2e8; padding-left: 12px; }
.icons4 li:first-child { border-left: 0; padding-left: 0; }
.icons4 .ring { margin-bottom: 6px; }
.icons4 h3 { font-size: clamp(12px, 1.7vh, 13.5px); font-weight: 600; color: var(--navy); }
.icons4 p { margin-top: 3px; font-size: clamp(10px, 1.35vh, 11px); line-height: 1.45; color: #6a7681; }
.collage { position: relative; min-height: 0; }
.collage .c1, .collage .c2 { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.collage .c1 { left: 0; width: 68%; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.collage .c2 { right: 0; width: 46%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); }
.collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collage .c1::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(8,30,44,0) 30%, rgba(8,30,44,.7)); }
.collage .c1 p { position: absolute; z-index: 2; right: 12%; bottom: 14%; max-width: 55%; color: #fff; font-size: clamp(12px, 1.9vh, 17px); font-weight: 300; line-height: 1.35; text-align: right; }
.vision { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid #d9e2e8; min-width: 0; }
.vision blockquote { font-size: clamp(14px, min(1.45vw, 2.9vh), 22px); font-weight: 300; line-height: 1.55; color: var(--navy); }
.vision .q-points { margin-top: clamp(8px, 2vh, 20px); display: flex; flex-direction: column; gap: 8px; }
.vision .q-points li { position: relative; padding-left: 16px; font-size: 14px; color: #3b4a58; }
.ab-tech { margin-top: clamp(6px, 1.4vh, 14px); padding-top: clamp(6px, 1.3vh, 12px); border-top: 1px solid #d9e2e8; }
.ab-tech h2 { font-size: clamp(15px, 2.1vh, 19px); font-weight: 500; line-height: 1.3; color: var(--navy); margin: 3px 0 4px; }
.ab-tech .desc { font-size: 13.5px; line-height: 1.6; color: #5b6b78; margin: 0 0 8px; }
.vision .q-points li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- technology & sustainability ---------- */
.pg-tech { grid-template-rows: minmax(0, 1fr); }
.tb1 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 3.2fr); gap: clamp(16px, 2.6vw, 40px); min-height: 0; }
.tb1 .blk-head { align-self: center; }
.tb1 { align-self: start; align-items: stretch; margin-top: 0; }
/* PC: the text starts on the same line as the hero text; the chart gives up that width, the text column keeps its width (same height) */
.pg-tech { padding-top: 0; }
.pg-tech .tb1 { overflow: hidden; --m: clamp(40px, 6.6vw, 140px); --bh: clamp(240px, 17vw, 340px); --ch: calc(var(--bh) * .76); margin-left: calc(-1 * clamp(22px, 3.6vw, 72px)); margin-right: calc(-1 * clamp(22px, 3.6vw, 72px)); position: relative; isolation: isolate; align-items: center; padding: 8px 0; grid-template-columns: minmax(0, 1fr) max(502px, calc(1.5 * var(--ch) + 14px)) clamp(220px, 21vw, 400px); gap: clamp(20px, 2.6vw, 48px); padding-right: 0; background: #1d3a4c url('../img/m/tech-lake.webp') 50% 62% / cover no-repeat; }
/* the lake picture is the background of the whole block (text and chart on it); a dark veil on the left keeps the white text readable and leaves the hourglass on the right clear */
.pg-tech .tb1::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 26, 40, .42) 0%, rgba(8, 26, 40, .34) 45%, rgba(8, 26, 40, .28) 72%, rgba(8, 26, 40, 0) 86%); pointer-events: none; }
.pg-tech .tb1 .blk-head { margin-left: var(--m); align-self: center; }
.pg-tech .tb1 .blk-head h2 { color: #fff; text-shadow: 0 1px 12px rgba(5, 20, 32, .45); }
.pg-tech .tb1 .blk-head .desc, .pg-tech .tnote { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(5, 20, 32, .5); }
.pg-tech .tchart-wrap { align-self: center; row-gap: 22px; }
.pg-tech .tchart-wrap .tnote { margin-top: 0; }
/* the hourglass is cut out of its photo and stands on the lake, whole (a little taller than the banner) */
.tglass { position: absolute; z-index: 1; right: clamp(48px, 9vw, 170px); top: 50%; height: calc(var(--bh) * 1.2); max-height: 120%; transform: translateY(-50%); width: auto; opacity: .8; filter: drop-shadow(0 10px 16px rgba(5, 25, 45, .3)); pointer-events: none; -webkit-user-drag: none; }
.pg-tech .tchart { height: var(--ch); width: 100%; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 26px rgba(8, 26, 40, .22); }
/* technology: bar chart of conventional wet-process PU (the figures of the supplied slide) with the note on its right */
.tchart-wrap { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 0; }
.tchart { display: flex; flex-direction: column; box-sizing: border-box; background: #fff; border: 1px solid #dfe7ed; padding: clamp(8px, 1.4vh, 14px) clamp(14px, 1.6vw, 28px); }
.tchart h3 { flex: none; font-size: calc(clamp(13.5px, 1.6vh, 16px) + 3px); font-weight: 700; color: var(--green); letter-spacing: .02em; }
/* on the lake picture the title is a bright light green with a soft shadow (the site green was hard to see) */
.pg-tech .tchart h3 { color: #8cf0cf; text-shadow: 0 1px 8px rgba(5, 20, 32, .55); }
.tchart .tr { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); align-items: center; gap: 14px; flex: 1 1 0; min-height: 0; }
.tchart .lb { font-size: clamp(12.5px, 1.7vh, 15.5px); font-weight: 700; color: #1f3446; }
.tchart .bar { display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; width: var(--w); height: 82%; max-height: 36px; padding: 0 12px; background: linear-gradient(90deg, var(--green-2), var(--green)); transform-origin: left center; animation: tbar .9s cubic-bezier(.12, .8, .22, 1) both; animation-delay: calc(.2s + var(--i) * .12s); }
.tchart .bar b { font-size: clamp(12.5px, 1.7vh, 15.5px); font-weight: 600; color: #fff; white-space: nowrap; }
@keyframes tbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tb1 .blk-head .desc, .tnote { font-size: clamp(12.5px, 1.04vw, 18px); line-height: 1.95; color: #4a5866; }
.tnote { margin-top: 1.95em; }
/* second block: a banner module like the first one (own picture, same height and layout) */
/* the 27-tonne sentence is the heading now: same size as the site's block headings, one blank line above the note */
.pg-tech .tb1 .blk-head .desc { margin-top: 0; font-size: clamp(18px, 3.1vh, 28px); font-weight: 500; line-height: 1.3; }

.tnote .ph, .tb1 .desc .ph { display: inline-block; }
.tnote .ph.nw { white-space: nowrap; }
/* low screens hide the small intro texts of the other pages; here the .desc is the heading, so it stays */
.pg-tech .tb1 .blk-head .desc { display: block; }
/* PC: banner content at 150%: the heading (two lines, 20px bigger), the chart and the note under it are 1.5 times as big, stacked on the left; the hourglass is 1.5 times as big on the right. On narrower screens the factor --k comes down (1.25 below 1300px, 1 below 1150px) so everything still fits. */
@media (min-width: 1025px) {
  .pg-tech .tb1 { --k: 1.5; --sp: calc(var(--bh) * .54 * var(--k) + clamp(48px, 9vw, 170px) + 30px); grid-template-columns: max-content; justify-content: center; align-content: center; justify-items: start; row-gap: clamp(20px, 3.4vh, 36px); padding: 28px var(--sp) 28px var(--m); }
  .pg-tech .tb1 .blk-head { margin-left: 0; align-self: auto; }
  .pg-tech .tb1 .blk-head .desc { white-space: nowrap; font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - var(--sp)) / 29.5)); }
  .pg-tech .tb1 .blk-head .desc .ph { display: inline; }
  html:lang(ja) .pg-tech .tb1 .blk-head .desc { font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - var(--sp)) / 34)); }
  /* English: the sentence is about 52 em long, so it may use two lines within the free width (instead of one line running off the screen); the chart box is wide enough for the longest label */
  html:lang(en) .pg-tech .tb1 .blk-head .desc { white-space: normal; max-width: calc(100vw - var(--m) - var(--sp)); font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - var(--sp)) / 30)); }
  html:lang(en) .pg-tech .tb1 { grid-template-columns: minmax(0, max-content); }
  html:lang(en) .pg-tech .tb1 .tchart { width: 64%; }
  .pg-tech .tchart-wrap { margin-left: 0; align-self: auto; width: 0; min-width: 100%; row-gap: calc(22px * var(--k)); }
  .pg-tech .tchart { height: calc(var(--ch) * var(--k)); padding: calc(clamp(8px, 1.4vh, 14px) * var(--k)) calc(clamp(14px, 1.6vw, 28px) * var(--k)); }
  .pg-tech .tchart h3 { font-size: calc(clamp(13.5px, 1.6vh, 16px) * var(--k) + 3px); }
  .pg-tech .tchart .tr { font-size: calc(clamp(12.5px, 1.7vh, 15.5px) * var(--k)); grid-template-columns: 9em minmax(0, 1fr); gap: calc(14px * var(--k)); }
  .pg-tech .tchart .lb { white-space: nowrap; }
  html:lang(en) .pg-tech .tchart .tr { grid-template-columns: 11.6em minmax(0, 1fr); }
  html:lang(en) .pg-tech .tchart .lb { white-space: normal; line-height: 1.15; }
  .pg-tech .tchart .lb, .pg-tech .tchart .bar b { font-size: 1em; }
  .pg-tech .tchart .bar { max-height: calc(36px * var(--k)); padding: 0 calc(12px * var(--k)); }
  .pg-tech .tchart-wrap .tnote { font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k)); }
  .pg-tech .tb1 .tglass { height: calc(var(--bh) * 1.2 * var(--k)); max-height: none; }
}
/* every block of this page is a module the height of (about) one screen: the hero, the banner and the second banner; the page snaps to them loosely */
@media (min-width: 1025px) and (min-height: 600px) {
  html:has(body.page-technology) { scroll-snap-type: y mandatory; scroll-padding-top: var(--hdr, 70px); }
  .pg-tech .tb1, .pg-tech .tb3, .pg-tech .tb5 { min-height: calc(100vh - var(--hdr, 70px)); }
  .pg-tech .tb4 { min-height: max(calc(100vh - var(--hdr, 70px)), var(--need, 0px)); }
  .page-technology .hero-single, .pg-tech .tb1, .pg-tech .tb3, .pg-tech .tb4, .pg-tech .tb5 { scroll-snap-align: start; }
  html.snap-loose:has(body.page-technology) { scroll-snap-type: y proximity; }  /* main.js: a module is still taller than the window, so no strict snapping */
}
@media (min-width: 1025px) {
  .pg-tech { row-gap: 0; }
  .pg-tech .tb3 { --m: clamp(40px, 6.6vw, 140px); --k: 1.5; --bh: clamp(240px, 17vw, 340px); position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(-1 * clamp(22px, 3.6vw, 72px)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: calc(1.95 * clamp(12.5px, 1.04vw, 18px) * var(--k)); padding: 28px calc(var(--bh) * .54 * var(--k) + clamp(48px, 9vw, 170px) + 30px) 28px var(--m); background: #2b3a46 url('../img/m/tech-mod2.webp') 50% 38% / cover no-repeat; }
  .pg-tech .tb3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 26, 40, .56) 0%, rgba(8, 26, 40, .42) 55%, rgba(8, 26, 40, .2) 100%); pointer-events: none; }
  .pg-tech .tb3 .t-h2 { margin: 0; white-space: nowrap; font-weight: 500; line-height: 1.3; color: #fff; text-shadow: 0 1px 12px rgba(5, 20, 32, .45); font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - (var(--bh) * .54 * var(--k) + clamp(48px, 9vw, 170px) + 30px)) / 29.5)); }
  .pg-tech .tb3 .t-h2 br { display: none; }
  .pg-tech .tb3 .tnote { margin: 0; max-width: none; font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k)); color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(5, 20, 32, .5); }
}
@media (min-width: 1025px) and (max-width: 1300px) { .pg-tech .tb3 { --k: 1.25; } }
@media (min-width: 1025px) and (max-width: 1150px) { .pg-tech .tb3 { --k: 1; } }
/* third module: the waste mountain (stadium picture, the text on top, the four photos of the waste in a dark panel over the stadium) */
@media (min-width: 1025px) {
  .pg-tech .tb4 { --m: clamp(40px, 6.6vw, 140px); --k: 1.25; --bh: clamp(240px, 17vw, 340px); position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(-1 * clamp(22px, 3.6vw, 72px)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; padding: clamp(32px, 7vh, 76px) var(--m) 28px var(--m); background: #1b2a38 url('../img/m/tech-stadium2.webp') 50% 100% / cover no-repeat; }
  .pg-tech .tb4::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 52% 78% at 0% 10%, rgba(8, 26, 40, .56) 0%, rgba(8, 26, 40, .42) 50%, rgba(8, 26, 40, 0) 100%); pointer-events: none; }
  .pg-tech .tb4 .t4-text { display: grid; row-gap: calc(1.95 * clamp(12.5px, 1.04vw, 18px) * var(--k)); max-width: 48%; }
  .pg-tech .tb4 .t-h2 .ph { display: block; }
  /* the photos sit in the sky above the stadium, as wide as the stadium (it starts at about 45% of the picture) */
  /* the panel of the four waste photos goes under the text, inside the text column (it never gets wider than the text) */
  .t4-panel { position: absolute; right: var(--m); top: 62%; width: 41.6%; box-sizing: border-box; }  /* main.js puts it one text line under the estimate */
  .t4-list img { aspect-ratio: 1.3; height: auto; }
  .pg-tech .tb4 .t-h2 { margin: 0; font-weight: 500; line-height: 1.3; color: #fff; text-shadow: 0 1px 12px rgba(5, 20, 32, .5); font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - (var(--bh) * .81 + clamp(48px, 9vw, 170px) + 30px)) / 29.5)); }
  .pg-tech .tb4 .tnote { margin: 0; max-width: 62em; font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k)); color: rgba(255, 255, 255, .96); text-shadow: 0 1px 10px rgba(5, 20, 32, .6); }
}
@media (min-width: 1025px) and (max-width: 1300px) { .pg-tech .tb4 { --k: 1.1; } }
@media (min-width: 1025px) and (max-width: 1150px) { .pg-tech .tb4 { --k: 1; } }
.pg-tech .tb4 .t4-more { display: block; margin-top: .55em; }
/* half the blank line between the three sentences and the estimate (the grid gap is 1.95 lines of the text size) */
@media (min-width: 1025px) { .pg-tech .tb4 .t4-calc { margin-top: calc(-.975 * clamp(12.5px, 1.04vw, 18px) * var(--k)); } }
.pg-tech .tb4 .t4-calc { font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k) * .88); line-height: 1.75; text-shadow: 0 1px 4px rgba(4, 14, 24, .85), 0 0 14px rgba(4, 14, 24, .6); }
/* fourth module: the zero-waste loop; the picture is light, so the text is dark and sits on the empty left half */
@media (min-width: 1025px) {
  .pg-tech .tb5 { --m: clamp(40px, 6.6vw, 140px); --k: 1.1; --bh: clamp(240px, 17vw, 340px); position: relative; overflow: hidden; margin: 0 calc(-1 * clamp(22px, 3.6vw, 72px)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: calc(.5 * clamp(12.5px, 1.04vw, 18px) * var(--k)); padding: clamp(12px, 2.2vh, 28px) var(--m); background: linear-gradient(to bottom, rgba(232, 238, 243, 0) calc(100vh - var(--hdr, 70px) - 150px), #e8eef3 calc(100vh - var(--hdr, 70px))) no-repeat, linear-gradient(to right, #e8eef3 0%, rgba(232, 238, 243, .9) 14%, rgba(232, 238, 243, .65) 32%, rgba(232, 238, 243, .35) 52%, rgba(232, 238, 243, .12) 76%, rgba(232, 238, 243, 0) 100%) right calc(1.4206 * (100vh - var(--hdr, 70px))) top 0 / calc(.3552 * (100vh - var(--hdr, 70px))) calc(100vh - var(--hdr, 70px)) no-repeat, url('../img/m/tech-loop-b.webp') 100% 0 / auto calc(100vh - var(--hdr, 70px)) no-repeat #e8eef3; }
  .pg-tech .tb5 .t-h2 { margin: 0; font-weight: 500; line-height: 1.3; color: var(--navy); font-size: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - var(--m) - (var(--bh) * .81 + clamp(48px, 9vw, 170px) + 30px)) / 29.5)); }
  .pg-tech .tb5 .t5-p { display: block; }
.pg-tech .tb5 .t5-p + .t5-p { margin-top: .35em; }
.pg-tech .tb5 .tnote { margin: 0; line-height: 1.75; max-width: 49%; font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k)); color: #34465a; text-shadow: none; }
}
@media (min-width: 1025px) and (max-width: 1300px) { .pg-tech .tb5 { --k: 1.02; } }
@media (min-width: 1025px) and (max-width: 1150px) { .pg-tech .tb5 { --k: 1; } }
/* fourth module: composition chart (first batch, then the cycle) */
.pg-tech .tb5 .t5-chart { margin-top: calc(.3 * clamp(12.5px, 1.04vw, 18px) * var(--k)); }
.t5-chart { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(12px, 1.4vw, 24px); align-items: start; max-width: 49%; box-sizing: border-box; padding: clamp(8px, 1.2vh, 13px) clamp(12px, 1.2vw, 20px); background: rgba(255, 255, 255, .62); }
.t5-rows { display: grid; row-gap: clamp(2px, .5vh, 5px); position: relative; }
.t5-rows > .t5-row:last-child { margin-top: clamp(6px, 1.1vh, 11px); }
.t5-legend { display: grid; row-gap: 8px; margin: 0; padding: clamp(14px, 2.4vh, 22px) 0 0; list-style: none; font-size: clamp(11px, .9vw, 15px); white-space: nowrap; line-height: 1.3; color: var(--navy); font-weight: 600; }
.t5-legend li { display: flex; gap: 7px; align-items: flex-start; }
.t5-legend .sw { flex: none; width: 1em; height: 1em; margin-top: .1em; }
.t5-legend .sw.tpu { background-color: var(--green-2); }
.t5-legend .sw.eva { background-color: #46699b; }
.t5-legend .sw.rec { background-color: #e9a23b; }
.t5-row { display: grid; row-gap: 3px; }
.t5-rt { margin: 0; font-size: clamp(13px, 1.1vw, 18px); font-weight: 700; color: var(--navy); }
.t5-seg.rec b small { font-size: calc(1em - 5px); font-weight: 700; }   /* the % sign is 5px smaller than the number */
/* leader from a dot in the recycled part, past the end of the bar, to the note */
.t5-seg.rec .t5-fill { position: relative; }
.t5-dot { position: absolute; left: 50%; top: 50%; z-index: 1; box-sizing: border-box; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--navy); border: 2px solid #fff; }
.t5-lead { position: absolute; left: 50%; top: 50%; width: calc(50% + 24px); height: 2.5px; margin-top: -1.25px; background: var(--navy); }
.t5-lead .from { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; white-space: nowrap; font-size: clamp(11px, .95vw, 15px); font-weight: 600; color: var(--navy); }
.t5-bar { display: flex; }
.t5-seg { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.t5-seg b { font-size: calc(clamp(13px, 1.15vw, 19px) + 8px); font-weight: 700; color: var(--navy); line-height: 1.2; }
.t5-fill { align-self: stretch; height: clamp(18px, 3vh, 30px); }
.t5-fill { background-image: linear-gradient(to bottom, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 42%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .22) 100%); box-shadow: 0 4px 7px rgba(14, 34, 52, .32), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(0, 0, 0, .2); }
.t5-seg.tpu .t5-fill { background-color: var(--green-2); }
.t5-seg.eva .t5-fill { background-color: #46699b; }
.t5-seg.rec .t5-fill { background-color: #e9a23b; }
.t5-seg + .t5-seg .t5-fill { box-shadow: 0 4px 7px rgba(14, 34, 52, .32), inset 1px 0 0 rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 3px rgba(0, 0, 0, .2); }
.t5-seg i { margin-top: 4px; font-style: normal; font-weight: 600; font-size: clamp(11px, .9vw, 15px); line-height: 1.2; color: #fff; background: var(--navy); padding: 2px .7em; border-radius: 8px; white-space: nowrap; }
.t5-seg.rec i { padding: 2px .45em; }
.t5-recn { margin: 0; text-align: right; font-size: clamp(10.5px, .85vw, 14px); color: #b9741a; }
.t5-arrow { width: clamp(14px, 1.3vw, 22px); height: auto; justify-self: center; fill: var(--green-2); }
.t5-rt, .t5-seg b { position: relative; z-index: 2; }
.t5-rows:not(.t5-fit) .t5-long { visibility: hidden; }
.t5-arrow.t5-long { transition: none; position: absolute; left: 50%; top: 47%; width: 18px; height: 49px; margin: 0; transform: translateX(-50%); z-index: 1; }  /* main.js centres it between the two bars (proportions of the sample arrow: length = 2.7 x width) */
/* pill-shaped bars */
.t5-seg:first-child .t5-fill { border-radius: 999px 0 0 999px; }
.t5-seg:last-child .t5-fill { border-radius: 0 999px 999px 0; }
.pg-tech .tb5 .t5-ex { margin: calc(.6 * clamp(12.5px, 1.04vw, 18px) * var(--k)) 0 0; max-width: 49%; }
.pg-tech .tb5 .t5-ex .t5-p + .t5-p { margin-top: .35em; }
/* deep shadow behind all the text of this module so it reads on the bright picture */
@media (min-width: 1025px) { .pg-tech .tb4 .t-h2, .pg-tech .tb4 .tnote, .pg-tech .tb4 .t4-calc { text-shadow: 0 1px 3px rgba(2, 10, 18, .95), 0 0 10px rgba(2, 10, 18, .85), 0 0 22px rgba(2, 10, 18, .6); } }
.t4-panel { background: rgba(9, 20, 32, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: clamp(10px, 1.8vh, 20px) clamp(12px, 1.3vw, 24px) clamp(10px, 1.8vh, 20px); }
.t4-title { margin: 0 0 clamp(8px, 1.4vh, 14px); font-size: clamp(14px, 1.2vw, 21px); font-weight: 600; color: #fff; line-height: 1.35; }
.t4-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); }
.t4-list li { display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); min-width: 0; }
.t4-list img { display: block; width: 100%; aspect-ratio: 1.28; object-fit: cover; }
.t4-list span { display: block; text-align: left; font-size: clamp(11.5px, .95vw, 16px); line-height: 1.4; color: #fff; }
/* banner height back to the v1.14.55 height (742px at 1440 wide, 885px at 1920), whatever the content */
@media (min-width: 1025px) and (max-width: 1300px) { .pg-tech .tb1 { --k: 1.25; } }
@media (min-width: 1025px) and (max-width: 1150px) { .pg-tech .tb1 { --k: 1; } }
@media (max-width: 1024px) {
  .tchart-wrap { grid-template-columns: 1fr; gap: 16px; }
  .pg-tech .tb1 { grid-template-columns: 1fr; --m: 0px; margin-left: 0; margin-right: 0; height: auto; padding: 22px 18px; gap: 18px; background-position: 70% center; }
  .pg-tech .tb1::before { background: rgba(8, 26, 40, .58); }
  .tglass { display: none; }
  .pg-tech .tb1 .blk-head { margin-left: 0; }
  .pg-tech .tb1 .blk-head .desc, .pg-tech .tb3 .t-h2 { font-size: 19px; line-height: 1.4; }
  .pg-tech .tb3 { position: relative; isolation: isolate; margin: 0 -24px; padding: 26px 24px; background: #2b3a46 url('../img/m/tech-mod2.webp') 40% center / cover no-repeat; }
  .pg-tech .tb3::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 26, 40, .62); }
  .pg-tech .tb3 .t-h2 { color: #fff; }
  .pg-tech .tb3 .tnote { margin-top: 16px; color: rgba(255, 255, 255, .94); }
  .pg-tech .tb4 { position: relative; isolation: isolate; margin: 0 -24px; padding: 26px 24px; background: #1b2a38 url('../img/m/tech-stadium2.webp') 70% center / cover no-repeat; }
  .pg-tech .tb4::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 26, 40, .5); }
  .pg-tech .tb4 .t-h2 { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 500; color: #fff; }
  .pg-tech .tb5 { position: relative; isolation: isolate; margin: 0 -24px; padding: 26px 24px; background: #e9eff4 url('../img/m/tech-loop-b.webp') 85% center / cover no-repeat; }
  .pg-tech .tb5::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .72); }
  .pg-tech .tb5 .t-h2 { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 500; color: var(--navy); }
  .pg-tech .tb5 .tnote { margin: 14px 0 0; font-size: 14px; line-height: 1.8; color: #34465a; text-shadow: none; }
  .t5-chart, .pg-tech .tb5 .t5-ex { max-width: none; margin-top: 18px; }
  .t5-chart { grid-template-columns: 1fr; }
  .t5-legend { max-width: none; padding-top: 10px; grid-auto-flow: row; }
  .t5-dot { display: none; }
  .t5-lead { position: static; width: auto; height: auto; margin: 0; background: none; }
  .t5-lead .from { left: auto; right: 0; top: 100%; transform: none; margin: 3px 0 0; }
  .t5-row:last-child { padding-bottom: 14px; }
  .pg-tech .tb5 .t5-ex { font-size: 13px; }
  .pg-tech .tb4 .tnote { margin: 14px 0 20px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .96); }
  .t4-panel { position: static; }
  .t4-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .t4-list span { font-size: 13px; }
  .tb1 .blk-head .desc, .tnote { font-size: 14px; line-height: 1.8; }
  .pg-tech .tchart { height: auto; width: auto; background: rgba(255, 255, 255, .2); }
  .tchart { padding: 14px; }
  .tchart .tr { grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; flex: none; margin-top: 12px; }
  .tchart .bar { height: 28px; }
  .tchart .lb, .tchart .bar b { font-size: 13px; }
  .tnote { font-size: 14px; line-height: 1.8; }
}
.tb2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(12px, 1.8vw, 26px); min-height: 0; }
.panel-img { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(12px, 2.4vh, 24px) 26px; overflow: hidden; background: linear-gradient(90deg, rgba(8,34,40,.7), rgba(8,34,40,.15)), url('../img/m/hero-tech.jpg') 82% center / cover; color: #fff; min-height: 0; }
.panel-img .kick { color: #cfe3e0; margin-bottom: 0; }
.panel-img .slogan { font-size: clamp(18px, 3.2vh, 30px); font-weight: 300; line-height: 1.3; }
.figs { display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 1.8vh, 18px) 22px; background: #fff; border: 1px solid #dfe7ed; min-height: 0; }
.figs .kick { margin-bottom: 2px; }
.figs .ilist h3 { color: var(--green); font-size: clamp(14px, 2.2vh, 18px); }

/* CJK */
:is(html:lang(zh-Hant), html:lang(ja)) .pg .desc, :is(html:lang(zh-Hant), html:lang(ja)) .app .desc { line-height: 1.8; max-width: 38em; }
:is(html:lang(zh-Hant), html:lang(ja)) .kick { letter-spacing: .12em; }
:is(html:lang(zh-Hant), html:lang(ja)) .vision blockquote { font-weight: 400; line-height: 1.7; }
:is(html:lang(zh-Hant), html:lang(ja)) .pcard p, :is(html:lang(zh-Hant), html:lang(ja)) .ilist p, :is(html:lang(zh-Hant), html:lang(ja)) .feat p, :is(html:lang(zh-Hant), html:lang(ja)) .icons4 p { font-size: clamp(11px, 1.5vh, 12px); line-height: 1.6; }

/* ---------- desktop: still exactly one screen ---------- */
@media (min-width: 1025px) and (min-height: 600px) {
  body > main { overflow: hidden; }
  .hero-single { flex: 32 1 0; height: auto; min-height: 150px; }
  .pg { flex: 68 1 0; overflow: hidden; }
  .page-index .pg-band { flex: 0 1 clamp(250px, 31vh, 380px); }
  .page-contact .hero-single { flex: none; height: calc((100vh - var(--hdr, 70px)) * .383); min-height: 150px; }  /* same height as the About hero */
  .page-contact .pg-band { flex: 1 1 0; }
  .page-products .hero-single { flex-grow: 28; }
  .page-products .pg { flex-grow: 72; }
  .page-about .hero-single { flex-grow: 40; }
  .page-about .pg { flex-grow: 60; }
  /* Contact: the info strip and the left block start on the hero text line, and the left block starts at the height of the form */
  /* the info strip is as high as the footer (46px): icons instead of titles, text 1px bigger */
  .page-contact .values { margin-top: auto; height: 46px; background: #fff; border-top: 1px solid #dfe7ed; box-sizing: border-box; }   /* white with the footer's hairline */
  .page-contact .values-in { min-height: 0; height: 100%; display: flex; align-items: center; justify-content: flex-start; }
  .page-contact .val { padding: 0; gap: 8px; flex: 0 1 auto; min-width: 0; }
  .page-contact .val + .val { margin-left: 10px; }
  .page-contact .val + .val::before { content: '/'; position: static; width: auto; height: auto; background: none; color: var(--navy); opacity: .5; margin-right: 2px; flex: none; }
  .page-contact .foot-copy { margin-left: auto; flex: none; white-space: nowrap; }   /* the copyright on the right, like the footer */
  .page-contact .val .nw { white-space: nowrap; }
  .page-contact .ring { width: 22px; height: 22px; border: 0; border-radius: 0; background: none; }
  .page-contact .ring svg { width: 22px; height: 22px; }
  .page-contact .val p { font-size: 13.5px; line-height: 1.25; }
  :is(html:lang(zh-Hant), html:lang(ja)) .page-contact .val p { font-size: clamp(12px, calc(1.6vh + 1px), 14px); line-height: 1.25; }
  .page-contact .val p br { display: none; }   /* the info strip sits at the bottom of the screen */
  .page-contact .values-in { width: calc(100% - 2 * clamp(22px, 3.6vw, 72px)); margin: 0 auto; }   /* same side margins as the footer */
  /* Contact: the form on the left (no card), the heading, the text and the map on the right; the info stays in the bottom strip */
  .pg-contact { padding-left: clamp(40px, 6.6vw, 140px); padding-right: clamp(40px, 6.6vw, 140px); --cg: clamp(28px, 4vw, 72px); grid-template-columns: calc((100% - var(--cg)) * .4279) calc((100% - var(--cg)) * .3721); justify-content: center; grid-template-rows: auto minmax(0, 1fr); column-gap: var(--cg); row-gap: clamp(8px, 1.6vh, 16px); }
  .pg-contact > .panel-form { grid-column: 1; grid-row: 1 / 3; background: none; border: 0; padding: 0; justify-content: flex-start; }
  .pg-contact > .blk-head { grid-column: 2; grid-row: 1; align-self: start; }
  .pg-contact > .blk-head h2 br { display: none; }
  .pg-contact > .blk-head h2 { margin-bottom: 4px; }
  .pg-contact > .ct-map { grid-column: 2; grid-row: 2; border: 0; }
  /* About: all text on the left (approach, vision, technology), the pictures on the right; the left edge on the hero text line */
  .pg-about { padding-left: clamp(40px, 6.6vw, 140px); padding-right: clamp(40px, 6.6vw, 140px); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); row-gap: clamp(10px, 2.2vh, 22px); align-content: start; }
  .pg-about .ab-text { grid-column: 1; grid-row: 1; justify-content: flex-start; padding: clamp(8px, 4vh, 40px) 0 0; }
  .pg-about .collage { grid-column: 2; grid-row: 1 / 3; }
  .pg-about .vision { grid-column: 1; grid-row: 2; justify-content: flex-start; padding: 0; border-left: 0; }
}
@media (min-width: 1025px) and (min-height: 600px) and (max-width: 1500px) { .page-contact .foot-copy { padding-right: 0; } }   /* no room for the footer's extra right gap on narrower screens */
/* wide enough: every info stays on one line and the copyright wraps (right aligned) if it has to */
@media (min-width: 1430px) and (min-height: 600px) {
  .page-contact .val { flex: none; }
  .page-contact .val p { white-space: nowrap; }
  .page-contact .foot-copy { flex: 0 1 auto; white-space: normal; text-align: right; line-height: 1.3; min-width: 150px; padding-left: 20px; }
}

/* technology page: its text block can be longer than the screen, so this page scrolls (the others stay one screen); the banner just gets taller */
@media (min-width: 1025px) and (min-height: 600px) {
  html:has(body.page-technology), body.page-technology { height: auto; overflow: visible; }
  body.page-technology { min-height: 100vh; }
  .page-technology > main { flex: none; overflow: visible; }
  .page-technology .hero-single { flex: none; height: calc((100vh - var(--hdr, 70px)) * .383); min-height: 150px; }
  .page-technology .pg { flex: none; overflow: visible; padding-bottom: 0; }
  .page-technology .site-header { position: sticky; top: 0; z-index: 50; }
}

/* ---------- mobile / tablet ---------- */
@media (max-width: 1024px) {
  .pg { padding: 26px 24px; }
  .pg-band, .pg-contact, .pg-products, .pg-about, .tb1, .tb2, .pr-head { grid-template-columns: 1fr; }
  .ct-map { height: 280px; }
  .pg-tech { grid-template-rows: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard .ph { flex: none; aspect-ratio: 1.9; }
  .side-img { flex: none; height: 150px; }
  .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .feat li:nth-child(odd) { border-left: 0; }
  .app { grid-template-columns: 1fr; }
  .app .ilist { grid-template-columns: 1fr; padding: 10px 20px; }
  .app .ilist li:nth-last-child(2) { border-bottom: 1px solid #e8eef2; }
  .icons4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .icons4 li:nth-child(3) { border-left: 0; padding-left: 0; }
  .collage { height: 230px; }
  .vision { padding-left: 0; border-left: 0; border-top: 1px solid #d9e2e8; padding-top: 22px; }
  .panel-img { min-height: 190px; }
  .panel-form .f-row { grid-template-columns: 1fr; }
  .hero-single { height: 430px; }
}

.figs .ilist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: center; }
.figs .ilist li:nth-last-child(2) { border-bottom: 0; }
@media (max-width: 1024px) { .figs .ilist { grid-template-columns: 1fr; } .figs .ilist li:nth-last-child(2) { border-bottom: 1px solid #e8eef2; } }

@media (min-width: 1025px) and (min-height: 600px) {
  .page-technology .hero-single, .page-products .hero-single { flex-grow: 40; }
  .page-technology .pg, .page-products .pg { flex-grow: 60; }
}

@media (min-width: 1025px) and (min-height: 600px) {
  .hero-single .eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }
  .hero-single h1 { font-size: clamp(22px, 4.3vh, 40px); line-height: 1.15; margin-bottom: clamp(6px, 1.4vh, 16px); }
  .hero-single .lead { font-size: clamp(11.5px, 1.65vh, 15px); line-height: 1.55; margin-bottom: clamp(8px, 1.8vh, 20px); }
  .hero-single .hero-cta { padding-top: clamp(7px, 1.3vh, 12px); padding-bottom: clamp(7px, 1.3vh, 12px); }
}
@media (min-width: 1025px) and (max-height: 760px) { .hero-single .lead { display: none; } }

@media (min-width: 1025px) and (min-height: 600px) { html:lang(ja) .hero-single h1 { font-size: clamp(20px, 3.7vh, 36px); } }
@media (min-width: 1025px) and (max-height: 760px) {
  .pg-tech .figs .ilist p, .pg-tech .pcard.step p { display: none; }
  .pg-tech .figs .ilist li { padding: 4px 0; }
}
@media (min-width: 1025px) and (max-height: 880px) { html:lang(ja) .page-technology .hero-single .lead { display: none; } }

@media (min-width: 1025px) and (min-height: 600px) {
  .page-products .hero-single { flex-grow: 30; }
  .page-products .pg { flex-grow: 70; }
  .pr { grid-template-rows: auto minmax(70px, 1fr) auto; }
  .pr-head .desc { display: none; }
  .app .ilist p { display: none; }
  .app-img .desc { display: none; }
  .app .ilist li { padding: clamp(4px, .9vh, 8px) 0; }
}
@media (min-width: 1025px) and (max-height: 820px) { .pg-products .feat p { display: none; } .pg-products .pcard .tx p { display: none; } }

.app .ilist .ap { flex: none; width: clamp(54px, 9vh, 92px); height: clamp(40px, 6.6vh, 68px); object-fit: cover; border: 1px solid #dfe7ed; }
@media (max-width: 1024px) { .app .ilist .ap { width: 84px; height: 62px; } }

/* home: four highlights as photo cards */
.pg-vals .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-vals .pcard .tx { padding: clamp(8px, 1.6vh, 14px) 16px clamp(10px, 1.8vh, 16px); }
.pg-vals .pcard h3 { font-size: clamp(14px, 2.1vh, 17px); color: var(--navy); }
.pg-vals .pcard p { font-size: clamp(11px, 1.55vh, 12.5px); }
@media (min-width: 1025px) and (min-height: 600px) { .page-index .pg-vals { flex: 0 1 clamp(250px, 38vh, 420px); } }
@media (max-width: 1024px) { .pg-vals .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-vals .pcard .tx { order: -1; }

/* home footer */
.site-foot { flex: none; background: #fff; border-top: 1px solid #dfe7ed; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px clamp(22px, 3.6vw, 72px); }
.foot-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--navy); font-weight: 500; }
.foot-brand img { height: 26px; width: auto; }
.foot-nav { display: flex; gap: clamp(16px, 2.2vw, 36px); font-size: 12.5px; color: #4a5866; }
.foot-nav a:hover { color: var(--green); }
.foot-copy { font-size: 11.5px; color: #8a96a2; padding-right: 60px; }
@media (min-width: 1025px) and (min-height: 600px) {
  .page-index .hero { flex: 44 1 0; min-height: 0; }
  .page-index .pg-vals { flex: 56 1 0; }
  .foot-in { padding-top: clamp(8px, 1.6vh, 14px); padding-bottom: clamp(8px, 1.6vh, 14px); }
}
@media (max-width: 1024px) { .foot-in { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; } .foot-copy { padding-right: 0; } .foot-nav { flex-wrap: wrap; } }

@media (min-width: 1025px) and (min-height: 600px) {
  .page-index .hero { flex-grow: 48; }
  .page-index .pg-vals { flex-grow: 52; }
  .page-index .hero .eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }
  .page-index .hero h1 { font-size: clamp(22px, 4.3vh, 40px); line-height: 1.15; margin-bottom: clamp(6px, 1.4vh, 16px); }
  .page-index .hero .lead { font-size: clamp(11.5px, 1.65vh, 15px); line-height: 1.55; margin-bottom: clamp(8px, 1.8vh, 20px); }
  .page-index .hero .hero-cta { padding-top: clamp(7px, 1.3vh, 12px); padding-bottom: clamp(7px, 1.3vh, 12px); }
  html:lang(ja) .page-index .hero h1 { font-size: clamp(20px, 3.7vh, 36px); }
}
@media (min-width: 1025px) and (max-height: 760px) { .page-index .hero .lead { display: none; } }
@media (min-width: 1025px) and (max-height: 880px) { html:lang(ja) .page-index .hero .lead { display: none; } }
.pg-vals .pcard:nth-child(2) .ph img { object-position: 70% 30%; }
.pg-vals .pcard:nth-child(4) .ph img { object-position: 50% 30%; }
.pg-vals .pcard:nth-child(3) .ph img { object-position: 50% 45%; }

/* zh-Hant desktop: header menu +2px */
@media (min-width: 1025px) { html:lang(zh-Hant) .nav a { font-size: 15px; } }

/* v1.7.10: hero picture is wider (sea extended on the left); keep more of the sea in view */
body.page-index .hero-bg, body.page-index .hero.s1 .hero-bg, body.page-index .hero.s2 .hero-bg, body.page-contact .hero-bg { background-position-y: 80%; }

/* footer: slogan + copyright only */
.foot-slogan { font-size: clamp(14px, 2vh, 18px); font-weight: 300; line-height: 1.45; color: var(--navy); letter-spacing: .02em; padding-left: 12px; border-left: 3px solid var(--green); }
:is(html:lang(zh-Hant), html:lang(ja)) .foot-slogan { font-weight: 400; letter-spacing: .06em; }
.foot-in { padding-top: clamp(8px, 1.6vh, 14px); padding-bottom: clamp(8px, 1.6vh, 14px); }

/* desktop: logo + company name start exactly where the hero title starts; logo +20% */
@media (min-width: 1025px) {
  .site-header .inner { width: calc(100% - 2 * clamp(40px, 6.6vw, 140px)); }
}
@media (min-width: 861px) { .brand .logo { height: 43.2px; } }
@media (min-width: 861px) and (max-width: 1360px) { .brand .logo { height: 41px; } }
@media (min-width: 861px) and (max-width: 879px) { .brand .logo { height: 34.6px; } }

/* footer like the Chanty site: one line of words separated by slashes, copyright + version on the right */
.foot-slogan { padding-left: 0; border-left: 0; font-size: 12px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.foot-slogan i { font-style: normal; margin: 0 14px; opacity: .5; }
:is(html:lang(zh-Hant), html:lang(ja)) .foot-slogan { letter-spacing: .14em; }
.foot-copy { padding-right: 0; margin-left: auto; font-size: 10.5px; letter-spacing: .06em; color: #8a96a2; }
.foot-copy .ver { margin-left: 8px; }
body.page-index .site-version, body.page-products .site-version, body.page-supply .site-version, body.page-apps .site-version, body.page-contact .site-version { display: none; }
@media (max-width: 1024px) { .foot-slogan { white-space: normal; } .foot-copy { margin-left: 0; } }

/* v1.7.17 products: two wide cards (the four properties live inside the calendered-foam card), no sidebar */
.pg-products { grid-template-columns: minmax(0, 1fr); }
.pr { grid-template-rows: minmax(0, 1fr) auto; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 26px); }
.pcard.wide { flex-direction: row; }
.pcard.wide .ph { flex: 0 0 40%; min-height: 0; }
.pcard.wide .tx { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(10px, 2vh, 22px) clamp(16px, 1.8vw, 28px); }
.pcard.wide h3 { font-size: clamp(15px, 2.3vh, 19px); color: var(--navy); }
.pcard.wide .tx > p { font-size: clamp(11.5px, 1.6vh, 13px); margin-top: 6px; }
.pcard.wide .go { margin: clamp(8px, 1.6vh, 16px) 0 0; }
.feat2 { margin-top: clamp(8px, 1.6vh, 16px); padding-top: clamp(8px, 1.6vh, 16px); border-top: 1px solid #e8eef2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1.3vh, 14px) 18px; }
.feat2 li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.feat2 .ring { flex: none; width: clamp(28px, 4.2vh, 38px); height: clamp(28px, 4.2vh, 38px); }
.feat2 .ring svg { width: clamp(15px, 2.3vh, 21px); height: clamp(15px, 2.3vh, 21px); }
.feat2 h4 { font-size: clamp(12px, 1.7vh, 13.5px); font-weight: 600; color: var(--navy); line-height: 1.3; }
.feat2 p { margin-top: 2px; font-size: clamp(10px, 1.35vh, 11px); line-height: 1.45; color: #6a7681; }
:is(html:lang(zh-Hant), html:lang(ja)) .feat2 p { font-size: clamp(10.5px, 1.45vh, 12px); line-height: 1.55; }
@media (min-width: 1025px) and (max-height: 820px) { .feat2 p { display: none; } .pcard.wide .tx > p br { display: none; } }
@media (min-width: 1025px) and (max-height: 680px) { .feat2 .ring { display: none; } }
@media (max-width: 1024px) {
  .cards-2 { grid-template-columns: 1fr; }
  .pcard.wide { flex-direction: column; }
  .pcard.wide .ph { flex: none; aspect-ratio: 1.9; }
  .feat2 { grid-template-columns: 1fr; }
}
@media (min-width: 1025px) and (min-height: 600px) { .page-products .hero-single { flex-grow: 40; } .page-products .pg { flex-grow: 60; } }
@media (min-width: 1025px) and (max-height: 920px) { html:lang(en) .feat2 p, html:lang(ja) .feat2 p { display: none; } }

/* =====================================================================
   v1.8.0 products: no hero. Title and the layered sheet appear first, then each layer's note
   (leader line draws, text fades in), the enlarged cell view and the four properties.
   The scene is laid out on the 1536x1024 grid of the supplied picture, in percentages.
   ===================================================================== */
body.page-products, body.page-supply, body.page-apps, body.page-technology { background: #f8fafb; }
.pd { position: relative; }
.pd-scene { position: relative; container-type: inline-size; width: min(100%, calc((100vh - var(--hdr) - var(--ftr, 0px)) * 1.5), calc(80vw - 32px)); aspect-ratio: 3 / 2; margin: 0 auto; transform: translateX(15%); }
.pd-scene > *, .pd-di > *, .pd-zoom > * { position: absolute; }
.pd-dia, .pd-di, .pd-zoom { display: contents; }
.pd-title { left: calc(clamp(40px, 6.6vw, 140px) - 50vw + 35%); top: 4.2%; width: 62%; }
.pd-title h1 { font-size: max(19.8px, 3.6cqw); font-weight: 600; line-height: 1.15; color: #1f3446; letter-spacing: .02em; }
.pd-title .en { margin-top: .5cqw; font-size: max(10.8px, 1.89cqw); font-weight: 300; color: #3b4a58; letter-spacing: .01em; }
.pd-title .en:empty { display: none; }
.pd-title .lead { border-left: 0; padding-left: 0; margin-bottom: 0; margin-top: 2.4cqw; font-size: max(11.5px, 1.43cqw); line-height: 1.75; color: #4a5866; font-weight: 400; }
.pd-body { left: 0; top: 21.97%; width: 69.99%; mix-blend-mode: multiply; }
.pd-body img { width: 100%; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 90%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.pd-lines { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pd-lines path { fill: none; stroke: #2c4a5e; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pd-lines .dt { fill: #2c4a5e; stroke: #fff; stroke-width: 2.5; }
.pd-note { left: 75.5%; width: 22%; }
.pd-note h3 { font-size: max(12.5px, 1.7cqw); font-weight: 600; color: #1f3446; line-height: 1.25; }
.pd-note p { margin-top: .5cqw; font-size: max(10.5px, 1.37cqw); color: #5b6b78; line-height: 1.5; }
.n1 { top: 21.4%; } .n2 { top: 36.2%; } .n3 { top: 50.6%; }
.pd-zimg { left: 60.1%; top: 64.7%; width: 18.3%; }
.pd-zimg img { width: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(30,60,80,.12)); }
.pd-zt { left: 79.6%; top: 71.2%; width: 18.6%; }
.pd-zt h3 { font-size: max(12.5px, 1.7cqw); font-weight: 600; color: #1f3446; line-height: 1.3; }
.pd-zt p { margin-top: .7cqw; font-size: max(10.5px, 1.2cqw); color: #5b6b78; line-height: 1.55; }
.pd-feat { left: 4%; top: 74.5%; width: 51%; display: grid; grid-template-columns: repeat(4, 1fr); }
.pd-feat li { text-align: center; padding: 0 .6cqw; border-left: 1px solid #d9e2e8; }
.pd-feat li:first-child { border-left: 0; }
.pd-feat .ring { width: max(34px, 4.6cqw); height: max(34px, 4.6cqw); margin: 0 auto .9cqw; border-color: #5d7f93; background: transparent; }
.pd-feat .ring svg { width: 52%; height: 52%; stroke: #2c5b73; }
.pd-feat h3 { font-size: max(11.5px, 1.5cqw); font-weight: 600; color: #1f3446; }
.pd-feat p { margin-top: .3cqw; font-size: max(10px, 1.1cqw); color: #6a7681; }

/* entrance sequence: title, sheet, then layer notes one by one, the enlarged view, the four properties */
.a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8, .a9, .a10, .a11 { animation: pdIn .5s ease-out both; }
.a1 { animation-delay: .05s; } .a2 { animation-delay: .35s; animation-duration: .8s; }
/* each stage (layer note, enlarged view, its text) takes 1 second; the first starts at 1s, every next one starts halfway through the previous one */
.a3, .a4, .a5, .a6, .a7 { animation-duration: 1s; }
.a3 { animation-delay: 1s; } .a4 { animation-delay: 1.5s; } .a5 { animation-delay: 2s; }
.a6 { animation-delay: 2.5s; } .a7 { animation-delay: 2.5s; }
.a8 { animation-delay: 3.5s; } .a9 { animation-delay: 3.65s; } .a10 { animation-delay: 3.8s; } .a11 { animation-delay: 3.95s; }
.ln path { animation: pdDraw .6s ease-out both; }
.ln .dt { animation: pdDot .2s ease-out both; }
.l1 path, .l1 .dt { animation-delay: 1s; }
.l2 path, .l2 .dt { animation-delay: 1.5s; }
.l3 path, .l3 .dt { animation-delay: 2s; }
.l4 path, .l4 .dt { animation-delay: 2.5s; }
@keyframes pdIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pdDot { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdLineX { from { clip-path: inset(-4px 100% -4px 0); } to { clip-path: inset(-4px 0 -4px 0); } }

@media (min-width: 1025px) and (min-height: 600px) { .pd { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; } }
/* PC: the title block of the three product pages starts 17vh under the header; the diagram is scaled so it still fits above the footer */
@media (min-width: 1025px) and (min-height: 600px) {
  .pd { --sw: min(calc((100vh - var(--hdr) - var(--ftr, 0px) - 17vh) / .639), calc(80vw - 32px)); }
  .pd-scene { width: var(--sw); margin: calc(17vh - .028 * var(--sw)) auto 0; }
  .pd-title h1 { font-size: clamp(17px, calc(2.74vw - 5px), 47px); }
  .pd-title .en { font-size: max(9px, calc(1.44vw - 15px)); }
  /* the diagram (sheet, lines, notes, enlarged view) moves up so the first note starts at the top of the title; the four properties stay low and are centred on the page */
  .pd-di > *, .pd-zoom > * { translate: 0 calc(var(--sw) * -.1147); }
  .pd-feat { left: 35%; translate: -50% 0; }
  .pd-note h3, .pd-zt h3 { font-size: clamp(13px, 1.2vw, 24px); }
  .pd-note p, .pd-zt p { font-size: clamp(9px, calc(1.04vw - 2px), 19px); }
}

/* tablet / phone: title and specs flow on top; the diagram keeps the desktop layout (same notes, lines and
   animation) but is drawn wider than the screen and pushed left, so the sheet bleeds off the left edge
   and the notes fit on the right; the four properties flow underneath */
@media (max-width: 1024px) {
  .pd-scene { --dw: max(570px, 146vw); width: 100%; transform: none; aspect-ratio: auto; container-type: normal; padding: 16px 24px 6px; display: flex; flex-direction: column; gap: 10px; }
  .pd-scene > * { position: static; width: auto; }
  .pd-title { left: auto; }
  .pd-title h1 { font-size: clamp(24px, 6.4vw, 38px); }
  .pd-title .en { font-size: 14px; margin-top: 4px; }
  .pd-title .lead { font-size: 14px; max-width: none; margin-top: 10px; line-height: 1.65; }
  .pd-dia { display: block; position: relative; overflow: hidden; margin: 0 -24px; height: calc(var(--dw) * 0.52); }
  .pd-di { display: block; position: relative; container-type: inline-size; width: var(--dw); height: calc(var(--dw) * 0.84); margin-left: calc(100% - var(--dw)); margin-top: calc(var(--dw) * -0.14); }
  .pd-di > * { position: absolute; }
  .pd-lines { display: none; }
  .pd-note { left: 67.3%; width: 32%; }
  .pd-body { left: -5%; }
  .pd-zoom { position: absolute; display: flex; align-items: center; gap: 1cqw; left: 48%; right: .5%; top: 46cqw; }
  .pd-zoom > * { position: static; }
  .pd-zimg { flex: none; width: 18.3cqw; }
  .pd-zt { flex: 1 1 0; min-width: 0; width: auto; }
  .pd-note h3, .pd-zt h3 { font-size: calc(max(12.5px, 1.7cqw) + 2px); }
  .pd-note p, .pd-zt p { font-size: calc(max(12.5px, 1.7cqw) + 2px); line-height: 1.45; margin-top: 3px; letter-spacing: -.04em; }
  .pd-body { top: 14.65cqw; }
  /* each heading sits at the height of the layer it belongs to (surface / foam / release layer of the picture) and
     gets a horizontal leader line that ends on that layer. --hh is half a heading line, --ax the x of the line's start */
  html:lang(en) .pd-dia { height: calc(var(--dw) * 0.585); }
  html:lang(en) .pd-zoom { top: 52cqw; }
  .pd-scene { --cq: calc(var(--dw) / 100); --fs: calc(max(12.5px, 1.7 * var(--cq)) + 2px); --hh: calc(.625 * var(--fs)); --y1: 19.21; --y2: 30.27; --y3: 37.96; --dl: 1;
    --H: calc(1.25 * var(--fs) + var(--dl) * 1.45 * var(--fs) + 6px);
    --t1: calc(var(--y1) * var(--cq) - var(--hh));
    --t2: max(calc(var(--y2) * var(--cq) - var(--hh)), calc(var(--t1) + var(--H)));
    --t3: max(calc(var(--y3) * var(--cq) - var(--hh)), calc(var(--t2) + var(--H))); }
  html:lang(en) .pd-scene { --dl: 2; }
  .n1 { top: var(--t1); --ax: 58.5; --ld: 1s; }
  .n2 { top: var(--t2); --ax: 56.3; --ld: 1.5s; }
  .n3 { top: var(--t3); --ax: 58.2; --ld: 2s; }
  /* raw-material page: anchors on the pellet heap / dish / a loose pellet */
  .pd-note::before { content: ''; position: absolute; right: calc(100% + .8cqw); top: calc(var(--hh) - 3px); height: 6px; width: calc((66.5 - var(--ax)) * 1cqw);
    background: radial-gradient(circle 3px at calc(100% - 3px) 50%, #2c4a5e 96%, transparent 100%) no-repeat, linear-gradient(#2c4a5e, #2c4a5e) center / 100% 1.6px no-repeat;
    animation: pdLineX .5s ease-out both; animation-delay: var(--ld); }
  .pd-note::after { content: ''; position: absolute; right: calc(100% + (67.3 - var(--ax)) * 1cqw - 3.5px); top: calc(var(--hh) - 3.5px); width: 7px; height: 7px; border-radius: 50%;
    background: #2c4a5e; box-shadow: 0 0 0 2px #fff; animation: pdIn .3s ease-out both; animation-delay: var(--ld); }
  .pd-feat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 6px; }
  .pd-feat li { border-left: 0; padding: 0 2px; }
  .pd-feat .ring { width: 38.4px; height: 38.4px; margin-bottom: 6px; }
  .pd-feat h3 { font-size: 14.4px; line-height: 1.35; }
  .pd-feat p { font-size: 12.6px; line-height: 1.45; margin-top: 3px; }
  .pd-feat h3, .pd-feat p { overflow-wrap: anywhere; }
}

/* main specifications, under the description */
.pd-spec { margin-top: 2.2cqw; padding-left: 1.1cqw; border-left: 3px solid var(--green); }
.pd-spec .sp-h { font-size: max(12px, 1.5cqw); font-weight: 600; color: #1f3446; line-height: 1.3; }
.pd-spec dl { margin-top: .7cqw; display: grid; gap: .45cqw; }
.pd-spec dl > div { display: flex; gap: .9cqw; font-size: max(11px, 1.3cqw); line-height: 1.5; color: #4a5866; }
.pd-spec dt { flex: none; color: #1f3446; font-weight: 500; }
.pd-spec dt::after { content: '\FF1A'; }
html:lang(en) .pd-spec dt::after { content: ':'; }
@media (max-width: 1024px) { .pd-spec { margin-top: 12px; padding-left: 12px; } .pd-spec .sp-h { font-size: 15px; } .pd-spec dl { margin-top: 6px; gap: 4px; } .pd-spec dl > div { font-size: 13px; gap: 8px; } }

/* desktop: the four properties never wrap; each takes the width of its own text and the gaps follow the language */
@media (min-width: 1025px) {
  .pd-feat { display: flex; width: max-content; max-width: 56%; }
  .pd-feat li { white-space: nowrap; padding: 0 1.5cqw; }
  .pd-feat li:first-child { padding-left: 0; }
  .pd-feat h3 { font-size: max(11px, 1.5cqw); }
  .pd-feat p { font-size: max(9.5px, 1.1cqw); }
}
@media (min-width: 1025px) {
  html:lang(en):not(.is-portrait) .pd-feat li { padding: 0 .75cqw; }
  html:lang(en):not(.is-portrait) .pd-feat li:first-child { padding-left: 0; }
  html:lang(en):not(.is-portrait) .pd-feat h3 { font-size: max(9.5px, 1.35cqw); }
  html:lang(en):not(.is-portrait) .pd-feat p { font-size: max(8px, 1cqw); }
}

/* four properties as 2x2 (set by js when something would wrap): bigger type so the block does not look empty */
@media (min-width: 1025px) {
  .pd-feat.is-2x2 { display: grid; grid-template-columns: repeat(2, max-content); gap: 2.4cqw 4cqw; width: max-content; max-width: 56%; }
  .pd-feat.is-2x2 li { border-left: 0; padding: 0; }
  .pd-feat.is-2x2 .ring { width: max(40px, 5.4cqw); height: max(40px, 5.4cqw); }
  .pd-feat.is-2x2 h3 { font-size: max(13px, 1.9cqw); }
  .pd-feat.is-2x2 p { font-size: max(11px, 1.4cqw); }
}
@media (max-width: 1024px) {
  .pd-feat.is-2x2 { grid-template-columns: auto auto; justify-content: space-evenly; gap: 20px 0; }
  .pd-feat.is-2x2 li { white-space: nowrap; padding: 0; }
  .pd-feat.is-2x2 .ring { width: 46px; height: 46px; margin-bottom: 7px; }
  .pd-feat.is-2x2 h3 { font-size: clamp(12.5px, 3.9vw, 17px); }
  .pd-feat.is-2x2 p { font-size: clamp(10.5px, 3.2vw, 14px); margin-top: 3px; }
}
@media (max-width: 1024px) {
  :is(html:lang(zh-Hant), html:lang(ja)) .pd-feat.is-2x2 .ring { width: 52px; height: 52px; margin-bottom: 8px; }
  :is(html:lang(zh-Hant), html:lang(ja)) .pd-feat.is-2x2 h3 { font-size: clamp(13px, 4.6vw, 19px); }
  :is(html:lang(zh-Hant), html:lang(ja)) .pd-feat.is-2x2 p { font-size: clamp(11px, 3.8vw, 15px); }
}

/* =====================================================================
   v1.11 header dropdown (Products) and the TPU raw-material supply page
   ===================================================================== */
.nav .has-sub { position: relative; }
.nav .sub { display: block; position: absolute; left: 50%; top: 100%; min-width: max-content; padding: 6px 0; background: rgba(255,255,255,.98); border: 1px solid #dfe7ed; box-shadow: 0 14px 30px rgba(20,40,58,.12); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.open .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .sub li { display: block; }
.nav .sub a { display: block; height: auto; line-height: 1.4; padding: 11px 24px; font-size: 13px; letter-spacing: .03em; text-transform: none; font-weight: 500; white-space: nowrap; color: #1d2b38; }
.nav .sub a::after { display: none; }
.nav .sub a:hover { background: #eef5f4; color: var(--green); }
.nav .sub a.active { color: var(--green); background: #f3f8f7; }
:is(html:lang(zh-Hant), html:lang(ja)) .nav .sub a { font-size: 14px; letter-spacing: .06em; }
@media (max-width: 860px) {
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; padding: 0 0 6px 14px; background: transparent; border: 0; box-shadow: none; }
  .nav .sub a { padding: 12px 0; font-size: 14px; color: #3b4a58; border-bottom: 1px solid rgba(20,40,58,.07); }
  .nav .sub li:last-child a { border-bottom: 0; }
  .nav .sub a:hover { background: transparent; }
  .nav .sub a.active { background: transparent; }
}

/* raw-material page: the dish photo spreads from the centre to all sides; soft edges, original tones */
@property --g { syntax: '<number>'; initial-value: 1.75; inherits: true; }
.pd-body.fill img { -webkit-mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, #000 calc(var(--g) * 58%), transparent calc(var(--g) * 100%)), linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse farthest-corner at 50% 50%, #000 calc(var(--g) * 58%), transparent calc(var(--g) * 100%)), linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%, #000 76%, transparent 100%); -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect; }
.pd-body.fill { animation: pdFill 2.6s cubic-bezier(.4,.1,.55,1) .3s both; }
@keyframes pdFill { from { --g: .02; opacity: 1; } to { --g: 1.75; opacity: 1; } }
/* timeline of this page: title .05s, fill .3-2.9s, notes 2.0 / 2.45 / 2.9s, last text 3.45s (ends about 4.45s, like the foam page) */
.page-supply .a3 { animation-delay: 2s; } .page-supply .a4 { animation-delay: 2.45s; } .page-supply .a5 { animation-delay: 2.9s; }
.page-supply .a7 { animation-delay: 3.45s; }
.page-supply .pd-zt { left: 75.5%; top: 64.5%; width: 22%; }
@media (max-width: 1024px) {
  body.page-supply .pd-dia { display: block; height: auto; overflow: visible; margin: 0; }
  body.page-supply .pd-di { display: flex; flex-direction: column; gap: 12px; width: auto; height: auto; margin: 0; container-type: normal; }
  body.page-supply .pd-di > *, body.page-supply .pd-zoom > * { position: static; width: auto; left: auto; top: auto; }
  body.page-supply .pd-body { margin: 0 -24px 6px; overflow: hidden; }
  body.page-supply .pd-body img { width: 120%; max-width: none; margin-left: -14%; }
  /* Traditional Chinese: heading and description on one line, descriptions all start at the same x (a language only wraps
     inside its own text column); every other language: heading on top, description below */
  body.page-supply .pd-note, body.page-supply .pd-zt { padding: 0; border-left: 0; }
  body.page-supply .pd-note h3, body.page-supply .pd-zt h3 { font-size: calc(max(12.5px, 1.7cqw) + 4px); margin: 0 0 3px; }
  body.page-supply .pd-note p, body.page-supply .pd-zt p { margin: 0; text-wrap: balance; }
  html:lang(zh-Hant) body.page-supply .pd-note, html:lang(zh-Hant) body.page-supply .pd-zt { display: flex; align-items: baseline; gap: 12px; }
  html:lang(zh-Hant) body.page-supply .pd-note h3, html:lang(zh-Hant) body.page-supply .pd-zt h3 { flex: none; width: 4.4em; margin: 0; }
  html:lang(zh-Hant) body.page-supply .pd-note p, html:lang(zh-Hant) body.page-supply .pd-zt p { flex: 1 1 0; min-width: 0; }
  body.page-supply .pd-zt p br { display: none; }
  body.page-supply .pd-note::before, body.page-supply .pd-note::after { display: none; }
  body.page-supply .pd-zoom { display: block; position: static; }
}

/* phones: the version label is the same small corner label on every page (also home, where the footer shows it on desktop only);
   the page keeps a little room at the bottom so the label never covers the last line */
@media (max-width: 1024px) {
  body.page-index .site-version, body.page-products .site-version, body.page-supply .site-version, body.page-apps .site-version, body.page-contact .site-version { display: block; }
  .foot-copy .ver { display: none; }
  .page-contact .values-in .foot-copy { grid-column: 1 / -1; padding: 14px 0 0; }
  body { padding-bottom: 24px; }
  body.page-index, body.page-products, body.page-supply, body.page-apps { padding-bottom: var(--mf, 64px); }
}

/* raw-material page (desktop): photo 20% bigger (70% -> 84% of the scene, same centre) and its vertical centre on the notes block */
@media (min-width: 1025px) { .page-supply .pd-body { left: -7%; width: 84%; top: 21.7%; } }

/* raw-material page (desktop): the four notes stay on one line; js sets --ns to move them left when they would pass the right margin */
@media (min-width: 1025px) {
  .page-supply .pd-note p, .page-supply .pd-zt p { white-space: nowrap; }
  .page-supply .pd-zt p br { display: none; }
  .page-supply .pd-note, .page-supply .pd-zt { left: calc(75.5% - var(--ns, 0px)); width: max-content; }
}

/* product pages carry the same footer as the home page; on desktop it has a fixed height so the diagram can be sized to the rest of the screen */
body.page-products, body.page-supply, body.page-apps { --ftr: 46px; }
@media (min-width: 1025px) {
  body.page-products .site-foot, body.page-supply .site-foot, body.page-apps .site-foot { box-sizing: border-box; height: var(--ftr); display: flex; align-items: center; }
  body.page-products .foot-in, body.page-supply .foot-in, body.page-apps .foot-in { width: 100%; padding-top: 0; padding-bottom: 0; }
}

/* phones / tablets: the footer is fixed to the bottom of the screen, compact; the page keeps room for it (--mf is measured by js)
   and the corner version label sits on top of the footer's reserved right padding */
@media (max-width: 1024px) {
  .site-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.97); }
  .foot-in { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px max(22px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); }
  .foot-slogan { font-size: 10px; letter-spacing: 0; text-transform: none; white-space: normal; line-height: 1.4; }
  .foot-slogan i { margin: 0 5px; }
  .foot-copy { margin: 0; padding-right: 72px; font-size: 9.5px; letter-spacing: 0; line-height: 1.4; }
  .site-version { z-index: 45; }
}
@media (max-width: 1024px) { html:lang(ja) .foot-slogan { font-size: 9.5px; } html:lang(ja) .foot-copy { font-size: 9px; } }
/* rounded screen corners: keep the footer text and the version label away from the corners (the label sits level with the copyright line) */
@media (max-width: 1024px) { .site-version { right: max(22px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } }

/* =====================================================================
   Product Applications: "fake 3D" exploded shoe made of five photo layers (js/shoe-layers.js)
   ===================================================================== */
.ap-text h1 { font-size: clamp(22px, 2.74vw, 52px); font-weight: 600; line-height: 1.15; color: #1f3446; letter-spacing: .02em; }
.ap-text h1 .ap-cat { display: block; margin-top: .2em; margin-left: 0; font-size: clamp(17px, calc(2.74vw - 5px), 47px); font-weight: 500; color: #5b6b78; letter-spacing: .02em; }
.ap-text .en { margin-top: .4em; font-size: clamp(12px, 1.44vw, 28px); font-weight: 300; color: #3b4a58; }
.ap-text .en:empty { display: none; }
.ap-text .lead { border-left: 0; padding-left: 0; margin: .9em 0 0; font-size: clamp(12px, min(1.09vw, 2vh), 22px); line-height: 1.5; color: #4a5866; font-weight: 400; }
.fk-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fk-stage { position: relative; width: 100%; aspect-ratio: 920 / 940; max-height: 100%; overflow: hidden; container-type: inline-size; }
.fk-scene { position: absolute; inset: 0; }
.lyr { position: absolute; transform-origin: 50% 50%; pointer-events: none; will-change: transform, opacity;
  transition: transform var(--dur, 0s) cubic-bezier(.12, .8, .22, 1), opacity .3s ease; }
.lyr img { display: block; width: 100%; height: auto; transition: filter .3s ease; -webkit-user-drag: none; }
.lyr:nth-child(1) { z-index: 4; } .lyr:nth-child(2) { z-index: 3; } .lyr:nth-child(3) { z-index: 2; } .lyr:nth-child(4) { z-index: 1; }
.fk-stage.can { cursor: pointer; }
.fk-asm, .fk-pat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; -webkit-user-drag: none; }
.fk-asm { width: 90.7%; left: 51.4%; top: 50%; z-index: 10; transition: opacity .3s ease; }
.fk-pat { width: 92%; z-index: 9; opacity: 0; transition: opacity .5s ease; }
.fk-pat.on { opacity: 1; }
.lyr.sel img, .lyr.hot img { filter: drop-shadow(0 14px 16px rgba(35,60,80,.22)) brightness(1.03); }
.ap-side { min-width: 0; }
.fk-parts { display: flex; flex-direction: column; gap: 4px; }
.fk-parts button { width: 100%; text-align: left; position: relative; padding: 9px 14px 9px 27px; font: inherit; font-size: clamp(13px, 1.2vw, 24px); font-weight: 500; color: #2b3b49; background: transparent; border: 0; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.fk-parts button::before { content: ""; position: absolute; left: 14px; top: 50%; width: 3px; height: 1.45em; transform: translateY(-50%); background: var(--green); }
.fk-parts button.hov, .fk-parts button:hover, .fk-parts button:focus-visible { background: #eef5f4; color: var(--green); outline: none; }
.fk-parts.has-sel button:not(.on) { opacity: .5; font-size: clamp(11.5px, 1.056vw, 21px); }
.fk-parts.has-sel button:not(.on):hover, .fk-parts.has-sel button:not(.on):focus-visible { opacity: .85; }
.fk-parts button.on { border-left-color: var(--green); background: #eef5f4; color: var(--green); font-weight: 600; }
.fk-parts-h { font-size: clamp(13px, 1.2vw, 24px); font-weight: 600; color: #1f3446; margin: 0 0 6px 17px; }
.ap-text .lead[data-cat] { display: none; }
.ap[data-cat="0"] .lead[data-cat="0"], .ap[data-cat="1"] .lead[data-cat="1"], .ap[data-cat="2"] .lead[data-cat="2"] { display: block; }
.lead .ph { display: inline-block; }
.bag-box { border-radius: 0; }
.bag-box img { position: absolute; display: block; height: auto; -webkit-user-drag: none; }
.bag-box .bg-ln { z-index: 3; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.bag-box .ln path { fill: none; stroke: #2c4a5e; stroke-width: 3.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* furniture / backpacks: the leader lines are shown at once (the line-drawing animation of .ln, with its 1 - 2.5 s delays, is switched off here; delete this rule to bring it back) */
.bag-box .ln path, .bag-box .ln .dt { animation: none; }
.bag-box .ln .dt { fill: #2c4a5e; stroke: #fff; stroke-width: 4; }
.ap:not([data-cat="0"]) .fk-shoe-side { display: none !important; }
.ap:not([data-cat="0"]) .fk-scene { opacity: 0; pointer-events: none; }
.cat-img { position: absolute; left: 50%; top: 50%; width: 84%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s ease; pointer-events: none; border-radius: 6px; z-index: 8; }
.ap[data-cat="1"] .cat-img[data-cat="1"], .ap[data-cat="2"] .cat-img[data-cat="2"] { opacity: 1; }
.fk-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid #cfdae2; background: rgba(255,255,255,.88); color: var(--navy); cursor: pointer; transition: border-color .2s, color .2s; }
.fk-nav:hover, .fk-nav:focus-visible { border-color: var(--green); color: var(--green); outline: none; }
.fk-nav.prev { left: 0; } .fk-nav.next { right: 0; }
.fk-nav-top { display: none; }
.ap-text { position: relative; }
.fk-d { display: none; margin: 2px 0 8px 27px; font-size: clamp(9px, calc(1.04vw - 2px), 19px); line-height: 1.7; color: #5b6b78; }
.fk-parts li.open .fk-d { display: block; }
.fk-d .ph, .fk-cd .ph { display: inline-block; }
.fk-d:empty { display: none !important; }
.fk-all { margin: 8px 0 0 14px; padding: 7px 16px; font: inherit; font-size: 12px; letter-spacing: .08em; color: var(--navy); background: #fff; border: 1px solid #cfdae2; cursor: pointer; }
.fk-all:hover { border-color: var(--green); color: var(--green); }
.fk-all[hidden] { display: none; }
@media (min-width: 1025px) and (min-height: 600px) {
  .ap { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 40px); align-items: center; padding: 0 clamp(40px, 6.6vw, 140px); }
  .ap-text { align-self: start; padding-top: 20vh; }   /* the whole text block sits lower, the category name has its own line */
  .ap-text h1 { font-size: clamp(17px, calc(2.74vw - 5px), 47px); }
  .ap-text h1 .ap-cat { font-size: clamp(14px, calc(2.74vw - 10px), 42px); }
  .ap-text .en { font-size: max(9px, calc(1.44vw - 15px)); }
  .fk-nav.side { display: none; }
  .ap:not([data-cat="0"]) .fk-stage { overflow: visible; }
  .cat-img[data-cat="1"], .cat-img[data-cat="2"] { left: 0; width: 148%; transform: translateY(-50%); }
  .fk-nav-top { display: flex; gap: 8px; position: absolute; left: 0; top: calc(17vh - 44px); }
  .fk-nav.top { position: static; transform: none; width: 30px; height: 30px; }
  .ap-side { align-self: start; }
  .ap-text .lead .nw { white-space: nowrap; }
  .fk-wrap { height: 100%; padding: 8px 0; }
  .fk-stage { width: min(100%, calc((100vh - var(--hdr) - var(--ftr, 0px) - 70px) * 0.9787)); }
}
@media (max-width: 1024px) {
  .ap { padding: 24px 24px 8px; }
  .ap-text h1 { font-size: clamp(24px, 6.4vw, 38px); }
  .ap-text .en { font-size: 14px; }
  .ap-text .lead { font-size: 14px; line-height: 1.55; margin-top: 6px; }
  .fk-wrap { margin: 10px -24px 4px; }
  .fk-stage { width: min(100%, 560px); }
  .ap-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .fk-shoe-side { display: contents; }
  .fk-parts-h { display: none; }
  .fk-cd { margin: 0; font-size: 14.5px; flex: 0 0 100%; }
  .fk-nav { width: 38px; height: 38px; }
  .fk-nav.prev { left: 30px; } .fk-nav.next { right: 30px; }
  .fk-parts button::before { display: none; }
  .fk-parts { display: contents; }
  .fk-parts li { display: contents; }
  .fk-parts button { width: auto; padding: 9px 14px; font-size: 14.5px; border: 1px solid #cfdae2; background: #fff; }
  .fk-parts button.on { border-color: var(--green); }
  .fk-parts.has-sel button:not(.on) { font-size: 12.8px; }
  .fk-d { order: -1; flex: 0 0 100%; margin: 0 0 4px; font-size: 14.5px; }
  .fk-all { order: 2; margin: 0; padding: 9px 14px; font-size: 14.5px; }
  .ap-side { gap: 6px; }
  .fk-parts button, .fk-all { white-space: nowrap; padding: 9px clamp(6px, 2vw, 14px); font-size: clamp(11.5px, 3.3vw, 14.5px); }
  .fk-all { margin-left: auto; }
  .fk-parts.has-sel button:not(.on) { font-size: clamp(10.5px, 3vw, 12.8px); }
  .ap-side { padding-bottom: 8px; }
}

/* About page: the quote and the three points are the poster text; the former poster text is the first block below.
   The titles below use the poster title size, the explanations the poster explanation size; each link sits at the bottom right of its text */
.hero-single .lead i { font-style: normal; margin: 0 .7em; opacity: .5; }
.pg-about .ab-intro h2, .pg-about .blk-head h2, .pg-about .ab-tech h2 { font-size: max(14px, calc((clamp(22px, 4.3vh, 40px) - 15px) * var(--ak, 1))); font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: #12263a; margin: 0 0 clamp(4px, 1vh, 10px); }
:is(html:lang(zh-Hant), html:lang(ja)) .pg-about .ab-intro h2, :is(html:lang(zh-Hant), html:lang(ja)) .pg-about .blk-head h2, :is(html:lang(zh-Hant), html:lang(ja)) .pg-about .ab-tech h2 { line-height: 1.3; letter-spacing: 0; }
html:lang(ja) .pg-about .ab-intro h2, html:lang(ja) .pg-about .blk-head h2, html:lang(ja) .pg-about .ab-tech h2 { font-size: max(14px, calc((clamp(20px, 3.7vh, 36px) - 15px) * var(--ak, 1))); }
.pg-about .ab-intro h2 br, .pg-about .ab-tech h2 br { display: none; }
.pg-about .ab-intro .desc, .pg-about .blk-head .desc, .pg-about .ab-tech .desc { font-size: calc(clamp(11.5px, 1.65vh, 15px) * var(--ak, 1)); line-height: 1.55; color: #4a5866; margin: 0; }
:is(html:lang(zh-Hant), html:lang(ja)) .pg-about .ab-intro .desc, :is(html:lang(zh-Hant), html:lang(ja)) .pg-about .blk-head .desc, :is(html:lang(zh-Hant), html:lang(ja)) .pg-about .ab-tech .desc { font-size: calc(clamp(12.5px, min(1.1vw, 2vh), 18px) * var(--ak, 1)); line-height: 1.6; }
.pg-about .more { display: flex; justify-content: flex-end; margin-top: 4px; }
.pg-about .ab-tech { border-top: 0; padding-top: 0; margin-top: 0; }
/* the poster quote is one line: its size follows the width it may use (84% of the window), never above the normal poster title size */
@media (min-width: 1025px) {
  .page-about .hero-copy { width: 84vw; }
  .page-about .hero-copy h1, .page-about .hero-copy .lead { text-shadow: 0 0 14px rgba(255, 255, 255, .85), 0 0 4px rgba(255, 255, 255, .7); }
  html:lang(zh-Hant) .page-about .hero-copy h1 { font-size: max(18px, min(clamp(22px, 4.3vh, 40px), calc(84vw / 36.5))); }
  html:lang(ja) .page-about .hero-copy h1 { font-size: max(18px, min(clamp(20px, 3.7vh, 36px), calc(84vw / 49.5))); }
  html:lang(en) .page-about .hero-copy h1 { font-size: max(18px, min(clamp(22px, 4.3vh, 40px), calc(84vw / 58))); }
}
@media (min-width: 1025px) and (max-height: 760px) { .page-about .hero-single .lead { display: block; } }   /* the three points are content here, keep them on low windows */
/* phones: the poster quote and the three titles below share one smaller size, the explanations too */
@media (max-width: 1024px) {
  .page-about .hero-copy h1, .pg-about .ab-intro h2, .pg-about .blk-head h2, .pg-about .ab-tech h2 { font-size: 22px; line-height: 1.35; margin-bottom: 8px; }
  .page-about .hero-copy .lead, .pg-about .ab-intro .desc, .pg-about .blk-head .desc, .pg-about .ab-tech .desc { font-size: 14px !important; line-height: 1.8 !important; }
  .page-about .hero-copy .lead { margin-bottom: 0; }
}
.pg-about .ab-intro .desc .para { display: block; }
.pg-about .ab-intro .desc .para + .para { margin-top: .25em; }
html .pg-about .ab-intro .desc, html .pg-about .blk-head .desc, html .pg-about .ab-tech .desc { max-width: none; }   /* the text runs up to the photo before it wraps */
@media (min-width: 1025px) and (max-height: 700px) { html .pg-about .desc { display: block; } }   /* the explanations are the content of this page, keep them on low windows */
/* About: only the text for now: the two pictures and all link buttons are switched off (markup kept) */
.pg-about .collage, .pg-about .more { display: none; }
@media (min-width: 1025px) {
  .pg-about { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .pg-about .collage { grid-column: auto; grid-row: auto; }
}
/* About: the supplied picture is the background of the text area (certificates on the right); a light veil from the left keeps the text readable */
.pg-about { background: linear-gradient(to bottom, #eef3f6 0%, rgba(238, 243, 246, 0) 34%) 100% 100% / var(--bgw, 0px) var(--bgh, 0px) no-repeat, linear-gradient(to right, #eef3f6 0%, rgba(238, 243, 246, 0) 30%) 100% 100% / var(--bgw, 0px) var(--bgh, 0px) no-repeat, url('../img/m/about-bg.webp') 100% 100% / var(--bgs, cover) no-repeat #eef3f6; }
@media (min-width: 1025px) {
  .pg-about .ab-intro, .pg-about .ab-tech { max-width: var(--abw, calc(55vw - clamp(40px, 6.6vw, 140px))); }   /* the lines wrap as wide as the approach sentence (main.js measures it) */
  /* the approach sentence stays on one line (as wide as it needs, up to the right margin); it wraps only if the window is too narrow */
  html .pg-about .blk-head .desc { width: max-content; max-width: calc(100vw - 2 * clamp(40px, 6.6vw, 140px) - 16px); text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }   /* readable where it passes over the picture */
  .pg-about .desc .ph { display: inline-block; }   /* lines break only after a comma or full stop */
}
@media (max-width: 1024px) {
  .pg-about { background: linear-gradient(rgba(244, 248, 250, .9), rgba(244, 248, 250, .9)), url('../img/m/about-bg.webp') right center / cover no-repeat #eef3f6; }
}
.pg-about.ab-short .ab-tech { display: none; }   /* main.js: only when even the smallest text does not fit one screen */

/* technology page (desktop): a thin vertical line with four dots at the right edge; the dot of the screen in view grows into a numbered circle; they are also buttons */
.t-dots { display: none; }
@media (min-width: 1025px) and (min-height: 600px) {
  .t-dots { --dc: #fff; --df: var(--navy); position: fixed; right: clamp(10px, 1.3vw, 24px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; color: var(--dc); filter: drop-shadow(0 0 2px rgba(5, 20, 32, .55)); transition: color .3s ease; }
  .t-dots.on-light { --dc: var(--navy); --df: #fff; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .7)); }
  .t-dots::before { content: ''; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 1.5px; margin-left: -.75px; background: currentColor; opacity: .7; }
  .t-dots button { position: relative; width: 32px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; }
  .t-dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; transition: width .25s ease, height .25s ease, margin .25s ease; }
  .t-dots button:hover::before, .t-dots button:focus-visible::before { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .t-dots button::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; color: var(--df); opacity: 0; transition: opacity .2s ease; }
  .t-dots button[aria-current="true"]::before { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .t-dots button[aria-current="true"]::after { opacity: 1; }
  .t-dots button:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; border-radius: 50%; }
}

/* technology page (desktop): every explanation text has the size of the third block's (stadium) text; the first block's chart is half as wide */
@media (min-width: 1025px) {
  .pg-tech { --kr1: .8333; --kr5: 1.1364; }   /* third-block size (k 1.25) divided by the own k of the first/second (1.5) and fourth (1.1) block */
  .pg-tech .tb1 .tchart { width: 50%; }
  .pg-tech .tb1 .tchart-wrap .tnote, .pg-tech .tb1 .tnote, .pg-tech .tb3 .tnote { font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k) * var(--kr1)); }
  .pg-tech .tb5 .tnote, .pg-tech .tb5 .t5-ex { font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k) * var(--kr5)); }
}
@media (min-width: 1025px) and (max-width: 1300px) { .pg-tech { --kr1: .88; --kr5: 1.0784; } }
@media (min-width: 1025px) and (max-width: 1150px) { .pg-tech { --kr1: 1; --kr5: 1; } }

/* English only for now: no language menu (see ENGLISH_ONLY in src/layout.html) */
.en-only .lang-wrap { display: none; }
/* About, English: the texts are longer, so they stay on the left 55% (the certificates stay readable) instead of following the one-line approach sentence; one-line titles */
@media (min-width: 1025px) {
  html:lang(en) .pg-about .blk-head .desc { width: auto; max-width: calc(55vw - clamp(40px, 6.6vw, 140px)); text-shadow: none; }
}
.pg-about .blk-head h2 br { display: none; }

/* company name next to the logo: bolder */
.brand .co { font-weight: 600; }

@media (min-width: 1025px) and (max-height: 700px) { .ap-text { padding-top: 15vh; } }   /* low windows: less room for the lower text block */
/* About poster, English: the quote has the same size as the title of the other posters and wraps (it was shrunk to stay on one line) */
@media (min-width: 1025px) {
  html:lang(en) .page-about .hero-copy { width: min(900px, 66%); }   /* the (shorter) quote takes two lines here */
  html:lang(en) .page-about .hero-copy h1 { font-size: clamp(22px, 4.3vh, 40px); line-height: 1.2; }
}

/* product pages: "Next" at the right end of the text block leads to the next product page (raw material -> film layer -> applications) */
.pd-title { z-index: 6; }   /* above the product picture, whose faded edge reaches under the text, so the Next link can be clicked */
.pd-title .pd-next { display: flex; width: fit-content; margin: 1.6cqw 0 0 auto; font-size: max(11px, 1.2cqw); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .45em; }   /* no arrow: the word is underlined */
@media (max-width: 1024px) { .pd-title .pd-next { margin-top: 14px; font-size: 12px; } }

.pd-title .pd-spec { box-sizing: border-box; }

/* technology page (desktop): every heading has the size of the third block's heading ("An invisible number is a mountain you can see."); the explanation texts already follow its size (--kr1 / --kr5 above) */
@media (min-width: 1025px) {
  html[lang] .pg-tech { --hs: min(calc(clamp(18px, 3.1vh, 28px) + 20px), calc((100vw - clamp(40px, 6.6vw, 140px) - (clamp(240px, 17vw, 340px) * .81 + clamp(48px, 9vw, 170px) + 30px)) / 29.5)); }
  html[lang] .pg-tech .tb1 .blk-head .desc, html[lang] .pg-tech .tb3 .t-h2, html[lang] .pg-tech .tb4 .t-h2, html[lang] .pg-tech .tb5 .t-h2 { font-size: var(--hs); }
}
@media (min-width: 1025px) {
  html[lang] .pg-tech .tb1 .tnote, html[lang] .pg-tech .tb1 .tchart-wrap .tnote, html[lang] .pg-tech .tb3 .tnote, html[lang] .pg-tech .tb5 .tnote, html[lang] .pg-tech .tb5 .t5-ex, html[lang] .pg-tech .tb4 .t4-calc { font-size: var(--ns, calc(clamp(12.5px, 1.04vw, 18px) * var(--k) * var(--kr1))); }   /* --ns: main.js sets it to the explanation size of the third block */
}
@media (min-width: 1025px) { html[lang] .pg-tech .tb4 .t4-calc { font-size: calc(clamp(12.5px, 1.04vw, 18px) * var(--k)); } html[lang] .pg-tech .tb4 .t4-calc { font-size: var(--ns, calc(clamp(12.5px, 1.04vw, 18px) * var(--k))); } }
/* technology page (desktop): the texts of the charts and of the photo panel have the size of the explanation texts (--ns, set by main.js); the boxes keep the size they had with the old text sizes (main.js measures them with .t-base and fixes their height) */
@media (min-width: 1025px) {
  html[lang] .pg-tech:not(.t-base) :is(.tchart h3, .tchart .tr, .tchart .lb, .tchart .bar b, .t4-title, .t4-list span, .t5-rt, .t5-seg b, .t5-seg i, .t5-recn, .t5-lead .from, .t5-legend) { font-size: var(--ns, 14px); }
  .pg-tech .t4-panel, .pg-tech .t5-chart { box-sizing: border-box; }
}
/* waste-photo panel (desktop): when the panel is taller than its content, the free height is shared evenly above the title, between title and photos and under the photos */
@media (min-width: 1025px) {
  .pg-tech .t4-panel { display: flex; flex-direction: column; }
  .pg-tech .t4-title { margin-top: auto; margin-bottom: auto; }
  .pg-tech .t4-list { margin-top: clamp(8px, 1.4vh, 14px); margin-bottom: auto; }
}
/* zero-waste chart (desktop): when the chart is taller than its content, the free height is shared evenly above, between and under the three bars */
@media (min-width: 1025px) {
  .pg-tech .tb5 .t5-chart { align-items: stretch; }
  .pg-tech .tb5 .t5-rows { align-content: space-evenly; }
}
@media (min-width: 1025px) { .pg-tech:not(.t-base) .tb5 .t5-rows > .t5-row:last-child { margin-top: 0; } }   /* the box height is measured with .t-base (main.js), so it stays as it was */

/* contact page (desktop): the copyright stays on one line and the version is the second line under it (never three lines); main.js makes the info text smaller until everything fits the strip */
@media (min-width: 1025px) and (min-height: 600px) {
  .page-contact .foot-copy { white-space: nowrap; flex: none; min-width: 0; line-height: 1.3; text-align: right; }
  .page-contact .val { flex: none; }
  .page-contact .val p { white-space: nowrap; }
  .page-contact .foot-copy .ver { display: block; margin: 0; }
}
@media (min-width: 1025px) and (min-height: 600px) {
  .page-contact .values-in.tight .val { gap: 5px; }
  .page-contact .values-in.tight .val + .val { margin-left: 4px; }
  .page-contact .values-in.tight .ring, .page-contact .values-in.tight .ring svg { width: 17px; height: 17px; }
  .page-contact .values-in.tight .foot-copy { padding-left: 8px; }
}
@media (min-width: 1025px) and (min-height: 600px) { .page-contact .foot-copy.one-line .ver { display: inline; margin-left: 8px; } }

/* ================= phone (portrait) revisions ================= */
/* company name next to the logo: ESG as large as the two small lines beside it */
.brand .co-m { display: none; }
@media (max-width: 860px) {
  .brand .co-m { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .brand .co-m b { font-size: 27px; line-height: 1; font-weight: 600; letter-spacing: .02em; color: #1b3a4e; }
  .brand .co-m span { font-size: 10.5px; line-height: 1.2; color: #3b4a58; white-space: nowrap; }
}
@media (max-width: 1024px) {
  /* home: the four cards one under the other, each picture as wide as the screen, all cards alike */
  .pg-vals { padding-left: 0; padding-right: 0; }
  .pg-vals .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pg-vals .pcard { border-left: 0; border-right: 0; }
  .pg-vals .pcard .ph { flex: none; aspect-ratio: 16 / 9; }
  .pg-vals .pcard .tx { padding: 14px 24px 16px; }
  .pg-vals .pcard h3 { font-size: 18px; }
  .pg-vals .pcard p { font-size: 14px; line-height: 1.55; margin-top: 4px; }
  .pg-vals .pcard .ph img { object-position: 50% 40%; }
  .pg-vals .pcard:nth-child(n) .ph img { object-position: 50% 40%; }

  /* apps: the four part buttons, centred, more visible; no "show all" button */
  .ap-side { justify-content: center; }
  .fk-all, .fk-all[hidden] { display: none !important; }
  .fk-parts button { border: 1.5px solid var(--green); border-radius: 999px; background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 2px 8px rgba(20, 60, 70, .12); }
  .fk-parts button.on { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 3px 10px rgba(20, 120, 100, .35); }
  .fk-parts.has-sel button:not(.on) { opacity: 1; background: #fff; color: var(--navy); }
  .fk-d { text-align: left; }

  /* apps (furniture / backpacks): no leader lines; the four detail pictures are big and move away from the product: the upper two up, the lower two down */
  .ap[data-cat="1"] .fk-stage, .ap[data-cat="2"] .fk-stage { aspect-ratio: 1 / 1.15; }
  .cat-img.bag-box { aspect-ratio: auto !important; left: 0; top: 0; width: 100%; height: 100%; transform: none; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto 1fr; align-items: center; justify-items: center; gap: 2cqw; padding: 1cqw 2cqw; box-sizing: border-box; }
  .cat-img.bag-box .bg-ln { display: none; }
  .cat-img.bag-box img { position: static !important; left: auto !important; top: auto !important; height: auto; }
  .cat-img.bag-box .bg-t { width: 45cqw !important; height: 35cqw; object-fit: cover; }
  .cat-img.bag-box .bg-t:nth-of-type(2) { grid-area: 1 / 1; }   /* the body is the first picture: t1 upper left, t3 upper right, t2 lower left, t4 lower right */
  .cat-img.bag-box .bg-t:nth-of-type(4) { grid-area: 1 / 2; }
  .cat-img.bag-box .bg-t:nth-of-type(3) { grid-area: 3 / 1; }
  .cat-img.bag-box .bg-t:nth-of-type(5) { grid-area: 3 / 2; }
  .cat-img.bag-box .bg-body { grid-area: 2 / 1 / 3 / 3; width: 62cqw !important; }
  .cat-img.bag-box[data-cat="2"] .bg-body { grid-area: 2 / 1; width: 34cqw !important; justify-self: end; }
  .cat-img.bag-box[data-cat="2"] .bg-parts { grid-area: 2 / 2; width: 48cqw !important; justify-self: start; }

  /* technology: every module as wide as the screen, no white strips between them */
  .pg-tech { padding-top: 0; padding-bottom: 0; row-gap: 0; }
  .pg-tech .tb1 { margin-left: -24px; margin-right: -24px; padding: 26px 24px; }
  .pg-tech > .tb1, .pg-tech > .tb3, .pg-tech > .tb4, .pg-tech > .tb5 { margin-top: 0; margin-bottom: 0; }
  /* technology: the caption of the recycled part hangs on a leader line from its dot; the arrow stays clear of it */
  .t5-dot { display: block; }
  .t5-seg.rec .t5-fill { position: relative; }
  .t5-lead { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 28px; margin: 0 0 0 -1.25px; background: var(--navy); }
  .t5-lead .from { position: absolute; left: auto; right: calc((100vw - 96px) * -.05); top: 100%; transform: none; margin: 2px 0 0; text-align: right; white-space: nowrap; }
  .t5-rows > .t5-row:nth-of-type(2) { margin-bottom: 30px; }
  .t5-row:last-child { padding-bottom: 34px; }

  /* contact: no poster, the form comes first; a line between every info (phone and fax too) */
  .page-contact .hero-single { display: none; }
}
@media (max-width: 860px) {
  .val:nth-child(3)::before { display: block; }
}
@media (max-width: 380px) {
  .brand .co-m b { font-size: 22px; }
  .brand .co-m span { font-size: 9px; }
  .brand { gap: 8px; }
}
@media (max-width: 340px) {
  .brand .co-m b { font-size: 19px; }
  .brand .co-m span { font-size: 8px; }
}

/* technology page: the four headings have one size (phone 19px, desktop --hs) and are all bold */
html[lang] .pg-tech .tb1 .blk-head .desc, html[lang] .pg-tech .tb3 .t-h2, html[lang] .pg-tech .tb4 .t-h2, html[lang] .pg-tech .tb5 .t-h2 { font-weight: 700; }
@media (max-width: 1024px) {
  html[lang] .pg-tech .tb1 .blk-head .desc, html[lang] .pg-tech .tb3 .t-h2, html[lang] .pg-tech .tb4 .t-h2, html[lang] .pg-tech .tb5 .t-h2 { font-size: 19px; line-height: 1.4; }
}
@media (max-width: 1024px) {
  .pg-contact > .blk-head h2 br { display: none; }
  .pg-contact > .blk-head h2 { white-space: nowrap; font-size: min(28px, calc((100vw - 48px) / 13.4)); }   /* "Tell Us What You Need" on one line */
}

/* phone header: "ESG" is as high as the logo (capital height = logo height), the two small lines are bold and larger; everything follows the screen width so it fits beside the search and menu buttons */
@media (max-width: 860px) {
  .site-header .brand { --lg: min(34px, calc((100vw - 150px) / 8.4)); gap: 8px; }
  .site-header .brand .logo { height: var(--lg); }
  .site-header .brand .co-m { gap: 6px; }
  .site-header .brand .co-m b { font-size: calc(var(--lg) / .72); line-height: 1; font-weight: 700; }
  .site-header .brand .co-m span { font-size: calc(var(--lg) * .38); line-height: 1.15; font-weight: 700; }
}

/* phone: the Home and About posters have one height, 20% lower than the Home poster was (520px) */
@media (max-width: 1024px) {
  .hero, .page-about .hero-single { height: 416px; }
}

/* phone header: the "ESG" letters 20% smaller than the logo height */
@media (max-width: 860px) {
  .site-header .brand .co-m b { font-size: calc(var(--lg) / .72 * .8); }
}
/* narrow phones: the lower poster leaves less room, so the gaps between the poster texts are smaller (the button stays clear of the pager) */
@media (max-width: 400px) {
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .slide h1 { margin-bottom: 18px; }
  .hero .slide .lead { margin-bottom: 24px; }
}
@media (max-width: 340px) { .hero .hero-cta { font-size: 10.5px; letter-spacing: .06em; padding-left: 14px; padding-right: 14px; white-space: nowrap; } }
@media (max-width: 340px) { .hero .slide h1 { margin-bottom: 12px; } .hero .slide .lead { margin-bottom: 14px; } }
/* phone header: the "ESG" letters another 10% smaller (only these three letters) */
@media (max-width: 860px) {
  .site-header .brand .co-m b { font-size: calc(var(--lg) / .72 * .72); }
}

/* phone menu: the list of the product types stays where it is when one of its links is touched (the desktop dropdown shift translate(-50%) must not apply) */
@media (max-width: 860px) {
  .nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub.open .sub { transform: none; }
}

/* phone menu: no touch effect on the "Products" label (no highlight flash, no focus ring, no text selection) */
@media (max-width: 860px) {
  .nav .has-sub > a { -webkit-tap-highlight-color: transparent; outline: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* apps: sideways swipes change the category, up/down still scrolls */
.ap { touch-action: pan-y; }