@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/lato-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/lato-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ============================================================
   TWISTLOCK AFRICA — design system v1
   Precision industrial editorial. Paper-white canvas, ink navy,
   TLA blue for action, safety orange used sparingly.
   Signature device: corner-casting brackets.
   ============================================================ */

:root {
  --ink: #1C262A;
  --ink-2: #3B474D;
  --muted: #636466;
  --paper: #FFFFFF;
  --paper-2: #F4F5F6;
  --paper-3: #E9EBEC;
  --line: #E1E3E4;
  --line-strong: #AFAEB0;
  --navy: #2A363C;
  --navy-deep: #1C262A;
  --blue: #0181C4;
  --blue-dark: #0169A0;
  --blue-tint: #E7F4FB;
  --accent: #0181C4;
  --accent-tint: #E7F4FB;
  --ok: #4A565C;
  --ok-tint: #EDEFF0;

  --font-display: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --w-max: 1200px;
  --w-wide: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 6px;
  --shadow-1: 0 1px 2px rgba(28,38,42,.06), 0 4px 16px rgba(28,38,42,.06);
  --shadow-2: 0 2px 4px rgba(28,38,42,.08), 0 12px 32px rgba(28,38,42,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.wrap { max-width: var(--w-max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--w-wide); }

/* ---------- micro label (mono, uppercase) ---------- */
.micro {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.micro--accent { color: var(--accent); }
.micro--blue { color: var(--blue); }

/* ---------- corner-casting bracket device ---------- */
.corners { position: relative; }
.corners::before, .corners::after,
.corners > .c2::before, .corners > .c2::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid var(--line-strong); pointer-events: none;
}
.corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corners::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corners > .c2::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corners > .c2::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.corners--accent::before, .corners--accent::after,
.corners--accent > .c2::before, .corners--accent > .c2::after { border-color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: .01em; border: 1.5px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); color: #fff; box-shadow: var(--shadow-1); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--inverse { background: #fff; color: var(--navy-deep); }
.btn--inverse:hover { background: var(--paper-3); color: var(--navy-deep); }
.btn--basket { background: var(--navy); color: #fff; }
.btn--basket:hover { background: var(--navy-deep); color: #fff; }
.btn--sm { padding: 9px 16px; font-size: 13.5px; }

/* ---------- header ---------- */
.utility {
  background: var(--navy-deep); color: #C9D1D4;
  font-size: 13px;
}
.utility .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 16px; }
.utility a { color: #fff; }
.utility .u-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 720px) { .utility .u-note { display: none; } }

.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: flex; flex-direction: column; line-height: 1; color: var(--ink); }
.logo b {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  letter-spacing: -.01em; white-space: nowrap;
}
.logo b .tw-blue { color: var(--blue); }
.logo span {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav > a, .nav > .nav-item > a {
  display: block; padding: 10px 13px; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; border-radius: var(--radius);
}
.nav > a:hover, .nav > .nav-item > a:hover { background: var(--paper-2); color: var(--ink); }
.nav > a.btn--basket { color: #fff; }
.nav > a.btn--basket:hover { background: var(--navy-deep); color: #fff; }
.nav-item { position: relative; }
.nav-item > .menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2);
  padding: 14px; width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  opacity: 0; visibility: hidden; transition: all .18s var(--ease);
}
.nav-item:hover > .menu, .nav-item:focus-within > .menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.menu a { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 6px; color: var(--ink-2); font-size: 14px; }
.menu a:hover { background: var(--blue-tint); color: var(--ink); }
.menu a .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); font-weight: 600; }
.menu a .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.basket-link { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.basket-count {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--accent); color: #fff; font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.basket-count[data-n="0"] { background: var(--line-strong); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 12px; }
@media (max-width: 1020px) {
  .nav { display: none; position: fixed; inset: 108px 0 0 0; background: #fff; flex-direction: column; align-items: stretch; padding: 16px var(--gutter); gap: 2px; overflow: auto; z-index: 70; }
  .nav.open { display: flex; }
  .nav-item > .menu { position: static; transform: none; opacity: 1; visibility: visible; width: 100%; box-shadow: none; border: 0; padding: 0 0 8px 12px; grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
}

/* ---------- hero ---------- */
.hero { background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(48px, 7vw, 96px); }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.025em; }
.hero h1 .accent { color: var(--blue); }
.hero .lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 54ch; }
.hero-media { position: relative; padding: clamp(16px, 2vw, 28px); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-1); }
.hero-media img { margin: 0 auto; max-height: 380px; width: auto; }
.hero-media figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } .hero-media { order: -1; } }

/* operation chips (the “what are you doing?” selector) */
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.op-chips a {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; background: #fff;
  transition: all .15s var(--ease);
}
.op-chips a .n { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.op-chips a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* ---------- section shells ---------- */
.section { padding-block: clamp(48px, 6vw, 88px); }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.section--navy { background: var(--navy-deep); color: #D5DCDF; }
.section--navy h2 { color: #fff; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; margin: 0; }
.section-head .kicker { margin-bottom: 10px; display: block; }

/* ---------- operations grid ---------- */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.op-card {
  position: relative; display: flex; flex-direction: column; gap: 40px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 20px 20px 18px; color: var(--ink); overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.op-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); color: var(--ink); }
.op-card .idx {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--accent);
}
.op-card h3 { font-size: 19px; margin: 0 0 2px; }
.op-card .sub { font-size: 13px; color: var(--muted); line-height: 1.45; }
.op-card .cnt { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.op-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease);
}
.op-card:hover::after { transform: scaleX(1); }

/* ---------- product cards ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.prod-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.prod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); color: var(--ink); }
.prod-card .ph { background: var(--paper-2); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; }
.prod-card .ph img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.prod-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod-card .sku { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.prod-card h3 { font-size: 17px; margin: 0; }
.prod-card .lead { font-size: 13.5px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
/* stretched-link card: title anchors the whole card, quote button stays an independent control */
.prod-card { position: relative; }
.prod-card .card-link { color: inherit; text-decoration: none; }
.prod-card .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prod-card:focus-within { outline: 2px solid var(--blue); outline-offset: 3px; }
.add-btn { min-height: 44px; }   /* touch target (WCAG 2.2 target size) */
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); background: var(--paper-2);
}
.badge--video { color: var(--blue); border-color: #BBDFF3; background: var(--blue-tint); }
.badge--hire { color: var(--accent); border-color: #BBDFF3; background: var(--accent-tint); }
.badge--3d { color: var(--ok); border-color: #CDD3D6; background: var(--ok-tint); }
.add-btn {
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink);
  border-radius: var(--radius); padding: 7px 12px; font-family: var(--font-display);
  font-weight: 600; font-size: 12.5px; transition: all .15s var(--ease); white-space: nowrap;
}
.add-btn:hover { border-color: var(--blue); color: var(--blue); }
.add-btn.added { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }

/* ---------- breadcrumbs ---------- */
.crumbs { padding: 18px 0 0; font-size: 13px; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }

/* ---------- product detail ---------- */
.pd { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 4vw, 56px); padding-block: clamp(28px, 4vw, 48px); align-items: start; }
@media (max-width: 880px) { .pd { grid-template-columns: 1fr; } }
.pd-gallery { position: sticky; top: 96px; }
@media (max-width: 880px) { .pd-gallery { position: static; } }
.pd-hero { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: clamp(20px, 3vw, 40px); display: grid; place-items: center; min-height: 340px; }
.pd-hero img { max-height: 420px; width: auto; mix-blend-mode: multiply; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-thumbs button { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px; width: 76px; height: 64px; display: grid; place-items: center; }
.pd-thumbs button.active { border-color: var(--blue); }
.pd-thumbs img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.pd-info h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 750; margin-bottom: 8px; }
.pd-info .sku-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sku-chip { font-family: var(--font-mono); font-size: 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: 4px 9px; color: var(--ink-2); }
.pd-info .lede { font-size: 16.5px; color: var(--ink-2); }
.pd-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; }
.pd-note { font-size: 12.5px; color: var(--muted); }

/* spec table — engineering datasheet look */
.spec { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 14.5px; }
.spec caption { text-align: left; padding-bottom: 10px; }
.spec th, .spec td { text-align: left; padding: 10px 14px; border: 1px solid var(--line); vertical-align: top; }
.spec th { width: 38%; background: var(--paper-2); font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.spec tr:hover td { background: var(--blue-tint); }
.spec-note { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* detail tabs-as-sections */
.pd-block { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 22px; }
.pd-block > .micro { display: block; margin-bottom: 12px; }
.pd-block ul { margin: 0; padding-left: 20px; }
.pd-block li { margin-bottom: 6px; }
.video-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.onrequest { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }

/* did-you-know / lash device */
.dyk {
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 26px 0;
}
.dyk .micro { color: var(--accent); display: block; margin-bottom: 6px; }
.dyk p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.lash {
  display: flex; gap: 16px; background: var(--navy-deep); color: #D5DCDF;
  border-radius: 10px; padding: 20px 24px; margin: 26px 0; align-items: flex-start;
}
.lash .avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: #fff; }
.lash .micro { color: var(--accent); display: block; margin-bottom: 4px; }
.lash p { margin: 0; font-size: 14.5px; font-style: italic; }

/* ---------- stats strip ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.stat { background: #fff; padding: 26px 22px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.02em; color: var(--ink); }
.stat span { font-size: 13px; color: var(--muted); }

/* ---------- section (operation) page hero ---------- */
.op-hero { background: var(--navy-deep); color: #D5DCDF; overflow: hidden; position: relative; }
.op-hero .wrap { padding-block: clamp(44px, 6vw, 80px); position: relative; }
.op-hero .idx {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 22vw, 260px);
  line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.14); user-select: none;
}
.op-hero h1 { color: #fff; font-size: clamp(32px, 4.5vw, 54px); font-weight: 800; }
.op-hero .lede { max-width: 62ch; font-size: 16.5px; color: #B7C0C4; }

/* ---------- basket ---------- */
.basket-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.basket-table th { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); }
.basket-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.basket-table .qty { width: 64px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 5px; font-family: var(--font-mono); }
.basket-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--blue); outline: none; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: #A8B2B6; margin-top: clamp(48px, 6vw, 88px); }
.footer .top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 56px 40px; }
@media (max-width: 880px) { .footer .top { grid-template-columns: 1fr 1fr; } }
.footer h4 { color: #fff; font-size: 14px; letter-spacing: .02em; margin-bottom: 14px; }
.footer a { color: #C9D1D4; display: block; padding: 3px 0; font-size: 14px; }
.footer a:hover { color: #fff; }
.footer .brandline b { font-family: var(--font-display); color: #fff; font-size: 19px; font-weight: 800; }
.footer .brandline span { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; margin-top: 4px; }
.footer .legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }

/* ---------- consent banner ---------- */
.consent {
  position: fixed; inset: auto 16px 16px 16px; z-index: 90; max-width: 480px; margin-right: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-2);
  padding: 20px 22px; display: none;
}
.consent.show { display: block; }
.consent p { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.consent .row { display: flex; gap: 10px; }

/* ---------- reveal on scroll ---------- */
/* hidden-until-reveal ONLY when JS is confirmed running (html.js) */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .op-card, .prod-card, .btn { transition: none; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; border-radius: 8px; padding: 12px 20px; font-size: 14px;
  z-index: 95; transition: transform .3s var(--ease); box-shadow: var(--shadow-2);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- utility ---------- */
.skip { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---------- Lash assistant ---------- */
#lash-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 85;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy-deep); color: #fff; border: 0; border-radius: 999px;
  padding: 10px 18px 10px 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  box-shadow: var(--shadow-2); transition: transform .18s var(--ease);
}
#lash-fab:hover { transform: translateY(-2px); }
.lash-face {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; flex: 0 0 auto;
}
#lash-panel {
  position: fixed; right: 18px; bottom: 78px; z-index: 86;
  width: min(380px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px));
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; overflow: hidden;
}
#lash-panel[hidden] { display: none; }
.lash-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--navy-deep); color: #fff; }
.lash-head b { font-family: var(--font-display); font-size: 16px; display: block; }
.lash-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #A8B2B6; }
#lash-close { margin-left: auto; background: none; border: 0; color: #A8B2B6; font-size: 26px; line-height: 1; padding: 0 4px; }
#lash-close:hover { color: #fff; }
#lash-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--paper-2); }
.lash-msg { max-width: 88%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.lash-them { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start; }
.lash-me { background: var(--blue); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.lash-tip { display: block; border-left: 3px solid var(--accent); padding-left: 10px; font-style: italic; color: var(--ink-2); }
.lash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lash-chip { border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 6px 12px; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.lash-chip:hover { border-color: var(--blue); color: var(--blue); }
.lash-cards { display: flex; flex-direction: column; gap: 6px; }
.lash-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; display: block; }
.lash-card:hover { border-color: var(--blue); }
.lash-card-t { display: block; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.lash-card-k { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
#lash-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
#lash-in { flex: 1; border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14px; }
#lash-in:focus { border-color: var(--blue); outline: none; }
@media (max-width: 640px) { #lash-panel { right: 10px; bottom: 72px; } #lash-fab { right: 12px; bottom: 12px; } }

/* brand logo */
.logo { flex-direction: row; align-items: center; gap: 10px; }
.logo .mark { flex: 0 0 34px; }
.logo .lockup { display: flex; flex-direction: column; line-height: 1; }
.lash-spec { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.lash-spec th, .lash-spec td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.lash-spec th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; background: var(--paper-2); width: 40%; }

.logo img { display: block; height: 44px; width: auto; }
.footer .brandline img { height: 40px; width: auto; margin-bottom: 6px; }

/* Lash artwork */
.lash-face { overflow: hidden; background: #fff; border: 2px solid var(--blue); }
.lash-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lash .avatar { background: #fff; overflow: hidden; }
.lash .avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.lash-fig { display: block; width: 96px; margin: 0 0 8px; }

.badge--new { color: #fff; background: var(--blue); border-color: var(--blue); }

/* client logo wall */
.clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.client-cell { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; min-height: 76px; }
.client-cell img { max-height: 40px; width: auto; max-width: 100%; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.client-cell:hover img { filter: none; opacity: 1; }

/* compact hero with operations first */
.hero--compact .wrap { display: block; padding-block: clamp(26px, 3.5vw, 44px) clamp(30px, 4vw, 52px); }
.hero--compact h1 { font-size: clamp(26px, 3.2vw, 42px); }
.hero--compact .lede { font-size: 16px; max-width: 60ch; margin-bottom: 0; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 22px; }
.hero-top .hero-cta { flex-shrink: 0; margin: 0; }
@media (max-width: 880px) { .hero-top { flex-direction: column; align-items: flex-start; } }
/* project gallery */
.proj-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 24px; }
.proj-gallery img { border-radius: 10px; border: 1px solid var(--line); width: 100%; height: 240px; object-fit: cover; }

/* line-art on operation cards + heroes */
.op-card--art { gap: 14px; padding-top: 12px; }
.op-card--art .art { display: block; margin: 0 -8px; }
.op-card--art .art img { width: 100%; height: 156px; object-fit: contain; }
.op-card--art .idx { position: absolute; top: 16px; left: 18px; }
/* review 02 p2: reserve the art panel's width so hero text never runs underneath it */
@media (min-width: 761px) {
  .op-hero .wrap:has(.op-hero-art) h1,
  .op-hero .wrap:has(.op-hero-art) .lede,
  .op-hero .wrap:has(.op-hero-art) .micro,
  .op-hero .wrap:has(.op-hero-art) .pd-cta { max-width: calc(100% - 480px); }
}
.op-hero-art { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(420px, 36vw); background: #fff; border-radius: 12px; padding: 10px; box-shadow: var(--shadow-2); }
.op-hero-art img { width: 100%; height: auto; display: block; }
.op-hero .wrap { position: relative; }
.op-hero-art + .idx { display: none; }
@media (max-width: 760px) { .op-hero-art { display: none; } }

.sitemap-tree { list-style: none; padding: 0; font-size: 15px; }
.sitemap-tree > li { margin: 10px 0; font-weight: 700; }
.sitemap-tree ul { list-style: none; padding: 4px 0 4px 18px; font-weight: 400; columns: 2; column-gap: 32px; }
.sitemap-tree ul li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 700px) { .sitemap-tree ul { columns: 1; } }

/* operations switcher — jump between categories from any operation page */
.op-switcher { background: var(--paper); border-bottom: 1px solid var(--line); }
.op-switcher .sw-row { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.op-switcher a.sw { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); text-decoration: none;
  color: var(--ink); transition: border-color .25s, background .25s; }
.op-switcher a.sw img { height: 40px; width: 50px; object-fit: contain; display: block; }
.op-switcher .n { font-family: "IBM Plex Mono", monospace; font-weight: 700; font-size: 12px; color: var(--blue); }
.op-switcher .nm { font-weight: 700; font-size: 13.5px; white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .35s ease, opacity .25s ease; }
.op-switcher a.sw:hover, .op-switcher a.sw:focus-visible { border-color: var(--blue); }
.op-switcher a.sw:hover .nm, .op-switcher a.sw:focus-visible .nm, .op-switcher a.sw.active .nm { max-width: 130px; opacity: 1; }
.op-switcher a.sw.active { border-color: var(--blue); background: var(--blue-tint); }
@media (max-width: 760px) { .op-switcher a.sw img { height: 36px; width: 46px; } .op-switcher .sw-row { padding: 10px 0; } }

/* product switcher — second banner: every product in the category */
.prod-switcher { background: var(--paper-2); }
.prod-switcher a.sw { padding: 4px 7px; background: var(--paper); }
.prod-switcher a.sw img { height: 38px; width: 48px; object-fit: contain; border-radius: 6px; }
.prod-switcher .nm { font-weight: 600; font-size: 13px; }
.prod-switcher a.sw:hover .nm, .prod-switcher a.sw:focus-visible .nm, .prod-switcher a.sw.active .nm {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .prod-switcher a.sw img { height: 32px; width: 40px; } }

/* per-variant range tables (catalogue-style) */
.spec-scroll { overflow-x: auto; margin-bottom: 14px; }
.spec--range { min-width: 640px; width: 100%; }
.spec--range thead th { background: var(--navy-deep); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; letter-spacing: .04em; text-align: left; padding: 8px 12px; }
.spec--range thead th:first-child { background: var(--navy-deep); }
.spec--range tbody th { white-space: normal; }
.spec--range td { white-space: normal; }

/* allow range tables to scroll inside the grid instead of stretching it */
.pd > * { min-width: 0; }
.spec--range .st-imgs td { background: #fff; padding: 10px 12px 6px; }
.spec--range .st-imgs img { height: 110px; width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 6px; }
.range-section { padding-top: 6px; padding-bottom: 26px; }
.range-section .kicker { display: block; margin-bottom: 10px; }
.spec--range .st-imgs img { height: 150px; }
.spec--range td, .spec--range tbody th { vertical-align: top; }
.spec--range { table-layout: fixed; }
.spec--range thead th:first-child { width: 22%; }

/* ---- mobile/tablet nav: anchor to the header, not the viewport (fix: filtered ancestor broke fixed positioning) ---- */
@media (max-width: 1020px) {
  .header { position: sticky; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; inset: auto 0 auto 0; top: 100%;
    max-height: calc(100vh - 150px); overflow: auto; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2); }
}

/* ---- category card hover animation ---- */
.op-card--art .art img { transition: transform .35s cubic-bezier(.2, .7, .3, 1); will-change: transform; }
.op-card--art:hover .art img, .op-card--art:focus-visible .art img { transform: translateY(-6px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .op-card--art .art img { transition: none; }
  .op-card--art:hover .art img { transform: none; } }

/* ---- compact consent panel (keep clear of Lash + CTAs) ---- */
.consent { max-width: 400px; padding: 14px 16px; font-size: 13.5px; }
.consent p { margin-bottom: 10px; }
@media (max-width: 640px) { .consent { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* ---- site search ---- */
.site-search { position: relative; margin-left: 6px; }
#ss-in { width: 118px; padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-size: 13.5px; background: var(--paper); transition: width .25s ease; }
#ss-in:focus { width: 230px; outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.ss-results { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 88vw;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-2);
  display: none; z-index: 90; max-height: 60vh; overflow: auto; }
.ss-results.show { display: block; }
.ss-results a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 9px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--paper-2); font-size: 14px; }
.ss-results a:last-child { border-bottom: 0; }
.ss-results a:hover, .ss-results a:focus { background: var(--blue-tint); }
.ss-results .sku { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--blue); white-space: nowrap; }
.ss-results .none { padding: 10px 12px; color: var(--muted); font-size: 13.5px; }
@media (max-width: 1020px) { .site-search { margin: 8px 0 4px; } #ss-in, #ss-in:focus { width: 100%; }
  .ss-results { position: static; width: 100%; box-shadow: none; margin-top: 6px; } }

/* ---- glossary tooltips ---- */
.gl { border-bottom: 1.5px dotted var(--blue); cursor: help; position: relative; }
.gl:hover::after, .gl:focus::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px);
  z-index: 60; background: var(--navy-deep); color: #fff; padding: 9px 11px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; width: 270px; max-width: 76vw; font-weight: 400; white-space: normal; }
.newbie { font-size: 13.5px; color: var(--muted); margin: -4px 0 18px; }

/* ---- Boltable footprint gallery (catalogue section 13) ---- */
.fp-group { margin-top: 30px; }
.fp-group h3 { margin: 0 0 4px; font-size: 1.15rem; }
.fp-lede { margin: 0 0 16px; color: var(--muted); max-width: 70ch; }
.fp-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.fp-card {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
}
/* drawings differ in aspect (portrait plates vs long doubles) - a fixed box keeps the
   captions on one line across each row instead of stepping */
.fp-card a {
  display: flex; align-items: center; justify-content: center;
  background: #fff; height: 230px; padding: 10px; overflow: hidden;
}
.fp-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.fp-card figcaption { flex: 1 1 auto; }
.fp-card figcaption { padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: .92rem; }
.fp-card figcaption b { display: block; margin-bottom: 8px; }
.fp-card figcaption p { margin: 8px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.fp-spec { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
.fp-spec dt { color: var(--muted); font-size: .8rem; }
.fp-spec dd { margin: 0; font-size: .86rem; }
@media (max-width: 640px) { .fp-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .fp-card a { height: 150px; } }
.fp-card figcaption b { margin-bottom: 2px; }
.fp-sub { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.fp-caution {
  margin-top: 26px; padding: 14px 18px; background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 4px;
}
.fp-caution p { margin: 0; color: var(--ink-2); max-width: 78ch; }

/* ---- Quote basket: mobile card rows + a table that can never widen the page ----
   QA 1 Sep, issue 1: five columns held ~949 px on a 390 px viewport and expanded the
   document, so the whole page scrolled sideways through the core quote flow. */
.basket-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.basket-table { min-width: 0; }

@media (max-width: 700px) {
  .basket-scroll { overflow-x: visible; }
  .basket-table, .basket-table tbody, .basket-table tr, .basket-table td { display: block; width: auto; }
  .basket-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .basket-table tr {
    border: 1px solid var(--line); border-radius: 6px;
    padding: 12px 14px; margin-bottom: 12px; background: #fff;
  }
  .basket-table td { border: 0; padding: 5px 0; display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; align-items: center; }
  .basket-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .basket-table td[data-label=""] { grid-template-columns: 1fr; padding-top: 10px; }
  .basket-table .qty { width: 84px; min-height: 44px; }
}

/* ---- Quote sent: confirmation that outlives the basket being cleared ---- */
.rfq-success {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: 6px; background: #fff; padding: 26px 28px; margin-bottom: 28px;
}
.rfq-success h2 { margin: 0 0 10px; }
.rfq-success p { max-width: 68ch; color: var(--ink-2); }
.rfq-success .rfq-ref {
  font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 0 0 10px;
}
.rfq-success .rfq-ref:empty { display: none; }

/* ---- Touch targets: QA 1 Sep, issue 3 (menu 43.6 px, consent CTAs 41.6 px) ---- */
.nav-toggle, .menu-toggle, #nav-toggle,
.consent button, .consent .btn, .cookie button { min-height: 44px; }
.rfq-success { scroll-margin-top: 96px; }   /* clear the sticky header when scrolled to */

/* ---- Brands we supply ---- */
.brand-grid { display: grid; gap: 20px; margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.brand-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 24px 26px; display: flex; flex-direction: column; }
.brand-card h2 { margin: 0 0 4px; font-size: 1.35rem; }
.brand-what { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.brand-what span { color: var(--blue); }
.brand-card > p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.brand-supply { font-size: 14px !important; color: var(--muted) !important; font-style: italic; }
.brand-meta { display: grid; gap: 14px; margin: 6px 0 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.brand-meta .micro { display: block; color: var(--muted); margin-bottom: 4px; }
.brand-meta p, .brand-meta ul { margin: 0; font-size: 14.5px; }
.brand-meta ul { padding-left: 18px; }
.brand-meta li { margin-bottom: 2px; }
.brand-site { margin-top: auto; font-weight: 600; text-decoration: none; }
@media (max-width: 700px) { .brand-grid { grid-template-columns: 1fr; } }

/* ---------- homepage projects banner (3 Sept 2026) ----------
   A full-bleed strip of real project photographs against the navy band. Its job is
   colour and proof: every image is a real installation, which is what the rendered
   product shots on the product pages are not. Scroll-snap, no JS, no layout shift. */
.projects-band { padding-bottom: 34px; }
.section-head--band { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.section-head--band h2 { color:#fff; margin:2px 0 0; }
.btn--on-navy { color:#fff; border-color:rgba(255,255,255,.35); }
.btn--on-navy:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); }

.proj-strip{
  display:flex; gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:20px max(16px,calc((100vw - 1200px)/2)) 6px;
  /* mandatory snapping aligns the first card to the scrollport edge and eats the
     leading padding — scroll-padding puts the snap position back inside the inset
     so card 1 lines up with the heading above it. */
  scroll-padding-inline:max(16px,calc((100vw - 1200px)/2));
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.45) transparent;
}
.proj-strip::-webkit-scrollbar{ height:8px }
.proj-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:4px }
.proj-strip:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }

.proj-card{
  flex:0 0 clamp(232px, 25vw, 288px);
  scroll-snap-align:start;
  display:block; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.proj-card img{
  display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  background:rgba(255,255,255,.08);   /* holds the box before the image paints */
}
.pc-body{ display:block; padding:11px 13px 13px }
.pc-body strong{ display:block; font-size:14.5px; line-height:1.32; color:#fff }
.pc-loc{ display:block; margin-top:3px; font-size:12.5px; color:rgba(255,255,255,.66) }
.proj-card:hover, .proj-card:focus-visible{
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.4); transform:translateY(-2px);
}
.proj-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* Decorative only — progressive enhancement, no fallback needed, and off when the
   visitor has asked for less motion. */
@media (prefers-reduced-motion: no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){
    @keyframes proj-card-in{ from{ opacity:.45 } 20%,80%{ opacity:1 } to{ opacity:.45 } }
    .proj-card{ animation:proj-card-in auto linear both; animation-timeline:view(inline); }
  }
}
@media (prefers-reduced-motion: reduce){
  .proj-card{ transition:none }
  .proj-card:hover{ transform:none }
}

@media (max-width:700px){
  .proj-strip{ padding-left:16px; padding-right:16px; gap:11px; scroll-padding-inline:16px }
  .proj-card{ flex-basis:76vw }
  .section-head--band{ align-items:flex-start }
}