/* 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: minmax(0, 1fr); } .ph2-side { display: none; } }
/* minimal title section: title and one line on a black bokeh ground (no photo, no breadcrumb) */
.ph2.ph2-min { min-height: clamp(340px, 46vh, 460px); background: var(--black); }
.ph2-min::before { background: linear-gradient(180deg, rgb(var(--c-black) / .35) 0%, transparent 40%, rgb(var(--c-black) / .55) 100%); }
.ph2-min .ph2-title { margin-top: 0; max-width: none; }
.ph2-min.pdp-hero .ph2-title { font-size: min(var(--fs-h1), var(--fs-7xl)); }
.ph2-min .ph2-sub { margin-top: var(--sp-14); max-width: none; color: rgb(var(--c-white) / .75); }
.ph2-bokeh { overflow: hidden; background: var(--black); }
.ph2-bokeh::before, .ph2-bokeh::after { content: ""; position: absolute; inset: -12%; filter: blur(16px); }
.ph2-bokeh::before {
  background:
    radial-gradient(circle at 78% 30%, rgb(var(--c-accent) / .55) 0, transparent 9%),
    radial-gradient(circle at 88% 62%, rgb(var(--c-orange-400) / .35) 0, transparent 7%),
    radial-gradient(circle at 64% 76%, rgb(var(--c-peach) / .22) 0, transparent 6%),
    radial-gradient(circle at 42% 22%, rgb(var(--c-white) / .14) 0, transparent 5%),
    radial-gradient(circle at 18% 70%, rgb(var(--c-blue) / .28) 0, transparent 8%),
    radial-gradient(circle at 96% 12%, rgb(var(--c-white) / .18) 0, transparent 4%),
    radial-gradient(circle at 54% 14%, rgb(var(--c-accent) / .3) 0, transparent 3.5%),
    radial-gradient(circle at 70% 88%, rgb(var(--c-white) / .12) 0, transparent 3%),
    radial-gradient(circle at 92% 84%, rgb(var(--c-accent) / .4) 0, transparent 4.5%),
    radial-gradient(circle at 34% 86%, rgb(var(--c-peach) / .16) 0, transparent 3%);
  animation: bokehDrift 18s var(--ease-in-out) infinite alternate;
}
.ph2-bokeh::after {
  filter: blur(48px);
  background:
    radial-gradient(circle at 70% 48%, rgb(var(--c-accent) / .28) 0, transparent 22%),
    radial-gradient(circle at 30% 40%, rgb(var(--c-blue) / .2) 0, transparent 20%);
  animation: bokehDrift 24s var(--ease-in-out) infinite alternate-reverse;
}
@keyframes bokehDrift { to { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .ph2-bokeh::before, .ph2-bokeh::after { animation: 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: minmax(0, 1fr); } }

/* ---------- Mission and vision (About): two statement panels, light and dark ---------- */
.mv-grid { margin-top: var(--head-gap); 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; }
/* the mission scene plays on its own; hovering the box pauses it */
.mv-scene [class*="fx-"] { animation-play-state: running; }
.mv-accent:hover .mv-scene [class*="fx-"] { animation-play-state: paused; }
@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: minmax(0, 1fr); } }

/* ---------- Core values (About): bento grid, each tile = text on top, photo filling the rest ---------- */
.vb-grid {
  margin-top: var(--head-gap); 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 minmax(0, 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:not(.vb-dark):not(.vb-orange):hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.vb:not(.vb-dark):not(.vb-orange):hover h3 { color: var(--white); }
.vb:not(.vb-dark):not(.vb-orange):hover p { color: rgb(var(--c-white) / .86); }
.vb:not(.vb-dark):not(.vb-orange):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); }
@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: minmax(0, 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: minmax(0, 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: var(--head-gap); 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: minmax(0, 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: minmax(0, 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: minmax(0, 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(--head-gap) 0 0; padding: 0; border-top: var(--border); }
.cl-item { border-bottom: var(--border); transition: background-color .3s; }
.cl-row { display: flex; align-items: center; gap: var(--sp-16); width: 100%; padding: var(--sp-16) var(--sp-14); border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cl-row .cl-code { flex: 0 0 9.5em; }
.cl-name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.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-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-side { position: sticky; top: calc(var(--header-h) + 24px); }
/* preview frame takes the certificate's own shape (--r = height / width, A4 portrait = 1.414), so the page fills it edge to edge */
.cl-preview { margin: 0; --cl-hmax: min(calc(100dvh - var(--header-h) - 120px), 820px); }
.cl-zoom { --r: 1.414; position: relative; display: block; width: min(100%, calc(var(--cl-hmax) / var(--r))); aspect-ratio: 1 / var(--r); margin-inline: auto; padding: 0; overflow: hidden; border: var(--border); background: var(--white); box-shadow: var(--shadow-lg); cursor: zoom-in; transition: width var(--dur) var(--ease); }
.cl-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s; }
.cl-zoom img.swap { opacity: 0; }
.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); }
/* phones and tablets: no side panel; each certificate opens full screen from its own button */
@media (max-width: 900px) { .cl-grid { grid-template-columns: minmax(0, 1fr); } .cl-side { display: none; } .cl-row { padding-inline: var(--sp-4); } .cl-row .cl-code { flex-basis: 7.5em; } }

/* ---------- 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: var(--head-gap); padding: clamp(20px, 3vw, 40px); background: var(--navy); }
.gp-map-in { position: relative; max-width: 1100px; margin: 0 auto; }
.gp-map-in > 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: calc(100% + 10px); top: 50%; translate: 0 -50%; }
.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)); }
/* glow running along each route: a bright dash led by the packet, both on one SMIL clock; the route line itself stays */
.gp-route .gp-trail { stroke: rgb(var(--c-peach)); stroke-width: 3; opacity: 1; stroke-dasharray: 20 300; stroke-dashoffset: 20; filter: drop-shadow(0 0 4px rgb(var(--c-accent))); transition: none; }
.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.3s var(--ease) calc(.1s + var(--i) * .15s); }
  .js .gp-map.in .gp-route > path { stroke-dashoffset: 0; }
  .js .gp-glow { opacity: 0; transition: opacity .5s ease calc(1.5s + var(--i) * .15s); }
  .js .gp-map.in .gp-glow { 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.1s + var(--i) * .15s); }
  .js .gp-map.in .gp-dest { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .gp-glow { 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: minmax(0, 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: minmax(0, 1fr); } }
.feat-grid { margin-top: var(--head-gap); 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: minmax(0, 1fr); } }
.spec-row { margin-top: var(--head-gap); 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 1fr); } .pcert-img { max-width: 360px; } }
.pwho { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-40); }
.pwho .chips { margin-top: var(--sp-16); }
@media (max-width: 760px) { .pwho { grid-template-columns: minmax(0, 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 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: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 600px) { .icard-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Logos, reviews, gallery ---------- */
.logo-wall { margin-top: var(--head-gap); 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, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 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: minmax(0, 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, minmax(0, 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: minmax(0, 1fr); } .cc-img { aspect-ratio: 16/9; } }
/* single contact box: the details sit in two columns, the address across both */
@media (min-width: 1200px) {
  .cc-one ul { grid-template-columns: auto auto; justify-content: start; gap: var(--sp-20) var(--sp-32); }
  .cc-one .cc-wide { grid-column: 1 / -1; }
}
.cc-one .cc-body a { overflow-wrap: break-word; }
.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: minmax(0, 1fr); } }
/* contact form as one box like the details box: orange form panel, photo on the other half */
.cform.cform-one { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.cform-one .cform-card { background: var(--accent-strong); border: 0; color: var(--white); }
.cform-one .sec-title { margin-bottom: var(--sp-12); color: var(--white); }
.cform-one .stats-eyebrow .sq { background-image: url("../img/brand/logomark-white-sm.png"); }
.cform-intro { margin-bottom: var(--sp-28); max-width: 56ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .86); }
.cform-one .field label { color: var(--white); }
.cform-one .field label .opt { color: rgb(var(--c-white) / .7); }
.cform-one .field input, .cform-one .field textarea { border-radius: 0; border-color: var(--white); background: var(--white); color: var(--ink); }
.cform-one .field input:focus, .cform-one .field textarea:focus { border-color: var(--white); box-shadow: 0 0 0 3px rgb(var(--c-white) / .45); }
.cform-one .field.invalid input, .cform-one .field.invalid textarea { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); }
.cform-one .field .err { color: var(--white); font-weight: var(--fw-semibold); }
.cform-one .f-btn-primary { background: var(--white); color: var(--accent-strong); }
.cform-one .f-btn-primary:hover { background: var(--navy); color: var(--white); }
.cform-one .form-done, .cform-one .form-done i, .cform-one .form-done h3 { color: var(--white); }
.cform-one .form-done .muted { color: rgb(var(--c-white) / .8); }
.cform-one .f-btn-ghost-d { border-color: var(--white); color: var(--white); }
.cform-one .f-btn-ghost-d:hover { background: var(--white); color: var(--accent-strong); }
.cform-one .cform-img { min-height: 320px; }
.cform-one .cform-img::after { content: none; }
@media (max-width: 900px) { .cform.cform-one { grid-template-columns: minmax(0, 1fr); } .cform-one .cform-img { min-height: 0; aspect-ratio: 16 / 9; } }
.map-sq { border-radius: 0; }
/* contact page reads as one continuous background: sections after the first drop their top padding */
.page-contact.page-home main > section.section:not(.ph2) + :is(.section, .section-tight) { padding-top: 0 !important; }
/* map view switcher, top right over the map */
.map[data-map] { position: relative; }
/* preview boxes, no text: each shows a crop of its own view */
.map-views { position: absolute; top: var(--sp-12); right: var(--sp-12); z-index: 2; display: flex; gap: var(--sp-8); }
.map-views button { width: 48px; height: 48px; padding: 0; border: 2px solid var(--white); background: var(--white); box-shadow: 0 2px 8px rgb(var(--c-ink) / .3); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.map-views img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-views button:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(var(--c-ink) / .32); }
.map-views button[aria-pressed="true"] { border-color: var(--accent-strong); box-shadow: 0 0 0 2px var(--white), 0 2px 8px rgb(var(--c-ink) / .3); }
.map-views button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.map iframe { transition: filter .4s var(--ease); }
/* the embed's own layer thumbnail sits bottom left; shifting the map past the frame hides it (logo and credits stay visible) */
.map[data-map] iframe { position: absolute; top: 0; left: -56px; width: calc(100% + 56px); height: 100%; }
.map-dark iframe { filter: invert(.92) hue-rotate(180deg) saturate(.85) brightness(.95); }
@media (max-width: 560px) { .map-views { top: var(--sp-8); right: var(--sp-8); gap: var(--sp-6); } .map-views button { width: 40px; height: 40px; } }

/* ---------- Quote ---------- */
/* both columns end level: the cart box fills the space above the steps and scrolls when the list is long */
.qwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-16); align-items: stretch; }
.q-side { display: flex; flex-direction: column; min-height: 0; }
.q-cart { flex: 1 1 0; min-height: 240px; padding: var(--sp-10); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: var(--border); }
.q-cart .empty { height: 100%; margin: 0; padding: var(--sp-24) var(--sp-16); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 0; border-radius: 0; }
.q-cart .empty[hidden] { display: none; }
.qwrap .qitem { border-radius: 0; }
.q-steps { margin-top: var(--sp-16); padding: var(--sp-24); background: var(--navy); }
@media (max-width: 900px) { .qwrap { grid-template-columns: minmax(0, 1fr); } .q-cart { flex: none; height: 320px; } }

/* 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(--head-gap); 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(--head-gap); 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: var(--head-gap); 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 1fr); align-items: start; }
  .plant-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 160px; gap: var(--sp-12); }
}
@media (max-width: 900px) { .cap-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .cm-row { grid-template-columns: minmax(0, 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(--head-gap); }
.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: minmax(0, 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(--head-gap) 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: minmax(0, 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: var(--head-gap); 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 1fr); padding: var(--sp-20); box-shadow: none; }
  .xs-img { aspect-ratio: 16 / 10; order: -1; }
  .xs-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 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(36px, 11vw, 66px); height: auto; }
.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: minmax(0, 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 { position: relative; }
.ph2-side-photo img { position: absolute; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; padding: var(--sp-6); 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: var(--head-gap); 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: 1 / 1; 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: 1240px) { .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); }
.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-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 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: minmax(0, 1fr) minmax(0, 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: minmax(0, 1fr) minmax(0, 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 minmax(0, 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(--head-gap); 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: minmax(0, 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); }
/* product page: the photo column and the options column start and end on the same lines.
   Both columns stretch to the taller one and the main photo grows to fill the space. */
.pdp-grid { align-items: stretch; }
.pdp-gallery { position: static; display: flex; flex-direction: column; gap: var(--sp-12); }
.pdp-main { flex: 1; aspect-ratio: auto; min-height: 420px; }
.pdp-main img { position: absolute; inset: 0; object-fit: contain; }
.pdp-main.fit img { padding: 6%; }
.pdp-thumbs { flex: none; }
.pdp-head { display: grid; gap: var(--sp-8); }
.pdp-name { font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); color: var(--navy); }
.pdp-spec { font: var(--fw-strong) var(--fs-xs)/var(--lh-snug) var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-strong); }
.pdp-head .pdp-desc { margin-top: var(--sp-4); }
/* product page quote panel: step 1 options, step 2 name and phone or email, then a done state */
.pdp-head .pdp-code { justify-self: start; margin-bottom: var(--sp-4); }
.pdp-steps-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: var(--border); }
.pdp-steps-bar li { display: flex; align-items: center; gap: var(--sp-8); margin-bottom: -1px; padding-bottom: var(--sp-12); border-bottom: 3px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pdp-steps-bar b { width: var(--sp-24); height: var(--sp-24); display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font: var(--fw-semibold) var(--fs-2xs)/1 var(--font-mono); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pdp-steps-bar li.on { color: var(--navy); border-bottom-color: var(--accent); }
.pdp-steps-bar li.on b { background: var(--accent-strong); color: var(--white); }
.pdp-step { display: grid; gap: var(--sp-20); animation: fadeUp .4s var(--ease) both; }
.pdp-step[hidden], .pdp-done[hidden] { display: none; }
.pdp-input { width: 100%; height: 48px; padding: 0 var(--sp-12); border: var(--border-strong); background: var(--surface); font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.pdp-input:focus, .pdp-buy textarea:focus, .pdp-row select:focus { outline: none; border-color: var(--accent-strong); }
.pdp-group.bad .pdp-qty { border-color: var(--danger); }
.pdp-main-cta { width: 100%; height: 54px; justify-content: center; }
.pdp-alt { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8) var(--sp-24); }
.pdp-altbtn { 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-semibold); color: var(--navy); cursor: pointer; }
.pdp-altbtn i { color: var(--accent-strong); }
.pdp-altbtn:hover { color: var(--accent-strong); }
.pdp-altbtn.added i { color: var(--success); }
.pdp-recap { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-12); padding: var(--sp-14) var(--sp-16); background: var(--surface-2); border-left: 3px solid var(--accent); }
.pdp-recap span { display: block; margin-bottom: var(--sp-6); font: var(--fw-strong) var(--fs-2xs)/1 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
.pdp-recap b { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--navy); }
.pdp-edit { flex: none; 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-semibold); color: var(--accent-strong); cursor: pointer; }
.pdp-step .field { display: grid; gap: var(--sp-6); }
.pdp-send { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); }
.pdp-send .f-btn { height: 52px; justify-content: center; }
.pdp-done { display: grid; justify-items: start; gap: var(--sp-10); padding: var(--sp-24); background: var(--surface); border: var(--border); animation: fadeUp .4s var(--ease) both; }
.pdp-done > i { font-size: var(--fs-6xl); color: var(--success); }
.pdp-done h3 { font-size: var(--fs-h5); color: var(--navy); }
.pdp-done p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); }
@media (max-width: 480px) { .pdp-send { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .pdp-main { flex: none; aspect-ratio: 1; min-height: 0; } }

/* industry ring product cards: readable range name and product name */
.scatter .sc-top { gap: var(--sp-4); padding: var(--sp-6) var(--sp-4) var(--sp-10); }
.scatter .sc-label { font: var(--fw-strong) var(--fs-2xs)/var(--lh-snug) var(--font-mono); text-transform: uppercase; color: var(--accent-strong); }
.scatter .sc-top b { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--navy); }

/* ---------- Category pages: intro (text left, features right) and bento (photo, stats with line work, range navigation) ---------- */
.cat-intro-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.cat-intro-grid .sec-title { margin-top: var(--sp-16); }
.cat-lead { margin-top: var(--sp-16); max-width: 52ch; font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--ink-2); }
.cat-feats { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--border); }
.cat-feats li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-14); align-items: start; padding: var(--sp-16) 0; border-bottom: var(--border); }
.cat-fi { width: 40px; height: 40px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xl); }
.cat-feats b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--navy); }
.cat-feats span:not(.cat-fi) { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--muted); }

.cb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(210px, 16vw, 260px); gap: var(--sp-16); }
.cb-img { position: relative; grid-column: span 2; grid-row: span 2; margin: 0; overflow: hidden; background: var(--white); border: var(--border); }
.cb-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cb-img:hover img { transform: scale(1.04); }
.cb-img figcaption { position: absolute; left: var(--sp-16); bottom: var(--sp-16); padding: var(--sp-8) var(--sp-14); background: var(--accent-strong); color: var(--white); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.cb-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-6); padding: var(--sp-24); background: var(--surface); border: var(--border); color: var(--navy); }
.cb-num { position: relative; font-size: clamp(2rem, 2.9vw, 3.3rem); font-weight: var(--fw-medium); line-height: var(--lh-none); white-space: nowrap; }
.cb-lbl { position: relative; font-size: var(--fs-md); color: var(--muted); }
.cb-orange { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.cb-orange .cb-lbl { color: rgb(var(--c-white) / .85); }
/* line work: four quarter arcs in the corner draw in when the bento comes into view and turn on hover */
.cb-lines { position: absolute; top: 0; right: 0; width: 62%; max-width: 170px; fill: none; stroke: currentColor; stroke-width: 1; opacity: .28; }
.cb-lines path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) calc(var(--i) * 120ms); }
.cb-grid.in .cb-lines path, .no-js .cb-lines path { stroke-dashoffset: 0; }
.cb-stat:hover .cb-lines { opacity: .55; }
.cb-orange .cb-lines { opacity: .45; }
.cb-nav { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-20) var(--sp-24); background: var(--navy); color: var(--white); }
.cb-nav-k { font: var(--fw-strong) var(--fs-2xs)/1 var(--font-mono); text-transform: uppercase; color: rgb(var(--c-white) / .6); }
.cb-nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-nav li a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-6) 0; border-bottom: 1px solid rgb(var(--c-white) / .12); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--white); }
.cb-nav li a i { color: var(--accent); transition: transform var(--dur) var(--ease); }
.cb-nav li a:hover i { transform: translateX(4px); }
.cb-quote { margin-top: auto; display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--accent); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
@media (max-width: 1100px) { .cb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-img { grid-row: span 1; aspect-ratio: auto; } }
@media (max-width: 860px) { .cat-intro-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cb-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .cb-img { grid-column: auto; aspect-ratio: 4 / 3; } .cb-stat { min-height: 180px; } }

/* hanger catalogue on the hangers page: light section, product cards inside the container, photo flush to the border */
.hc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-16); }
.hc-grid .hcard { padding: 0 0 var(--sp-14); gap: var(--sp-6); border-radius: 0; }
.hc-grid .hcard:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.hc-grid .hcard .hc-img { border: 0; border-bottom: var(--border); border-radius: 0; margin-bottom: var(--sp-6); }
.hc-grid .hcard > :not(.hc-img) { margin-inline: var(--sp-14); }
.hc-grid .hcard h3 a { color: var(--navy); }
.hc-grid .hc-foot { margin-top: auto; padding-top: var(--sp-8); }
/* hanger catalogue placeholder while the new range is prepared */
.hc-soon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-24) clamp(32px, 6vw, 96px); align-items: end; padding: clamp(28px, 4vw, 48px); background: var(--white); border: var(--border); border-left: 4px solid var(--accent); }
.hc-soon p { margin-top: var(--sp-14); max-width: 58ch; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--ink-2); }
.hc-soon-acts { display: flex; flex-wrap: wrap; gap: var(--sp-10); }
@media (max-width: 760px) { .hc-soon { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.hc-grid .hc-img.hc-photo img { width: 100%; height: 100%; object-fit: cover; } /* square product photos fill the card */
.hc-view { display: inline-flex; align-items: center; gap: var(--sp-4); height: 32px; padding: 0 var(--sp-10); border: var(--border-strong); background: var(--surface); color: var(--navy); font-size: var(--fs-xs); font-weight: var(--fw-semibold); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hc-view:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
@media (max-width: 1100px) { .hc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); } }

/* ---------- Category pages v2: bottom-aligned head + all-information bento ---------- */
.cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-24) clamp(32px, 6vw, 112px); align-items: end; }
.cat-title { margin-top: var(--sp-16); }
.cat-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.cat-points li { display: flex; align-items: center; gap: var(--sp-10); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--ink-2); white-space: nowrap; }
.cat-points i { color: var(--accent); font-size: var(--fs-lg); }
.ct-grid { margin-top: var(--head-gap); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: var(--sp-16); }
.ct { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-24); background: var(--surface); border: var(--border); color: var(--navy); }
.ct-k { font: var(--fw-strong) var(--fs-2xs)/1 var(--font-mono); text-transform: uppercase; color: var(--muted); }
.ct-soft { background: var(--accent-soft); border-color: var(--accent-soft); }
.ct-orange { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.ct-orange .cb-lbl { color: rgb(var(--c-white) / .85); }
.ct-stat { justify-content: flex-end; }
.ct-stat:hover .cb-lines { opacity: .55; }
.ct-feat { justify-content: flex-end; }
.ct-feat .cat-fi { margin-bottom: auto; }
.ct-soft .cat-fi { background: var(--white); }
.ct-feat b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.ct-feat span:not(.cat-fi) { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); }
.ct-photo { grid-column: span 2; justify-content: flex-end; border: 0; color: var(--white); background: var(--navy); isolation: isolate; }
.ct-photo .ct-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ct-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(var(--c-navy) / .94) 0%, rgb(var(--c-navy) / .6) 65%, rgb(var(--c-navy) / .3) 100%); }
.ct-photo:hover .ct-bg { transform: scale(1.04); }
.ct-photo .ct-k { color: rgb(var(--c-white) / .75); }
.ct-photo p { max-width: 46ch; font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .92); }
.ct-nav { grid-row: span 2; background: var(--navy); border-color: var(--navy); color: var(--white); }
.ct-nav .ct-k { color: rgb(var(--c-white) / .6); }
.ct-nav ul { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; }
.ct-nav li a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); padding: var(--sp-12) 0; border-bottom: 1px solid rgb(var(--c-white) / .12); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--white); }
.ct-nav li a i { color: var(--accent); transition: transform var(--dur) var(--ease); }
.ct-nav li a:hover i { transform: translateX(4px); }
.ct-cta { justify-content: flex-end; background: var(--surface-2); border-color: var(--surface-2); }
.ct-cta b { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.ct-cta span { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); }
.ct-cta .f-btn { margin-top: var(--sp-8); align-self: flex-start; }
.ct-grid.in .cb-lines path { stroke-dashoffset: 0; }
/* bento palette: white, navy and orange only (ct-soft is the navy tile on generated pages) */
.ct-cta { background: var(--white); border-color: var(--line); }
.ct-soft, .ct-navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ct-soft .cb-lbl, .ct-navy .cb-lbl, .ct-soft span:not(.cat-fi), .ct-navy span:not(.cat-fi) { color: rgb(var(--c-white) / .75); }
.ct-soft .cat-fi, .ct-navy .cat-fi { background: rgb(var(--c-white) / .1); color: var(--accent); }
.ct-orange.ct-feat span:not(.cat-fi) { color: rgb(var(--c-white) / .9); }
.ct-orange .cat-fi { background: rgb(var(--c-white) / .14); color: var(--white); }
.ct-focus b { font-size: var(--fs-h5); }
/* hanger types: the count heads the list of type names */
.ct-tall { grid-row: span 2; }
.ct-types { grid-row: span 2; justify-content: space-between; gap: var(--sp-20); }
.ct-tnum { display: flex; flex-direction: column; gap: var(--sp-6); }
.ct-tlist { list-style: none; margin: 0; padding: 0; display: grid; }
.ct-tlist li { padding: var(--sp-10) 0; border-top: 1px solid rgb(var(--c-white) / .14); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ct:not(.ct-navy):not(.ct-orange) .ct-tlist li { border-top-color: var(--line); }
.ct-orange .ct-tlist li { border-top-color: rgb(var(--c-white) / .28); }
.ct-orange .ct-k, .ct-navy .ct-k { color: rgb(var(--c-white) / .7); }
.ct-note { margin-top: auto; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.ct-types:has(.ct-note), .ct-types:has(> .ct-k) { justify-content: flex-start; }
.ct-types > .ct-k + .ct-tlist { margin-top: var(--sp-10); }
.ct-orange .ct-note, .ct-navy .ct-note { color: rgb(var(--c-white) / .8); }
.ct-link { position: relative; margin-top: var(--sp-6); display: inline-flex; align-items: center; gap: var(--sp-6); align-self: flex-start; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-strong); }
.ct-navy .ct-link, .ct-orange .ct-link { color: var(--white); }
.ct-link i { transition: transform var(--dur) var(--ease); }
.ct-link:hover i { transform: translateX(4px); }
.ct-navy.ct-cta span { color: rgb(var(--c-white) / .75); }
/* the quote box is the bento's one orange tile: white text, white button */
.ct-orange.ct-cta { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }
.ct-orange.ct-cta span { color: rgb(var(--c-white) / .88); }
.ct-orange.ct-cta .f-btn { background: var(--white); border-color: var(--white); color: var(--accent-strong); }
.ct-orange.ct-cta .f-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* tile widths: every bento fills four columns by three rows exactly */
.ct-w2 { grid-column: span 2; }
.ct-w3 { grid-column: span 3; }
@media (max-width: 1100px) { .ct-w3 { grid-column: span 2; } }
@media (max-width: 560px) { .ct-w2, .ct-w3 { grid-column: auto; } .ct-tall { grid-row: auto; } }
@media (max-width: 1100px) { .ct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ct-nav { grid-row: span 1; } .cat-head { grid-template-columns: minmax(0, 1fr); align-items: start; } .cat-points li { white-space: normal; } }
@media (max-width: 560px) { .ct-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .ct-photo { grid-column: auto; min-height: 260px; } .ct { min-height: 170px; } }
.ct span, .ct p, .ct b { text-wrap: pretty; }

/* industry cards: no icon; on hover the whole name area fills orange */
.it-body { flex: 1; align-content: start; transition: background-color var(--dur) var(--ease); }
.it-body b, .it-body small, .it-go { transition: color var(--dur) var(--ease); }
.it-card:hover .it-body { background: var(--accent-strong); }
.it-card:hover .it-body b, .it-card:hover .it-body small, .it-card:hover .it-go { color: var(--white); }
.it-card:hover { border-color: var(--accent-strong); }
/* industry card subtext stays on one line */
.it-body small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(11.5px, calc(.6vw + 4px), 14px); }
@media (min-width: 1241px) and (max-width: 1440px) { .it-body { padding-inline: var(--sp-12); } }

/* ---------- All products (products page): category filter + product grid ---------- */
.pa-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-24); flex-wrap: wrap; }
.pa-head .sec-title { margin-top: var(--sp-16); }
.pa-count { font-size: var(--fs-md); color: var(--muted); }
.pa-count b { color: var(--navy); font-weight: var(--fw-semibold); }
.pa-bar { margin-top: var(--head-gap); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16); }
.pa-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); min-width: 0; }
.pa-search { position: relative; flex: none; width: 260px; }
.pa-search input { width: 100%; height: 42px; padding: 0 var(--sp-40) 0 var(--sp-14); border: var(--border-strong); background: var(--surface); font: inherit; font-size: var(--fs-sm); color: var(--ink); }
.pa-search input:focus { outline: none; border-color: var(--navy); }
.pa-search i { position: absolute; right: var(--sp-14); top: 50%; translate: 0 -50%; font-size: var(--fs-lg); color: var(--muted); pointer-events: none; }
.pa-empty { margin-top: var(--sp-24); font-size: var(--fs-md); color: var(--muted); }
.pa-chip { display: inline-flex; align-items: center; gap: var(--sp-8); height: 42px; padding: 0 var(--sp-16); border: var(--border-strong); background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pa-chip span { font: var(--fw-strong) var(--fs-2xs)/1 var(--font-mono); color: var(--muted); }
.pa-chip:hover { border-color: var(--navy); color: var(--navy); }
.pa-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pa-chip[aria-pressed="true"] span { color: rgb(var(--c-white) / .65); }
.pa-grid { margin-top: var(--sp-24); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-16); }
.pa-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border); transition: border-color var(--dur) var(--ease); }
.pa-card[hidden] { display: none; }
.pa-card:hover { border-color: var(--accent); }
.pa-img { aspect-ratio: 1; overflow: hidden; background: var(--white); border-bottom: var(--border); }
.pa-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pa-img img.fit { object-fit: contain; padding: 10%; }
.pa-card:hover .pa-img img { transform: scale(1.05); }
.pa-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-14); }
.pa-cat { font: var(--fw-strong) var(--fs-2xs)/1.3 var(--font-mono); text-transform: uppercase; color: var(--accent-strong); }
.pa-body h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.pa-body h3 a { color: var(--navy); }
.pa-spec { font-size: var(--fs-xs); color: var(--muted); }
.pa-foot { margin-top: auto; padding-top: var(--sp-12); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); }
.pa-view { display: inline-flex; align-items: center; gap: var(--sp-4); height: 32px; padding: 0 var(--sp-10); border: var(--border-strong); background: var(--surface); color: var(--navy); font-size: var(--fs-xs); font-weight: var(--fw-semibold); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pa-view:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
@media (max-width: 1240px) { .pa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .pa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .pa-bar { flex-direction: column; align-items: stretch; } .pa-search { width: 100%; } }
@media (max-width: 640px) { .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); } .pa-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pa-chip { flex: none; } }

/* page headers: shared factory-and-products photo, shaded dark at the left and bottom where the text sits */
.ph2::before {
  background: linear-gradient(90deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .58) 38%, rgb(0 0 0 / .22) 72%, rgb(0 0 0 / .12) 100%),
              linear-gradient(0deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 55%),
              linear-gradient(180deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 22%);
}
/* the banner takes the photo's own proportions (1600 x 639) so the whole image shows, uncropped */
.ph2.ph2-min { min-height: 0; aspect-ratio: 1600 / 639; }
.ph2.ph2-min .ph2-bg img { object-position: center; transform: none; animation: none; }
@media (max-width: 900px) { .ph2.ph2-min { aspect-ratio: auto; min-height: 340px; } }

/* page header: the homepage product slider card in place of the old products card */
.ph2 .ph2-xprod { grid-column: auto; width: min(420px, 100%); align-self: end; justify-self: end; }
@media (max-width: 860px) { .ph2-xprod { display: none; } }

/* product page: + button opens the photo full screen */
.pdp-full { position: absolute; right: var(--sp-14); bottom: var(--sp-14); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: var(--border-strong); background: rgb(var(--c-white) / .92); color: var(--navy); font-size: var(--fs-xl); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pdp-full:hover, .pdp-full:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* quote steps: after step 1, "Options (Filled)" with an Edit link */
.pdp-filled, .pdp-edit { display: none; }
[data-pdp-dot].filled .pdp-filled { display: inline; margin-left: var(--sp-4); font-weight: var(--fw-regular); color: var(--muted); }
[data-pdp-dot].filled .pdp-edit { display: inline-flex; margin-left: var(--sp-10); padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
[data-pdp-dot].filled .pdp-edit:hover { color: var(--navy); }

/* Export markets: flags-only marquee (inside the export map, and on its own on the clients page) */
.xf { position: relative; overflow: hidden; margin-top: clamp(20px, 3vw, 36px); padding-block: var(--sp-28) var(--sp-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 5%, var(--black) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--black) 5%, var(--black) 95%, transparent); }
.gp-map .xf { border-top: 1px solid rgb(var(--c-white) / .1); }
.xf-light { margin-top: var(--head-gap); }
.xf-track { display: flex; width: max-content; animation: xf-run 50s linear infinite; will-change: transform; backface-visibility: hidden; }
/* --xf-loop is the exact distance to the third copy, measured in site.js so the wrap-around never jumps */
@keyframes xf-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--xf-loop, 50%)), 0, 0); } }
.xf-set { display: flex; margin: 0; padding: 0; list-style: none; }
.xf-item { position: relative; flex-shrink: 0; margin-right: clamp(28px, 4vw, 56px); }
.xf-item .xc-flag { width: clamp(56px, 6vw, 72px); }
.xf-name { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; white-space: nowrap; padding: var(--sp-4) var(--sp-10); background: var(--white); color: var(--navy); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.xf-light .xf-name { background: var(--navy); color: var(--white); }
.xf-item:hover .xf-name { opacity: 1; translate: -50% 0; }
/* flags stay flat and true to colour; only the strip moves */
.xc-flag { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--c-black) / .06), 0 8px 18px -10px rgb(var(--c-black) / .35); transition: transform var(--dur) var(--ease); }
.xc-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xf-item:hover .xc-flag { transform: translateY(-3px) scale(1.06); }
/* a flag lights up its route on the map */
@media (prefers-reduced-motion: reduce) { .xf-track { animation: none; } .xf-set[aria-hidden] { display: none; } .xf-set { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-20); } }

/* Small-screen fixes found by the responsive audit (320px to 414px) */
.cl-left, .cl-list { min-width: 0; }
.cc-body a, .cc-body li span { overflow-wrap: anywhere; }

@media (max-width: 400px) {
  .pa-body { padding: var(--sp-10); }
  .pa-foot .q-add, .hc-grid .hc-foot .q-add { padding-inline: var(--sp-10); }
  .hc-grid .hcard > :not(.hc-img) { margin-inline: var(--sp-10); }
  .hc-view { padding-inline: var(--sp-8); }
}
.abc-why-t h3 { font-size: clamp(1.125rem, 1.6vw, var(--fs-h4)); }
@media (max-width: 359px) {
  .brand img, .has-overlay .brand img { height: 16px !important; }
  .header-actions { gap: var(--sp-6); }
  .header-actions .icon-btn { width: 38px; height: 38px; }
}
main.no-fcta { padding-bottom: 0; }
/* Tablet: proprietor photo and message side by side instead of a lone photo above the text */
@media (min-width: 641px) and (max-width: 1100px) {
  .ceo2 { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(24px, 4vw, 44px); align-items: start; }
  .ceo2-media { max-width: none; width: calc(100% - 16px); }
  .ceo2-quote { font-size: var(--fs-2xl); }
}
@media (max-width: 600px) {
  .gp-origin span { left: auto; right: calc(50% - 7px); top: calc(100% + 6px); translate: none; padding: 2px 8px; font-size: 10px; }
  .cl-name { white-space: normal; }
  .xs-meta dd { font-size: var(--fs-base); line-height: var(--lh-normal); }
}
.ob .ob-cell > .ob-card .ob-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* full product names, two lines at most */
/* Custom-item card in the order box: the column is narrow up to ~1180px, so stack text above the button there too */
@media (min-width: 641px) and (max-width: 1180px) {
  .ob .ob-card.ob-custom { flex-wrap: wrap; gap: var(--sp-12); }
  .ob .ob-cu-txt { flex-basis: calc(100% - 62px); }
  .ob .ob-cu-txt small { white-space: normal; }
  .ob .ob-cu-act, .ob .ob-cu-act > span { width: 100%; justify-content: center; }
}
/* Tablet and laptop fixes from the 768/1024/1280 review */
.cl-name { white-space: normal; } /* certificate names wrap instead of ending in "..." on laptops */
@media (min-width: 901px) and (max-width: 1279px) {
  .abc-head { grid-template-columns: minmax(0, 1fr); } /* one-line heading no longer runs into the lead paragraph */
}
@media (min-width: 1280px) {
  .abc-head { grid-template-columns: minmax(max-content, 7fr) minmax(0, 5fr); }
}
/* Footer on tablets: contact sits beside the brand blurb, the three link columns below, instead of contact alone on a third row */
.f-contact { overflow-wrap: anywhere; }
@media (min-width: 720px) and (max-width: 1040px) {
  .f-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .f-grid > :first-child { grid-column: 1 / 3; grid-row: 1; }
  .f-grid > :last-child { grid-column: 3; grid-row: 1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .logo-wall .tcard { height: 96px; }
}
/* Five cards on a three-column grid: centre the last two instead of leaving an empty slot */
@media (min-width: 641px) and (max-width: 1240px) {
  .it-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .it-grid > * { grid-column: span 2; }
  .it-grid > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .prods-grid.pg-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .prods-grid.pg-5 > * { grid-column: span 2; }
  .prods-grid.pg-5 > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .cform.cform-one { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* wider form, roomier inputs */
}
@media (min-width: 1181px) and (max-width: 1365px) {
  .ob .ob-cu-txt small { white-space: normal; }
}
/* Laptop product page: the stretched photo box turned into a tall strip; keep it a portrait frame that follows the scroll */
@media (min-width: 961px) and (max-width: 1439px) {
  .pdp-grid { align-items: start; }
  .pdp-gallery { position: sticky; top: calc(var(--header-h) + 24px); }
  .pdp-main { flex: none; aspect-ratio: 4 / 5; min-height: 0; }
}