/* Inner pages: friction1 section patterns on the home design system.
   Square cards, navy + orange, 92% container (page-home tokens), dark photo hero under the transparent header. */

.sec-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); color: var(--ink); }
.sec-title em, .stm-text em, .ph2-title em, .ms-title em, .gp-title em, .icta-text em, .kf-title em, .orbit-title em { font-style: normal; color: var(--accent); }
.sec-dark .sec-title { color: var(--white); }
.ey-light { color: rgb(var(--c-white) / .86); }

/* ---------- Page hero ---------- */
.ph2 { position: relative; isolation: isolate; min-height: clamp(460px, 62vh, 620px); display: flex; align-items: flex-end; color: var(--white); overflow: hidden; background: var(--navy); }
.ph2-tall { min-height: clamp(540px, 82vh, 760px); }
.ph2-bg { position: absolute; inset: 0; z-index: -2; }
.ph2-bg img { width: 100%; height: 100%; object-fit: cover; }
.ph2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgb(var(--c-scrim) / .86) 0%, rgb(var(--c-scrim) / .45) 45%, rgb(var(--c-scrim) / .35) 75%, rgb(var(--c-scrim) / .55) 100%),
              linear-gradient(90deg, rgb(var(--c-scrim) / .55), rgb(var(--c-scrim) / 0) 60%); }
.ph2-inner { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-40); align-items: end; padding-top: 140px; padding-bottom: clamp(36px, 5vh, 56px); }
.ph2 .crumbs, .ph2 .crumbs a { color: rgb(var(--c-white) / .65); font-size: var(--fs-xs); }
.ph2 .crumbs a:hover { color: var(--white); }
.ph2 .crumbs { margin-bottom: var(--sp-20); }
.ph2-title { margin-top: var(--sp-16); font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-none); letter-spacing: var(--tracking-tighter); max-width: 20ch; color: var(--white); }
.ph2-sub { margin-top: var(--sp-16); max-width: 54ch; font-size: var(--fs-lead); line-height: var(--lh-normal); color: rgb(var(--c-white) / .86); }
.ph2-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-top: var(--sp-28); }
.ph2-side { width: 250px; display: flex; flex-direction: column; background: rgb(var(--c-white) / .1); border: 1px solid rgb(var(--c-white) / .2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--white); transition: background-color .3s; }
.ph2-side:hover { background: rgb(var(--c-white) / .14); }
.ph2-side-t { padding: var(--sp-12) var(--sp-14) 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ph2-side-img { margin: var(--sp-10) var(--sp-14); height: 110px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.ph2-side-img img { max-width: 80%; max-height: 92px; object-fit: contain; }
.ph2-side-b { display: flex; align-items: center; gap: var(--sp-10); padding: 0 var(--sp-14) var(--sp-14); font-size: var(--fs-xs); }
.ph2-side-b i { width: 30px; height: 30px; display: grid; place-items: center; background: var(--accent-strong); color: var(--white); font-size: var(--fs-sm); }
@media (max-width: 860px) { .ph2-inner { grid-template-columns: 1fr; } .ph2-side { display: none; } }

/* ---------- Statement (text-info) ---------- */
.stm-text { margin-top: var(--sp-16); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--ink); max-width: 44ch; }
.stm-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.stm-right { padding-left: var(--sp-24); border-left: var(--border-accent); }
.stm-right p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.stm-right p + p { margin-top: var(--sp-12); }
.who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-10); }
.who-list li, .pabout-chips li { display: flex; gap: var(--sp-10); align-items: center; font-size: var(--fs-md); color: var(--ink-2); }
.who-list i, .pabout-chips i { color: var(--accent); }
@media (max-width: 900px) { .stm-split { grid-template-columns: 1fr; } }

/* ---------- Mission and vision (About): two statement panels, light and dark ---------- */
.mv-grid { margin-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
.mv-card { display: flex; flex-direction: column; gap: var(--sp-16); padding: clamp(28px, 3.4vw, 52px); background: var(--surface); border: var(--border); }
.mv-k { display: inline-flex; align-items: center; gap: var(--sp-10); font: var(--fw-semibold) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-strong); }
.mv-k i { font-size: var(--fs-xl); }
.mv-text { font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--ink); }
.mv-text em { font-style: normal; color: var(--accent); }
.mv-sub { margin-top: auto; padding-top: var(--sp-16); border-top: var(--border); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.mv-dark { background: var(--navy); border-color: var(--navy); }
.mv-dark .mv-k { color: var(--accent); }
.mv-dark .mv-text { color: var(--white); }
.mv-dark .mv-sub { color: rgb(var(--c-white) / .65); border-color: rgb(var(--c-white) / .14); }
/* orange panel (mission): white text; the highlighted phrase goes pale peach so it still stands out on orange */
.mv-accent { background: var(--accent-strong); border-color: var(--accent-strong); }
.mv-accent .mv-k { color: var(--white); }
.mv-accent .mv-text { color: var(--white); }
.mv-accent .mv-text em { color: var(--orange-200); }
/* industrial scene along the bottom of the mission panel: faint skyline behind, a saw-tooth hall, a robot arm working a
   conveyor, a warehouse and gears in front (front shapes are filled with the panel colour so they hide the skyline).
   Draws in when the panel appears; on hover the line work brightens and the plant comes alive. */
.mv-scene { display: block; width: 100%; height: auto; margin-top: auto; padding-top: var(--sp-20); overflow: visible; color: rgb(var(--c-white) / .55); transition: color .5s var(--ease); }
.mv-accent:hover .mv-scene { color: rgb(var(--c-white) / .95); }
.mv-scene :is(rect, circle, line, polyline, polygon, path) { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mv-scene .solid { fill: var(--accent-strong); }
.mv-scene .far { stroke-opacity: .45; }
.mv-scene [class*="fx-"] { transform-box: fill-box; transform-origin: center; animation-play-state: paused; animation-iteration-count: infinite; }
.mv-scene .fx-arm { transform-box: view-box; transform-origin: 320px 129px; animation: mv-arm 3s ease-in-out infinite paused; }
.mv-scene .fx-fore { transform-box: view-box; transform-origin: 352px 94px; animation: mv-fore 3s ease-in-out infinite paused; }
.mv-scene .fx-grip { transform-origin: 50% 0; animation: mv-grip 1.5s ease-in-out infinite paused; }
.mv-scene .fx-grip-r { animation-name: mv-grip-r; }
.mv-scene .fx-ride { animation: mv-ride 2.6s linear infinite paused; animation-delay: calc(var(--d) * -1); }
.mv-scene .fx-flow { stroke-dasharray: 6 6; animation: mv-flow .6s linear infinite paused; }
.mv-scene .fx-smoke { animation: mv-smoke 2.6s ease-out infinite paused; animation-delay: var(--s); }
.mv-scene .fx-win { animation: mv-win 2s steps(2, jump-none) infinite paused; animation-delay: var(--w); }
.mv-scene .fx-gear { animation: mv-turn 4s linear infinite paused; }
.mv-scene .fx-gear-r { animation-name: mv-turn-r; animation-duration: 2.8s; }
.mv-accent:hover .mv-scene [class*="fx-"] { animation-play-state: running; }
@keyframes mv-arm { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes mv-fore { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-14deg); } }
@keyframes mv-grip { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
@keyframes mv-grip-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes mv-ride { from { transform: translateX(0); } to { transform: translateX(38px); } }
@keyframes mv-flow { to { stroke-dashoffset: -24; } }
@keyframes mv-smoke { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-16px) scale(1.5); opacity: 0; } }
@keyframes mv-win { 0%, 100% { fill: var(--accent-strong); } 50% { fill: rgb(var(--c-white) / .45); } }
@keyframes mv-turn { to { transform: rotate(360deg); } }
@keyframes mv-turn-r { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js .mv-scene > g { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .7s var(--ease); transition-delay: calc(.35s + var(--i) * .12s); }
  .js .mv-grid.in .mv-scene > g { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mv-scene [class*="fx-"] { animation: none; } }
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }

/* ---------- Core values (About): bento grid, each tile = text on top, photo filling the rest ---------- */
.vb-grid {
  margin-top: clamp(28px, 3vw, 40px); display: grid; gap: var(--sp-16);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: clamp(400px, 32vw, 500px) clamp(380px, 30vw, 440px);
  grid-template-areas: "q q q c c c" "i i g g s s";
}
.vb-q { grid-area: q; } .vb-c { grid-area: c; } .vb-i { grid-area: i; } .vb-g { grid-area: g; } .vb-s { grid-area: s; }
.vb { display: flex; flex-direction: column; gap: var(--sp-20); padding: clamp(20px, 2vw, 28px); background: var(--surface); border: var(--border); min-height: 0; transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.vb-txt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--sp-14); row-gap: var(--sp-10); }
.vb-ic { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-2xl); }
.vb-txt h3 { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); }
.vb-txt p { grid-column: 1 / -1; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); max-width: 52ch; }
.vb-img { flex: 1; min-height: 120px; overflow: hidden; background: var(--surface-2); }
.vb-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* every tile: on hover it turns brand orange (photo stays still) and the text flips to white */
.vb-txt h3, .vb-txt p, .vb-ic { transition: color .35s var(--ease), background-color .35s var(--ease); }
.vb:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.vb:hover h3 { color: var(--white); }
.vb:hover p { color: rgb(var(--c-white) / .86); }
.vb:hover .vb-ic { background: rgb(var(--c-white) / .14); color: var(--white); }
.vb-dark { background: var(--navy); border-color: var(--navy); }
.vb-dark .vb-ic { background: var(--accent-strong); color: var(--white); }
.vb-dark h3 { color: var(--white); }
.vb-dark h3, .vb-orange h3 { font-size: var(--fs-h3); }
.vb-dark p { color: rgb(var(--c-white) / .75); }
.vb-dark p, .vb-orange p { font-size: var(--fs-base); }
/* orange tile (customer focus): the reverse of the others - orange at rest, navy on hover */
.vb-orange { background: var(--accent-strong); border-color: var(--accent-strong); }
.vb-orange h3 { color: var(--white); }
.vb-orange p { color: rgb(var(--c-white) / .86); }
.vb-orange .vb-ic { background: rgb(var(--c-white) / .14); color: var(--white); }
.vb.vb-orange:hover { background: var(--navy); border-color: var(--navy); }
.vb.vb-orange:hover p { color: rgb(var(--c-white) / .75); }
.vb.vb-orange:hover .vb-ic { background: var(--accent-strong); color: var(--white); }
@media (max-width: 960px) {
  .vb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-template-areas: "q q" "c i" "c g" "s s"; }
  .vb-img { min-height: 200px; }
  .vb-q .vb-img, .vb-s .vb-img { aspect-ratio: 16 / 8; }
}
@media (max-width: 600px) {
  .vb-grid { grid-template-columns: 1fr; grid-template-areas: "q" "c" "i" "g" "s"; }
  .vb-img, .vb-q .vb-img, .vb-s .vb-img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---------- Alternating rows ---------- */
.alt-list { display: grid; gap: var(--sp-16); }
.alt-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--surface); border: var(--border); min-height: 280px; }
.alt-row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.alt-row.flip .alt-img { order: 2; }
.alt-img { overflow: hidden; background: var(--surface-2); }
.alt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.alt-row:hover .alt-img img { transform: scale(1.04); }
.alt-body { padding: clamp(24px, 3.4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-12); }
.alt-ic { width: 46px; height: 46px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-2xl); }
.alt-body h3 { font-size: var(--fs-h4); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tight); }
.alt-body p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); max-width: 52ch; }
@media (max-width: 760px) { .alt-row, .alt-row.flip { grid-template-columns: 1fr; } .alt-row.flip .alt-img { order: 0; } .alt-img { aspect-ratio: 16/10; } }

/* ---------- Key facts band ---------- */
.kf { position: relative; isolation: isolate; overflow: hidden; color: var(--white); padding-block: var(--section-y-feature); }
.kf-bg { position: absolute; inset: -12% 0; z-index: -2; }
.kf-bg img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0); }
.kf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgb(var(--c-accent-strong) / .95) 0%, rgb(var(--c-accent-strong) / .75) 38%, rgb(var(--c-navy) / .86) 100%); }
.kf-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 20ch; color: var(--white); }
.kf-title em { color: var(--white); }
.kf-links { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.kf-link { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding: var(--sp-20) var(--sp-20); background: rgb(var(--c-scrim) / .55); border: 1px solid rgb(var(--c-white) / .2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--fs-md); font-weight: var(--fw-medium); transition: background-color .3s; }
.kf-link:hover { background: rgb(var(--c-scrim) / .75); }
.kf-arr { width: 36px; height: 36px; display: grid; place-items: center; background: var(--white); color: var(--navy); font-style: normal; font-size: var(--fs-base); transition: background-color .3s, color .3s; }
.kf-link:hover .kf-arr { background: var(--accent-strong); color: var(--white); }
@media (max-width: 760px) { .kf-links { grid-template-columns: 1fr; } }

/* ---------- Media split ---------- */
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--surface); border: var(--border); }
.ms-dark .ms-grid { background: rgb(var(--c-white) / .04); border-color: rgb(var(--c-white) / .1); }
.ms-grid.flip .ms-img { order: 2; }
/* light version: no full-width box, just photo and text inside the container */
.ms:not(.ms-dark) .ms-grid { background: none; border: 0; }
.ms:not(.ms-dark) .ms-body { padding-right: 0; }
.ms-img { min-height: 380px; overflow: hidden; }
.ms-img img { width: 100%; height: 100%; object-fit: cover; }
.ms-body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-16); }
.ms-title { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.ms-body p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.ms-body .f-btn { align-self: flex-start; margin-top: var(--sp-8); }
@media (max-width: 860px) { .ms-grid { grid-template-columns: 1fr; } .ms-grid.flip .ms-img { order: 0; } .ms-img { min-height: 0; aspect-ratio: 16/10; } }

/* ---------- Timeline ---------- */
.tl-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.tl-head { position: sticky; top: calc(var(--header-h) + 32px); }
.tl-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.tl-head p { margin-top: var(--sp-14); color: var(--muted); font-size: var(--fs-md); max-width: 34ch; }
.tl-list { list-style: none; margin: 0; padding: 0 0 0 var(--sp-32); border-left: 2px solid var(--line); display: grid; gap: var(--sp-40); }
.tl-step { position: relative; }
.tl-step::before { content: ""; position: absolute; left: -39px; top: 8px; width: 12px; height: 12px; background: var(--accent); }
.tl-img { aspect-ratio: 16 / 8; overflow: hidden; }
.tl-img img { width: 100%; height: 100%; object-fit: cover; }
.tl-step h3 { margin-top: var(--sp-16); display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-xl); font-weight: var(--fw-strong); }
.tl-n { width: 32px; height: 32px; display: grid; place-items: center; background: var(--navy); color: var(--white); font: var(--fw-semibold) var(--fs-sm)/var(--lh-none) var(--font-mono); }
.tl-step p { margin-top: var(--sp-8); color: var(--muted); font-size: var(--fs-md); max-width: 60ch; }
@media (max-width: 900px) { .tl-grid { grid-template-columns: 1fr; } .tl-head { position: static; } }

/* ---------- Certified chips band ---------- */

/* ---------- Certificate list (scrolls) with a fixed preview beside it ---------- */
.cl-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cl-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); }
.cl-list { list-style: none; margin: var(--sp-28) 0 0; padding: 0; border-top: var(--border); }
.cl-item { display: flex; gap: var(--sp-16); padding: var(--sp-24) var(--sp-14); border-bottom: var(--border); transition: background-color .3s; }
.cl-item.on { background: var(--surface); }
.cl-n { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; background: var(--navy); color: var(--white); font: var(--fw-semibold) var(--fs-xs)/var(--lh-none) var(--font-mono); transition: background-color .25s; }
.cl-item.on .cl-n { background: var(--accent-strong); }
.cl-body { flex: 1; min-width: 0; }
.cl-code { font: var(--fw-semibold) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-strong); }
.cl-body h3 { margin-top: var(--sp-8); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cl-body p { margin-top: var(--sp-6); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--muted); max-width: 60ch; }
.cl-acts { margin-top: var(--sp-14); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); }
.cl-act { display: inline-flex; align-items: center; gap: var(--sp-6); padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--ink); cursor: pointer; transition: color .2s; }
.cl-act i { font-size: var(--fs-base); color: var(--accent-strong); }
.cl-act:hover, .cl-act:focus-visible { color: var(--accent-strong); }
.cl-side { position: sticky; top: calc(var(--header-h) + 24px); }
.cl-preview { margin: 0; background: var(--white); border: var(--border); padding: var(--sp-14); box-shadow: var(--shadow-lg); }
.cl-zoom { position: relative; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: var(--white); cursor: zoom-in; }
.cl-zoom img { width: 100%; height: min(calc(100dvh - var(--header-h) - 150px), 760px); object-fit: contain; transition: opacity .25s; }
.cl-zoom img.swap { opacity: 0; }
.cl-zoom-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-8) var(--sp-12); background: rgb(var(--c-navy) / .86); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-strong); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.cl-zoom:hover .cl-zoom-hint, .cl-zoom:focus-visible .cl-zoom-hint { opacity: 1; transform: none; }
.cl-preview figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-16); padding-top: var(--sp-12); margin-top: var(--sp-12); border-top: var(--border); font-size: var(--fs-sm); color: var(--muted); }
.cl-cap { color: var(--ink); font-weight: var(--fw-strong); }
.cl-count { font: var(--fw-medium) var(--fs-xs)/var(--lh-none) var(--font-mono); white-space: nowrap; }
.cl-count b { color: var(--accent-strong); font-weight: var(--fw-semibold); }
@media (hover: none) { .cl-zoom-hint { opacity: 1; transform: none; } }
/* phones and tablets: no side panel; each certificate opens full screen from its own button */
@media (max-width: 900px) { .cl-grid { grid-template-columns: 1fr; } .cl-side { display: none; } .cl-item { padding-inline: var(--sp-4); } }

/* ---------- Global presence ---------- */
.gp-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: end; }
.gp-head .stats-eyebrow { grid-column: 1; }
.gp-title { grid-column: 1; margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.gp-lead { grid-column: 2; grid-row: 2; padding-left: var(--sp-24); border-left: var(--border-accent); color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.gp-map { margin-top: clamp(32px, 4vw, 56px); padding: clamp(20px, 3vw, 40px); background: var(--navy); }
.gp-map-in { position: relative; max-width: 1100px; margin: 0 auto; }
.gp-map img { width: 100%; filter: invert(1) brightness(.75); opacity: .55; }
.gp-map .pm-pin span { background: var(--white); }
/* Export routes: once the map is revealed, arcs draw out from Dhaka one after another, each destination pops in
   as its line arrives, then small lights keep travelling along the routes */
.gp-origin { z-index: 2; }
.gp-origin span { right: auto; left: 50%; top: calc(100% + 10px); translate: -50% 0; }
.gp-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gp-route path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: .8; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gp-pk { fill: var(--white); filter: drop-shadow(0 0 4px rgb(var(--c-peach) / .95)); }
.gp-dests { position: absolute; inset: 0; pointer-events: none; }
.gp-dest { position: absolute; translate: -50% -50%; width: 9px; height: 9px; }
.gp-dest i { position: absolute; inset: 0; border-radius: var(--radius-pill); background: var(--white); box-shadow: 0 0 0 3px rgb(var(--c-accent) / .45); }
.gp-dest i::after { content: ""; position: absolute; inset: -5px; border-radius: var(--radius-pill); border: 1.5px solid var(--accent); animation: pin-pulse 2.6s var(--ease) infinite; animation-delay: calc(var(--i) * .3s); }
.gp-dest b { position: absolute; white-space: nowrap; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); color: var(--white); text-shadow: 0 1px 6px rgb(var(--c-scrim) / .75); }
.gp-dl b { right: calc(100% + 9px); top: 50%; translate: 0 -50%; }
.gp-dr b { left: calc(100% + 9px); top: 50%; translate: 0 -50%; }
.gp-dt b { bottom: calc(100% + 8px); left: 50%; translate: -50% 0; }
.gp-db b { top: calc(100% + 8px); left: 50%; translate: -50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .gp-route path { stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease) calc(.6s + var(--i) * .25s); }
  .js .gp-map.in .gp-route path { stroke-dashoffset: 0; }
  .js .gp-pk { opacity: 0; transition: opacity .5s ease calc(2.4s + var(--i) * .25s); }
  .js .gp-map.in .gp-pk { opacity: 1; }
  .js .gp-dest { opacity: 0; scale: .3; transition: opacity .35s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.9s + var(--i) * .25s); }
  .js .gp-map.in .gp-dest { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .gp-pk { display: none; } .gp-dest i::after { animation: none; } }
@media (max-width: 600px) { .gp-dest b { display: none; } .gp-route path { stroke-width: 3; } }
@media (max-width: 900px) { .gp-head { grid-template-columns: 1fr; } .gp-lead { grid-column: 1; grid-row: auto; margin-top: var(--sp-16); } }

/* ---------- Image call to action ---------- */
.icta { position: relative; isolation: isolate; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; color: var(--white); }
.icta-bg { position: absolute; inset: 0; z-index: -2; }
.icta-bg img { width: 100%; height: 100%; object-fit: cover; }
.icta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(var(--c-scrim) / .95), rgb(var(--c-scrim) / .28) 70%); }
.icta-in { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-20); padding-block: var(--sp-32); }
.icta-text { font-size: var(--fs-h3); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tight); max-width: 36ch; }

/* ---------- Product page ---------- */
.pabout-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pabout-card { position: relative; aspect-ratio: 1 / .9; display: grid; place-items: center; background: linear-gradient(180deg, var(--graphite-900) 0%, var(--graphite-700) 60%, var(--graphite-850) 100%); }
.pabout-card img { max-width: 64%; max-height: 70%; object-fit: contain; filter: drop-shadow(0 18px 22px rgb(var(--c-black) / .35)); }
.pabout-tag { position: absolute; left: 16px; top: 16px; padding: var(--sp-6) var(--sp-12); background: var(--accent-strong); color: var(--white); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pabout-body p { margin-top: var(--sp-14); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.pabout-chips { list-style: none; margin: var(--sp-20) 0 0; padding: var(--sp-16) 0 0; border-top: var(--border); display: grid; gap: var(--sp-10); }
@media (max-width: 900px) { .pabout-grid { grid-template-columns: 1fr; } }
.feat-grid { margin-top: var(--sp-32); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
.feat-grid.feat-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feat { position: relative; padding: var(--sp-24); background: var(--surface); border: var(--border); display: flex; flex-direction: column; gap: var(--sp-10); min-height: 200px; }
.feat-n { font: var(--fw-semibold) var(--fs-xs)/var(--lh-none) var(--font-mono); color: var(--accent-strong); }
.feat-ic { width: 44px; height: 44px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xl); }
.feat h3 { font-size: var(--fs-lg); font-weight: var(--fw-strong); letter-spacing: var(--tracking-snug); }
.feat p { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--muted); }
@media (max-width: 1000px) { .feat-grid, .feat-grid.feat-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat-grid, .feat-grid.feat-3 { grid-template-columns: 1fr; } }
.spec-row { margin-top: var(--sp-32); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
.spec2 { padding: var(--sp-20); background: var(--surface); border: var(--border); }
.spec2 span { font-size: var(--fs-xs); color: var(--muted); }
.spec2 b { display: block; margin-top: var(--sp-8); font-size: var(--fs-lg); font-weight: var(--fw-strong); }
@media (max-width: 900px) { .spec-row { grid-template-columns: 1fr 1fr; } }
.pcert-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pcert-lead { margin-top: var(--sp-14); color: rgb(var(--c-white) / .75); max-width: 52ch; }
.pcert-list { list-style: none; margin: var(--sp-24) 0 0; padding: 0; border-top: 1px solid rgb(var(--c-white) / .14); }
.pcert-list li { display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-12) 0; border-bottom: 1px solid rgb(var(--c-white) / .14); }
.pcert-list i { color: var(--accent); font-size: var(--fs-xl); }
.pcert-list b { display: block; color: var(--white); font-weight: var(--fw-semibold); }
.pcert-list small { color: rgb(var(--c-white) / .65); font-size: var(--fs-xs); }
.pcert-img { display: block; background: var(--white); padding: var(--sp-12); color: var(--navy); }
.pcert-img img { width: 100%; aspect-ratio: 1 / 1.3; object-fit: cover; object-position: top; }
.pcert-img span { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-12); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
@media (max-width: 900px) { .pcert-grid { grid-template-columns: 1fr; } .pcert-img { max-width: 360px; } }
.pwho { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-40); }
.pwho .chips { margin-top: var(--sp-16); }
@media (max-width: 760px) { .pwho { grid-template-columns: 1fr; } }

/* ---------- Hanger detail ---------- */
.hd-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.hd-img { aspect-ratio: 1; background: var(--white); border: var(--border); display: grid; place-items: center; }
.hd-img img { width: 78%; height: 78%; object-fit: contain; }
.hd-specs { margin: var(--sp-20) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.hd-specs div { padding: var(--sp-16); background: var(--surface); border: var(--border); }
.hd-specs div.hl { grid-column: 1 / -1; background: var(--accent-soft); border-color: transparent; }
.hd-specs dt { font-size: var(--fs-xs); color: var(--muted); }
.hd-specs dd { margin: var(--sp-6) 0 0; font-weight: var(--fw-strong); font-size: var(--fs-base); }
.hd-specs div.hl dd { font-size: var(--fs-3xl); }
.hd-nav { margin-top: var(--sp-24); padding-top: var(--sp-16); border-top: var(--border); display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--muted); }
.hd-nav a { display: inline-flex; align-items: center; gap: var(--sp-6); }
.hd-nav a:hover { color: var(--accent-strong); }
@media (max-width: 860px) { .hd-grid { grid-template-columns: 1fr; } .hd-img { max-width: 420px; } }

/* ---------- Industry cards ---------- */
.icard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.icard { display: flex; flex-direction: column; background: var(--surface); border: var(--border); transition: box-shadow .4s var(--ease); }
.icard:hover { box-shadow: 0 24px 50px -32px rgb(var(--c-ink) / .45); }
.icard-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.icard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.icard:hover .icard-img img { transform: scale(1.05); }
.icard-tag { position: absolute; left: 14px; top: 14px; padding: var(--sp-8) var(--sp-14); background: var(--accent-strong); color: var(--white); font-size: var(--fs-md); font-weight: var(--fw-strong); }
.icard-body { padding: var(--sp-16) var(--sp-20) var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-14); color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-normal); flex: 1; }
.icard-more { margin-top: auto; display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--accent-strong); font-weight: var(--fw-semibold); }
@media (max-width: 960px) { .icard-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .icard-grid { grid-template-columns: 1fr; } }

/* ---------- Logos, reviews, gallery ---------- */
.logo-wall { margin-top: var(--sp-28); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-12); }
.logo-wall .tcard { width: auto; height: 110px; border-radius: 0; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }
.cl-rev { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.cl-rev-lead { margin-top: var(--sp-14); color: var(--muted); font-size: var(--fs-md); max-width: 34ch; }
.cl-rev .rv-card { min-height: 340px; }
@media (max-width: 900px) { .cl-rev { grid-template-columns: 1fr; } }
.gtile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
.gtile { border: 0; padding: 0; background: var(--surface); border: var(--border); cursor: zoom-in; text-align: left; display: flex; flex-direction: column; }
.gtile-img { aspect-ratio: 1; overflow: hidden; background: var(--white); display: block; }
.gtile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gtile:hover .gtile-img img { transform: scale(1.05); }
.gtile-cap { padding: var(--sp-12) var(--sp-14); font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--ink); }
@media (max-width: 900px) { .gtile-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Contact ---------- */
.ccards { display: grid; gap: var(--sp-16); }
.cc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 300px; }
.cc-orange { background: var(--accent-strong); }
.cc-navy { background: var(--navy); }
.cc-body { padding: clamp(24px, 3vw, 40px); color: var(--white); }
.cc-body h2 { margin-top: var(--sp-14); font-size: var(--fs-h3); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tight); }
.cc-body ul { list-style: none; margin: var(--sp-24) 0 0; padding: 0; display: grid; gap: var(--sp-14); }
.cc-body li { display: flex; gap: var(--sp-14); align-items: flex-start; font-size: var(--fs-md); line-height: var(--lh-normal); }
.cc-body li > i { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: rgb(var(--c-white) / .14); font-size: var(--fs-base); }
.cc-body small { display: block; font-size: var(--fs-2xs); opacity: .72; }
.cc-body a:hover { text-decoration: underline; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .cc { grid-template-columns: 1fr; } .cc-img { aspect-ratio: 16/9; } }
.cform { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); align-items: stretch; }
.cform-img { position: relative; min-height: 360px; overflow: hidden; color: var(--white); display: flex; align-items: flex-end; }
.cform-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cform-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(var(--c-scrim) / .86), transparent 60%); }
.cform-img p { position: relative; z-index: 1; padding: var(--sp-24); font-size: var(--fs-md); line-height: var(--lh-relaxed); max-width: 40ch; }
.cform-card { border-radius: 0; }
.cform-card .sec-title { margin: var(--sp-12) 0 var(--sp-24); }
.page-home .field input, .page-home .field select, .page-home .field textarea { border-radius: 0; }
@media (max-width: 900px) { .cform { grid-template-columns: 1fr; } }
.map-sq { border-radius: 0; }

/* ---------- Quote ---------- */
.qwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); align-items: start; }
.qwrap .empty { margin-top: var(--sp-16); border-radius: 0; }
.qwrap .qitem { border-radius: 0; }
.q-steps { margin-top: var(--sp-28); padding: var(--sp-24); background: var(--navy); }
@media (max-width: 900px) { .qwrap { grid-template-columns: 1fr; } }

/* secondary outline button on light backgrounds */
.f-btn-ghost-d { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.f-btn-ghost-d:hover { background: var(--ink); color: var(--white); }
.page-home .cat-bar { background: color-mix(in oklab, var(--bg) 92%, transparent); }
.page-home .hcard, .page-home .hcard .hc-img, .page-home .filter, .page-home .search input { border-radius: 0; }
.page-home .q-add { border-radius: 0; }
.credits img { border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ph2-bg img { transform: scale(1.06) translate3d(0, var(--py, 0), 0); animation: xzoom 2.2s var(--ease) forwards; }
}
/* alt rows: image fills its cell without dictating the row height */
.alt-img { position: relative; min-height: 280px; }
.alt-img img { position: absolute; inset: 0; }
@media (max-width: 760px) { .alt-img { min-height: 0; } }
/* 5 industries: 3 on the first row, 2 wider below */
@media (min-width: 961px) {
  .icard-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .icard-grid .icard { grid-column: span 2; }
  .icard-grid .icard:nth-child(n+4) { grid-column: span 3; }
  .icard-grid .icard:nth-child(n+4) .icard-img { aspect-ratio: 16 / 7; }
}
/* ---------- Manufacturing: capabilities grid, product matrix, factory feature ---------- */
.cap-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-24) clamp(32px, 6vw, 112px); align-items: end; }
.cap-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--ink-2); max-width: 52ch; }
.cap-ic { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-2xl); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.cap-grid { margin-top: var(--sp-40); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); }
.cap-item { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-28); background: var(--surface); border: var(--border); transition: border-color var(--dur) var(--ease); }
.cap-item h3 { margin-top: var(--sp-6); font-size: var(--fs-h5); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.cap-item p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.cap-item:hover { border-color: var(--accent); }
.cap-item:hover .cap-ic { background: var(--accent-strong); color: var(--white); }

.cm-list { margin-top: var(--sp-40); border-top: var(--border); }
.cm-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr) 44px; gap: var(--sp-24); align-items: center; padding: var(--sp-20) var(--sp-16); border-bottom: var(--border); transition: background-color var(--dur) var(--ease); }
a.cm-row:hover { background: var(--surface); }
a.cm-row:hover .cap-ic { background: var(--accent-strong); color: var(--white); }
.cm-th { padding-block: var(--sp-12); font: var(--fw-strong) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); }
.cm-prod { display: flex; align-items: center; gap: var(--sp-16); }
.cm-prod b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.cm-cell { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--ink-2); }
.cm-cell small { display: none; }
.cm-go { width: 40px; height: 40px; display: grid; place-items: center; border: var(--border); color: var(--accent-strong); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
a.cm-row:hover .cm-go { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.cm-custom { margin-top: var(--sp-24); display: flex; align-items: center; gap: var(--sp-20); padding: var(--sp-20) var(--sp-24); background: var(--navy); color: var(--white); }
.cm-custom .cap-ic { background: rgb(var(--c-white) / .1); color: var(--white); }
.cm-custom div { flex: 1; display: grid; gap: var(--sp-4); }
.cm-custom b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cm-custom span { color: rgb(var(--c-white) / .75); font-size: var(--fs-md); }

.plant-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.plant-intro { margin-top: var(--sp-16); max-width: 40ch; font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink); }
.plant-intro em { font-style: normal; color: var(--accent); }
.plant-p { margin-top: var(--sp-16); max-width: 62ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.plant-intro + .plant-p { margin-top: var(--sp-24); }
.plant-aside { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
.plant-bento { margin-top: clamp(36px, 4.5vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 13vw, 230px); gap: var(--sp-16); }
.plant-bento figure { margin: 0; overflow: hidden; background: var(--surface-2); }
.plant-bento .pb-main { grid-column: span 2; grid-row: span 2; }
.plant-bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.plant-bento figure:hover img { transform: scale(1.04); }
@media (max-width: 1000px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .cm-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .cm-row .cm-prod { grid-column: 1 / -1; }
  .cm-th { display: none; }
  .cm-cell small { display: block; margin-bottom: var(--sp-4); font: var(--fw-strong) var(--fs-3xs)/var(--lh-snug) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
  .cm-go { grid-column: 3; grid-row: 2; }
  .plant-head { grid-template-columns: 1fr; align-items: start; }
  .plant-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: var(--sp-12); }
}
@media (max-width: 900px) { .cap-head { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cm-row { grid-template-columns: 1fr; gap: var(--sp-12); }
  .cm-go { display: none; }
  .cm-custom { flex-direction: column; align-items: flex-start; }
}

/* combined industries page: one section per industry - intro + who we serve, then its product ranges */
.ind-head { align-items: start; }
.ind-lead { margin-top: var(--sp-16); max-width: 60ch; font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--ink-2); }
.ind-products { margin-top: var(--sp-40); }
.icard-grid.ind-products .icard, .icard-grid.ind-products .icard:nth-child(n+4) { grid-column: auto; }
.icard-grid.ind-products .icard:nth-child(n+4) .icard-img { aspect-ratio: 16 / 10; }
@media (min-width: 961px) { .icard-grid.ind-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* an industry with a single range: one wide horizontal card instead of a lone quarter-width tile */
.icard-grid.ind-products:has(> .icard:only-child) { grid-template-columns: 1fr; }
@media (min-width: 601px) {
  .ind-products .icard:only-child { flex-direction: row; }
  .ind-products .icard:only-child .icard-img { flex: 0 0 46%; aspect-ratio: 16 / 9; }
  .ind-products .icard:only-child .icard-body { justify-content: center; gap: var(--sp-20); padding: var(--sp-32) var(--sp-40); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--ink-2); }
  .ind-products .icard:only-child .icard-more { margin-top: 0; font-size: var(--fs-base); }
}
/* key-facts band: muted wash, navy-led with a soft orange edge, photo stays visible */
.kf::before { background: linear-gradient(110deg, rgb(var(--c-navy) / .95) 0%, rgb(var(--c-navy) / .75) 45%, rgb(var(--c-navy) / .55) 75%, rgb(var(--c-accent-hover) / .45) 100%); }

/* ---------- Process timeline, pinned: line fills on scroll, active step swaps the photo ---------- */
.tl-pin { padding-block: var(--section-y); }
/* the content block sticks under the header; the spacer after it is the scroll distance of the pin */
.tl-pin .tl-track::after { content: ""; display: block; height: calc(var(--u) * 55vh); }
.tl-pin .tl-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
.tl-pin .tl-grid { width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.tl-pin .tl-head { position: static; }
.tl-steps { position: relative; list-style: none; margin: var(--sp-32) 0 0; padding: 0 0 0 var(--sp-28); display: grid; }
/* the line runs from the first marker to the last; site.js sets --l0/--l1 and the filled length --fh */
.tl-steps::before, .tl-fill { content: ""; position: absolute; left: 0; top: var(--l0, 25px); height: calc(var(--l1, 100%) - var(--l0, 25px)); width: 2px; background: var(--line); }
.tl-fill { background: var(--accent); height: var(--fh, 0px); }
.tl-s { position: relative; }
.tl-s::before { content: ""; position: absolute; left: -35px; top: 19px; width: 12px; height: 12px; background: var(--bg); border: 2px solid var(--line); transition: background-color .3s, border-color .3s; }
.tone-b .tl-s::before { background: var(--bg-2); }
.tl-s.done::before, .tl-s.on::before { background: var(--accent); border-color: var(--accent); }
.tl-s-head { display: flex; align-items: center; gap: var(--sp-12); width: 100%; padding: var(--sp-10) 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; }
.tl-s-head h3 { font-size: var(--fs-lg); font-weight: var(--fw-strong); letter-spacing: var(--tracking-snug); color: var(--muted); transition: color .3s; }
.tl-s .tl-n { flex: none; transition: background-color .3s; background: var(--slate-300); }
.tl-s.on .tl-s-head h3 { color: var(--ink); }
.tl-s.on .tl-n { background: var(--navy); }
.tl-s-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.tl-s-body > div { overflow: hidden; }
.tl-s.on .tl-s-body { grid-template-rows: 1fr; }
.tl-s-body p { padding: 0 0 var(--sp-12) var(--sp-40); color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-normal); max-width: 52ch; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); }
.tl-s.on .tl-s-body p { opacity: 1; transform: none; transition-delay: .15s; }
.tl-s-img { display: none; }
.tl-media { position: relative; height: min(calc(100vh - var(--header-h) - 64px), 600px); overflow: hidden; background: var(--navy); }
.tl-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.tl-pic.on { opacity: 1; transform: none; }
.tl-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; padding: var(--sp-6) var(--sp-10); background: rgb(var(--c-navy) / .75); color: rgb(var(--c-white) / .65); font: var(--fw-medium) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wide); backdrop-filter: blur(6px); }
.tl-count b { color: var(--white); font-weight: var(--fw-semibold); }
/* short screens and phones: no pin, every step open with its own photo */
@media (max-width: 900px), (max-height: 620px) {
  .tl-pin .tl-track::after { display: none; }
  .tl-pin .tl-sticky { position: static; }
  .tl-pin .tl-grid { grid-template-columns: 1fr; }
  .tl-media { display: none; }
  .tl-fill { height: calc(var(--l1, 100%) - var(--l0, 25px)); }
  .tl-s::before, .tone-b .tl-s::before { background: var(--accent); border-color: var(--accent); }
  .tl-s .tl-n { background: var(--navy); }
  .tl-s-head { cursor: default; }
  .tl-s-head h3 { color: var(--ink); }
  .tl-s-body { grid-template-rows: 1fr; }
  .tl-s-body p { opacity: 1; transform: none; }
  .tl-s-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 var(--sp-20) var(--sp-40); width: calc(100% - 44px); }
}
/* process: the copy column runs exactly the photo's height (heading at its top edge, last step at its bottom edge) */
@media (min-width: 901px) and (min-height: 621px) {
  .tl-pin .tl-grid { align-items: stretch; }
  .tl-pin .tl-left { display: flex; flex-direction: column; justify-content: space-between; }
  .tl-pin .tl-media { height: auto; min-height: min(calc(100vh - var(--header-h) - 64px), 600px); }
  .tl-pin .tl-head { margin-top: -6px; }
  .tl-pin .tl-steps { margin-block: auto; padding-top: var(--sp-8); } /* steps sit in the middle of the space under the heading, not on the bottom edge */
}

/* ---------- Buttons, site-wide: on hover a bright streak runs round the button's own border ---------- */
@property --shine-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.f-btn, .btn, .xbtn, .xbtn-ghost, .rv-btn, .sc-btn { position: relative; isolation: isolate; --shine: rgb(var(--c-white) / .95); }
.f-btn::before, .btn::before, .xbtn::before, .xbtn-ghost::before, .rv-btn::before, .sc-btn::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; border-radius: inherit; padding: var(--sp-2);
  background: conic-gradient(from var(--shine-a), transparent 0deg 170deg, color-mix(in srgb, var(--shine) 35%, transparent) 230deg, var(--shine) 300deg, transparent 345deg);
  -webkit-mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(var(--black) 0 0) content-box exclude, linear-gradient(var(--black) 0 0);
  opacity: 0; transition: opacity .35s;
}
.f-btn:hover::before, .btn:hover::before, .xbtn:hover::before, .xbtn-ghost:hover::before, .rv-btn:hover:not([disabled])::before, .sc-btn:hover::before,
.f-btn:focus-visible::before, .btn:focus-visible::before, .xbtn:focus-visible::before, .xbtn-ghost:focus-visible::before {
  opacity: 1; animation: shineSpin 1.8s linear infinite;
}
@keyframes shineSpin { to { --shine-a: 360deg; } }
/* outline buttons: dim their own border while the streak runs so the streak reads */
.f-btn-ghost:hover, .xbtn-ghost:hover, .btn-outline-light:hover { border-color: rgb(var(--c-white) / .28); }
/* light buttons get an orange streak so it shows */
.f-btn-ghost-d, .btn-ghost, .btn-light, .rv-btn { --shine: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .f-btn:hover::before, .btn:hover::before, .xbtn:hover::before, .xbtn-ghost:hover::before, .rv-btn:hover::before, .sc-btn:hover::before { animation: none; background: var(--shine); }
}

/* ---------- Call link: phone in a circle with rings that keep pulsing outwards ---------- */
.call-cta { display: inline-flex; align-items: center; gap: var(--sp-14); color: var(--navy); text-decoration: none; }
.call-ic { position: relative; flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: var(--radius-round);
  background: var(--navy); color: var(--white); font-size: var(--fs-xl); box-shadow: 0 0 0 3px rgb(var(--c-navy) / .1); transition: background-color .3s; }
.call-ic::before, .call-ic::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-round); border: 1.5px solid var(--navy); opacity: 0; pointer-events: none;
  animation: callWave 2.4s cubic-bezier(.2, .6, .35, 1) infinite; }
.call-ic::after { animation-delay: 1.2s; }
@keyframes callWave { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
.call-ic i { animation: callRing 2.4s ease-in-out infinite; }
@keyframes callRing { 0%, 60%, 100% { transform: rotate(0); } 64%, 72% { transform: rotate(-14deg); } 68%, 76% { transform: rotate(14deg); } }
.call-txt { display: grid; gap: var(--sp-2); line-height: var(--lh-tight); }
.call-txt small { font-size: var(--fs-xs); color: var(--muted); }
.call-txt b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug); transition: color .3s; }
.call-cta:hover .call-ic { background: var(--accent-strong); }
.call-cta:hover .call-ic::before, .call-cta:hover .call-ic::after { border-color: var(--accent-strong); }
.call-cta:hover .call-txt b { color: var(--accent-strong); }
.call-dark { color: var(--white); }
.call-dark .call-ic { background: var(--accent-strong); box-shadow: 0 0 0 3px rgb(var(--c-white) / .1); }
.call-dark .call-ic::before, .call-dark .call-ic::after { border-color: var(--accent); }
.call-dark .call-txt small { color: rgb(var(--c-white) / .55); }
.call-dark:hover .call-txt b { color: var(--white); }
.f-cta-body .call-cta { margin-top: var(--sp-28); }
.why-head .call-cta { margin-top: var(--sp-28); }
@media (prefers-reduced-motion: reduce) { .call-ic::before, .call-ic::after, .call-ic i { animation: none; } }

/* Manufacturing strengths: stacking cards. Each card sticks a little lower than the one before,
   so as you scroll the next card slides up over the previous one and leaves its label showing. */
.xs-intro { margin-top: var(--sp-16); max-width: 62ch; font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--ink); }
.xs-intro em { font-style: normal; color: var(--accent); }
.xs-stack { --xs-tab: 62px; margin-top: clamp(36px, 4vw, 56px); display: grid; gap: var(--sp-32); }
.xs-card {
  position: sticky; top: calc(var(--header-h) + 24px + var(--i) * var(--xs-tab));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px);
  height: min(520px, calc(100vh - var(--header-h) - 48px - 3 * var(--xs-tab)));
  min-height: 440px; padding: var(--sp-20) var(--sp-20) var(--sp-20) clamp(24px, 3vw, 40px);
  background: var(--surface); border: var(--border); color: var(--ink);
  box-shadow: 0 -14px 32px -22px rgb(var(--c-navy) / .45);
}
.xs-body { display: flex; flex-direction: column; min-height: 0; padding-block: var(--sp-2) var(--sp-8); }
.xs-tag { font-size: var(--fs-h5); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); }
.xs-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 var(--sp-10) 2px 0; background: var(--accent); vertical-align: middle; }
.xs-title { margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.xs-title em { font-style: normal; color: var(--accent); }
.xs-text { margin-top: var(--sp-16); max-width: 52ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.xs-meta { margin: var(--sp-24) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.xs-meta dt { font-size: var(--fs-sm); color: var(--muted); }
.xs-meta dd { margin: var(--sp-4) 0 0; font-size: var(--fs-h5); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.xs-link { margin-top: auto; display: flex; align-items: center; gap: var(--sp-14); padding: var(--sp-12) var(--sp-16); background: var(--surface-2); color: var(--ink); transition: background-color var(--dur) var(--ease); }
.xs-link-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xl); }
.xs-link-t { display: grid; flex: 1; min-width: 0; }
.xs-link-t b { font-weight: var(--fw-strong); }
.xs-link-t small { font-size: var(--fs-sm); color: var(--muted); }
.xs-link-go { font-size: var(--fs-xl); color: var(--accent); transition: transform var(--dur) var(--ease); }
.xs-link:hover .xs-link-go { transform: translateX(4px); }
.xs-img { margin: 0; overflow: hidden; background: var(--surface-2); }
.xs-img img { width: 100%; height: 100%; object-fit: cover; }
/* colour per card */
.xs-navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.xs-orange { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.xs-soft { background: var(--accent-soft); border-color: var(--accent-soft); }
.xs-navy .xs-text, .xs-navy .xs-meta dt { color: rgb(var(--c-white) / .7); }
.xs-orange .xs-text, .xs-orange .xs-meta dt { color: rgb(var(--c-white) / .85); }
.xs-orange .xs-title em { color: var(--navy); }
.xs-orange .xs-tag::before { background: var(--white); }
.xs-navy .xs-link, .xs-orange .xs-link, .xs-soft .xs-link { background: var(--surface); }
.xs-link:hover { background: var(--white); }
.xs-light .xs-link:hover { background: var(--line); }
@media (max-width: 860px) {
  /* on small screens a card is taller than the view, so stacking would hide content: plain list */
  .xs-card { position: static; height: auto; min-height: 0; grid-template-columns: 1fr; padding: var(--sp-20); box-shadow: none; }
  .xs-img { aspect-ratio: 16 / 10; order: -1; }
  .xs-meta { grid-template-columns: 1fr 1fr; }
}

/* Industries: shared benefits section */
.ix-every .cm-custom { margin-top: var(--sp-24); }

/* Industry ring captions: plain editorial layout, left aligned. Products as squared outline tags;
   the industry's Explore link sits above the product cards. */
.orbit-sec .oc-item { justify-items: start; text-align: left; row-gap: var(--sp-12); }
.orbit-sec .oc-num { display: none; }
.orbit-sec .oc-item h3 { font-size: var(--fs-h4); font-weight: var(--fw-regular); }
.orbit-sec .oc-item p { color: rgb(var(--c-white) / .68); }
.orbit-sec .oc-item .chips { gap: var(--sp-8); margin-top: var(--sp-6); }
.orbit-sec .oc-item .chip { height: 40px; padding: 0 var(--sp-16); gap: var(--sp-8); border: 1px solid rgb(var(--c-white) / .22); border-radius: 0; background: rgb(var(--c-white) / .04); color: var(--white); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.orbit-sec .oc-item .chip i { color: var(--accent); font-size: var(--fs-base); }
.orbit-sec .oc-item .chip:hover { border-color: var(--accent); background: rgb(var(--c-accent) / .12); }
/* the industry's "Explore" link sits just above its product cards and switches with them */
.orbit-explore { grid-column: 1 / -1; display: grid; margin-bottom: calc(clamp(36px, 4vw, 56px) * -.5); }
.oe-link { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-10); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--accent); color: var(--white); font-weight: var(--fw-medium); opacity: 0; translate: 0 6px; transition: opacity .45s var(--ease), translate .6s var(--ease); }
.oe-link.on { opacity: 1; translate: 0 0; }
.oe-link i { color: var(--accent); transition: transform var(--dur) var(--ease); }
.oe-link:hover i { transform: translateX(4px); }
@media (max-width: 1100px) { .orbit-explore { order: 4; margin-bottom: 0; } .scatter { order: 5; } }

/* Industry ring background: no photo, just a few hairlines with slow orange pulses running along
   them, and two faint rings echoing the industry ring. */
.orbit-sec::after { display: none; }
.orbit-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-lines line, .orbit-lines circle { fill: none; vector-effect: non-scaling-stroke; }
.ol-grid line { stroke: rgb(var(--c-white) / .06); stroke-width: 1; }
.ol-run line { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 90 2400; stroke-dashoffset: 2490; opacity: .7; animation: olRun 12s linear var(--d) infinite; }
.ol-rings circle { stroke: rgb(var(--c-white) / .05); stroke-width: 1; }
.ol-rings .ol-dash { stroke: rgb(var(--c-white) / .08); stroke-dasharray: 2 10; transform-box: fill-box; transform-origin: center; animation: olSpin 90s linear infinite; }
@keyframes olRun { to { stroke-dashoffset: 0; } }
@keyframes olSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ol-run line, .ol-rings .ol-dash { animation: none; } .ol-run { display: none; } }

/* Ring centre: the original logomark; the whole centre links to About us. On hover nothing moves:
   soft orange waves ripple out from the middle, inside the circle. */
.orbit-core { cursor: pointer; isolation: isolate; }
.orbit-core > :not(.oc-waves) { position: relative; z-index: 1; }
.oc-logo { width: clamp(30px, 9vw, 54px); height: auto; margin-bottom: var(--sp-12); }
.oc-waves { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-round); overflow: hidden; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--c-accent) / .3), transparent 78%); opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.oc-waves i { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: var(--radius-round);
  border: 2px solid rgb(var(--c-accent) / .75); scale: 0; opacity: 0; animation: ocWave 2.7s cubic-bezier(.2, .6, .3, 1) infinite paused; }
.oc-waves i:nth-child(2) { animation-delay: .9s; }
.oc-waves i:nth-child(3) { animation-delay: 1.8s; }
.orbit-core:hover .oc-waves, .orbit-core:focus-visible .oc-waves { opacity: 1; }
.orbit-core:hover .oc-waves i, .orbit-core:focus-visible .oc-waves i { animation-play-state: running; }
@keyframes ocWave { 0% { scale: .15; opacity: .9; } 100% { scale: 1.05; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .oc-waves i { animation: none; } }

/* ---------- Product pages: square photo gallery beside specs ---------- */
.pd-list { display: grid; gap: var(--section-y); }
.pd { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; scroll-margin-top: calc(var(--header-h) + var(--sp-24)); }
.pd:nth-child(even) .pd-gallery { order: 2; }
.pd-gallery { display: grid; gap: var(--sp-12); }
.pd-main { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 1; overflow: hidden; background: var(--white); border: var(--border); cursor: zoom-in; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.pd-main:hover img { transform: scale(1.03); }
.pd-zoom { position: absolute; right: var(--sp-12); bottom: var(--sp-12); width: var(--sp-40); height: var(--sp-40); display: grid; place-items: center; background: rgb(var(--c-white) / .86); color: var(--ink); font-size: var(--fs-lg); border: var(--border); }
.pd-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--sp-8); }
.pd-thumb { padding: 0; aspect-ratio: 1; overflow: hidden; background: var(--white); border: var(--border); cursor: pointer; opacity: .7; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover, .pd-thumb[aria-pressed="true"] { opacity: 1; }
.pd-thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pd-body { position: sticky; top: calc(var(--header-h) + var(--sp-24)); }
.pd-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); text-wrap: balance; }
.pd-lead { margin-top: var(--sp-16); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); text-wrap: pretty; }
.pd-sizes { margin-top: var(--sp-20); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-10); }
.pd-k { font-size: var(--fs-xs); color: var(--muted); margin-right: var(--sp-4); }
.pd-sizes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pd-sizes li { padding: var(--sp-6) var(--sp-14); border: var(--border-strong); border-radius: var(--radius-pill); font: var(--fw-semibold) var(--fs-sm)/var(--lh-none) var(--font-mono); }
.pd-body .hd-specs { margin-top: var(--sp-20); }
.pd-body .ph2-actions { margin-top: var(--sp-24); }
@media (max-width: 900px) {
  .pd { grid-template-columns: 1fr; }
  .pd:nth-child(even) .pd-gallery { order: 0; }
  .pd-body { position: static; }
}
/* new product photos are full square studio shots: fill the frame instead of floating as cut-outs */
.ph2-side-photo img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: contain; }
.sc-img.sc-photo img { padding: 4%; }

/* Industries intro: a row of industry cards; each opens that industry on the ring below */
.it-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-12); }
.it-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border); color: var(--ink); transition: border-color var(--dur) var(--ease); }
.it-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.it-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.it-body { position: relative; display: grid; gap: var(--sp-6); padding: var(--sp-16) var(--sp-16) var(--sp-20); }
.it-ic { width: 36px; height: 36px; margin-bottom: var(--sp-6); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xl); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.it-body b { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.it-body small { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--muted); }
.it-go { position: absolute; top: var(--sp-20); right: var(--sp-16); font-size: var(--fs-lg); color: var(--muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.it-card:hover { border-color: var(--accent); }
.it-card:hover .it-img img { transform: scale(1.06); }
.it-card:hover .it-ic { background: var(--accent-strong); color: var(--white); }
.it-card:hover .it-go { color: var(--accent); transform: translate(2px, -2px); }
@media (max-width: 1100px) { .it-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .it-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .it-card { scroll-snap-align: start; } }

/* Products page factory band: flat dark background with the same hairlines and slow orange pulses as the industry ring */
.kf-flat { padding-block: 0 var(--section-y); overflow: visible; }
.kf-box { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 5vw, 80px) clamp(24px, 4.5vw, 72px); background: var(--navy-950); color: var(--white); }
.kf-flat::before { display: none; }
.kf-flat .kf-bg { inset: 0; z-index: -1; }
.kf-flat .kf-title em { color: var(--accent); }
.kf-text { margin-top: var(--sp-16); max-width: 56ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .7); }
.kf-flat .kf-link { background: rgb(var(--c-white) / .04); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgb(var(--c-white) / .14); }
.kf-flat .kf-link:hover { background: rgb(var(--c-white) / .08); border-color: rgb(var(--c-white) / .3); }

/* ---------- Single product page (shop style): gallery left, options and quote right ---------- */
.pdp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--sp-12); }
.pdp-main { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--white); border: var(--border); cursor: zoom-in; }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform var(--dur) var(--ease), opacity .25s; }
.pdp-main.fit img { object-fit: contain; padding: 6%; }
.pdp-main.zoom img { transform: scale(1.9); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-10); }
.pdp-thumb { aspect-ratio: 1; padding: 0; overflow: hidden; background: var(--white); border: var(--border); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb:hover { border-color: var(--ink-2); }
.pdp-thumb.on { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong); }
.pdp-buy { display: grid; gap: var(--sp-20); }
.pdp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pdp-code { padding: var(--sp-6) var(--sp-10); background: var(--navy); color: var(--white); font: var(--fw-strong) var(--fs-xs)/1 var(--font-mono); letter-spacing: var(--tracking-wide); }
.pdp-tag { display: inline-flex; align-items: center; gap: var(--sp-6); padding: var(--sp-6) var(--sp-10); background: var(--surface); border: var(--border); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-2); }
.pdp-tag i { color: var(--accent); }
.pdp-desc { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--ink-2); }
.pdp-group { display: grid; align-content: start; gap: var(--sp-8); margin: 0; padding: 0; border: 0; min-width: 0; }
.pdp-group legend, .pdp-lbl { padding: 0; margin-bottom: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--navy); }
.pdp-lbl .opt { font-weight: var(--fw-regular); color: var(--muted); }
.pdp-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pdp-chip { position: relative; cursor: pointer; }
.pdp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pdp-chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--sp-16); background: var(--surface); border: var(--border-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pdp-chip:hover span { border-color: var(--navy); }
.pdp-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pdp-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdp-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-16); }
.pdp-qty { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; height: 48px; border: var(--border-strong); background: var(--surface); }
.pdp-qty button { border: 0; background: none; color: var(--navy); cursor: pointer; font-size: var(--fs-base); }
.pdp-qty button:hover { background: var(--surface-2); }
.pdp-qty input { min-width: 0; border: 0; border-inline: var(--border); background: none; text-align: center; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink); }
.pdp-row select, .pdp-buy textarea { width: 100%; border: var(--border-strong); background: var(--surface); font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.pdp-row select { height: 48px; padding: 0 var(--sp-12); }
.pdp-buy textarea { padding: var(--sp-10) var(--sp-12); resize: vertical; }
.pdp-hint { font-size: var(--fs-xs); color: var(--muted); }
.pdp-check { display: inline-flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); cursor: pointer; }
.pdp-check input { width: 18px; height: 18px; accent-color: var(--accent-strong); }
.pdp-sum { display: grid; gap: var(--sp-4); padding: var(--sp-14) var(--sp-16); background: var(--surface-2); border-left: 3px solid var(--accent); }
.pdp-sum span { font: var(--fw-strong) var(--fs-2xs)/1 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
.pdp-sum b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--navy); }
.pdp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
.pdp-actions .pdp-main-cta { grid-column: 1 / -1; height: 54px; }
.pdp-sample { background: var(--surface); border: var(--border-strong); color: var(--navy); }
.pdp-sample:hover { border-color: var(--navy); }
.pdp-actions .f-btn { justify-content: center; }
.pdp-quote { justify-self: start; }
.pdp-assure { list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-16) 0 0; border-top: var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10) var(--sp-16); }
.pdp-assure li { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-sm); color: var(--ink-2); }
.pdp-assure i { color: var(--accent); font-size: var(--fs-lg); }
.pdp-info-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 72px); }
.pdp-specs { margin: var(--sp-24) 0 0; border-top: var(--border); }
.pdp-specs div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-16); padding: var(--sp-12) 0; border-bottom: var(--border); }
.pdp-specs dt { font-size: var(--fs-sm); color: var(--muted); }
.pdp-specs dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.pdp-inds { margin-top: var(--sp-24); display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.pdp-ind { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-14); background: var(--surface); border: var(--border); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); transition: border-color var(--dur) var(--ease); }
.pdp-ind i { color: var(--accent); }
.pdp-ind:hover { border-color: var(--accent); }
.pdp-steps { list-style: none; counter-reset: s; margin: var(--sp-28) 0 0; padding: 0; display: grid; gap: var(--sp-14); }
.pdp-steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--sp-12); }
.pdp-steps li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent-strong); color: var(--white); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.pdp-steps b { font-size: var(--fs-md); color: var(--navy); }
.pdp-steps span { font-size: var(--fs-sm); color: var(--muted); }
.rp-grid { margin-top: var(--sp-32); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.rp-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border); color: var(--ink); transition: border-color var(--dur) var(--ease); }
.rp-img { aspect-ratio: 1; overflow: hidden; background: var(--white); border-bottom: var(--border); }
.rp-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.rp-img img.fit { object-fit: contain; padding: 8%; }
.rp-body { display: grid; gap: var(--sp-4); padding: var(--sp-14) var(--sp-16) var(--sp-16); }
.rp-body b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--navy); }
.rp-body small { font-size: var(--fs-xs); color: var(--muted); }
.rp-go { margin-top: var(--sp-8); display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-strong); }
.rp-card:hover { border-color: var(--accent); }
.rp-card:hover .rp-img img { transform: scale(1.05); }
@media (max-width: 960px) {
  .pdp-grid, .pdp-info-grid { grid-template-columns: minmax(0, 1fr); }
  .pdp-gallery { position: static; }
  .rp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .pdp-actions, .pdp-assure, .pdp-row { grid-template-columns: 1fr; } .pdp-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* the other five product ranges in one row on category pages */
.prods-grid.pg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .prods-grid.pg-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prods-grid.pg-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* colour swatches inside the colour choices */
.pdp-chip span { gap: var(--sp-8); }
.pdp-sw { width: 16px; height: 16px; flex: none; border-radius: var(--radius-round); background: var(--sw); box-shadow: inset 0 0 0 1px rgb(var(--c-ink) / .25); }
.pdp-sw.sw-clear { background: repeating-conic-gradient(#d9dde3 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.pdp-sw.sw-custom { background: conic-gradient(#e63946, #f4a261, #2a9d8f, #457b9d, #8338ec, #e63946); }
.pdp-chip input:checked + span .pdp-sw { box-shadow: 0 0 0 2px var(--white); }
/* supplier card, as on B2B marketplaces */
.pdp-supplier { display: grid; gap: var(--sp-14); padding: var(--sp-20); background: var(--surface); border: var(--border); }
.pdp-sup-head { display: flex; align-items: center; gap: var(--sp-12); }
.pdp-sup-head img { width: 44px; height: auto; }
.pdp-sup-head b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--navy); }
.pdp-sup-head span { font-size: var(--fs-xs); color: var(--muted); }
.pdp-sup-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: var(--border); }
.pdp-sup-stats div { padding: var(--sp-12) var(--sp-8); text-align: center; }
.pdp-sup-stats div + div { border-left: var(--border); }
.pdp-sup-stats dt { font-size: var(--fs-2xs); color: var(--muted); }
.pdp-sup-stats dd { margin: var(--sp-4) 0 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--navy); }
.pdp-sup-certs { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.pdp-sup-certs span { padding: var(--sp-4) var(--sp-10); background: var(--surface-2); font: var(--fw-strong) var(--fs-2xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-wide); color: var(--ink-2); }
.pdp-sup-links { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }