/* SG Print O Pack — "The Light-Box Stand". Tokens mirror DESIGN.md. */
@font-face { font-family: "Inter"; src: url(../fonts/inter-400.woff2) format("woff2"), url(../fonts/inter-400.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-500.woff2) format("woff2"), url(../fonts/inter-500.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-700.woff2) format("woff2"), url(../fonts/inter-700.ttf) format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter-800.woff2) format("woff2"), url(../fonts/inter-800.ttf) format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --cloud: #F2F3EE; --panel: #FAFAF7; --panel-dim: #E1E2DA;
  --rail: #C9CCC1; --rail-deep: #9DA195;
  --cobalt: #1B51E4; --cobalt-deep: #0A3CC4; --cobalt-glow: #3D6CF2; --cream: #F6F5F0; --sky: #E9F1FE;
  --cool: #8FB3F0; --wasabi: #C4D23C; --wasabi-deep: #AEBC28;
  --ink: #0E1433; --ink-soft: #434A68; --on-cobalt: #EAEFFD;
  --light: 255 249 224;
  --maxw: 1320px; --gutter: clamp(20px, 4vw, 48px); --bay: clamp(56px, 6.5vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 14px 30px -24px rgb(14 20 51 / .45); /* the home .app card's soft shadow */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 1rem/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, dl, dd { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
svg:not(.fill) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.fill { fill: currentColor; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 100; top: 12px; left: 12px; background: var(--wasabi); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
:is(.lightbox, .foot, .custom, .on-dark) :focus-visible { outline-color: var(--wasabi); } /* ink on light sections, wasabi on blue */

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- The stand: aluminium uprights + beams with joint nodes ---------- */
main { position: relative; }
main::before { content: ""; position: absolute; inset: 0 max(8px, calc(50% - var(--maxw) / 2)); border-inline: 1px solid rgb(201 204 193 / .55); pointer-events: none; z-index: 0; }
.bay { position: relative; padding-block: var(--bay); }
.bay::before, .bay::after { content: ""; position: absolute; top: 0; pointer-events: none; }
.bay::before { left: max(8px, calc(50% - var(--maxw) / 2)); right: max(8px, calc(50% - var(--maxw) / 2)); height: 1px; background: rgb(201 204 193 / .55); }
.bay::after { left: calc(max(8px, calc(50% - var(--maxw) / 2)) - 2px); right: calc(max(8px, calc(50% - var(--maxw) / 2)) - 2px); height: 5px; top: -2px;
  background: linear-gradient(var(--rail) 0 0) left / 5px 5px no-repeat, linear-gradient(var(--rail) 0 0) right / 5px 5px no-repeat; }
.bay--flush { padding-top: 0; }
.bay--flush::before, .bay--flush::after { display: none; }

/* ---------- Type helpers ---------- */
.display { font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.04; letter-spacing: -0.035em; }
.h2 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); }
.h3 { font-size: clamp(1.125rem, 1.3vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.15; }
.lede { font-size: clamp(1rem, 1.1vw, 1.125rem); color: var(--ink-soft); max-width: 60ch; }
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 48px); }
.head .lede { justify-self: end; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--cobalt); margin-bottom: 18px; }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--wasabi); box-shadow: 0 0 0 3px rgb(196 210 60 / .25); }

/* ---------- Buttons ---------- */
.btn { --bg: var(--cobalt); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg); font-weight: 700; font-size: .9375rem; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease), background-color .25s, box-shadow .4s var(--ease); box-shadow: 0 10px 22px -14px rgb(14 20 51 / .6); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .4s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(14 20 51 / .6); }
.btn:hover svg:not(.fill) { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn--wasabi { --bg: var(--wasabi); --fg: var(--ink); }
.btn--wasabi:hover { --bg: var(--wasabi-deep); }
.btn--ghost { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55); }
.btn--ghost:hover { --bg: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1.5px #fff; }
.btn--line { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { --bg: var(--cobalt); --fg: #fff; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.doors { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--cobalt); }
.link svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(4px); }


/* ---------- Fascia (header) ---------- */
.fascia { position: sticky; top: 0; z-index: 50; background: var(--cobalt); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 12px 30px -20px rgb(14 20 51 / .8);
  background-image: linear-gradient(180deg, rgb(255 255 255 / .06), transparent 60%); }
.fascia::after { content: ""; position: absolute; inset: auto 0 -6px; height: 6px; background: linear-gradient(180deg, #EEF0EA, #B3B7AB 45%, #8E9287); box-shadow: 0 3px 6px -2px rgb(14 20 51 / .35); }
.fascia__in { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.brand img { width: 96px; height: auto; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { position: relative; padding: 10px 14px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--on-cobalt); border-radius: 8px; transition: color .2s; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--wasabi); }
.fascia__act { display: flex; align-items: center; gap: 10px; }
.btn-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); transition: background .25s, box-shadow .25s; }
.btn-icon:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-icon svg { width: 21px; height: 21px; }
.menu { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .1); cursor: pointer; place-content: center; gap: 5px; }
.menu span:not(.sr) { display: block; width: 18px; height: 2px; background: #fff; transition: transform .3s var(--ease); }
.menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mnav { display: grid; gap: 4px; padding: 12px var(--gutter) 28px; border-top: 1px solid rgb(255 255 255 / .12); }
.mnav[hidden] { display: none; }
.mnav > a:not(.btn) { padding: 14px 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .12); }
.mnav > a[aria-current="page"] { color: var(--wasabi); }
.mnav .btn { margin-top: 12px; }

/* ---------- Light box (backlit fabric panel in an aluminium frame) ---------- */
.frame { position: relative; padding: 5px; border-radius: 16px; background: linear-gradient(180deg, #F6F7F2 0%, #DADDD3 30%, #CDD0C5 55%, #DDE0D6 80%, #F1F2EC 100%); box-shadow: 0 22px 44px -30px rgb(14 20 51 / .45), inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -1px 0 rgb(14 20 51 / .1), inset 0 0 0 1px rgb(14 20 51 / .08); }
.frame::before { content: ""; position: absolute; inset: 2px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); pointer-events: none; }
.lightbox { position: relative; overflow: hidden; isolation: isolate; border-radius: 11px; color: #fff;
  background:
    radial-gradient(70% 90% at var(--gx, 72%) var(--gy, 46%), rgb(61 108 242 / .6), rgb(61 108 242 / .18) 40%, transparent 70%),
    linear-gradient(155deg, #2459EA 0%, var(--cobalt) 45%, var(--cobalt-deep) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.lightbox::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lightbox p, .lightbox li { color: var(--on-cobalt); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.hero::before, .hero::after { display: none; }
.hero .lightbox { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: min(520px, calc(100svh - 300px)); padding: clamp(24px, 2.6vw, 36px) clamp(22px, 4vw, 56px); }
.hero__copy { position: relative; z-index: 2; display: grid; gap: 28px; align-content: center; }
.hero__copy .lede { color: var(--on-cobalt); max-width: 60ch; text-wrap: balance; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--wasabi); }

/* The plastic loop */
.loop { position: relative; display: grid; gap: 12px; justify-items: center; }
.loop__stage { position: relative; width: min(100%, 440px); aspect-ratio: 1; }
.loop__svg { width: 100%; height: 100%; overflow: visible; }
.loop__ring { stroke: rgb(255 255 255 / .22); stroke-width: 1.5; fill: none; stroke-dasharray: 2 7; }
.loop__track { stroke: rgb(255 255 255 / .08); stroke-width: 18; fill: none; }
.loop__tail { stroke: var(--wasabi); stroke-width: 3.5; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(196 210 60 / .7)); }
.loop__puck { fill: var(--wasabi); filter: drop-shadow(0 0 10px rgb(196 210 60 / .95)); }
.loop__chev { stroke: rgb(255 255 255 / .45); stroke-width: 2; fill: none; }
.loop__node { cursor: pointer; }
.loop__node circle { fill: rgb(20 40 140 / .55); stroke: rgb(255 255 255 / .4); stroke-width: 1.5; transition: fill .5s var(--ease), stroke .5s, transform .6s var(--ease); }
.loop__node use { color: #fff; stroke-width: 1.7; transition: color .4s; }
.loop__node text { fill: var(--on-cobalt); font: 700 13px Inter, sans-serif; letter-spacing: .02em; }
.loop__node.is-on circle { fill: var(--wasabi); stroke: #fff; transform: scale(1.18); }
.loop__node.is-on use { color: var(--ink); }
.loop__node:hover circle { stroke: #fff; }
.loop__node:focus-visible { outline: none; }
.loop__node:focus-visible circle { stroke: var(--wasabi); stroke-width: 3; }
.loop__art g.art { opacity: 0; transform: scale(.86) translateY(10px); transform-origin: 320px 255px; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s; filter: blur(6px); }
.loop__art g.art.is-on { opacity: 1; transform: none; filter: blur(0); }
.loop__art use { color: #fff; stroke-width: 3.2; }
.loop__core { position: absolute; left: 50%; top: 61%; width: 46%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.loop__core b { display: block; font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.loop__core span { display: block; margin-top: 4px; font-size: clamp(.78rem, .95vw, .9rem); line-height: 1.4; color: var(--on-cobalt); }
.loop__core .swap { transition: opacity .4s, transform .6s var(--ease); }
.loop__core.is-swapping .swap { opacity: 0; transform: translateY(6px); }
.loop__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: min(100%, 480px); }
.loop__legend button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--on-cobalt); font-size: .75rem; font-weight: 600; cursor: pointer; transition: background .3s, color .3s; }
.loop__legend button i { font-style: normal; font-size: .6875rem; font-weight: 800; opacity: .7; }
.loop__legend button:hover { background: rgb(255 255 255 / .16); color: #fff; }
.loop__legend button[aria-pressed="true"] { background: var(--wasabi); color: var(--ink); }
.loop__legend button[aria-pressed="true"] i { opacity: 1; }

/* Facts strip under the hero: the stand's counter label */
.counter { display: flex; flex-wrap: wrap; gap: 10px 0; justify-content: space-between; padding: 22px 6px 0; font-size: .9375rem; color: var(--ink-soft); }
.counter li { display: flex; align-items: center; gap: 10px; }
.counter li + li::before { content: ""; width: 7px; height: 7px; background: var(--rail-deep); margin-right: 14px; }
.counter b { color: var(--ink); font-weight: 700; }

/* ---------- Spotlight fixture + switch-on ---------- */
.lit { position: relative; isolation: isolate; }
.lit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease);
  background: radial-gradient(60% 70% at 50% -6%, rgb(var(--light) / .7), rgb(var(--light) / .22) 42%, transparent 72%); }
.lit.on::before { opacity: 1; }
.lit::after { content: ""; position: absolute; z-index: -1; top: 4px; left: 50%; width: 76%; height: 82%; translate: -50% 0; pointer-events: none; opacity: 0; transition: opacity 1.2s .15s var(--ease);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgb(var(--light) / .75), rgb(var(--light) / .18) 55%, transparent 90%); filter: blur(6px); }
.lit.on::after { opacity: 1; }
.board.lit::after, .pcard.lit::after { opacity: 0 !important; }

/* ---------- Card meta chips ---------- */
.sample__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgb(14 20 51 / .07); font-size: .75rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.chip--eco { background: rgb(196 210 60 / .3); color: #3f4600; }
.chip--eco::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6f7a00; }

/* ---------- Industries rail (sideways interlude) ---------- */
.rail-sec { position: relative; }
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.rail-track { display: flex; gap: 20px; padding-inline: max(var(--gutter), calc(50% - var(--maxw) / 2 + var(--gutter))); will-change: transform; }
.ind { position: relative; flex: none; width: clamp(250px, 22vw, 300px); height: clamp(360px, 30vw, 410px); padding: 24px; border-radius: 12px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; overflow: hidden; }
.ind.lightbox { --gx: 80%; --gy: 20%; }
.ind__n { font-size: .8125rem; font-weight: 800; color: var(--cool); font-variant-numeric: tabular-nums; }
.ind h3 { font-size: 1.375rem; letter-spacing: -0.025em; color: #fff; }
.ind > p { font-size: .9375rem; line-height: 1.5; }
.ind--ask h3 { margin-top: 8px; }
.ind__img { place-self: start center; width: 100%; height: auto; max-height: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 30px -18px rgb(0 0 0 / .45); transition: transform .8s var(--ease); } /* generated studio photos */
.ind--ask { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); align-content: space-between; }
.ind--ask h3 { color: var(--ink); }
.ind--ask p { color: var(--ink-soft); }

/* ---------- Materials: swatches on a ring ---------- */
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 40px; }
.swatch { position: relative; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); transform-origin: 50% -30px; transition: transform .8s var(--ease); }
.swatch:hover { transform: rotate(-1deg); }
.swatch::before { content: ""; position: absolute; top: -34px; left: 50%; width: 30px; height: 50px; margin-left: -15px; border: 2px solid #B3B7AB; border-bottom-color: transparent; border-radius: 16px 16px 0 0; }
.swatch__hole { position: absolute; top: 12px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--cloud); box-shadow: inset 0 2px 3px rgb(14 20 51 / .25); z-index: 2; }
.swatch__tex { aspect-ratio: 4 / 3; border-radius: 12px 12px 0 0; position: relative; overflow: hidden; background: #E9F1FE; }
.swatch__tex img { width: 100%; height: 100%; object-fit: cover; } /* product photo per material */
.swatch__body { padding: 20px 22px 24px; display: grid; gap: 10px; }
.swatch__body p { color: var(--ink-soft); font-size: .9375rem; }
.swatch__eg { font-size: .8125rem; color: var(--ink-soft); }
.swatch__eg b { color: var(--ink); }
.swatch__tag { position: absolute; left: 18px; bottom: 16px; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / .85); font-size: .75rem; font-weight: 700; }

/* ---------- Under one roof ---------- */
.roof { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.roof__lead { position: sticky; top: 120px; display: grid; gap: 24px; }
.offer li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--rail); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.offer li:last-child { border-bottom: 1px solid var(--rail); }
.offer svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--cobalt); color: #fff; stroke-width: 1.8; }

/* ---------- Clients board ---------- */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.board__cell { position: relative; display: grid; place-items: center; height: clamp(84px, 8vw, 112px); padding: 16px 24px; border-right: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.board__cell:nth-child(4n) { border-right: 0; }
.board__cell:nth-last-child(-n + 4) { border-bottom: 0; }
.board__cell img { max-height: 44px; max-width: 70%; width: auto; object-fit: contain; }
.board__name { font-weight: 800; font-size: 1.375rem; letter-spacing: -0.04em; color: var(--ink); }

/* ---------- Certificates on the wall ---------- */
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cert { padding: 3px; border-radius: 8px; background: linear-gradient(160deg, #F1F2EC, #CDD0C5); box-shadow: var(--shadow); }
.cert__mat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 6px; height: 100%; padding: 18px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--rail); }
.cert__mat .seal { grid-row: 1 / 4; align-self: center; width: 104px; height: 72px; font-size: .75rem; }
.seal { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 12px; background: #fff; color: var(--cobalt); font-weight: 800; font-size: .95rem; letter-spacing: -0.01em; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.seal img { position: absolute; inset: 14% 10%; width: 80%; height: 72%; object-fit: contain; } /* the body's logo where we may show one; otherwise the code */
.cert h3 { grid-row: 1 / 4; font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; align-self: center; hyphens: auto; overflow-wrap: break-word; }

/* ---------- Closing light box ---------- */
.close .lightbox { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: end; padding: clamp(36px, 6vw, 88px); --gx: 85%; --gy: 20%; }
.close h2 { color: #fff; }
.close__side { display: grid; gap: 22px; justify-items: start; }
.close__tel { display: grid; gap: 4px; }
.close__tel a { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: #fff; }
.close__tel a:hover { color: var(--wasabi); }

/* ---------- Footer: the stand's plinth ---------- */
.foot { position: relative; padding-top: 56px; background: var(--cobalt); color: #fff; overflow: hidden;
  background-image: radial-gradient(60% 80% at 90% 0%, rgb(61 108 242 / .7), transparent 70%), linear-gradient(160deg, var(--cobalt) 40%, var(--cobalt-deep)); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.4fr 1.3fr; gap: 32px; }
.foot__brand { display: grid; gap: 16px; align-content: start; }
.foot__brand p { color: var(--on-cobalt); max-width: 36ch; }
.foot__doors { display: flex; flex-wrap: wrap; gap: 10px; }
.foot__h { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: #fff; margin-bottom: 14px; }
.foot__h--gap { margin-top: 24px; }
.foot__list { display: grid; gap: 10px; }
.foot__list a, .foot__addr { display: flex; gap: 10px; align-items: flex-start; color: var(--on-cobalt); text-decoration: none; font-size: .9375rem; line-height: 1.45; }
.foot__list a:hover { color: #fff; }
.foot__list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--cool); }
.foot__market { color: var(--on-cobalt); font-size: .9375rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.foot__word { width: min(100%, 520px); height: auto; aspect-ratio: 1362 / 112; object-fit: cover; object-position: 0 0; margin-top: 48px; opacity: .9; translate: -1.84% 0; }
.foot__tag { margin: 10px 0 0; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .9; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px 0 24px; margin-top: 24px; border-top: 1px solid rgb(255 255 255 / .15); font-size: .8125rem; color: var(--on-cobalt); }

/* ---------- Page heads (inner pages) ---------- */
.pagehead { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 0; }
.pagehead::before, .pagehead::after { display: none; }
.pagehead .lightbox { padding: clamp(28px, 3.4vw, 44px) clamp(22px, 4vw, 56px); display: grid; gap: 14px; --gx: 80%; --gy: 40%; }
.pagehead .lightbox:has(.ph-art) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 48px; align-items: center; }
.pagehead .lightbox:has(.ph-art) > :not(.ph-art) { grid-column: 1; }
.ph-art { grid-column: 2; grid-row: 1 / span 2; justify-self: center; align-self: center; position: relative; }
.pagehead .lightbox:has(.ph-art) > .filters { grid-column: 1 / -1; }
.ph-logo { width: min(100%, 230px); height: auto; opacity: .9; filter: drop-shadow(0 0 28px rgb(143 179 240 / .35)); }
/* About hero: editorial. Ink heading on white, lede beside it, team photo large below in the aluminium frame */
.abh--ed { padding-top: clamp(36px, 4.5vw, 64px); padding-bottom: 0; }
.abh--ed::before, .abh--ed::after { display: none; }
.abh--ed h1 { max-width: 14ch; font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.abh--ed .lede { max-width: 34ch; }
.abh--ed .abh__img { width: 100%; height: auto; aspect-ratio: 2.1 / 1; object-fit: cover; object-position: 50% 100%; border-radius: 11px; }
/* About hero (client: blend in, don't pop out): blue headline box as on Contact, then the photo with no frame, its edges fading into the white page */
.abh-d { margin-top: clamp(20px, 2.5vw, 32px); }
.abh-d .abh__img { border-radius: 0; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 93%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 93%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
.ph-tel { display: grid; gap: 14px; }
.ph-tel a { display: grid; text-decoration: none; color: #fff; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.ph-tel a small { font-size: .8125rem; font-weight: 600; letter-spacing: 0; color: var(--on-cobalt); margin-bottom: 4px; }
.ph-tel a:hover { color: var(--wasabi); }
.pagehead h1 { color: #fff; max-width: 16ch; }
.pagehead .lede { color: var(--on-cobalt); }

/* ---------- Products page ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.filters button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .1); color: #fff; font-weight: 600; font-size: .875rem; cursor: pointer; transition: background .25s, color .25s; }
.filters button:hover { background: rgb(255 255 255 / .2); }
.filters button[aria-pressed="true"] { background: var(--wasabi); color: var(--ink); }
.results { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 36px; color: var(--ink-soft); font-size: .9375rem; }
.results b { color: var(--ink); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pcard { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--rail), 0 22px 38px -24px rgb(14 20 51 / .5); }
.pcard__img { position: relative; aspect-ratio: 4 / 3; }
.pcard__img img { position: absolute; inset: 20px 20px 6px; width: calc(100% - 40px); height: calc(100% - 26px); object-fit: contain; filter: drop-shadow(0 8px 10px rgb(14 20 51 / .14)); transition: transform .8s var(--ease); }
.pcard:hover .pcard__img img { transform: translateY(-3px) scale(1.02); }
.pcard__img--scene { overflow: hidden; border-radius: 12px 12px 0 0; } /* generated studio photos fill the slot */
.pcard__img--scene img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.pcard:hover .pcard__img--scene img { transform: scale(1.03); }
.pcard__body { display: grid; gap: 8px; align-content: start; padding: 12px 16px 16px; }
.pcard h3 { font-size: .9375rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.pcard__act { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.pcard__act .btn { min-height: 36px; padding: 0 14px; font-size: .8125rem; box-shadow: inset 0 0 0 1px rgb(14 20 51 / .5); }
.pcard__act .btn-icon { width: 36px; height: 36px; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(14 20 51 / .5); }
.pcard__act .btn-icon:hover { background: var(--cobalt); color: #fff; box-shadow: none; }
.pcard__act .btn-icon svg { width: 18px; height: 18px; }
.custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 56px; padding: 28px 32px; border-radius: 12px; background: var(--cobalt); color: #fff; }
.custom p { color: var(--on-cobalt); margin-top: 8px; }

/* ---------- About ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.prose { display: grid; gap: 16px; color: var(--ink-soft); font-size: 1rem; max-width: 62ch; }
.pull { font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.pull em { font-style: normal; color: var(--cobalt); }
.vision { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.8vw, 32px); border-radius: 12px; background: var(--cool); color: var(--ink); }
.vision h2 { font-size: .875rem; letter-spacing: .02em; font-weight: 700; }
.vision p { font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.45; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--rail); border-bottom: 1px solid var(--rail); }
.facts > div { padding: 22px 24px 22px 0; display: grid; gap: 6px; align-content: start; }
.facts > div + div { padding-left: 24px; border-left: 1px solid var(--rail); }
.facts dt { font-size: .8125rem; font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.person { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(27 81 228 / .08); color: var(--cobalt); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
.person p { color: var(--ink-soft); font-size: .9375rem; }
.person .person__role { margin-top: -8px; color: var(--cobalt); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.de { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: center; padding: clamp(28px, 3.6vw, 48px) clamp(24px, 4.4vw, 64px); border-radius: 12px; background: var(--wasabi); color: var(--ink); }
.de h2 { font-size: clamp(1.75rem, 2.6vw, 2.4rem); letter-spacing: -0.04em; }
.de__lines { display: grid; gap: 12px; font-size: 1rem; }
.de__lines p:first-child { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.015em; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: start; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.form h2, .form .full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; align-content: start; }
.field label { font-size: .875rem; font-weight: 700; }
.field label span { font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid rgb(14 20 51 / .5); border-radius: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 112px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), 0 0 0 4px rgb(27 81 228 / .15); }
.field [aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 4px rgb(180 35 24 / .1); }
.field .err { font-size: .8125rem; font-weight: 600; color: #B42318; text-wrap: pretty; }
.field [aria-invalid="true"]:focus { border-color: #B42318; box-shadow: 0 0 0 1px #B42318, 0 0 0 4px rgb(180 35 24 / .15); } /* the field you're on still looks wrong */
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.form__note { font-size: .8125rem; color: var(--ink-soft); }
.sent { grid-column: 1 / -1; display: grid; gap: 14px; justify-items: start; padding: 28px; border-radius: 12px; background: rgb(196 210 60 / .18); box-shadow: inset 0 0 0 1.5px var(--wasabi-deep); }
.sent[hidden] { display: none; }
.card-side { display: grid; gap: 20px; }
.vcard { padding: 26px; border-radius: 12px; display: grid; gap: 18px; --gx: 90%; --gy: 0%; }
.vcard img { width: 80px; }
.vcard ul { display: grid; gap: 12px; }
.vcard small { display: block; color: var(--on-cobalt); font-size: .8125rem; }
.map { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); background: #fff; }
.map iframe { display: block; width: 100%; height: 240px; border: 0; filter: saturate(.7) contrast(1.05); }
.map p { padding: 12px 16px; font-size: .8125rem; color: var(--ink-soft); }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--rd, 0s); }
.rv.in { opacity: 1; transform: none; }


/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav, .fascia__act .btn { display: none; }
  .menu { display: grid; }
  .fascia__act { margin-left: auto; }
  .hero .lightbox { grid-template-columns: 1fr; min-height: 0; }
  .loop__stage { width: min(100%, 520px); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .head, .roof, .split, .close .lightbox, .contact, .de, .custom, .pagehead .lightbox:has(.ph-art) { grid-template-columns: 1fr; }
  .ph-art { grid-column: 1; grid-row: auto; justify-self: start; }
  .ph-logo { width: 132px; }
  .abh--ed .abh__img { aspect-ratio: 4 / 3; }
  .head .lede { justify-self: start; }
  .roof__lead { position: static; }
  .swatches, .team { grid-template-columns: 1fr; }
  .swatches { gap: 56px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board__cell:nth-child(4n) { border-right: 1px solid var(--rail); }
  .board__cell:nth-child(2n) { border-right: 0; }
  .board__cell:nth-last-child(-n + 4) { border-bottom: 1px solid var(--rail); }
  .board__cell:nth-last-child(-n + 2) { border-bottom: 0; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rail); }
  .form { grid-template-columns: 1fr; }
  /* Industries rail becomes a native swipe carousel */
  .rail-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 12px; scrollbar-width: none; }
  .rail-track::-webkit-scrollbar { display: none; }
  .ind { scroll-snap-align: center; width: 78vw; height: 400px; }
}
@media (max-width: 560px) {
  .certs { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .counter { flex-direction: column; }
  .counter li + li::before { display: none; }
  .doors .btn { flex: 1 1 100%; }
}

/* =====================================================================
   v2 — Liquid glass, aurora background, light spill, breathing backlight
   ===================================================================== */
@property --spec { syntax: "<angle>"; inherits: true; initial-value: 200deg; }
:root { --head: 92px; }
html { scroll-padding-top: 110px; }

/* Aurora: the aisle's ambient light, drifting slowly behind everything */
body::before, body::after { content: ""; position: fixed; z-index: -2; pointer-events: none; inset: -12vmax; }
body::before { background:
  radial-gradient(42vmax 34vmax at 6% 4%, rgb(143 179 240 / .78), transparent 70%),
  radial-gradient(34vmax 28vmax at 94% 22%, rgb(196 210 60 / .40), transparent 70%),
  radial-gradient(48vmax 36vmax at 80% 98%, rgb(27 81 228 / .20), transparent 70%);
  animation: aurora 42s ease-in-out infinite alternate; opacity: .45; }
body::after { background:
  radial-gradient(38vmax 30vmax at 14% 86%, rgb(143 179 240 / .55), transparent 70%),
  radial-gradient(34vmax 26vmax at 52% 46%, rgb(143 179 240 / .26), transparent 70%),
  radial-gradient(26vmax 22vmax at 70% 60%, rgb(196 210 60 / .16), transparent 70%);
  animation: aurora 58s ease-in-out infinite alternate-reverse; opacity: .45; }
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4vmax, -3vmax, 0) rotate(7deg) scale(1.06); }
  100% { transform: translate3d(-3vmax, 4vmax, 0) rotate(-5deg) scale(1.02); }
}

/* Backlight breathing inside every light box */
.lightbox::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(32% 42% at 28% 30%, rgb(143 179 240 / .14), transparent 70%), radial-gradient(30% 38% at 76% 72%, rgb(27 81 228 / .42), transparent 70%), radial-gradient(22% 30% at 60% 18%, rgb(196 210 60 / .05), transparent 70%);
  animation: breathe 18s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.08); } }
/* Light spilling from the hero box onto the aisle floor */
.hero .frame::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -44px; height: 80px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(14 20 51 / .14), rgb(27 81 228 / .05) 55%, transparent); filter: blur(10px); }

/* ---------- The glass material ---------- */
.glass { isolation: isolate; background: var(--tint, rgb(255 255 255 / .34));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .9), inset 0 -1px 1px rgb(255 255 255 / .3), inset 0 0 0 1px rgb(255 255 255 / .24), inset 0 0 22px rgb(255 255 255 / .16),
    0 14px 34px -14px rgb(14 20 51 / .42), 0 3px 10px -3px rgb(14 20 51 / .16); }
.no-lens .glass { -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8); }
.glass::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.3px; pointer-events: none;
  background: conic-gradient(from var(--spec), rgb(255 255 255 / .95), rgb(255 255 255 / .06) 20%, rgb(255 255 255 / .5) 50%, rgb(255 255 255 / .06) 80%, rgb(255 255 255 / .95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass--dark { --tint: rgb(14 20 51 / .22); }
.glass--wasabi { --tint: rgb(196 210 60 / .78); }

/* ---------- Header: floating glass bar ---------- */
.fascia { position: sticky; top: 0; z-index: 50; padding-top: 12px; background: none; box-shadow: none; color: var(--ink); pointer-events: none; }
.fascia::after { display: none; }
.fascia__in { min-height: 0; padding-inline: 0; }
.fascia__bar { --tint: rgb(255 255 255 / .5); position: relative; pointer-events: auto; display: flex; align-items: center; gap: 28px; min-height: 66px; padding: 0 10px 0 22px; border-radius: 999px; }
.fascia .nav a { color: var(--ink); font-weight: 600; }
.fascia .nav a:hover, .fascia .nav a[aria-current="page"] { color: var(--ink); }
.fascia .btn-icon { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(14 20 51 / .18); }
.fascia .btn-icon:hover { background: rgb(255 255 255 / .5); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fascia .menu { background: rgb(14 20 51 / .08); }
.fascia .menu span:not(.sr) { background: var(--ink); }
.brand img { width: 88px; }
.brand { display: grid; } .brand img { grid-area: 1 / 1; } .toned .brand img { transition: opacity .3s; }
.brand__w, .on-dark .brand img:first-child { opacity: 0; } .on-dark .brand .brand__w { opacity: 1; } /* chrome.js: white logo over blue surfaces */
/* Over blue (.on-dark) the bar turns clear glass with a white nav, to carry the white logo */
.fascia__bar.on-dark { --tint: rgb(255 255 255 / .12); } .fascia__bar.toned { transition: background-color .3s; }
.on-dark .nav a, .on-dark .nav a:hover, .on-dark .nav a[aria-current="page"], .on-dark .btn-icon { color: #fff; }
.on-dark .btn-icon { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); } .on-dark .btn-icon:hover { background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1.5px #fff; }
.on-dark .menu { background: rgb(255 255 255 / .14); } .on-dark .menu span:not(.sr) { background: #fff; }
.mnav { position: relative; pointer-events: auto; margin: 10px 0 0; padding: 14px 24px 24px; border-radius: 28px; border-top: 0; }
.mnav > a:not(.btn) { border-bottom-color: rgb(14 20 51 / .1); color: var(--ink); }
.mnav > a[aria-current="page"] { color: var(--cobalt); }
.mnav .btn--ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.hero { padding-top: 22px; }
.pagehead { padding-top: 22px; }

/* ---------- Floating WhatsApp (glass, wasabi tint) ---------- */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 15px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .9375rem; text-decoration: none; letter-spacing: -0.01em;
  transition: transform .5s var(--ease), opacity .4s; }
.fab svg { width: 20px; height: 20px; }
.fab:hover { transform: translateY(-2px); }
.fab.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ---------- Hero glass pieces ---------- */
.loop__core { top: 50%; bottom: auto; width: 60%; padding: 16px 20px 18px; border-radius: 22px; --tint: rgb(255 255 255 / .1); }
.loop__art g.art { transform-origin: 320px 230px; }
.loop__legend { position: relative; padding: 6px; border-radius: 22px; --tint: rgb(255 255 255 / .1); width: min(100%, 460px); }
.loop__legend button { background: transparent; }
.loop__legend button:hover { background: rgb(255 255 255 / .14); }

/* ---------- Products: sticky glass toolbar ---------- */
#catalogue { scroll-margin-top: calc(var(--head) - 40px); } /* Home category cards land on the filtered grid */
.toolbar { position: sticky; top: var(--head); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; padding: 8px; border-radius: 28px; }
.toolbar .filters { margin: 0; flex: 1 1 auto; }
.toolbar .filters button { background: rgb(255 255 255 / .55); color: var(--ink); }
.toolbar .filters button:hover { background: #fff; }
.toolbar .filters button[aria-pressed="true"] { background: var(--wasabi); color: var(--ink); }
/* Search: the round button at the end of the bar swaps the chips for a search field */
.toolbar .find { display: none; flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; appearance: none; }
.toolbar .find:focus { outline: none; box-shadow: inset 0 0 0 2px var(--cobalt); }
.toolbar .find::-webkit-search-cancel-button { -webkit-appearance: none; } /* the round button closes it */
.toolbar.is-search .find { display: block; }
.toolbar.is-search .filters { display: none; }
.find-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: rgb(255 255 255 / .55); color: var(--ink); cursor: pointer; transition: background .25s; }
.find-btn:hover { background: #fff; }
.find-btn svg { width: 20px; height: 20px; }
.find-btn .i-close, .toolbar.is-search .find-btn .i-search { display: none; }
.toolbar.is-search .find-btn .i-close { display: block; }
.catalogue { scroll-margin-top: var(--head); }
.noresult { padding: 24px 4px 8px; color: var(--ink-soft); }
.noresult a { color: var(--cobalt); font-weight: 600; }

/* ---------- QA fixes ---------- */
.vcard ul a, .vcard ul li { display: flex; gap: 12px; align-items: flex-start; color: #fff; text-decoration: none; line-height: 1.45; }
.vcard ul a:hover { color: var(--wasabi); }
.vcard ul svg { width: 20px; height: 20px; flex: none; color: var(--cool); margin-top: 1px; }
.pcard__body { display: flex; flex-direction: column; }
.pcard__act { margin-top: auto; padding-top: 4px; }
.board__cell img.is-badge { max-height: 34px; }

@media (max-width: 1100px) {
  .fascia__bar { padding: 0 8px 0 18px; min-height: 60px; }
  .toolbar { flex-wrap: nowrap; }
  .toolbar .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toolbar .filters::-webkit-scrollbar { display: none; }
  .toolbar .filters button { flex: none; }
}
@media (max-width: 820px) {
  :root { --head: 84px; }
  .fab span { display: none; }
  .fab { padding: 0; width: 52px; min-height: 52px; justify-content: center; }
  .toolbar { border-radius: 22px; }
  .pcard__act .btn { min-height: 44px; }
  .pcard__act .btn-icon { width: 44px; height: 44px; }
  .foot__list { gap: 0; }
  .foot__list a, .foot__addr { padding-block: 11px; }
  main > .bay:last-child { padding-bottom: 48px; }
  .loop__core { width: 72%; top: 50%; }
}

/* ---------- v2 layout fixes & new pieces ---------- */
.fascia__in { display: block; }
.glass--cobalt { --tint: rgb(27 81 228 / .22); color: #fff; }
.loop__core { top: 57%; }
.loop__legend button { color: var(--on-cobalt); }
.loop__legend button[aria-pressed="true"] { background: var(--wasabi); color: var(--ink); }
.ind__n { color: var(--on-cobalt); }

/* Proof strip: logos run behind a glass label and refract at its edge */
.proof { position: relative; display: flex; align-items: center; margin-top: 18px; min-height: 84px; }
.proof__track { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.proof__run { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); flex: none; animation: marquee 46s linear infinite; }
.proof__run img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.proof__run img.is-badge { height: 34px; }
.proof:hover .proof__run { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (min-width: 821px) { .proof__track { -webkit-mask: linear-gradient(90deg, transparent 0 190px, #000 270px, #000 94%, transparent); mask: linear-gradient(90deg, transparent 0 190px, #000 270px, #000 94%, transparent); } } /* logos fade out before they reach the 'Trusted by' label */
.proof__label { position: relative; z-index: 2; margin: 0 0 0 clamp(8px, 2vw, 24px); display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 20px; border-radius: 999px; font-weight: 800; letter-spacing: -0.01em; --tint: rgb(255 255 255 / .82); }

/* Certificates as a compact row of seals (full frames live on About) */
.seals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.seals li { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; font-size: .875rem; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.seal--sm { width: 100%; max-width: 128px; height: 88px; font-size: .875rem; } /* wide tiles: the logos range from square to a wide banner (DGFT) */

/* Industries: native sideways scroll */
.rail-sec { padding-block: var(--bay); }
.rail-head { align-items: end; }
.rail-nav { display: flex; gap: 10px; }
.rail-nav button { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; transition: opacity .3s, transform .3s var(--ease); }
.rail-nav button:hover:not(:disabled) { transform: scale(1.06); }
.rail-nav button:disabled { opacity: .35; cursor: default; }
.rail-nav svg { width: 22px; height: 22px; }
.rail-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc(50% - var(--maxw) / 2 + var(--gutter))); padding-block: 8px 24px; scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-track::after { content: ""; flex: none; width: 1px; }

/* Header quote button on small screens */
.q-sm { display: none; }
@media (max-width: 1100px) {
  .fascia__act .btn { display: inline-flex; }
  .q-lg { display: none; } .q-sm { display: inline; }
  .seals { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 820px) {
  .proof { min-height: 132px; flex-direction: column; justify-content: flex-start; }
  .proof__track { top: auto; height: 70px; }
  .proof__label { margin: 0; }
  .rail-nav { display: none; }
  .ind { width: 78vw; }
}
@media (max-width: 420px) {
  .fascia__act .btn { padding: 0 14px; }
  .fascia__bar { gap: 12px; padding-left: 14px; }
  .brand img { width: 72px; }
}
@media (max-width: 560px) {
  .loop__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop__legend button { justify-content: flex-start; }
}

/* ---------- Hero loop (loop.js, GSAP): the isometric plant. The old .loop__core / __legend / __node rules serve lifecycle.js, kept for rollback. ---------- */
.loop__svg.pl { stroke: none; } /* the global svg stroke rule would outline every face */
.loop__stage.is-plant { width: min(100%, 440px); aspect-ratio: 640 / 490; }
.pl-face { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease); }
.pl-tag rect { fill: var(--cobalt-deep); stroke: rgb(255 255 255 / .35); stroke-width: 1; transition: fill .4s; }
.pl-tag text { fill: #fff; font: 800 14px Inter, sans-serif; letter-spacing: .02em; transition: fill .4s; }
.pl-tag.is-on .pl-face { transform: scale(1.18); }
.pl-tag.is-on rect { fill: var(--wasabi); stroke: #fff; }
.pl-tag.is-on text { fill: var(--ink); }
.lc-hit { position: absolute; width: 10%; min-width: 40px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transform: translate(-50%, -50%); }
.lc-cap { position: relative; width: min(100%, 420px); padding: 16px 22px 18px; border-radius: 22px; --tint: rgb(255 255 255 / .1); }
.lc-cap__in { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px; align-content: start; min-height: 4.4em; }
.lc-cap i { grid-row: span 2; padding-top: 4px; font-style: normal; font-size: .75rem; font-weight: 800; color: var(--on-cobalt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-cap b { font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.lc-cap span { font-size: clamp(.8rem, .95vw, .9rem); line-height: 1.45; color: var(--on-cobalt); }
.lc-note { margin: -6px 0 0; font-size: .75rem; color: var(--on-cobalt); opacity: .8; text-align: center; }
@media (max-width: 560px) { .pl-tag text { font-size: 19px; } .pl-tag rect { transform: scale(1.25); transform-box: fill-box; transform-origin: center; } }

/* ---------- Hero backdrop (backdrop.js): a moving 3D gradient in WebGL. ---------- */
.hero .lightbox > canvas.bd { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero .lightbox.has-gl::before { display: none; } /* the WebGL folds replace the CSS breathing blobs here */

/* =====================================================================
   2026-10-03 — Home rebuilt from the client's mock. Quieter scale.
   ===================================================================== */
/* Hero: a full-bleed royal-blue band (the client's mock). */
.hero--home { margin-top: -100px; padding: 0; } /* the band runs up behind the floating glass header */
.hero--home .lightbox { display: block; min-height: 0; padding: 0; border-radius: 0; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: clamp(480px, 42vw, 660px); padding-block: calc(100px + clamp(28px, 4vw, 56px)) clamp(40px, 5vw, 72px); }
.hero--home h1 { font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.04; }
.hero--home h1 em { display: block; }
.hero--home .lede { max-width: 46ch; }
/* Big hero image (the client's mock): fills the band's right half, its blue wall fades into the band */
.hero__copy { position: relative; z-index: 1; }
.hero__art { position: absolute; inset: 100px 0 0 auto; aspect-ratio: 1.6; } /* starts under the floating header; width from height, so the image (1.79:1) is cropped the same on every screen: always full height, the floor's left edge always in view */
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; -webkit-mask: linear-gradient(90deg, transparent, #000 4%), linear-gradient(180deg, transparent, #000 8%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 4%) intersect, linear-gradient(180deg, transparent, #000 8%); }
.hero__band { background: radial-gradient(70% 90% at 62% 38%, #2A5FF0, transparent 70%), linear-gradient(160deg, var(--cobalt) 35%, var(--cobalt-deep)); box-shadow: none; }
.hero__band::before, .hero__band::after { display: none; }
/* Home: the band is the hero image's own wall, its colour by height mapped onto the image box (100px down to the bottom), so the image meets the same blue on every side. Stops from archive/home-hero-blend-2026-10-05/blend_floor.py */
.hero__band--photo { background: linear-gradient(180deg, rgb(42 93 218) 100px, rgb(41 91 217) calc(100px + (100% - 100px) * 0.125), rgb(36 85 213) calc(100px + (100% - 100px) * 0.25), rgb(29 78 205) calc(100px + (100% - 100px) * 0.375), rgb(19 69 196) calc(100px + (100% - 100px) * 0.5), rgb(10 62 189) calc(100px + (100% - 100px) * 0.625), rgb(5 54 178) calc(100px + (100% - 100px) * 0.75), rgb(2 50 172) calc(100px + (100% - 100px) * 0.875), rgb(1 46 166) 100%); }

/* Three strengths under the hero */
.perks { position: relative; background: var(--panel); border-bottom: 1px solid var(--rail); }
.perks__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 26px; }
.perks li { display: flex; gap: 16px; align-items: flex-start; justify-content: center; padding: 4px 24px; }
.perks li + li { border-left: 1px solid var(--rail); }
.perks__i { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgb(27 81 228 / .08); color: var(--cobalt); }
.perks__i svg { width: 24px; height: 24px; }
.perks h2 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.perks p { margin-top: 2px; font-size: .875rem; line-height: 1.45; color: var(--ink-soft); text-wrap: balance; }

/* Centred section head */
.head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
.head--center .lede { justify-self: center; max-width: 72ch; }

/* Packaging for every application: 6 cards */
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.app { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; background: #fff; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rail), 0 14px 30px -24px rgb(14 20 51 / .45); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.app img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } /* generated 4:3 product photos */
.app video { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #E9F1FE; } /* 1280x800 feature clips */
.app__body { display: grid; gap: 6px; align-content: start; padding: 18px 12px 22px 22px; }
.app h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
.app p { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.app__go { align-self: center; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 20px; border-radius: 50%; background: rgb(27 81 228 / .08); color: var(--cobalt); transition: background .3s, color .3s; }
.app__go svg { width: 18px; height: 18px; }
.app:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--rail), 0 22px 38px -24px rgb(14 20 51 / .5); }
.app:hover .app__go { background: var(--cobalt); color: #fff; }
.apps__foot { display: flex; justify-content: center; margin-top: 40px; }

/* Industry cards: flat Cobalt in the mock look */
.ind.lightbox { background: radial-gradient(70% 55% at 50% 48%, var(--cobalt-glow), transparent 72%), var(--cobalt); box-shadow: none; }
.ind.lightbox::before, .ind.lightbox::after { display: none; }

/* About: big numbers, process steps */
.facts--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.facts--stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.facts--stats dd { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -0.03em; color: var(--cobalt); }
.facts--stats dt { font-size: .875rem; font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.steps li { position: relative; display: grid; gap: 14px; align-content: start; padding-right: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.steps li::before { content: ""; position: absolute; top: 21px; left: 52px; right: 8px; height: 1px; background: var(--rail-deep); }
.steps li:last-child::before { display: none; }
.steps span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cobalt); color: #fff; font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Products with no photo yet */
.pcard__none { position: absolute; inset: 20px 20px 6px; border-radius: 8px; background: url(../img/logo/SG-Print-O-Pack-Logo-Cobalt.svg) center / 34% auto no-repeat, var(--panel-dim); opacity: .4; }

@media (max-width: 1100px) {
  .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }
  .steps li:nth-child(4)::before { display: none; }
}
@media (max-width: 1000px) { /* Home hero stacks at 1000 and below: side by side, the products would run under the copy */
  .hero__band--photo .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { position: static; width: auto; aspect-ratio: auto; margin: 8px calc(-1 * var(--gutter)) calc(-1 * clamp(40px, 5vw, 72px)); }
  .hero__art img { height: auto; aspect-ratio: 4 / 3; -webkit-mask: linear-gradient(180deg, transparent, #000 16%); mask: linear-gradient(180deg, transparent, #000 16%); }
  .hero__band--photo { background: linear-gradient(180deg, rgb(50 102 224), rgb(42 93 218) calc(100% - 75vw)); } /* ends in the image's top colour where the full-bleed 4:3 image starts */
}
@media (max-width: 820px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; }
  .perks__in { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
  .perks li { justify-content: flex-start; padding: 0; }
  .perks li + li { border-left: 0; }
  .facts--stats { grid-template-columns: 1fr; }
  .facts--stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rail); }
}
@media (max-width: 560px) {
  .apps { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .steps li { grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 0 20px; }
  .steps li::before, .steps li:nth-child(4)::before { display: block; top: 46px; bottom: 2px; left: 21.5px; right: auto; width: 1px; height: auto; }
  .steps li:last-child::before { display: none; }
}

/* Contact: FAQ (native <details>, no JS) */
.faq { padding: 4px clamp(20px, 3vw, 36px); border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.faq details + details { border-top: 1px solid var(--rail); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; transition: transform .35s var(--ease), background-color .25s;
  background: rgb(27 81 228 / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B51E4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat; }
.faq summary:hover::after { background-color: rgb(27 81 228 / .16); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 50px 20px 0; color: var(--ink-soft); }

/* Home: testimonials slider (native scroll-snap; arrows and dots in site.js; no autoplay) */
.slider { max-width: 920px; margin-inline: auto; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--rail), var(--shadow); }
.slider__track::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; margin: 0; padding: clamp(32px, 5vw, 56px) clamp(24px, 7vw, 88px); text-align: center; }
.quote blockquote { margin: 0; }
.quote blockquote::before { content: "\201C"; display: block; height: 38px; font-size: 3.6rem; font-weight: 800; line-height: 1; color: var(--cobalt); }
.quote p { max-width: 52ch; font-size: clamp(1.0625rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.6; letter-spacing: -0.01em; }
.quote figcaption { display: flex; align-items: center; gap: 12px; text-align: left; font-size: .875rem; line-height: 1.4; color: var(--ink-soft); }
.quote figcaption b { display: block; font-size: .9375rem; color: var(--ink); }
.quote__i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(27 81 228 / .08); color: var(--cobalt); font-size: .8125rem; font-weight: 800; }
.slider__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 22px; }
.slider__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--rail); transition: box-shadow .25s, transform .3s var(--ease); }
.slider__btn:hover { box-shadow: inset 0 0 0 1px var(--ink); transform: scale(1.04); }
.slider__btn svg { width: 18px; height: 18px; }
.slider__dots { display: flex; gap: 4px; }
.slider__dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.slider__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--rail-deep); transition: width .35s var(--ease), background-color .25s; }
.slider__dots button[aria-current="true"]::before { width: 22px; background: var(--cobalt); }

/* 2026-10-04 — the client's colour layout: flat white / cream / light-blue bands, royal-blue surfaces, navy footer only */
body::before, body::after, main::before, .bay::before, .bay::after { display: none; }
.band--cream { background: var(--cream); }
.band--sky { background: var(--sky); }
.perks { background: var(--cream); }

/* ---------- Products hero: the packaging life cycle in soft 3D clay (clay.js) ---------- */
.clay > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero--clay .hero__in { position: relative; z-index: 1; pointer-events: none; }
.hero--clay .hero__copy { pointer-events: auto; }
.clay__track { display: grid; gap: 10px; margin-top: 4px; }
.clay__ch { font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--wasabi); }
.clay__track ol { display: flex; flex-wrap: wrap; gap: 6px 8px; max-width: 29em; margin: 0; padding: 0; list-style: none; } /* 7 steps break 4 + 3 */
.clay__track li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--on-cobalt); font-size: .8125rem; font-weight: 600; transition: background .3s, color .3s; }
.clay__track li::before { content: attr(data-n); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgb(255 255 255 / .16); font-size: .6875rem; font-weight: 800; }
.clay__track li.on { background: #fff; color: var(--ink); }
.clay__track li.on::before { background: var(--wasabi); color: var(--ink); }
.clay__track.is-brand ol { display: none; }
.no-gl > canvas, .no-gl .clay__track ol, .no-gl .clay__ch { display: none; } /* no WebGL: a still instead of the animation */
.clay__still { position: absolute; z-index: 0; right: 9%; bottom: 7%; width: min(38%, 520px); height: auto; pointer-events: none; }
@media (max-width: 820px) { .hero--clay .hero__in { min-height: 0; padding-bottom: 400px; align-content: start; } .clay__track li:not(.on) { display: none; } .clay__track.is-brand ol { display: flex; visibility: hidden; } .clay__still { right: auto; left: 10%; bottom: 4%; width: 92%; } } /* phones: a fixed room for the scene under the copy; the tracker keeps its height so nothing jumps; pause on the left, clear of the WhatsApp button */
.clay.is-narrow > canvas { -webkit-mask: linear-gradient(transparent var(--clay-top), #000 calc(var(--clay-top) + 48px)); mask: linear-gradient(transparent var(--clay-top), #000 calc(var(--clay-top) + 48px)); } /* clay.js: forms fade in under the copy, never behind it */

/* Phones and small tablets: the Home product cards swipe sideways like the industries rail (user, 2026-10-05). Native scroll-snap, no JS;
   each clip still plays when its card is 60% in view, so they play as they are swiped in. */
@media (max-width: 820px) {
  .apps { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 24px; scroll-padding-inline: var(--gutter); }
  /* position: relative keeps each card's hidden .sr feature line (absolute) inside the scroller, so it can't widen the page */
  .apps::-webkit-scrollbar { display: none; }
  .apps::after { content: ""; flex: none; width: 1px; } /* keeps the end padding when scrolled to the last card */
  .app { flex: none; width: 78vw; scroll-snap-align: start; }
  .apps .app.rv { opacity: 1; transform: none; } /* cards off to the side are shown, not left waiting for a reveal */
  .apps__foot { margin-top: 16px; }
}
/* Phones: a short footer (user, 2026-10-05: "footer looks too long", twice). It drops what a phone already has on screen: the logo and the
   Get a Quote / WhatsApp buttons (floating header and WhatsApp button) and the Pages list (header menu). Contact, social, marketplaces, wordmark stay. */
@media (max-width: 560px) {
  .foot { padding-top: 32px; }
  .foot__grid { gap: 20px; }
  .foot__brand, .foot__grid > :nth-child(2) { display: none; } /* brand block + Pages */
  .foot__grid > :nth-child(3) .foot__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 12px; } /* Contact: the two phones side by side where they fit (360+) */
  .foot__grid > :nth-child(3) .foot__list > :nth-child(n + 3) { grid-column: 1 / -1; }
  .foot__grid > :nth-child(4) .foot__list { display: flex; flex-wrap: wrap; column-gap: 24px; } /* Follow us in a row */
  .foot__h { margin-bottom: 0; }
  .foot__h--gap { margin-top: 10px; }
  .foot__word { margin-top: 28px; }
  .foot__base { margin-top: 18px; padding-block: 14px 20px; }
}