/* ==========================================================================
   LGCE — Data · Telecom · Power
   Design system + global styles
   Brand: slate #6B8292 · dark grey #575756 · light grey #D7D5D5
          black #000 · red #FF0000 · orange #F1910B · Helvetica Neue
          Signature: the "angle" device at -22°
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --black:       #0d0e10;
  --black-pure:  #000000;
  --ink:         #16181c;   /* dark surface */
  --ink-2:       #1d2025;   /* raised dark surface */
  --slate:       #6b8292;
  --slate-deep:  #4f6675;
  --grey-dark:   #575756;
  --grey-light:  #d7d5d5;
  --mist:        #f4f5f6;   /* light section bg */
  --paper:       #ffffff;
  --red:         #ff0000;
  --red-deep:    #d10812;
  --orange:      #f1910b;

  /* Semantic */
  --bg:            var(--paper);
  --bg-alt:        var(--mist);
  --surface:       #ffffff;
  --text:          #1b1d21;
  --text-soft:     #555a61;
  --text-faint:    #6e747d;   /* ~4.7:1 on white - keep >=4.5 (AA), it's used for small text */
  --border:        #e4e6e9;
  --accent:        var(--red);
  --accent-2:      var(--orange);

  /* Type */
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.8rem, 6.8vw, 5.5rem);
  --fs-h1:   clamp(2.25rem, 5vw, 3.7rem);
  --fs-h2:   clamp(1.85rem, 3.8vw, 2.9rem);
  --fs-h3:   clamp(1.28rem, 2.1vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.7vw, 1.32rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9rem;
  --fs-kicker: 0.78rem;

  /* Layout */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --angle: -22deg;             /* signature brand angle */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20,24,28,.06), 0 2px 8px rgba(20,24,28,.05);
  --shadow:    0 6px 18px rgba(20,24,28,.08), 0 2px 6px rgba(20,24,28,.05);
  --shadow-lg: 0 22px 50px rgba(20,24,28,.16), 0 8px 18px rgba(20,24,28,.08);
  --shadow-red: 0 14px 36px rgba(209,8,18,.26);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spin: cubic-bezier(.45,0,.2,1);   /* slow-fast-slow: stat-band odometer */
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .55s;

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,svg,video { display:block; max-width:100%; }
/* The `hidden` attribute hides via a low-priority UA rule that any author
   `display` (e.g. `.btn`'s flex) overrides — so JS setting `el.hidden = true`
   silently fails on styled elements. This makes the attribute authoritative
   everywhere (and supersedes the scattered per-element `[hidden]{display:none}`
   patches, which are now redundant but harmless). */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--slate); outline-offset: 2px; border-radius: 4px; }

/* Keyboard skip link (injected by components.js as the page's first focusable
   element): visually hidden until focused, then a floating pill over the header. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; }
.skip-link:focus {
  left: 12px; top: 12px; display: inline-block;
  background: var(--surface); color: var(--text); font-weight: 700;
  padding: .7rem 1.2rem; border-radius: 10px; box-shadow: var(--shadow-lg);
}
main:focus { outline: none; }   /* skip-link target; the ring belongs on controls, not the whole page */

/* Brand text-selection highlight (replaces the browser-default blue).
   Black text, not white: #f1910b is bright enough that white-on-orange
   fails contrast (~2.4:1) while black-on-orange is ~8.8:1 - matters most
   when selecting light text inside dark-mode/dark-hero sections. */
::selection { background: var(--orange); color: var(--black); }
::-moz-selection { background: var(--orange); color: var(--black); }

h1,h2,h3,h4 { line-height: 1.08; font-weight: 700; letter-spacing: -.018em; color: var(--text); }
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3 { font-size: var(--fs-h3); }
p { color: var(--text-soft); }
strong { color: var(--text); font-weight: 700; }

/* Headlines lean Light per brand hierarchy, but stay legible */
.display { font-weight: 300; letter-spacing: -.028em; }
.display b, .display strong { font-weight: 700; color: inherit; }
/* emphasis must inherit colour on dark/headline contexts (overrides global strong colour) */
.hero strong, .page-hero strong, .section--dark strong, .cta-band strong { color: inherit; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
/* Full-width bands clip horizontal overflow: decorative -22° wedges
   (right:-14% etc.) and the reveal animations' translateX(±30px) start states
   bleed past the band edge before they animate in. On an overflow-visible
   section that bleed is real content to iOS, which then sizes the layout
   viewport to fit it — the cause of the mobile zoom-out + sideways scroll.
   `overflow-x: clip` clips horizontally only (vertical hover-lift/reveal slide
   stay visible) and, unlike on html, creates no scroll container, so the
   catalog's sticky toolbar still works. */
.section { padding-block: clamp(2.75rem, 6vw, 5.5rem); position: relative; overflow-x: clip; }
.section--tight { padding-block: clamp(2rem, 4.5vw, 4rem); }
.section--dark { background: var(--ink); color: #e9ebee; }
/* mesh-gradient shader behind a dark band (scoped — only sections that opt in) */
.section--shader { position: relative; overflow: hidden; isolation: isolate; }
.section--shader > .container { position: relative; z-index: 2; }
.sec-shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.sec-shader__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,14,17,.74) 0%, rgba(13,14,17,.34) 44%, rgba(13,14,17,0) 72%); }
.section--dark h1,.section--dark h2,.section--dark h3 { color:#fff; }
.section--dark p { color: #b7bdc6; }
.section--alt { background: var(--bg-alt); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 62ch; }
.measure-narrow { max-width: 48ch; }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 960px){ .cols-3,.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }

/* ---------- Kicker / eyebrow ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--slate-deep);
}
.kicker::before {
  content:""; width: 26px; height: 2px; background: var(--red); display:inline-block;
}
.section--dark .kicker { color: var(--orange); }
.section--dark .kicker::before { background: var(--orange); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem,4vw,3.25rem); }
.section-head.center { margin-inline: auto; }
.section-head .lead { font-size: var(--fs-lead); color: var(--text-soft); margin-top: 1rem; font-weight: 300; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --bg-btn: var(--red);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .98rem; letter-spacing: .01em;
  background: var(--bg-btn); color: #fff;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  will-change: transform; line-height: 1;
}
.btn svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
/* sheen sweep on hover (skipped for ghost variants, which have no fill to catch it) */
.btn::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
  transform: translateX(-130%); transition: transform .7s var(--ease-out);
}
.btn--ghost::after, .btn--ghost-dark::after, .btn--glass::after { display:none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn:hover::after { transform: translateX(130%); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .btn::after { display:none; } }

.btn--gradient { background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--border); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--slate); background: rgba(107,130,146,.06); }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.btn--ghost-dark { background: transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.btn--ghost-dark:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
/* Liquid-glass (Apple "Tahoe" style): frosted backdrop + layered highlight/shadow
   stack. Vanilla port of a React/shadcn component — no JS, no deps. Designed for
   DARK / photo surfaces (the frost refracts what's behind it); over white sections
   it goes low-contrast, so it's opt-in, not the default button. */
.btn--glass {
  background: rgba(255,255,255,.05); color: #fff;
  /* Chrome/Edge refract the backdrop through the SVG displacement map (the
     #lgce-liquid-glass filter is injected by main.js); Safari has no SVG-filter
     support in backdrop-filter, so -webkit falls back to a plain frosted blur. */
  backdrop-filter: blur(8px) url(#lgce-liquid-glass) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.90),
    inset -2px -2px 0 -2px rgba(255,255,255,.80),
    inset -3px -8px 1px -6px rgba(255,255,255,.60),
    inset -0.3px -1px 4px 0 rgba(0,0,0,.12),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20),
    inset 0 3px 4px -2px rgba(0,0,0,.20),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.10),
    0 1px 5px 0 rgba(0,0,0,.10),
    0 6px 16px 0 rgba(0,0,0,.08);
}
.btn--glass:hover {
  transform: scale(1.03); background: rgba(255,255,255,.09);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 1.8px 3px 0 -2px rgba(255,255,255,1),
    inset -2px -2px 0 -2px rgba(255,255,255,.85),
    inset -3px -8px 1px -6px rgba(255,255,255,.65),
    inset -0.3px -1px 4px 0 rgba(0,0,0,.12),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20),
    inset 0 3px 4px -2px rgba(0,0,0,.20),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.10),
    0 2px 8px 0 rgba(0,0,0,.14),
    0 10px 24px 0 rgba(0,0,0,.10);
}
.btn--glass:active { transform: scale(.96); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--sm { padding: .65rem 1.1rem; font-size: .88rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--red-deep);
  transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.link-arrow:hover { gap: .75rem; }
.link-arrow:hover svg { transform: translateX(2px); }
/* coarse-pointer: grow text-link hit areas to the 44px minimum (inline-flex centres, no visual change) */
@media (pointer: coarse){ .link-arrow, .case-spotlight__all { min-height: 44px; } }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), height var(--t) var(--ease);
}
.site-header .container { display: flex; align-items: center; gap: 1rem; width: 100%; }
.site-header.is-solid {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(20,24,28,.07);
  height: 64px;
}
/* On mobile, backdrop-filter on position:fixed causes iOS Safari to drop the
   header behind composited page content. Use a fully opaque background instead. */
@media (max-width: 640px) {
  .site-header.is-solid {
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; padding: 6px 10px 6px 0; }
.brand img { height: 54px; width: auto; transition: height var(--t) var(--ease); }
.is-solid .brand img { height: 46px; }

.nav { display: flex; align-items: center; gap: .15rem; margin-inline: auto; }
.nav-mfoot { display: none; }          /* mobile burger-menu footer (CTA + contact + social) */
.nav a {
  position: relative; padding: .55rem .8rem; border-radius: 8px;
  font-weight: 500; font-size: .95rem; color: var(--text);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav a::after {
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem; height:2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav a:hover { color: var(--red); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--red); }

/* transparent header over dark hero */
.site-header:not(.is-solid) .nav a { color: rgba(255,255,255,.92); }
.site-header:not(.is-solid) .nav a:hover { color: #fff; }
.site-header:not(.is-solid) .lang-current { color:#fff; }
/* over the dark hero the language switcher takes the liquid-glass treatment */
.site-header:not(.is-solid) .lang-btn {
  color:#fff; border-color: transparent; background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px) url(#lgce-liquid-glass) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.90),
    inset -2px -2px 0 -2px rgba(255,255,255,.80),
    inset -3px -8px 1px -6px rgba(255,255,255,.60),
    inset -0.3px -1px 4px 0 rgba(0,0,0,.12),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20),
    inset 0 3px 4px -2px rgba(0,0,0,.20),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.10),
    0 1px 5px 0 rgba(0,0,0,.10),
    0 6px 16px 0 rgba(0,0,0,.08);
}
.site-header:not(.is-solid) .lang-btn:hover {
  border-color: transparent; background: rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 1.8px 3px 0 -2px rgba(255,255,255,1),
    inset -2px -2px 0 -2px rgba(255,255,255,.85),
    inset -3px -8px 1px -6px rgba(255,255,255,.65),
    inset -0.3px -1px 4px 0 rgba(0,0,0,.12),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20),
    inset 0 3px 4px -2px rgba(0,0,0,.20),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.10),
    0 2px 8px 0 rgba(0,0,0,.14),
    0 10px 24px 0 rgba(0,0,0,.10);
}
.site-header:not(.is-solid) .burger span { background:#fff; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Mobile header: give the logo room + presence, declutter actions */
@media (max-width: 640px){
  .header-actions .btn { display: none; }      /* quote CTA lives in the menu/hero on phones */
  .brand img { height: 48px; }
  .is-solid .brand img { height: 44px; }
  .lang-btn { padding: .4rem .55rem; font-size: .78rem; }
  .site-header .container { gap: .5rem; }
}

/* Language switcher */
.lang { position: relative; }
.lang-btn {
  display:flex; align-items:center; gap:.4rem; padding:.45rem .7rem;
  border-radius: 999px; border: 1.5px solid var(--border); font-weight:700; font-size:.82rem;
  color: var(--text); letter-spacing:.04em; transition: border-color var(--t) var(--ease);
}
.lang-btn:hover { border-color: var(--slate); }
.lang-btn > svg { width:14px; height:14px; transition: transform var(--t) var(--ease); }
.lang[data-open="true"] .lang-btn > svg:last-child { transform: rotate(180deg); }
/* Menu: glass panel with a springy drop-in, gradient flag chip + check on the
   active language, brand-tinted separator (the theme row lives at the bottom,
   see the .lang-theme-row rules further down). */
.lang-menu {
  position:absolute; top: calc(100% + .6rem); right:0; min-width: 210px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border-radius: 16px; border:1px solid var(--border);
  box-shadow:
    0 24px 60px -18px rgba(13,14,16,.28),
    0 6px 18px -8px rgba(13,14,16,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
  padding:.45rem;
  opacity:0; visibility:hidden; transform: translateY(-8px) scale(.96);
  transform-origin: top right;
  transition: opacity .22s var(--ease), transform .3s cubic-bezier(.34,1.35,.64,1), visibility .3s;
  z-index: 120;
}
.lang[data-open="true"] .lang-menu { opacity:1; visibility:visible; transform: translateY(0) scale(1); }
.lang-menu button {
  display:flex; align-items:center; gap:.65rem; width:100%; text-align:left;
  padding:.55rem .6rem; border-radius:10px; font-size:.92rem; font-weight:500; color:var(--text);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lang-menu button:hover { background: var(--mist); }
.lang-menu button:active { transform: scale(.98); }
.lang-menu button[aria-current="true"] { color: var(--red-deep); font-weight:700; }
.lang-menu .lang-name { flex:1; min-width:0; }
.lang-menu .flag {
  display:grid; place-items:center; width:28px; height:22px; flex:0 0 auto;
  font-size:.6rem; font-weight:800; letter-spacing:.06em;
  color:var(--slate-deep); background:var(--mist); border-radius:6px;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.lang-menu button[aria-current="true"] .flag {
  color:#fff; background:linear-gradient(135deg, var(--red), var(--orange));
  box-shadow: 0 3px 8px rgba(229,38,32,.32);
}
.lang-menu .lang-check {
  width:15px; height:15px; flex:0 0 auto; color:var(--red-deep);
  opacity:0; transform: scale(.5) rotate(-12deg);
  transition: opacity .18s var(--ease), transform .28s cubic-bezier(.34,1.56,.64,1);
}
.lang-menu button[aria-current="true"] .lang-check { opacity:1; transform:none; }

/* Burger */
.burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.burger span { width:24px; height:2px; background: var(--text); border-radius:2px; transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease); }
body.menu-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px){
  .nav, .header-actions .lang { position: static; }
  .burger { display: flex; }
  .header-actions { margin-left: auto; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 400px);
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    /* Aurora dark glass: frosted translucent panel + the slate→orange→red glow
       baked into the BACKGROUND (not a ::before). A ::before with inset:0 only
       filled the first viewport in this scroll container, so scrolling exposed
       plain black; as a background it stays fixed to the panel and covers the
       whole menu however far you scroll. */
    background:
      radial-gradient(72% 40% at 96% 2%, rgba(241,145,11,.30), transparent 58%),
      radial-gradient(82% 46% at 0% 100%, rgba(209,8,18,.26), transparent 60%),
      radial-gradient(120% 60% at 50% 50%, rgba(107,130,146,.12), transparent 72%),
      rgba(11, 13, 16, .86);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    border-left: 1px solid rgba(255, 255, 255, .08);
    padding: calc(var(--header-h) + .6rem) 1.6rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); z-index: 110;
    box-shadow: -34px 0 64px -22px rgba(0, 0, 0, .65);
    /* Closed menu stays pinned at right:0 (its box fully inside the viewport)
       and is hidden/revealed with clip-path instead of translateX(100%).
       The old off-screen transform parked the panel's box at [vw, vw+width],
       which iOS counts as scrollable overflow → the page zoomed out and
       scrolled sideways. clip-path only clips painting, so the box never
       leaves the viewport and no overflow is created. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path var(--t-slow) var(--ease-out),
                visibility 0s linear var(--t-slow);
    overflow-y: auto;
  }
  body.menu-open .nav {
    clip-path: inset(0 0 0 0); visibility: visible;
    transition: clip-path var(--t-slow) var(--ease-out), visibility 0s;
  }

  /* links: large + white, with a per-item staggered reveal (delay on the
     entrance only, via --d — hover/colour stays snappy at 0 delay) */
  .nav a {
    display: block; color: rgba(255,255,255,.9);
    font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em;
    padding: .72rem .2rem; border-bottom: 1px solid rgba(255,255,255,.08); position: relative;
    transition: color var(--t) var(--ease), padding-left var(--t) var(--ease),
                transform .5s var(--ease-out) var(--d, 0s), opacity .5s var(--ease-out) var(--d, 0s);
  }
  .site-header:not(.is-solid) .nav a { color: rgba(255,255,255,.9); }   /* panel is always dark now */
  .nav a::after { display: none; }
  .nav a:hover, .nav a:focus-visible,
  .site-header:not(.is-solid) .nav a:hover,
  .site-header:not(.is-solid) .nav a:focus-visible { color: #fff; padding-left: .45rem; }
  .nav a[aria-current="page"] { color: #fff; }
  .nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: -1.6rem; top: 50%; transform: translateY(-50%);
    width: 4px; height: 56%; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #f1910b, #ff2d2d);
  }

  /* staggered entrance */
  .nav a, .nav .nav-mfoot { opacity: 0; transform: translateX(16px); }
  body.menu-open .nav a, body.menu-open .nav .nav-mfoot { opacity: 1; transform: none; }
  .nav > :nth-child(1) { --d: .05s } .nav > :nth-child(2) { --d: .09s }
  .nav > :nth-child(3) { --d: .13s } .nav > :nth-child(4) { --d: .17s }
  .nav > :nth-child(5) { --d: .21s } .nav > :nth-child(6) { --d: .25s }
  .nav > :nth-child(7) { --d: .29s } .nav > :nth-child(8) { --d: .33s }
  .nav > :nth-child(9) { --d: .37s } .nav > :nth-child(10) { --d: .41s }
  .nav > :nth-child(11) { --d: .45s }

  /* menu footer: gradient CTA + contact + social (LinkedIn) */
  .nav-mfoot {
    display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08);
    transition: transform .5s var(--ease-out) var(--d, 0s), opacity .5s var(--ease-out) var(--d, 0s);
  }
  /* footer links are <a> too, so scope above `.nav a` and reset its border/padding */
  .nav .nav-mfoot__cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
    padding: .95rem 1rem; border: 0; border-radius: 13px; text-decoration: none; white-space: nowrap;
    font-weight: 600; font-size: 1rem; color: #fff;
    background: linear-gradient(120deg, #f1910b, #ff2d2d);
    box-shadow: 0 14px 30px -12px rgba(255,45,45,.5);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  .nav .nav-mfoot__cta svg { width: 20px; height: 20px; }
  .nav .nav-mfoot__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(255,45,45,.6); }
  .nav-mfoot__contact { display: flex; flex-direction: column; gap: .1rem; margin-top: .8rem; }
  .nav .nav-mfoot__contact a, .nav-mfoot__addr {
    display: flex; align-items: center; gap: .65rem; text-decoration: none; border: 0;
    padding: .35rem 0; color: rgba(255,255,255,.66); font-size: .92rem; font-weight: 500; line-height: 1.35;
  }
  .nav .nav-mfoot__contact a:hover { color: #fff; padding-left: 0; }
  .nav-mfoot__contact svg { width: 18px; height: 18px; color: #f1910b; flex: 0 0 auto; }
  .nav .nav-mfoot__social {
    display: inline-flex; align-items: center; justify-content: center; margin-top: .9rem;
    width: 42px; height: 42px; border-radius: 11px; color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.14);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .nav .nav-mfoot__social svg { width: 20px; height: 20px; }
  .nav .nav-mfoot__social:hover { color: #fff; border-color: rgba(255,255,255,.3); }

  .nav-overlay {
    position: fixed; inset: 0; background: rgba(8,9,11,.55); z-index: 105;
    opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  body.menu-open .nav-overlay { opacity:1; visibility:visible; }

  /* reduced motion: no slide/stagger, keep the panel reveal instant */
  @media (prefers-reduced-motion: reduce) {
    .nav a, .nav .nav-mfoot { opacity: 1; transform: none; transition: color var(--t) var(--ease); }
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Home page: oversized logo at the very top, animates down to compact on scroll.
   The shrink is driven by the .is-solid toggle (scrollY > 24) + the height
   transitions already on .site-header and .brand img. */
body[data-page="home"] .site-header:not(.is-solid) { height: 168px; }
body[data-page="home"] .site-header:not(.is-solid) .brand img { height: 140px; }
/* push the hero content clear of the enlarged logo while it is on screen */
body[data-page="home"] .hero .container { padding-top: 168px; }
@media (max-width: 640px){
  body[data-page="home"] .site-header:not(.is-solid) { height: 112px; }
  body[data-page="home"] .site-header:not(.is-solid) .brand img { height: 88px; }
  body[data-page="home"] .hero .container { padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce){
  body[data-page="home"] .site-header:not(.is-solid) .brand img { transition: none; }
}

.hero {
  position: relative; min-height: clamp(620px, 92vh, 900px);
  display: flex; align-items: center;
  background: radial-gradient(120% 90% at 75% 10%, #1c2733 0%, #121419 48%, #0c0d10 100%);
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
/* hero background switch: show only the active layer (rollback = data-hero-bg="network") */
.hero[data-hero-bg="shader"]  #hero-canvas { display:none; }
.hero[data-hero-bg="network"] #hero-shader { display:none; }
#hero-shader { opacity:1; }
.hero__veil {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,14,.82) 0%, rgba(10,11,14,.45) 42%, rgba(10,11,14,0) 70%),
    linear-gradient(0deg, rgba(10,11,14,.7) 0%, rgba(10,11,14,0) 40%);
}
/* signature -22deg accent band sweeping the hero */
.hero__angle {
  position:absolute; z-index:1; right:-12%; top:-30%; width:60%; height:160%;
  background: linear-gradient(180deg, rgba(255,0,0,.0), rgba(255,0,0,.10), rgba(241,145,11,.16), rgba(255,0,0,0));
  transform: rotate(var(--angle)); filter: blur(8px); pointer-events:none;
}
.hero .container { position: relative; z-index: 2; padding-top: var(--header-h); }
.hero__inner { max-width: 820px; }
.hero h1 { font-size: var(--fs-hero); color:#fff; }
/* emphasised phrase: clearly-visible brand gradient on the dark hero */
.hero h1 strong, .page-hero h1 strong {
  color: var(--orange); /* fallback for no background-clip */
  background: linear-gradient(100deg, #ffb347 0%, var(--orange) 45%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* masked slide-reveal for the hero heading (vanilla port of 21st.dev MaskedSlideReveal):
   each word rides up from behind an overflow:hidden mask, staggered. JS (initHeroReveal)
   wraps the words and adds .is-revealed; without JS the heading is plain visible text. */
.hero h1 .rw { display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .rw > span { display:inline-block; transform: translateY(115%);
  transition: transform .8s cubic-bezier(.22,1,.36,1); will-change: transform; }
.hero h1.is-revealed .rw > span { transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .hero h1 .rw > span { transition: none; transform: none; }
}
.hero__tag { color: rgba(255,255,255,.8); font-size: var(--fs-lead); font-weight:300; margin-top: 1.4rem; max-width: 54ch; }
.hero__cta { display:flex; flex-wrap:wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__meta { display:flex; flex-wrap:nowrap; gap:1.5rem clamp(.9rem,2.4vw,2rem); margin-top: 3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.12); }
.hero__meta .stat { min-width:0; }
.hero__meta .stat b { display:block; font-size: clamp(1.5rem,2.7vw,2.3rem); font-weight:300; color:#fff; line-height:1.05; white-space:nowrap; }
.hero__meta .stat span { font-size:.82rem; letter-spacing:.03em; color: rgba(255,255,255,.62); text-transform:uppercase; }
@media (max-width: 560px){ .hero__meta { flex-wrap:wrap; } .hero__meta .stat { min-width:40%; } }
.hero__meta .stat b em { font-style:normal; color: var(--orange); }

.hero__chip {
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.6rem;
  padding:.5rem .9rem .5rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
}
.hero__chip .dot { width:8px; height:8px; border-radius:50%; background: var(--orange); box-shadow:0 0 0 4px rgba(241,145,11,.22); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(241,145,11,.25);} 50%{ box-shadow:0 0 0 7px rgba(241,145,11,0);} }

/* compact page hero (interior pages) */
.page-hero {
  position: relative; padding-top: calc(var(--header-h) + clamp(3rem,7vw,5.5rem));
  padding-bottom: clamp(3rem,7vw,5rem);
  background: radial-gradient(110% 130% at 80% -10%, #1d2733 0%, #14161b 55%, #0d0e11 100%);
  color:#fff; overflow:hidden; isolation:isolate;
}
.page-hero__angle { position:absolute; right:-10%; top:-40%; width:55%; height:180%;
  background: linear-gradient(180deg, rgba(241,145,11,.0), rgba(241,145,11,.14), rgba(255,0,0,.10), transparent);
  transform: rotate(var(--angle)); filter: blur(6px); z-index:0; }
/* keeps the breadcrumb/title/lead readable over the animated mesh gradient */
.page-hero__veil { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,14,.86) 0%, rgba(10,11,14,.55) 46%, rgba(10,11,14,.12) 76%, rgba(10,11,14,0) 100%),
    linear-gradient(0deg, rgba(10,11,14,.5) 0%, rgba(10,11,14,0) 55%); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:#fff; font-size: var(--fs-h1); max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,.78); font-size: var(--fs-lead); font-weight:300; margin-top:1.1rem; max-width:60ch; }
.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.85rem; color: rgba(255,255,255,.6); margin-bottom:1.2rem; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { opacity:.5; }

/* ==========================================================================
   Pillar / service cards
   ========================================================================== */
.pillar-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.6rem); }
@media (max-width: 900px){ .pillar-grid { grid-template-columns:1fr; } }

.pillar {
  position: relative; display:flex; flex-direction:column;
  padding: 2.3rem 2.1rem 2rem; border-radius: var(--radius);
  background: var(--surface); border:1px solid var(--border);
  overflow:hidden; isolation:isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pillar::before { /* -22deg accent wedge bottom-right */
  content:""; position:absolute; z-index:-1; right:-30%; bottom:-60%;
  width:80%; height:120%; background: var(--accent-wedge, rgba(107,130,146,.08));
  transform: rotate(var(--angle)); transition: transform var(--t-slow) var(--ease);
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.pillar:hover::before { transform: rotate(var(--angle)) translateX(-8%); }
.pillar__icon {
  width:58px; height:58px; border-radius: 13px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(107,130,146,.14), rgba(241,145,11,.1));
  margin-bottom: 1.3rem;
}
.pillar__icon svg { width:30px; height:30px; }
.pillar h3 { margin-bottom: .55rem; }
.pillar p { font-size: .98rem; margin-bottom: 1.3rem; }
.pillar__list { display:flex; flex-direction:column; gap:.65rem; margin-bottom: 1.7rem; }
.pillar__list li { display:flex; align-items:flex-start; gap:.6rem; font-size:.94rem; line-height:1.5; color: var(--text-soft); }
.pillar__list svg { width:17px; height:17px; flex-shrink:0; margin-top:3px; color: var(--orange); }
.pillar .link-arrow { margin-top:auto; }
.pillar--datacom { --accent-wedge: rgba(107,130,146,.12); }
.pillar--telecom { --accent-wedge: rgba(241,145,11,.12); }
.pillar--power   { --accent-wedge: rgba(255,0,0,.09); }

/* whole-card deep-link into the pre-filtered catalog (stretched-link pattern) */
.pillar__cta { margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.92rem; color: var(--red-deep); text-decoration:none; }
.pillar__cta::after { content:""; position:absolute; inset:0; z-index:1; cursor:pointer; } /* makes the entire card clickable */
.pillar__arrow { width:18px; height:18px; transition: transform var(--t) var(--ease); }
.pillar:hover .pillar__arrow { transform: translateX(4px); }
.pillar__cta:focus-visible { outline:2px solid var(--red-deep); outline-offset:3px; border-radius:4px; }
.pillar:has(.pillar__cta:focus-visible) { border-color: var(--slate); box-shadow: 0 0 0 3px rgba(107,130,146,.28); }
@media (prefers-reduced-motion: reduce){ .pillar__arrow { transition: none; } }

/* ---- Deck: cards start stacked (FTTx on top, Datacom/Power peeking behind),
   then fan out into their columns as the section scrolls into view.
   --p is set by JS: 0 = stacked, 1 = fully spread. ---- */
.pillar-deck { --pgap: clamp(1rem, 2vw, 1.6rem); gap: var(--pgap); --p: 1; }
.pcard { position: relative; display: flex; }
/* min-width:0 lets the repeat(3,1fr) tracks shrink below the cards' content
   width. Without it (default min-width:auto) the deck's min-content demands
   ~960px, so iOS sizes the layout viewport to fit that — which makes the
   max-width:900px collapse query never match, locking the home page into a
   3-column layout wider than the phone (zoom-out + sideways scroll). */
.pcard { min-width: 0; }
.pcard > .pillar { width: 100%; min-width: 0; }
.pcard {
  transform: translate3d(var(--tx,0), var(--ty,0), 0) rotate(var(--rot,0deg)) scale(var(--sc,1));
  transform-origin: center 42%;
  will-change: transform;
}
/* left (Datacom) and right (Power) slide in from behind the centre card */
.pillar-deck .pcard:nth-child(1) { z-index: 1; opacity: calc(.62 + .38 * var(--p));
  --tx: calc((100% + var(--pgap) - 26px) * (1 - var(--p)));
  --ty: calc(22px * (1 - var(--p)));
  --rot: calc(-6deg * (1 - var(--p)));
  --sc: calc(1 - .08 * (1 - var(--p)));
}
.pillar-deck .pcard:nth-child(3) { z-index: 1; opacity: calc(.62 + .38 * var(--p));
  --tx: calc((-100% - var(--pgap) + 26px) * (1 - var(--p)));
  --ty: calc(22px * (1 - var(--p)));
  --rot: calc(6deg * (1 - var(--p)));
  --sc: calc(1 - .08 * (1 - var(--p)));
}
/* centre (FTTx) stays on top, slightly larger while stacked */
.pillar-deck .pcard:nth-child(2) { z-index: 3;
  --ty: calc(-6px * (1 - var(--p)));
  --sc: calc(1 + .025 * (1 - var(--p)));
}
.pillar-deck .pcard:nth-child(2) > .pillar { box-shadow: var(--shadow); }

@media (max-width: 900px){
  .pcard { transform: none !important; opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce){
  .pillar-deck { --p: 1 !important; }
  .pcard { transform: none !important; opacity: 1 !important; }
  .pillar:hover, .pillar-deck .pillar:hover { transform: none; }
}

/* ---- Vibrancy for the home "Three disciplines" deck (scoped — other pages
   keep the plain card style). Adds brand colour while keeping text on light. ---- */
#pillars { position: relative; isolation: isolate;
  /* clip the decorative ::before wedge (right:-14%) horizontally. On an
     overflow:visible section its negative offset + %-based size bled past the
     right edge, which iOS treats as content and sizes the layout viewport to
     fit — feeding the mobile zoom-out. clip (not hidden) keeps vertical
     hover-lift visible and creates no scroll container. */
  overflow-x: clip;
  background:
    radial-gradient(72% 55% at 50% -6%, rgba(241,145,11,.07), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}
#pillars::before {            /* faint signature -22° wedge behind the deck */
  content: ""; position: absolute; z-index: -1; right: -14%; top: -25%;
  width: 52%; height: 150%; pointer-events: none; filter: blur(8px);
  background: linear-gradient(var(--angle), rgba(107,130,146,.10), rgba(241,145,11,.06));
  transform: rotate(var(--angle));
}

/* per-discipline palette */
.pillar-deck .pillar--datacom { --accent:#6b8292; --accent-2:#93a8b6; --field:rgba(107,130,146,.08); --tileA:rgba(107,130,146,.22); --tileB:rgba(107,130,146,.06); --glow:rgba(107,130,146,.34); }
.pillar-deck .pillar--telecom { --accent:#f1910b; --accent-2:#ff2a2a; --field:rgba(241,145,11,.10); --tileA:rgba(241,145,11,.24); --tileB:rgba(255,0,0,.10);  --glow:rgba(241,145,11,.42); }
.pillar-deck .pillar--power   { --accent:#ff2a2a; --accent-2:#f1910b; --field:rgba(255,0,0,.07);  --tileA:rgba(255,0,0,.16);    --tileB:rgba(241,145,11,.10); --glow:rgba(255,0,0,.30); }

.pillar-deck .pillar {
  border-color: rgba(20,24,28,.05);
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) top left / 100% 4px no-repeat,
    linear-gradient(168deg, var(--field) 0%, rgba(255,255,255,0) 54%),
    #ffffff;
}
.pillar-deck .pillar__icon { background: linear-gradient(135deg, var(--tileA), var(--tileB)); }
.pillar-deck .pillar:hover {
  border-color: transparent;
  box-shadow: 0 20px 44px -14px var(--glow), var(--shadow-lg);
}
.pillar-deck .pillar:hover::before { transform: rotate(var(--angle)) translateX(-8%) scale(1.05); }

/* ---- Phone (≤620px): FTTx & Power feature decks become a 2-up grid
   (single column wasted space and read as a long flat list). Card internals
   tighten so two fit a ~360px screen; cards reveal per-row as you scroll,
   driven by initReveal() in main.js. Scoped to .grid.pillar-deck so the
   homepage/datacom 3-card fan-out (.pillar-grid.pillar-deck) is untouched. */
@media (max-width: 620px){
  .grid.pillar-deck { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .grid.pillar-deck .pillar { padding: 1.3rem 1.15rem 1.35rem; border-radius: 13px; }
  .grid.pillar-deck .pillar__icon { width:44px; height:44px; border-radius:11px; margin-bottom:.85rem; }
  .grid.pillar-deck .pillar__icon svg { width:23px; height:23px; }
  .grid.pillar-deck .pillar h3 { font-size:1rem; margin-bottom:.4rem; line-height:1.25; overflow-wrap:break-word; hyphens:auto; }
  .grid.pillar-deck .pillar p { font-size:.85rem; line-height:1.5; margin-bottom:1rem; }
  .grid.pillar-deck .pillar__cta { font-size:.82rem; }
}

/* featured centre card — homepage "three disciplines" deck only: richer wash +
   warm glow so it leads the trio. Scoped to the home page so it does not bleed
   onto the Datacom intro deck (where all three product cards rank equally). */
body[data-page="home"] .pillar-deck .pcard:nth-child(2) > .pillar {
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) top left / 100% 5px no-repeat,
    linear-gradient(168deg, var(--field) 0%, rgba(255,255,255,0) 62%),
    #ffffff;
  box-shadow: 0 26px 56px -22px rgba(241,145,11,.45), var(--shadow);
}
body[data-page="home"] .pillar-deck .pcard:nth-child(2) > .pillar:hover {
  box-shadow: 0 26px 56px -16px rgba(241,145,11,.55), var(--shadow-lg);
}

/* Icon two-tone (brand: slate + orange) */
.ico-slate { color: var(--slate); }
.ico-orange { color: var(--orange); }

/* ---- Trust band: operator wordmarks under the partner marquee ---- */
.trust-names {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 1rem clamp(1.4rem, 3.5vw, 2.8rem);
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--border);
}
.trust-names .tn {
  font-weight:700; font-size: clamp(1.02rem, 1.7vw, 1.4rem); letter-spacing:.015em;
  color: var(--slate-deep); opacity:1; white-space:nowrap;
  transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}
.trust-names .tn:hover { opacity:1; color: var(--slate-deep); }
.trust-names .tn-dot { width:5px; height:5px; border-radius:50%; background: var(--orange); flex:0 0 auto; }

/* ==========================================================================
   Feature rows / split
   ========================================================================== */
.split { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 880px){ .split { grid-template-columns:1fr; } .split--reverse .split__media { order:0; } }
.split__body .kicker { margin-bottom: 1rem; }
.split__body h2 { margin-bottom: 1rem; }
.split__body p + p { margin-top: 1rem; }
.feature-list { display:grid; gap:1rem; margin-top:1.6rem; }
.feature-list li { display:flex; gap:.85rem; }
.feature-list .fi-ico { flex-shrink:0; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background: rgba(107,130,146,.1); }
.feature-list .fi-ico svg { width:21px; height:21px; color: var(--slate); }
.feature-list h4 { font-size:1.02rem; margin-bottom:.15rem; }
.feature-list p { font-size:.92rem; margin:0; }

/* Media panel with angle device */
.media-panel {
  position:relative; aspect-ratio: 4/3.4; border-radius: var(--radius-lg); overflow:hidden;
  background: radial-gradient(120% 120% at 30% 20%, #20303d, #12161b 70%);
  box-shadow: var(--shadow-lg); isolation:isolate;
}
.media-panel canvas, .media-panel svg.viz { position:absolute; inset:0; width:100%; height:100%; }
.media-panel img.media-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.media-panel.has-photo::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, rgba(13,14,16,0) 45%, rgba(13,14,16,.55) 100%); }
.media-panel.has-photo .media-panel__tag { z-index:3; }
.photo-band { position:relative; margin-top:2.4rem; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 21/8; }
.photo-band img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:680px){ .photo-band { aspect-ratio: 16/10; } }

/* FAQ accordion (AEO) */
.faq { max-width: 820px; margin: 2.6rem auto 0; }
.faq-item { border:1px solid var(--line, rgba(13,14,16,.12)); border-radius: var(--radius, 14px);
  background: var(--surface); margin-bottom:.9rem; overflow:hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.faq-item[open] { box-shadow: var(--shadow-lg); border-color: rgba(241,145,11,.45); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.15rem 1.35rem; font-weight:600; font-size:1.05rem; color:var(--text); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.faq-mark { position:relative; flex:0 0 auto; width:20px; height:20px; }
.faq-mark::before, .faq-mark::after { content:""; position:absolute; top:50%; left:50%; width:13px; height:2.4px;
  background: var(--orange); border-radius:2px; transform: translate(-50%,-50%); transition: transform .28s ease, opacity .28s ease; }
.faq-mark::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-mark::after { opacity:0; transform: translate(-50%,-50%) rotate(0); }
.faq-a { padding:0 1.35rem 1.2rem; color: var(--muted, #56636e); line-height:1.6; max-width:68ch; }
.faq-a p { margin:0; }
@media (prefers-reduced-motion: no-preference){
  .faq-item[open] .faq-a { animation: faqIn .32s ease both; }
}
@keyframes faqIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.media-panel__angle { position:absolute; left:-20%; bottom:-30%; width:90%; height:80%;
  background: linear-gradient(var(--angle), var(--red), var(--orange)); opacity:.16;
  transform: rotate(var(--angle)); filter: blur(4px); }
.media-panel__tag { position:absolute; left:1.2rem; bottom:1.1rem; z-index:3;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.8);
  display:flex; align-items:center; gap:.5rem; }
.media-panel__tag .dot { width:7px;height:7px;border-radius:50%;background:var(--orange); }

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band { display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; }
@media (max-width:720px){ .stats-band { grid-template-columns: repeat(2,1fr); } }
/* 3-up variant (Power intro): collapse on phones instead of staying 3 cramped columns */
.stats-band--3 { grid-template-columns: repeat(3,1fr); }
@media (max-width:720px){ .stats-band--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .stats-band--3 { grid-template-columns: 1fr; } }
.stat-card { text-align:center; padding:1.4rem .8rem; min-width:0; }
.stat-card .num { font-size: clamp(2.2rem,4.5vw,3.4rem); font-weight:300; line-height:1; letter-spacing:-.02em; }
.section--dark .stat-card .num { color:#fff; }
.stat-card .num em { font-style:normal; color: var(--red); }
.section--dark .stat-card .num em { color: var(--orange); }
.stat-card .lbl { margin-top:.7rem; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; color: var(--text-soft); }

/* Stat-band count-up (assets/js/main.js initCounters): built from the plain
   baked "25+"/"Tier-1" text at reveal time, only on .stat-card.reveal .num,
   so the Power-page stats-band--3 (plain, not .reveal) is untouched. */
.num .suffix-reveal { display:inline-block; opacity:0; transform:translateX(-.5em);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out); }
.num .suffix-reveal.is-in { opacity:1; transform:translateX(0); }
.txtexp { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; }

/* ---- industries band (homepage; curated cross-segment photo tiles) ---- */
.ind-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(.8rem,1.6vw,1.2rem); }
@media (max-width:900px){ .ind-grid { grid-template-columns: repeat(2,1fr); } }
.ind-tile { position:relative; display:block; overflow:hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4/3; box-shadow: var(--shadow-sm); color:#fff; isolation:isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.ind-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ind-tile__img { position:absolute; inset:0; }
.ind-tile__img img { width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s var(--ease); }
.ind-tile:hover .ind-tile__img img { transform: scale(1.06); }
.ind-tile__veil { position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(13,14,16,.05) 0%, rgba(13,14,16,.30) 45%, rgba(13,14,16,.82) 100%); }
.ind-tile__body { position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:.4rem; padding: clamp(.9rem,1.8vw,1.2rem); }
.ind-tile__tag { align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.24rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.28); }
.ind-tile[data-disc="datacom"] .ind-tile__tag { background: rgba(209,8,18,.55); border-color: rgba(255,255,255,.3); }
.ind-tile[data-disc="ftth"] .ind-tile__tag { background: rgba(241,145,11,.6); border-color: rgba(255,255,255,.3); }
.ind-tile[data-disc="power"] .ind-tile__tag { background: rgba(107,130,146,.6); border-color: rgba(255,255,255,.3); }
.ind-tile__name { font-size: clamp(1rem,1.5vw,1.15rem); font-weight:700; line-height:1.2;
  text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.ind-tile:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .ind-tile:hover { transform:none; }
  .ind-tile:hover .ind-tile__img img { transform:none; }
}

/* ---- quality & certifications page (certifications.html) ---- */
.cert-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); align-items:start; }
@media (max-width:860px){ .cert-cards { grid-template-columns:1fr; } }
.cert-card { background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.4rem,2.6vw,2rem); }
.cert-card__badge { display:inline-flex; align-items:center; justify-content:center;
  width:72px; height:72px; border-radius:16px; margin-bottom:1.1rem;
  font-weight:800; font-size:1.15rem; line-height:1.05; text-align:center;
  letter-spacing:.02em; color:#fff; }
.cert-card__badge--iso { background: linear-gradient(150deg, var(--slate), var(--slate-deep)); font-size:1rem; }
.cert-card__badge--hcs { background: linear-gradient(150deg, var(--red-deep), #c23a00); }
.cert-card__badge--cpr { background: linear-gradient(150deg, var(--orange), #c8790a); }
.cert-card h2 { font-size:1.2rem; margin-bottom:.6rem; }
.cert-card p { font-size:.92rem; line-height:1.65; color: var(--text-soft); }

/* ---- TÜV NORD ISO 9001 Mark of Conformity ----
   The real accredited mark (assets/img/tuv-nord-iso-9001.png): a fixed dark-navy
   square. TÜV rules: never recolour, round, crop or stretch it; only seat it on a
   light surface with clear space, keep it no more prominent than LGCE's own brand,
   and never bind it to a product. Used on certifications.html + About #quality only. */
.tuv-badge { display:inline-flex; border-radius:var(--radius-sm);
  transition:transform .18s ease, box-shadow .18s ease; }
.tuv-badge img { display:block; width:96px; height:96px; }
.tuv-badge:hover { transform:translateY(-2px); }
.tuv-badge:focus-visible { outline:3px solid var(--slate); outline-offset:3px; }
.cert-card .tuv-badge { margin-bottom:1.1rem; }
.cert-card__meta { margin-top:.9rem; font-size:.8rem; color:var(--text-faint); }
/* inline (About #quality): the mark + a caption, on a light chip */
.tuv-badge--inline { align-items:center; gap:1rem; margin-top:1.6rem; padding:.85rem 1.1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); max-width:520px; text-decoration:none; }
.tuv-badge--inline img { width:84px; height:84px; }
.tuv-badge__cap { font-size:.85rem; line-height:1.5; color:var(--text-soft); }
/* certificate details panel (certifications.html #documents) */
.cert-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.9rem 1.6rem; margin:0 0 1.8rem; padding:1.2rem 1.4rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.cert-facts > div { min-width:0; }
.cert-facts dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-faint); margin:0 0 .2rem; }
.cert-facts dd { margin:0; font-size:.95rem; font-weight:600; color:var(--text); }
.cert-facts__scope { grid-column:1/-1; }
.cert-facts__scope dd { font-weight:400; line-height:1.6; color:var(--text-soft); }
@media (prefers-reduced-motion: reduce){ .tuv-badge:hover { transform:none; } }
.section--dark .stat-card .lbl { color: rgba(255,255,255,.6); }
/* dark (home) stats: editorial treatment — left-aligned numerals with hairline dividers */
.section--dark .stats-band { gap:0; }
.section--dark .stats-band .stat-card {
  text-align:left; padding: .4rem 2rem .6rem;
  border-left:1px solid rgba(255,255,255,.13);
}
.section--dark .stats-band .stat-card:first-child { border-left:none; padding-left:0; }
.section--dark .stats-band .stat-card .num { font-size: clamp(2.6rem,5.4vw,4.1rem); letter-spacing:-.03em; }
.section--dark .stats-band .stat-card .lbl { margin-top:.85rem; }
@media (max-width:720px){
  .section--dark .stats-band { gap:1.6rem 0; }
  .section--dark .stats-band .stat-card:nth-child(odd) { border-left:none; padding-left:0; }
  .section--dark .stats-band .stat-card { padding-right:1rem; }
}

/* ==========================================================================
   Logos / partners
   ========================================================================== */
.marquee { position: relative; overflow:hidden; isolation:isolate; padding-block: clamp(1.4rem, 3.5vw, 2.8rem); }
.marquee__track {
  display:flex; align-items:center; gap: clamp(2rem,5vw,4rem); width:max-content;
  animation: marquee 32s linear infinite;
  /* Force GPU compositing so iOS Safari doesn't jitter or drop the layer */
  will-change: transform;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
/* Only pause on real pointer devices — on touch (iPhone), :hover never reliably
   releases after a tap, which freezes the animation permanently. */
@media (hover: hover) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
/* progressive-blur edges: logos blur out toward the left/right (ported from 21st.dev).
   Layers are generated by initProgressiveBlur(); the ::after fades the clipped edge
   into the section background so the blur dissolves instead of looking cut off. */
.pblur { position:absolute; top:0; height:100%; width: clamp(120px, 18vw, 260px); z-index:3; pointer-events:none; }
.pblur--left { left:0; }
.pblur--right { right:0; }
.pblur > div { position:absolute; inset:0; }
.pblur::after { content:""; position:absolute; inset:0; pointer-events:none; }
.pblur--left::after  { background: linear-gradient(90deg,  var(--bg) 8%, rgba(255,255,255,0) 78%); }
.pblur--right::after { background: linear-gradient(270deg, var(--bg) 8%, rgba(255,255,255,0) 78%); }
@keyframes marquee { to { transform: translateX(-50%); } }
.partner { font-weight:700; font-size:1.15rem; letter-spacing:.02em; color: var(--grey-dark); opacity:.7; white-space:nowrap; transition: opacity var(--t) var(--ease), color var(--t) var(--ease); }
.partner:hover { opacity:1; color: var(--slate); }
/* partner logos — uniform monochrome marks (works for any logo colour, incl. white);
   reveal full brand colour on hover */
.partner-logo {
  height: clamp(30px, 4.4vw, 46px); width: auto; max-width: 190px; object-fit: contain;
  flex: 0 0 auto; filter: grayscale(1) opacity(.55) contrast(.9) brightness(.55);
  transition: filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.partner-logo:hover { filter: none; transform: translateY(-2px); }
/* Jetting AB: white mark (monochrome) by default, crossfade to the colour version on hover/tap */
/* base + colour images are stacked in one grid cell (no absolute/transform, so
   backdrop-filter on .pblur blurs these marks too) and crossfaded on hover/tap */
/* --ps = per-logo size factor (set by the CMS "fit" slider; default 1) */
.partner-swap { position: relative; display: grid; place-items: center; flex: 0 0 auto;
  height: calc(clamp(30px, 4.4vw, 46px) * var(--ps, 1)); transition: transform var(--t) var(--ease); }
/* explicit height (not 100%) — a grid auto-row is indefinite, so height:100%
   would collapse to the image's intrinsic size and blow up square logos (KNET) */
.partner-swap img { grid-area: 1 / 1; height: calc(clamp(30px, 4.4vw, 46px) * var(--ps, 1)); width: auto;
  max-width: calc(200px * var(--ps, 1));
  object-fit: contain; display: block; transition: opacity var(--t) var(--ease); }
/* mono look is baked into the *-mono.png source, so no CSS filter is applied —
   this avoids backdrop-filter sampling the un-filtered colour image under the
   edge blur (which previously showed KNET/Jetting in colour). */
.partner-swap .ps-base { filter: none; }
.partner-swap .ps-color { opacity: 0; }
.partner-swap .ps-base-dark, .partner-swap .ps-color-dark { opacity: 0; }
.partner-swap:hover, .partner-swap.is-lit { transform: translateY(-2px); }
.partner-swap:hover .ps-base, .partner-swap.is-lit .ps-base { opacity: 0; }
.partner-swap:hover .ps-color, .partner-swap.is-lit .ps-color { opacity: 1; }
@media (prefers-reduced-motion: reduce){ .marquee__track { animation:none; flex-wrap:wrap; justify-content:center; } .marquee__track .partner-swap[aria-hidden="true"]{ display:none; } }

/* ==========================================================================
   Downloads / materials
   ========================================================================== */
.dl-toolbar { position:relative; display:inline-flex; flex-wrap:wrap; gap:2px;
  background:var(--mist); padding:5px; border-radius:14px; margin-bottom:2.4rem; max-width:100%; }
.dl-ind { position:absolute; left:0; top:5px; width:0; height:0; border-radius:10px;
  background: var(--surface); box-shadow:0 2px 9px rgba(20,24,28,.13), 0 0 0 1px rgba(20,24,28,.05);
  pointer-events:none;
  transition:left .42s cubic-bezier(.65,.05,.36,1), top .42s cubic-bezier(.65,.05,.36,1),
             width .42s cubic-bezier(.65,.05,.36,1), height .42s cubic-bezier(.65,.05,.36,1); }
.dl-ind::after { content:""; position:absolute; left:15px; right:15px; bottom:7px; height:2.5px;
  border-radius:2px; background:linear-gradient(90deg, var(--red), var(--orange)); }
.dl-seg { position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--text-soft); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding:.55rem 1.05rem .65rem;
  border-radius:10px; transition:color .25s ease; -webkit-tap-highlight-color:transparent; }
.dl-seg:hover { color:var(--ink); }
.dl-seg[aria-pressed="true"] { color:var(--ink); }
.dl-seg:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
.chip {
  padding:.55rem 1.05rem; border-radius:999px; font-weight:600; font-size:.9rem;
  background: var(--surface); border:1.5px solid var(--border); color: var(--text-soft);
  transition: all var(--t) var(--ease);
}
.chip[aria-pressed="true"], .chip:hover { border-color: var(--red-deep); color: var(--red-deep); }
.chip[aria-pressed="true"] { background: rgba(209,8,18,.06); }

.dl-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); }
@media (max-width:960px){ .dl-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .dl-grid { grid-template-columns: 1fr; } }

.dl-card {
  position:relative; display:flex; flex-direction:column; gap:1rem;
  padding:1.5rem; border-radius: var(--radius); background:var(--surface); border:1px solid var(--border);
  overflow:hidden; isolation:isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.dl-card::after { content:""; position:absolute; right:-40%; top:-60%; width:70%; height:120%;
  background: var(--wedge, rgba(107,130,146,.07)); transform: rotate(var(--angle)); z-index:-1;
  transition: transform var(--t-slow) var(--ease); }
.dl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color:transparent; }
.dl-card:hover::after { transform: rotate(var(--angle)) translateY(8%); }
.dl-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.dl-card__icon { width:48px; height:48px; border-radius:11px; display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(107,130,146,.16), rgba(241,145,11,.12)); flex-shrink:0; }
.dl-card__icon svg { width:25px; height:25px; }
.dl-card__fmt { font-size:.7rem; font-weight:800; letter-spacing:.06em; color: var(--slate);
  border:1.5px solid var(--border); border-radius:5px; padding:.2rem .45rem; text-transform:uppercase; }
.dl-card h3 { font-size:1.12rem; }
.dl-card p { font-size:.9rem; margin:0; }
.dl-card .tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.dl-card .tag { font-size:.74rem; font-weight:600; color: var(--text-faint); background: var(--mist); border-radius:6px; padding:.2rem .5rem; }
.dl-card__foot { margin-top:auto; padding-top:.4rem; display:flex; align-items:center; justify-content:space-between; }
.dl-card__size { font-size:.8rem; color: var(--text-faint); }
.dl-card .link-arrow { font-size:.92rem; }
.dl-card.is-hidden { display:none; }

/* category color accents on download cards */
.dl-card[data-cat="fiber"]   { --wedge: rgba(241,145,11,.1); }
.dl-card[data-cat="copper"]  { --wedge: rgba(209,8,18,.08); }
.dl-card[data-cat="power"]   { --wedge: rgba(255,0,0,.08); }
.dl-card[data-cat="infra"]   { --wedge: rgba(107,130,146,.1); }
.dl-card[data-cat="forms"]   { --wedge: rgba(87,87,86,.08); }

/* downloads sub-navigation (jump links + scrollspy) */
.dl-subnav { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.6rem; }
.dl-jump { display:inline-flex; align-items:center; font:inherit; font-size:.92rem; font-weight:600;
  color:var(--text-soft); background:var(--mist); border:1px solid transparent; border-radius:999px;
  padding:.52rem 1.05rem; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:color .2s ease, background .2s ease, border-color .2s ease; }
.dl-jump:hover { color:var(--ink); }
.dl-jump.is-active { color:var(--red-deep); background:rgba(209,8,18,.06); border-color:rgba(209,8,18,.22); }
.dl-jump:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }

/* downloads sub-sections */
.dl-group { scroll-margin-top: calc(var(--header-h, 76px) + 1.2rem); }
.dl-group + .dl-group { margin-top: 3rem; }
.dl-group__title { font-size: var(--fs-h3); margin:0; }
.dl-group__note { margin:.5rem 0 0; font-size:.92rem; }
.dl-group__note a { color:var(--slate-deep); font-weight:600; }
.dl-group__note a:hover { color:var(--red-deep); }
.dl-group .dl-grid { margin-top:1.4rem; }
@media (max-width:768px){ .dl-group { scroll-margin-top: calc(var(--header-h, 76px) + 64px); } }

/* on-request download cards (file not published yet) */
.dl-card--req { background:linear-gradient(180deg,var(--surface),var(--bg-alt)); }
.dl-card__size--req { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--slate-deep); }
.dl-card__size--req::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }

/* material taxonomy grid (visual catalogue) */
.cat-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; }
@media (max-width:900px){ .cat-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid { grid-template-columns: 1fr; } }
.cat-card { display:flex; gap:1rem; align-items:center; padding:1.1rem 1.2rem; border-radius: var(--radius);
  background:var(--surface); border:1px solid var(--border); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card__ico { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background: rgba(107,130,146,.1); }
.cat-card__ico svg { width:23px; height:23px; color: var(--slate); }
.cat-card b { display:block; font-size:1rem; color: var(--text); }
.cat-card span { font-size:.85rem; color: var(--text-faint); }

/* ==========================================================================
   Process / steps
   ========================================================================== */
.steps { counter-reset: step; display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.4rem,3vw,2.6rem); }
@media (max-width:900px){ .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width:520px){ .steps { grid-template-columns:1fr; } }
/* editorial timeline: hairline rule + oversized light numeral, no card chrome */
.step { position:relative; padding:1.5rem 0 0; }
.step::after { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--border); transition: background var(--t) var(--ease); }
.step::before { counter-increment: step; content: counter(step,decimal-leading-zero);
  display:block; font-size: clamp(2.1rem,3.2vw,2.8rem); font-weight:200; line-height:1;
  letter-spacing:-.02em; color: var(--orange);
  background: linear-gradient(120deg, var(--orange) 20%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step:hover::after { background: linear-gradient(90deg, var(--orange), var(--red)); }
.step h4 { margin:1rem 0 .45rem; font-size:1.12rem; }
.step p { font-size:.94rem; margin:0; }
.section--dark .step::after { background: rgba(255,255,255,.14); }

/* ==========================================================================
   Vertical value marquee (About — "what defines us")
   Vanilla port of a vertical text ticker, restyled in the LGCE brand.
   Pace + geometry are driven purely by CSS calc from --index/--count/--speed.
   ========================================================================== */
.values-marquee {
  display: flex; align-items: center; justify-content: center; gap: .3em;
  font-size: clamp(1.9rem, 4.8vw, 3.4rem); font-weight: 300; line-height: 1.25;
  letter-spacing: -.02em; --vm-line: 1.3em;
}
.values-marquee .vm-prefix { color: #fff; }
.values-marquee .vm-period { color: var(--orange); margin-left: -.12em; }

.vmarquee {
  position: relative; overflow: hidden; width: max-content;
  height: calc(var(--vm-line) * 3);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 58%, transparent 100%);
}
.vmarquee__track { position: relative; height: 100%; }
.vmarquee__item {
  height: var(--vm-line); display: flex; align-items: center; white-space: nowrap;
  --origin:      calc((var(--count) - var(--index)) * 100%);
  --destination: calc((var(--index) + 1) * -100%);
  --duration:    calc(var(--speed) * var(--count) * 1s);
  --delay:       calc((var(--duration) / var(--count)) * var(--index) - var(--duration));
  translate: 0 var(--origin);
  animation: lgce-slide-vertical var(--duration) var(--delay) infinite linear;
}
.vmarquee__item span {
  font-weight: 700; white-space: nowrap; color: var(--orange);
  background: linear-gradient(100deg, #ffb347 0%, var(--orange) 45%, var(--red) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes lgce-slide-vertical { to { translate: 0 var(--destination); } }

/* Static, fully-legible fallback when motion is reduced */
@media (prefers-reduced-motion: reduce){
  .values-marquee { flex-wrap: wrap; gap: .2em .55em; }
  .values-marquee .vm-prefix, .values-marquee .vm-period { display: none; }
  .vmarquee { height: auto; width: auto; max-width: min(760px, 92vw);
    -webkit-mask-image: none; mask-image: none; }
  .vmarquee__track { display: flex; flex-wrap: wrap; justify-content: center; gap: .15em .6em; height: auto; }
  .vmarquee__item { height: auto; animation: none; translate: none; }
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(70% 110% at 8% 110%, rgba(107,130,146,.20), rgba(107,130,146,0) 60%),
    linear-gradient(120deg, #14161b 0%, #1c2733 100%);
  color:#fff; border-radius: var(--radius-lg); }
.cta-band__angle { position:absolute; right:-8%; top:-50%; width:50%; height:200%;
  background: linear-gradient(var(--angle), var(--red), var(--orange)); opacity:.18; transform: rotate(var(--angle)); filter: blur(2px); z-index:-1; }
.cta-band .inner { padding: clamp(2.4rem,5vw,4rem); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.cta-band h2 { color:#fff; max-width: 18ch; }
.cta-band p { color: rgba(255,255,255,.78); margin-top:.6rem; max-width:48ch; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.6rem); box-shadow: var(--shadow); }
.field { margin-bottom: 1.15rem; }
.field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.45rem; color: var(--text); }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width:100%; padding:.85rem 1rem; border-radius: var(--radius-sm);
  border:1.5px solid var(--border); background: var(--surface); font:inherit; font-size:1rem; color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--slate); box-shadow: 0 0 0 4px rgba(107,130,146,.15);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--red-deep); }
.field .err { display:none; color: var(--red-deep); font-size:.82rem; margin-top:.35rem; }
.field.invalid .err { display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red-deep); }
.field .hint { font-size:.82rem; color: var(--text-faint); margin-top:.35rem; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:560px){ .row-2 { grid-template-columns:1fr; } }
.form-status { display:none; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-radius:var(--radius-sm);
  background: rgba(34,160,90,.1); color:#1c6b3f; font-weight:600; margin-top: .4rem; }
.form-status.show { display:flex; }
.form-status svg { width:22px; height:22px; flex-shrink:0; }
/* network/server failure: same box, error colours, checkmark hidden */
.form-status.is-error { background: rgba(209,8,18,.08); color: var(--red-deep); }
.form-status.is-error svg { display:none; }
[data-theme="dark"] .form-status.is-error { background: rgba(255,91,91,.12); color: #ff8080; }
.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.86rem; color: var(--text-soft); }
.consent input { width:18px; height:18px; margin-top:3px; accent-color: var(--red); flex-shrink:0; }
.form-gdpr { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.78rem; line-height:1.5; color: var(--text-faint); }
.form-gdpr a { color: var(--slate); font-weight:600; text-decoration: underline; text-underline-offset:2px; }
.form-gdpr a:hover { color: var(--red); }

/* contact detail tiles */
.contact-tiles { display:grid; gap:1rem; }
.contact-tile { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem 1.3rem; border-radius:var(--radius);
  background: var(--surface); border:1px solid var(--border); }
.contact-tile__ico { width:46px; height:46px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  background: linear-gradient(135deg, rgba(107,130,146,.16), rgba(241,145,11,.12)); }
.contact-tile__ico svg { width:23px; height:23px; color: var(--slate); }
.contact-tile b { display:block; font-size:.84rem; letter-spacing:.04em; text-transform:uppercase; color: var(--text-faint); margin-bottom:.2rem; }
.contact-tile a, .contact-tile p { color: var(--text); font-weight:500; font-size:1.02rem; }
.contact-tile a:hover { color: var(--red); }

/* ---- Contact: equal-height columns so the bottoms align (no step) ---- */
.contact-split { align-items: stretch; grid-template-columns: 1.1fr .9fr; }
.contact-split > .reveal { display: flex; flex-direction: column; }
body[data-page="contact"] .form-card { height: 100%; }
body[data-page="contact"] .contact-map { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
@media (max-width: 880px){
  .contact-split { grid-template-columns: 1fr; }   /* stack to one column on mobile */
  body[data-page="contact"] .contact-map { flex: 0 0 auto; min-height: 300px; }
}

/* ---- Interactive locations map (contact page) ---- */
.contact-map {
  position: relative; aspect-ratio: 16/11; border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg); background: #11151b; isolation: isolate;
}
.contact-map .maplibregl-map { position: absolute; inset: 0; font: inherit; }
.contact-map::after {     /* subtle inner ring to match panels */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.contact-map .map-tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 5;
  display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.92);
  background: rgba(13,14,16,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
}
.contact-map .map-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* brand markers */
.lgce-pin { position: relative; width: 18px; height: 18px; cursor: pointer; outline: none; }
.lgce-pin--big { width: 26px; height: 26px; }   /* combined NL pin (Rotterdam + Numansdorp) */
.lgce-pin__dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, #ffb347, var(--orange) 45%, var(--red));
  border: 2.5px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.55); transition: transform .25s var(--ease);
}
.lgce-pin--big .lgce-pin__dot { border-width: 3px; }
.lgce-pin__ring {
  position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(241,145,11,.65);
  animation: lgce-ping 2.6s var(--ease-out) infinite;
}
.lgce-pin:hover .lgce-pin__dot,
.lgce-pin:focus-visible .lgce-pin__dot { transform: scale(1.18); }

/* Tooltip — hidden until hover / keyboard focus / tap (is-open); supports 1–2 rows */
.lgce-label {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  display: flex; flex-direction: column; gap: .35rem; white-space: nowrap;
  padding: .5rem .7rem; border-radius: 10px; background: rgba(13,14,16,.92);
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 6;
}
.lgce-pin:hover .lgce-label,
.lgce-pin:focus-visible .lgce-label,
.lgce-pin.is-open .lgce-label { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lgce-label::after {   /* little pointer */
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(13,14,16,.92);
}
.lgce-label .le { display: flex; flex-direction: column; line-height: 1.15; }
.lgce-label .le + .le { padding-top: .35rem; border-top: 1px solid rgba(255,255,255,.14); }
.lgce-label .le b { font-size: .8rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.lgce-label .le i { font-size: .64rem; font-style: normal; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }

@keyframes lgce-ping { 0% { transform: scale(.55); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .lgce-pin__ring { animation: none; opacity: .5; } }

/* tame MapLibre chrome to match the brand */
.contact-map .maplibregl-ctrl-group { background: rgba(20,24,28,.8); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); }
.contact-map .maplibregl-ctrl-group button + button { border-top-color: rgba(255,255,255,.1); }
.contact-map .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); opacity: .85; }
.contact-map .maplibregl-ctrl-attrib { background: rgba(13,14,16,.55); color: rgba(255,255,255,.6); }
.contact-map .maplibregl-ctrl-attrib a { color: rgba(255,255,255,.75); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--black); color: #c4c9d0; padding-top: clamp(3.5rem,6vw,5rem); position: relative; overflow: hidden; isolation: isolate; }
/* signature angle device in the footer — two overlapping orange→red gradient
   bands at 112° (the -22° brand angle, vertical orientation), on the right */
.site-footer::before, .site-footer::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -45%; height: 190%; width: clamp(150px, 24vw, 360px);
  background: linear-gradient(68deg, rgba(241,145,11,0) 0%, var(--orange) 40%, var(--red) 74%, rgba(255,42,42,0) 100%);
  transform: rotate(22deg);
}
.site-footer::before { right: 8%;  opacity: .12; }
.site-footer::after  { right: -5%; opacity: .20; }
.site-footer .container { position: relative; z-index: 1; }
.site-footer a { color:#c4c9d0; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color:#fff; }
.footer-top { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
@media (max-width:900px){ .footer-top { grid-template-columns: 1fr 1fr; gap:2rem; } }
@media (max-width:520px){ .footer-top { grid-template-columns: 1fr; } }
.footer-brand img { height:92px; width:auto; margin-bottom:1.3rem; }
.footer-brand p { color:#9aa1ab; font-size:.92rem; max-width: 34ch; }
.footer-col h4 { color:#fff; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.7rem; }
.footer-col a { font-size:.95rem; }
.footer-social { display:flex; gap:.6rem; margin-top:1.4rem; }
.footer-social a { width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.footer-social a:hover { background: var(--red); border-color: var(--red); }
.footer-social svg { width:19px; height:19px; }
.footer-contact li { display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; margin-bottom:.7rem; color:#9aa1ab; }
.footer-contact svg { width:17px; height:17px; flex-shrink:0; margin-top:4px; color: var(--orange); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:1.6rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.85rem; color:#7f8893; }
.footer-bottom .links { display:flex; gap:1.4rem; flex-wrap:wrap; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: transform, opacity; }
.reveal.in-view { opacity:1; transform:none; }
.reveal[data-reveal="left"] { transform: translateX(-30px); }
.reveal[data-reveal="right"] { transform: translateX(30px); }
.reveal[data-reveal="scale"] { transform: scale(.96); }
.reveal.in-view[data-reveal] { transform:none; }
[data-stagger] > * { opacity:0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-stagger].in-view > * { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal, [data-stagger] > * { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__chip .dot { animation:none; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* progress bar */
.scroll-prog { position:fixed; top:0; left:0; height:3px; width:0; z-index:200;
  background: linear-gradient(90deg, var(--red), var(--orange)); transition: width .1s linear; }

/* utility */
.eyebrow-num { font-variant-numeric: tabular-nums; }
.hidden { display:none !important; }
.nowrap { white-space:nowrap; }

/* ============ PRODUCT CATALOG ============ */
#catalog, #mat-sec-dl { scroll-margin-top: var(--header-h); }
.prod-toolbar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-bottom:1rem;
  position:sticky; top:var(--header-h); z-index:50; background:var(--bg-alt);
  padding-block:.7rem; border-bottom:1px solid transparent;
  transition:box-shadow .25s, border-color .25s; }
.prod-toolbar.is-stuck { border-color:var(--border); box-shadow:0 10px 18px -14px rgba(13,14,16,.25); }
a.cat-card { color:inherit; text-decoration:none; }
a.cat-card:focus-visible { outline:2px solid var(--slate); outline-offset:2px; }
.prod-search { position:relative; flex:1 1 320px; max-width:460px; display:block; }
.prod-search svg { position:absolute; left:.9rem; top:50%; width:18px; height:18px;
  transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }
.prod-search input { width:100%; padding:.72rem 1rem .72rem 2.6rem; font:inherit; font-size:.95rem;
  color:var(--text); background:var(--surface); border:1.5px solid var(--border); border-radius:10px;
  box-shadow: 0 1px 8px rgba(20,24,28,.05), 0 2px 4px rgba(20,24,28,.03);
  transition:border-color .2s, box-shadow .25s; }
.prod-search input:focus { outline:none; border-color:var(--slate);
  box-shadow: 0 2px 16px rgba(229,38,32,.14), 0 1px 4px rgba(20,24,28,.07); }
.prod-groups { position:relative; display:inline-flex; flex-wrap:wrap; gap:2px;
  background:var(--surface); border:1px solid var(--border); padding:4px; border-radius:14px; }
.pg-ind { position:absolute; left:0; top:4px; width:0; height:0; border-radius:10px;
  background:var(--mist); box-shadow:0 2px 9px rgba(20,24,28,.13), 0 0 0 1px rgba(20,24,28,.05);
  pointer-events:none;
  transition:left .42s cubic-bezier(.65,.05,.36,1), top .42s cubic-bezier(.65,.05,.36,1),
             width .42s cubic-bezier(.65,.05,.36,1), height .42s cubic-bezier(.65,.05,.36,1); }
.pg-ind::after { content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2.5px;
  border-radius:2px; background:linear-gradient(90deg, var(--red), var(--orange)); }
.pg-seg { position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--text-soft); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; min-height:40px; padding:.45rem .95rem .55rem;
  border-radius:10px; transition:color .25s ease; -webkit-tap-highlight-color:transparent; }
.pg-seg:hover { color:var(--ink); }
.pg-seg[aria-pressed="true"] { color:var(--ink); }
.pg-seg:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
/* .prod-cats is the category-dropdown anchor inside the toolbar (see .catdd
   block below); the old wrapping chip row is gone. */
.prod-cats { position:relative; display:inline-flex; align-items:center; gap:.4rem; }
/* Premium category chips — elevated active state with gradient hairline */
.cat-chip {
  position:relative; display:inline-flex; align-items:center;
  padding:.34rem .8rem; border-radius:999px; font-weight:600; font-size:.8rem;
  background: var(--surface); border:1.5px solid var(--border); color:var(--text-soft);
  cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cat-chip:hover { color:var(--ink); background:var(--mist); border-color:transparent; }
.cat-chip[aria-pressed="true"] {
  color:var(--ink); background: var(--surface); border-color:transparent;
  box-shadow:0 2px 10px rgba(20,24,28,.16), 0 0 0 1px rgba(20,24,28,.06); }
.cat-chip[aria-pressed="true"]::after {
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, var(--red), var(--orange)); }
.cat-chip[hidden] { display:none; }
.cat-chip:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .cat-chip { transition:none; } }

/* ---- Category dropdown ("catdd"): trigger button + grouped panel ----
   Replaces the 20-chip wall. Desktop: popover anchored to the button; mobile:
   bottom sheet with a shadow-spread scrim. Items keep the .cat-chip class so
   the filter state machine (setGroup/setCat/pressOnly) is untouched; the
   rules below override the pill-chip look for items inside the panel. */
.catdd__btn {
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:46px; padding:.55rem 1rem;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--text-soft);
  background:var(--surface); border:1.5px solid var(--border); border-radius:10px;
  cursor:pointer; transition:border-color .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.catdd__btn:hover { border-color:var(--slate); color:var(--text); }
.catdd__btn:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
.catdd__btn svg { width:16px; height:16px; flex:0 0 auto; }
.catdd__chev { transition:transform var(--t) var(--ease); }
.prod-cats.is-open .catdd__chev { transform:rotate(180deg); }
.prod-cats.has-cat .catdd__btn { color:var(--text); border-color:var(--slate); }
.prod-cats.has-cat .catdd__label { color:var(--red-deep); font-weight:700; }
.catdd__clear {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  color:var(--text-soft); background:var(--mist);
  transition:color .2s, background .2s;
}
.catdd__clear:hover { color:var(--red); }
.catdd__clear:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
.catdd__clear[hidden] { display:none; }
.catdd__clear svg { width:14px; height:14px; }

.catdd__panel {
  /* right-anchored: the button sits at the toolbar's right end, so growing
     leftwards keeps the panel inside the container */
  position:absolute; top:calc(100% + .55rem); right:0; z-index:130;
  width:max-content; min-width:100%; max-width:min(640px, 76vw);
  display:grid; grid-template-columns:repeat(2, minmax(230px, 1fr)); gap:.15rem 1.3rem;
  padding:.9rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.99); transform-origin:top right;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.prod-cats.is-open .catdd__panel { opacity:1; visibility:visible; transform:none; }
.catdd__col { display:flex; flex-direction:column; gap:2px; min-width:0; }
.catdd__col[hidden] { display:none; }
.catdd__group {
  display:block; padding:.55rem .7rem .3rem;
  font-size:.68rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-faint);
}
/* items: full-width rows (override the pill-chip base they inherit) */
.catdd__item {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  width:100%; min-height:40px; padding:.45rem .7rem;
  background:transparent; border:0; border-radius:8px; box-shadow:none;
  font-size:.9rem; font-weight:500; color:var(--text);
  white-space:normal; text-align:left;
}
.catdd__item:hover { background:var(--mist); color:var(--text); border-color:transparent; }
.catdd__item[aria-pressed="true"] { background:transparent; box-shadow:none; color:var(--red-deep); font-weight:700; }
.catdd__item[aria-pressed="true"]::after { display:none; }   /* no chip hairline in the panel */
.catdd__item em {
  flex:0 0 auto; font-style:normal; font-size:.72rem; font-weight:700;
  color:var(--text-faint); background:var(--mist); border-radius:999px; padding:.12rem .5rem;
  font-variant-numeric:tabular-nums;
}
.catdd__item[aria-pressed="true"] em { color:var(--red-deep); background:rgba(209,8,18,.08); }
.catdd__item--all { grid-column:1 / -1; padding-bottom:.6rem; margin-bottom:.3rem;
  border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; font-weight:600; }

@media (max-width: 768px) {
  .prod-cats { width:100%; }
  .catdd__btn { flex:1; }
  .catdd__label { flex:1; text-align:left; }
  /* scrim behind the sheet (a shadow-spread scrim would be clipped by the
     section's overflow-x:clip). Clicking it lands on #prod-cats itself,
     which the JS treats as "outside" and closes the sheet. */
  .prod-cats::before {
    content:""; position:fixed; inset:0; z-index:129;
    background:rgba(13,14,16,.5);
    opacity:0; visibility:hidden;
    transition:opacity .25s var(--ease), visibility .25s;
  }
  .prod-cats.is-open::before { opacity:1; visibility:visible; }
  /* bottom sheet: fixed to the viewport, single column */
  .catdd__panel {
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:auto; min-width:0; max-width:none;
    grid-template-columns:1fr; gap:.1rem;
    max-height:72vh; overflow-y:auto; overscroll-behavior:contain;
    padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
    border:0; border-radius:18px 18px 0 0;
    transform:translateY(16px);
    box-shadow:0 -18px 50px rgba(0,0,0,.35);
  }
  .prod-cats.is-open .catdd__panel { transform:none; }
  .catdd__item { min-height:46px; }
}
@media (prefers-reduced-motion: reduce) {
  .catdd__panel, .catdd__chev { transition:none; }
}
.prod-count { font-size:.85rem; color:var(--text-soft); margin:0 0 1.2rem; font-variant-numeric:tabular-nums; }

.prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(218px, 1fr)); gap:clamp(.9rem,1.6vw,1.3rem); }
.prod-card { display:block; }
.prod-card.is-hidden { display:none; }
.prod-card__btn { display:flex; flex-direction:column; width:100%; height:100%; text-align:left; cursor:pointer;
  font:inherit; color:inherit; background:var(--surface); border:1px solid rgba(20,24,28,.07); border-radius:var(--radius);
  padding:0; overflow:hidden;
  box-shadow: 0 1px 3px rgba(20,24,28,.06), 0 4px 14px rgba(20,24,28,.07), 0 12px 28px rgba(107,130,146,.05);
  transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.prod-card__btn:hover, .prod-card__btn:focus-visible { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.prod-card__btn:focus-visible { outline:2px solid var(--slate); outline-offset:2px; }
.prod-card__img { display:block; aspect-ratio:4/3; background:#fff; border-bottom:1px solid var(--border); position:relative; }
.prod-card__img img { width:100%; height:100%; object-fit:contain; padding:.8rem; }
.prod-card__img--empty::before { content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 45%, var(--mist) 0%, #fff 70%); }
.prod-card__img--empty::after { content:"LGCE"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-weight:700; letter-spacing:.2em; color:var(--grey-light); font-size:.95rem; }
.prod-card__body { display:flex; flex-direction:column; gap:.45rem; padding:.9rem 1rem 1rem; flex:1; }
.prod-card__name { font-size:.92rem; font-weight:600; line-height:1.35; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.prod-card__meta { display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; margin-top:auto; }
.prod-card__code { font-size:.78rem; color:var(--text-soft); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.prod-card__meta .tag { font-size:.78rem; font-weight:600; color:var(--text-soft); background:var(--mist);
  border-radius:6px; padding:.16rem .45rem; }
.prod-empty { margin-top:1.4rem; color:var(--text-soft); }
.prod-more-wrap { margin-top:2.2rem; }
.prod-more-wrap[hidden] { display:none; }
#prod-more[hidden] { display:none; }   /* .btn's display would otherwise beat the hidden attribute */

/* floating back-to-filters */
.to-top { position:fixed; right:1.2rem; bottom:1.2rem; z-index:95; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--text-soft); background:var(--surface); border:1px solid var(--border);
  border-radius:50%; box-shadow:var(--shadow); transition:color .2s, border-color .2s, transform .2s; }
.to-top:hover { color:var(--red); border-color:var(--red); transform:translateY(-2px); }
.to-top svg { width:20px; height:20px; }
.to-top[hidden] { display:none; }

/* site-wide return-to-top FAB (injected by components.js, wired in main.js).
   Bottom-right; the cookie banner lives bottom-left so they never collide. */
.scroll-top { position:fixed; right:1.2rem; bottom:1.2rem; z-index:95; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--text-soft); background:var(--surface); border:1px solid var(--border);
  border-radius:50%; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, color .2s, border-color .2s; }
.scroll-top.is-visible { opacity:1; visibility:visible; transform:none; }
.scroll-top:hover { color:var(--red); border-color:var(--red); transform:translateY(-2px); }
.scroll-top:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.scroll-top svg { width:21px; height:21px; }
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transform:none; transition:opacity .2s ease, visibility .2s, color .2s, border-color .2s; }
  .scroll-top.is-visible { transform:none; }
  .scroll-top:hover { transform:none; }
}

/* detail data block baked into each card — never rendered */
.prod-card__detail { display:none; }

/* ---- product modal ---- */
.prod-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.prod-modal[hidden] { display:none; }
.prod-modal__backdrop { position:absolute; inset:0; background:rgba(13,14,16,.62); backdrop-filter:blur(4px); }
.prod-modal__panel { position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  width:min(900px, 100%); max-height:min(86vh, 720px); background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; animation:pmIn .28s var(--ease-out); }
@keyframes pmIn { from { opacity:0; transform:translateY(14px) scale(.985); } to { opacity:1; transform:none; } }
.prod-modal__close { position:absolute; top:.8rem; right:.8rem; z-index:2; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-soft);
  background:var(--surface); border:1px solid var(--border); border-radius:50%; transition:color .2s, border-color .2s; }
.prod-modal__close:hover { color:var(--red); border-color:var(--red); }
.prod-modal__close svg { width:18px; height:18px; }
.prod-modal__media { display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--border); min-height:0; }
.prod-modal__img { flex:1; min-height:240px; display:flex; align-items:center; justify-content:center; }
.prod-modal__img img { max-width:100%; max-height:100%; object-fit:contain; padding:1.4rem; }
.prod-modal__thumbs { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--border); overflow-x:auto; }
.prod-modal__thumbs button { width:56px; height:46px; flex:0 0 auto; cursor:pointer; background: var(--surface);
  border:1.5px solid var(--border); border-radius:8px; padding:2px; transition:border-color .2s; }
.prod-modal__thumbs button[aria-current="true"], .prod-modal__thumbs button:hover { border-color:var(--orange); }
.prod-modal__thumbs img { width:100%; height:100%; object-fit:contain; }
.prod-modal__info { padding:clamp(1.4rem,3vw,2.2rem); overflow-y:auto; display:flex; flex-direction:column; gap:.9rem; }
.prod-modal__info .tag { align-self:flex-start; font-size:.74rem; font-weight:600; color:var(--slate-deep);
  background:var(--mist); border-radius:6px; padding:.22rem .55rem; }
.prod-modal__info h3 { font-size:clamp(1.15rem,2vw,1.45rem); line-height:1.3; margin:0; }
.prod-modal__code { font-size:.86rem; color:var(--text-soft); margin:0; }
.prod-modal__code b { font-variant-numeric:tabular-nums; }
.prod-modal__variants { display:flex; flex-direction:column; gap:.5rem; }
.prod-modal__variants[hidden] { display:none; }
.prod-modal__vlabel { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }
.prod-modal__vchips { display:flex; flex-wrap:wrap; gap:.4rem; max-height:132px; overflow-y:auto; }
.prod-modal__vchips .chip { font-size:.78rem; padding:.3rem .6rem; }
.prod-modal__desc { font-size:.93rem; line-height:1.65; color:var(--text-soft); margin:0; white-space:pre-line; }
.prod-modal__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:auto; padding-top:.6rem; }
body.pm-open { overflow:hidden; }

@media (max-width: 720px){
  .prod-modal { padding:.6rem; }
  .prod-modal__panel { grid-template-columns:1fr; max-height:92vh; overflow-y:auto; display:block; }
  .prod-modal__media { border-right:none; border-bottom:1px solid var(--border); }
  .prod-modal__img { min-height:180px; max-height:240px; }
  .prod-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
  /* toolbar too tall to stick on small screens */
  .prod-toolbar { position:static; padding-block:0; padding-inline:.5rem; border-bottom:none; }
}

@media (pointer: coarse){
  .chip { min-height:44px; padding-block:.55rem; }
  .prod-modal__vchips .chip, .cat-chip { min-height:44px; }
}

/* ============ COOKIE CONSENT ============
   Mobile: compact corner card, categories behind "Settings".
   Desktop (>=900px): Cookiebot-style full-width bar with the four category
   switches visible on the first layer. */
.cc { position:fixed; left:1rem; bottom:1rem; z-index:300; max-width:min(440px, calc(100vw - 2rem)); }
.cc__card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px -18px rgba(13,14,16,.35); padding:1.3rem 1.4rem; position:relative; overflow:hidden; }
.cc__card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--red), var(--orange)); }
.cc__text { font-size:.92rem; color:var(--text-soft); margin:0 0 1rem; line-height:1.55; }
.cc__text a { color:var(--red-deep); }
.cc__cats { display:none; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.cc--expanded .cc__cats { display:flex; }
.cc__row { display:flex; gap:.65rem; align-items:flex-start; cursor:pointer; }
.cc__rowtext b { display:block; font-size:.88rem; }
.cc__rowtext em { font-style:normal; font-size:.8rem; color:var(--text-faint); line-height:1.4; }
/* toggle switch (the recognised consent control) */
.cc__switch { position:relative; flex:0 0 auto; width:38px; height:22px; margin-top:.1rem; }
.cc__switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.cc__switch i { display:block; width:38px; height:22px; border-radius:99px; background:var(--grey-light);
  transition:background .2s; }
.cc__switch i::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(13,14,16,.3); transition:transform .2s; }
.cc__switch input:checked + i { background:linear-gradient(90deg, var(--red), var(--orange)); }
.cc__switch input:checked + i::after { transform:translateX(16px); }
.cc__switch input:disabled + i { opacity:.55; }
.cc__switch input:disabled { cursor:not-allowed; }
.cc__switch input:focus-visible + i { outline:2px solid var(--slate); outline-offset:2px; }
.cc__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.cc__btn { flex:1 1 auto; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  padding:.55rem .9rem; border-radius:9px; background:var(--surface); color:var(--text);
  border:1.5px solid var(--border); transition:border-color .2s; }
.cc__btn:hover { border-color:var(--slate); }
.cc__btn--primary { background:linear-gradient(135deg, var(--red), var(--orange)); color:#fff; border:0;
  box-shadow:0 6px 16px -8px rgba(209,8,18,.5); }
.cc__btn--primary:hover { filter:brightness(1.06); }
/* "Allow selection" appears once the categories are visible */
.cc__sel { display:none; }
.cc--expanded .cc__sel { display:block; }
.cc--expanded .cc__expand { display:none; }
@media (max-width: 520px){ .cc { left:.6rem; right:.6rem; bottom:.6rem; max-width:none; } }

@media (min-width: 900px){
  .cc { left:1rem; right:1rem; max-width:none; }
  .cc__card { display:grid; grid-template-columns:minmax(260px,1.1fr) auto auto;
    gap:1.2rem 2rem; align-items:center; padding:1.1rem 1.6rem; }
  .cc__text { margin:0; }
  /* first layer shows the switches inline (compact: labels only) */
  .cc__cats { display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0; }
  .cc__row { align-items:center; }
  .cc__rowtext b { font-size:.85rem; white-space:nowrap; }
  .cc__rowtext em { display:none; }
  .cc--expanded .cc__rowtext em { display:block; max-width:24ch; }
  .cc--expanded .cc__cats { gap:.8rem 1.4rem; }
  .cc--expanded .cc__row { align-items:flex-start; }
  .cc__actions { flex-wrap:nowrap; }
  .cc__btn { flex:0 0 auto; white-space:nowrap; }
  .cc__expand { display:none; }
  .cc__sel { display:block; }
}

/* privacy page cookie table */
.pv-table { width:100%; border-collapse:collapse; font-size:.88rem; margin:1.2em 0 1.6em; }
.pv-table th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-faint); padding:.45rem .6rem; border-bottom:2px solid var(--border); }
.pv-table td { padding:.5rem .6rem; border-bottom:1px solid var(--border); vertical-align:top; }
.pv-table td:first-child { font-family:ui-monospace, Consolas, monospace; font-size:.8rem; white-space:nowrap; }

/* recently viewed products (catalog) — premium "segmented rail" treatment,
   matching the news category filter. Each pill is an independent shortcut
   (no persistent active state), so the white "thumb" look is applied on hover. */
.prod-recent { display:inline-flex; flex-wrap:wrap; gap:2px; align-items:center;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  padding:6px 8px; border-radius:14px; margin:2.6rem 0 0; max-width:100%; }
.prod-recent__label { font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--slate-deep); padding:0 .55rem; align-self:center; }
.prv-item { position:relative; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:600; color:var(--text-soft); white-space:nowrap; min-height:40px;
  display:inline-flex; align-items:center; padding:.5rem .85rem; border-radius:10px;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent; }
.prv-item:hover { color:var(--ink); background:var(--mist); box-shadow:0 2px 8px rgba(20,24,28,.10); }
.prv-item:hover::after { content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, var(--red), var(--orange)); }
.prv-item:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
@media (pointer:coarse){ .prv-item { min-height:44px; } }
@media (prefers-reduced-motion: reduce){ .prv-item { transition:none; } }

/* ============ NEWS ============ */
.news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:clamp(1rem,2vw,1.6rem); }
.news-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit;
  position:relative; isolation:isolate;
  box-shadow:0 1px 2px rgba(13,14,16,.04), 0 16px 36px -20px rgba(13,14,16,.18);
  transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
/* gradient keyline: short at rest, sweeps across on hover */
.news-card::before { content:""; position:absolute; top:0; left:0; height:3px; width:64px; z-index:2;
  background:linear-gradient(90deg, var(--red), var(--orange));
  transition:width .45s var(--ease-out); }
/* signature 68° band (same device as the footer), whisper-quiet in light mode */
.news-card::after { content:""; position:absolute; right:-14%; bottom:-38%; width:60%; height:95%;
  z-index:0; pointer-events:none;
  background:linear-gradient(68deg, rgba(241,145,11,0) 0%, var(--orange) 40%, var(--red) 74%, rgba(255,42,42,0) 100%);
  transform:rotate(22deg); opacity:.05;
  transition:opacity .3s, transform .45s var(--ease-out); }
.news-card:hover { transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(13,14,16,.05), 0 26px 48px -22px rgba(13,14,16,.28);
  border-color:transparent; }
.news-card:hover::before { width:100%; }
.news-card:hover::after { opacity:.11; transform:rotate(22deg) translateX(-7%); }
.news-card__img { display:block; aspect-ratio:16/9; background:var(--mist); overflow:hidden; }
.news-card__img img { width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out); }
.news-card:hover .news-card__img img { transform:scale(1.045); }
.news-card__img--empty { background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 60%, #2a1313 100%); position:relative; }
.news-card__img--empty::after { content:"LGCE"; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-weight:700; letter-spacing:.25em; color:rgba(255,255,255,.18); }
.news-card__body { display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.3rem 1.3rem; flex:1; }
.news-card__body time { font-size:.8rem; color:var(--text-soft); }
.news-card__body h3 { font-size:1.15rem; line-height:1.35; margin:0; }
.news-card__body p { font-size:.92rem; color:var(--text-soft); margin:0; }
.news-card .link-arrow { margin-top:auto; padding-top:.5rem; font-size:.9rem; }
.news-empty { color:var(--text-soft); font-size:1.05rem; }
/* news category tag (clickable filter) + whole-card stretched link */
.news-card__meta { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.news-card__link::after { content:""; position:absolute; inset:0; z-index:1; }   /* whole card navigates */
.news-tag { position:relative; z-index:3; align-self:center; border:none; cursor:pointer; white-space:nowrap;
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.22rem .56rem; border-radius:999px; background:var(--mist); color:var(--text-soft);
  transition:filter .15s, background .15s; }
.news-tag:hover { filter:brightness(.96); }
.news-tag--datacom { background:rgba(107,130,146,.14); color:var(--slate-deep); }
.news-tag--fiber   { background:rgba(241,145,11,.16); color:#9a6a00; }
.news-tag--power   { background:rgba(209,8,18,.10); color:var(--red-deep); }
/* News category filter — segmented control with a sliding thumb (scoped so it
   never touches the catalog's shared .chip). The thumb's position/size is driven
   by initNewsFilter() in main.js. */
.news-filter { position:relative; display:inline-flex; flex-wrap:wrap; gap:2px;
  background:var(--mist); padding:5px; border-radius:14px; margin-bottom:2rem; max-width:100%; }
.nf-ind { position:absolute; left:0; top:5px; width:0; height:0; border-radius:10px;
  background: var(--surface); box-shadow:0 2px 9px rgba(20,24,28,.13), 0 0 0 1px rgba(20,24,28,.05);
  pointer-events:none;
  transition:left .42s cubic-bezier(.65,.05,.36,1), top .42s cubic-bezier(.65,.05,.36,1),
             width .42s cubic-bezier(.65,.05,.36,1), height .42s cubic-bezier(.65,.05,.36,1); }
.nf-ind::after { content:""; position:absolute; left:15px; right:15px; bottom:7px; height:2.5px;
  border-radius:2px; background:linear-gradient(90deg, var(--red), var(--orange)); }
.nf-seg { position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--text-soft); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding:.55rem 1.05rem .65rem;
  border-radius:10px; transition:color .25s ease; -webkit-tap-highlight-color:transparent; }
.nf-seg__n { font-size:.76rem; font-weight:600; opacity:.5; font-variant-numeric:tabular-nums; }
.nf-seg:hover { color:var(--ink); }
.nf-seg[aria-pressed="true"] { color:var(--ink); }
.nf-seg[aria-pressed="true"] .nf-seg__n { opacity:.7; }
.nf-seg:focus-visible { outline:2px solid var(--red-deep); outline-offset:2px; }
@media (pointer:coarse){ .nf-seg { min-height:44px; } .dl-seg { min-height:44px; } .pg-seg { min-height:44px; } }
@media (prefers-reduced-motion: reduce){ .nf-ind { transition:none; } .nf-seg { transition:none; } .dl-ind { transition:none; } .dl-seg { transition:none; } .pg-ind { transition:none; } .pg-seg { transition:none; } }
.news-more-wrap { text-align:center; margin-top:2.2rem; }
.news-more { display:inline-flex; }
.news-card.is-hidden { display:none; }

/* article page */
.article-wrap { max-width:820px; }
.article-cover { margin:0 0 1.6rem; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:16/9; }
.article-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.article-meta { font-size:.9rem; color:var(--text-faint); margin-bottom:1rem; }
.article-excerpt { margin-bottom:1.6rem; }
.article-body { font-size:1.04rem; line-height:1.75; color:var(--text-soft); }
.article-body h2 { font-size:1.55rem; color:var(--text); margin:2em 0 .6em; letter-spacing:-.015em; }
.article-body h3 { font-size:1.2rem; color:var(--text); margin:1.6em 0 .5em; }
.article-body p { margin:0 0 1.1em; }
.article-body ul, .article-body ol { margin:0 0 1.1em; padding-left:1.4em; }
.article-body li { margin-bottom:.35em; }
.article-body a { color:var(--red-deep); text-decoration-thickness:1px; text-underline-offset:2px; }
.article-body blockquote { border-left:3px solid var(--orange); margin:1.6em 0; padding:.3em 0 .3em 1.2em;
  color:var(--text); font-size:1.12rem; }
.article-body img { max-width:100%; border-radius:var(--radius); margin:.4em 0; }
.article-body figure { margin:1.6em 0; }
.article-body figcaption { font-size:.85rem; color:var(--text-faint); margin-top:.5em; }
.article-machine { font-size:.82rem; color:var(--text-faint); border-top:1px solid var(--border);
  margin-top:2.4rem; padding-top:1rem; }
.article-foot { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--border); }
.article-preview-bar { position:sticky; top:0; z-index:120; background:var(--orange); color:#fff;
  text-align:center; font-weight:700; letter-spacing:.12em; font-size:.8rem; padding:.45rem; }

/* ==========================================================================
   Team showcase (About — generated from _data/team.json via the CMS)
   Staggered 3-column photo grid (left) synced by hover/focus with a name
   list (right); main.js's initTeamShowcase() toggles is-active/is-dim via
   a shared data-tm-active id on .tm2. Photos read desaturated at rest and
   turn to colour on hover/focus of either the photo or its name row.
   ========================================================================== */
.tm2 { display: flex; align-items: flex-start; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.tm2-photos { display: flex; gap: .7rem; flex: 0 0 auto; }
.tm2-col { display: flex; flex-direction: column; gap: .7rem; }
.tm2-col--2 { margin-top: clamp(28px, 6vw, 52px); }
.tm2-col--3 { margin-top: clamp(12px, 3vw, 24px); }
.tm2-photo {
  position: relative; width: 96px; height: 108px; border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; background: linear-gradient(155deg, var(--mist), #e7eaee);
  transition: opacity .4s var(--ease);
}
.tm2-photo--b { width: 112px; height: 124px; }
.tm2-photo--c { width: 104px; height: 116px; }
.tm2-photo img, .tm2-photo .tm2-initials {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.8); transition: filter .5s var(--ease);
}
.tm2-initials { display: grid; place-items: center; font-weight: 700; letter-spacing: .04em;
  font-size: 1.6rem; color: var(--slate);
  background: linear-gradient(155deg, rgba(107,130,146,.14), rgba(107,130,146,.26)); }

.tm2-rows { display: flex; flex-direction: column; gap: 1.1rem; flex: 1 1 320px; min-width: 240px; }
.tm2-row { cursor: pointer; transition: opacity .3s var(--ease); border-radius: 8px; }
.tm2-row:focus-visible { outline: 2px solid var(--slate); outline-offset: 4px; }
.tm2-row__head { display: flex; align-items: center; gap: .65rem; }
.tm2-dot { width: 14px; height: 10px; border-radius: 5px; flex: 0 0 auto;
  background: var(--border); transition: width .3s var(--ease), background .3s var(--ease); }
.tm2-row__name { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--text-faint);
  transition: color .3s var(--ease); }
.tm2-row__role { margin: .35rem 0 0 1.8rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.tm2-social {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; color: var(--text-faint); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease, background .2s ease;
}
.tm2-social svg { width: 12px; height: 12px; }
.tm2-social:hover { color: #fff; background: var(--red-deep); }

/* --- hover/focus sync: main.js toggles is-active (the hovered pair) and
   is-dim (everyone else) on both the photo and its matching name row --- */
.tm2-photo.is-dim, .tm2-row.is-dim { opacity: .55; }
.tm2-photo.is-active img, .tm2-photo.is-active .tm2-initials { filter: grayscale(0) brightness(1); }
.tm2-row.is-active .tm2-dot { width: 20px; background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%); }
.tm2-row.is-active .tm2-row__name { color: var(--text); }
.tm2-row.is-active .tm2-social { opacity: 1; transform: translateX(0); }

@media (max-width: 720px) {
  .tm2-photos { order: 2; margin-top: .4rem; }
  .tm2-photo, .tm2-photo--b, .tm2-photo--c { width: 84px; height: 94px; }
  .tm2-col--2, .tm2-col--3 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tm2-photo, .tm2-photo img, .tm2-initials, .tm2-row, .tm2-dot, .tm2-row__name, .tm2-social {
    transition: none; }
}

/* ==========================================================================
   Hiring band + vacancies (About — generated from _data/jobs.json)
   ========================================================================== */
.jobs-list { display: flex; flex-direction: column; gap: 1rem; max-width: 880px; margin: 2.6rem auto 0; }
.job-card { display: flex; gap: 1.4rem; align-items: center; justify-content: space-between;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  padding: 1.4rem 1.6rem; position: relative; overflow: hidden;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.job-card::after { content: ""; position: absolute; right: -36px; top: -14px; width: 130px; height: 52px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transform: rotate(-68deg); transform-origin: top left; opacity: .08; pointer-events: none; }
.job-card:hover { border-color: rgba(241,145,11,.45); transform: translateY(-2px); }
.job-card__main { min-width: 0; }
.job-card h3 { color: #fff; font-size: 1.18rem; margin-bottom: .3rem; }
.job-meta { display: flex; align-items: center; gap: .6rem; color: var(--orange);
  font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .55rem; }
.job-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.job-desc { color: #b9bec6; font-size: .95rem; max-width: 56ch; margin: 0; }
.job-card .job-apply { flex: 0 0 auto; }
.job-card--open { text-align: left; }
@media (max-width: 640px) { .job-card { flex-direction: column; align-items: flex-start; } }

/* application form */
.job-form { max-width: 880px; margin: 1rem auto 0; background: var(--ink-2);
  border: 1px solid rgba(241,145,11,.4); border-radius: 14px; padding: 1.6rem; }
.job-form__head { color: #fff; font-size: 1.15rem; margin-bottom: 1.1rem; display: flex; gap: .55rem; flex-wrap: wrap; }
.job-form__job { color: var(--orange); }
.jf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.jf-fld { display: flex; flex-direction: column; gap: .4rem; color: #c9ced5; font-size: .88rem; }
.jf-fld--wide { grid-column: 1 / -1; }
.jf-fld input, .jf-fld textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px; color: #fff; padding: .68rem .8rem; font: inherit; font-size: .95rem; }
.jf-fld input:focus-visible, .jf-fld textarea:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.jf-fld input[type=file] { padding: .5rem .6rem; }
.jf-fld input[type=file]::file-selector-button { background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 7px; padding: .4rem .8rem; margin-right: .8rem; cursor: pointer; font: inherit; font-size: .85rem; }
.jf-actions { display: flex; gap: .7rem; margin-top: 1.2rem; flex-wrap: wrap; }
.jf-ok { color: #7ddb8f; font-size: 1.02rem; margin: 0; }
.jf-err { color: #ffb1a8; font-size: .95rem; margin-top: 1rem; }
.jf-err a { color: var(--orange); }
@media (max-width: 640px) { .jf-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Materials page — mobile tab navigation (≤768px only)
   Desktop: invisible, all sections always visible as normal.
   Mobile:  sticky tab bar under the header; only the active panel is shown.
   ========================================================================== */
.mat-tabs { display: none; }
.mat-pillars { display: none; }

/* ---- Desktop (>768px): the tab bar becomes a sticky in-page jump nav under
   the hero — same three destinations as the phone tabs, but the sections all
   stay visible and clicking smooth-scrolls to the section. Styled as the
   site's premium segmented control (glass bar + sliding pill indicator with
   the gradient hairline, same language as .prod-groups/.pg-ind); the
   scrollspy in initMaterialTabs (main.js) moves the pill to the section in
   view. --mat-tabs-h keeps the sticky offsets below in sync. ---- */
@media (min-width: 769px) {
  body[data-page="materials"] { --mat-tabs-h: 64px; }
  .mat-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--mat-tabs-h);
    position: sticky;
    top: var(--header-h);
    z-index: 60;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 28px -22px rgba(13,14,16,.35);
  }
  [data-theme="dark"] .mat-tabs {
    background: rgba(29,32,37,.82);
  }
  .mat-tabs__rail {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--mist);
    border: 1px solid var(--border);
  }
  .mat-ind {
    position: absolute;
    left: 0; top: 4px; width: 0; height: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 2px 9px rgba(20,24,28,.13), 0 0 0 1px rgba(20,24,28,.05);
    pointer-events: none;
    transition: left .42s cubic-bezier(.65,.05,.36,1), width .42s cubic-bezier(.65,.05,.36,1);
  }
  .mat-ind::after {                     /* brand gradient hairline */
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2.5px;
    border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--orange));
  }
  .mat-tab {
    position: relative; z-index: 1;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    height: 38px;
    padding: 0 1.25rem .1rem;
    border: 0; background: transparent; border-radius: 999px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-tab:hover { color: var(--text); }
  .mat-tab svg { width: 17px; height: 17px; flex-shrink: 0; transition: color .25s ease; }
  .mat-tab.is-active { color: var(--text); }
  .mat-tab.is-active svg { color: var(--red); }
  .mat-tab:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }

  /* the products toolbar sticks below the jump nav instead of colliding with it */
  .prod-toolbar { top: calc(var(--header-h) + var(--mat-tabs-h)); }
  /* anchored sections clear header + jump nav */
  #mat-sec-cats, #catalog, #mat-sec-dl { scroll-margin-top: calc(var(--header-h) + var(--mat-tabs-h)); }
  .dl-group { scroll-margin-top: calc(var(--header-h, 76px) + var(--mat-tabs-h) + 1.2rem); }
}

@media (max-width: 768px) {
  /* Materials page: solid header is 64px; update --header-h so sticky
     .mat-tabs and .prod-toolbar position correctly without a 12px gap. */
  body[data-page="materials"] { --header-h: 64px; }

  /* ---- Tab bar ---- */
  .mat-tabs {
    display: flex;
    position: sticky;
    top: var(--header-h);
    z-index: 60;
    background: var(--bg);
    border-bottom: 2px solid var(--border);
    --tabbar-h: 54px;
  }
  /* the desktop segmented-control chrome is layout-transparent on mobile */
  .mat-tabs__rail { display: contents; }
  .mat-ind { display: none; }
  .mat-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px 7px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: .03em;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-tab svg { width: 21px; height: 21px; stroke-width: 1.8; flex-shrink: 0; }
  .mat-tab.is-active { color: var(--red); border-bottom-color: var(--red); }

  /* ---- Panels: hide all, show only active ---- */
  [data-mat-panel] { display: none !important; }
  [data-mat-panel].is-active { display: block !important; }

  /* ---- Hide the page hero on mobile (tabs provide context). The hero was
     also what cleared the fixed header: without it the tab bar's flow slot
     sits at document y=0 and its sticky top:64px displaces it downward OVER
     the first 64px of the active panel — which is why panel content used to
     start glued to (in fact, underneath) the tab bar. Pad <main> by the
     header height so the bar's flow slot equals its sticky rest position. ---- */
  body[data-page="materials"] .page-hero { display: none; }
  body[data-page="materials"] main { padding-top: var(--header-h); }

  /* ---- Category tiles: hidden on mobile, replaced by mat-pillars ---- */
  .cat-grid { display: none; }
  .mat-pillars { display: block; }

  /* ──────────────── Mobile pillar navigation ──────────────── */
  .mat-pillar-list { display: flex; flex-direction: column; gap: .55rem; }

  .mat-pillar {
    position: relative;
    display: flex; align-items: center;
    gap: .9rem;
    height: 92px;
    padding: 0 .9rem 0 1rem;
    border-radius: 14px;
    border: none; cursor: pointer;
    overflow: hidden;
    color: #fff; text-align: left; width: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-pillar--dc { background: linear-gradient(135deg,#080f16 0%,#1d3345 55%,#6B8292 100%); box-shadow: 0 4px 20px rgba(107,130,146,.32); }
  .mat-pillar--fi { background: linear-gradient(135deg,#100800 0%,#4d2800 55%,#c47c14 100%); box-shadow: 0 4px 20px rgba(196,124,20,.30); }
  .mat-pillar--pw { background: linear-gradient(135deg,#100000 0%,#4d0a04 55%,#e52620 100%); box-shadow: 0 4px 20px rgba(229,38,32,.28); }
  .mat-pillar::before {
    content: ""; position: absolute;
    width: 110px; height: 170px;
    background: rgba(255,255,255,.055);
    transform: rotate(-68deg);
    right: -24px; top: -46px;
    pointer-events: none;
  }
  .mat-pillar__ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    display: grid; place-items: center;
  }
  .mat-pillar__ico svg { width: 22px; height: 22px; }
  .mat-pillar__txt {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: .2rem;
  }
  .mat-pillar__name {
    font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mat-pillar__sub {
    font-size: .7rem; opacity: .82; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mat-pillar__arr {
    flex-shrink: 0; z-index: 1;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: grid; place-items: center;
  }
  .mat-pillar__arr svg { width: 14px; height: 14px; }

  /* Expanded group view */
  .mat-group-expanded { display: none; flex-direction: column; }
  .mat-group-expanded.is-open { display: flex; animation: pillarSlideIn .2s ease; }
  @keyframes pillarSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
  }
  .mat-group-head {
    display: flex; align-items: center;
    height: 60px; padding: 0 .9rem 0 .75rem;
    border-radius: 14px 14px 0 0;
    gap: .7rem; color: #fff;
    position: relative; overflow: hidden;
    cursor: pointer;          /* whole banner closes the group */
    -webkit-tap-highlight-color: transparent;
  }
  .mat-group-head:active { filter: brightness(.92); }
  .mat-group-head::before {
    content: ""; position: absolute;
    width: 110px; height: 170px;
    background: rgba(255,255,255,.055);
    transform: rotate(-68deg);
    right: -24px; top: -46px; pointer-events: none;
  }
  .mat-group-head--dc { background: linear-gradient(135deg,#080f16 0%,#1d3345 55%,#6B8292 100%); }
  .mat-group-head--fi { background: linear-gradient(135deg,#100800 0%,#4d2800 55%,#c47c14 100%); }
  .mat-group-head--pw { background: linear-gradient(135deg,#100000 0%,#4d0a04 55%,#e52620 100%); }
  .mat-group-head__back {
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: none; cursor: pointer;
    display: grid; place-items: center;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-group-head__back svg { width: 16px; height: 16px; }
  .mat-group-head__ico {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,255,255,.13);
    display: grid; place-items: center;
  }
  .mat-group-head__ico svg { width: 19px; height: 19px; }
  .mat-group-head__name { flex: 1; min-width: 0; font-size: .92rem; font-weight: 700; }

  /* Category tile grid inside expanded view */
  .mat-group-cats {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .4rem; padding: .45rem 0;
    background: var(--mist);
  }
  .mat-cat-tile {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .32rem; padding: .65rem .35rem .6rem;
    min-height: 68px;
    background: var(--surface); border-radius: 10px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    cursor: pointer; color: inherit; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .13s;
  }
  .mat-cat-tile:active { background: var(--mist); }
  .mat-cat-tile__ico {
    width: 32px; height: 32px; border-radius: 7px;
    display: grid; place-items: center;
  }
  .mat-cat-tile__ico svg { width: 18px; height: 18px; }
  .mat-group-expanded--dc .mat-cat-tile__ico { background: rgba(107,130,146,.1); color: #5c7282; }
  .mat-group-expanded--fi .mat-cat-tile__ico { background: rgba(196,124,20,.1); color: #c47c14; }
  .mat-group-expanded--pw .mat-cat-tile__ico { background: rgba(229,38,32,.1); color: var(--red); }
  .mat-cat-tile__lbl {
    font-size: 10.5px; font-weight: 600;
    color: var(--text); text-align: center; line-height: 1.25;
  }

  /* Bottom group switcher */
  .mat-switcher {
    display: flex; align-items: center;
    gap: .4rem; padding: .45rem 0 0;
    background: #fff; border-top: 1px solid #e5e7eb;
    min-height: 50px;
  }
  .mat-sw-pill {
    flex: 1; height: 38px;
    border: none; border-radius: 10px;
    font-size: .78rem; font-weight: 600;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-sw-pill--dc { background: linear-gradient(135deg,#1d3345,#6B8292); }
  .mat-sw-pill--fi { background: linear-gradient(135deg,#4d2800,#c47c14); }
  .mat-sw-pill--pw { background: linear-gradient(135deg,#4d0a04,#e52620); }

  /* ---- Products + Downloads: tab label provides context, hide the verbose heading ---- */
  [data-mat-panel="catalog"] .section-head,
  [data-mat-panel="dl"] .section-head { display: none; }
  /* ---- Categories: keep kicker + title, hide only the long lead paragraph ---- */
  [data-mat-panel="cats"] .section-head { padding-top: .4rem; margin-bottom: .4rem; }
  [data-mat-panel="cats"] .section-head .lead { display: none; }

  /* ---- Catalog panel: white on mobile (section--alt is gray on desktop) ---- */
  [data-mat-panel="catalog"] { background: var(--bg); padding-top: .6rem; }
  /* ---- Catalog panel: toolbar + orange "falling-from-tab-bar" gradient.
     Sticky under the tab bar so the search stays reachable while scrolling;
     the group segments collapse once stuck (the full toolbar is too tall to
     pin on a phone — only the search row stays). ---- */
  .prod-toolbar {
    position: sticky;
    top: calc(var(--header-h) + 54px);
    z-index: 55;                       /* under .mat-tabs (60), over the cards */
    row-gap: .65rem;
    padding-block: .55rem .6rem;
    /* orange drips from the tab bar border, fades out just past the search bar;
       solid var(--bg) backing so cards can't shine through the tinted sliver */
    background: linear-gradient(180deg, rgba(241,145,11,.07) 0%, rgba(241,145,11,0) 56px), var(--bg);
  }
  .prod-toolbar .prod-groups {
    max-height: 200px;
    transition: max-height .3s var(--ease), opacity .22s ease, margin-top .3s var(--ease);
    overflow: hidden;
  }
  .prod-toolbar.is-stuck .prod-groups {
    max-height: 0;
    opacity: 0;
    margin-top: -.65rem;               /* swallow the flex row-gap */
    pointer-events: none;
  }
  /* search bar: warm orange border + shadow so it reads as the gradient's anchor */
  [data-mat-panel="catalog"] .prod-search input {
    border-color: rgba(241,145,11,.28);
    box-shadow: 0 2px 14px rgba(241,145,11,.10), 0 1px 3px rgba(20,24,28,.04);
    background: linear-gradient(180deg, rgba(241,145,11,.03) 0%, #fff 100%);
  }
  [data-mat-panel="catalog"] .prod-search input:focus {
    border-color: rgba(241,145,11,.7);
    box-shadow: 0 2px 20px rgba(241,145,11,.20), 0 1px 4px rgba(20,24,28,.06);
  }
  /* tab bar: subtle orange bottom shadow that "bleeds" into the gradient below */
  .mat-tabs {
    box-shadow: 0 3px 18px rgba(241,145,11,.09);
    border-bottom-color: rgba(241,145,11,.18);
  }

  /* ---- Downloads panel: breathing room between tab bar and filter chips ---- */
  [data-mat-panel="dl"] .dl-toolbar { padding-top: .75rem; }
  [data-mat-panel="dl"] .dl-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOTAS nav item — NL/DE "split-flap" flip reveal
   --------------------------------------------------------------------------
   On hover / keyboard focus the "FOTAS" front face flips on its X-axis (like a
   split-flap board) to reveal the full term on the back face — NL
   "Glasvezelsensing", DE "Glasfasersensorik" — and the item widens to fit,
   pushing the items to its right (live). ~480ms, slow→fast→slow (--nf-ease).
   A single-word reveal can't size itself with the per-letter trick the EN
   version uses, so the two face widths are MEASURED in JS (components.js
   sizeFotasFlip, on lgce:lang-applied + fonts) and fed in as --w0 / --w1.
   EN uses the letter-unfurl in the .nav-fotas--anim block below instead.
   Mobile + reduced-motion fall back to a static label. Shared .nav a rules
   still provide the colour + underline treatment.
   ========================================================================== */
.nav a.nav-fotas { display: inline-flex; align-items: center; }

.nav a.nav-fotas--flip { --nf-ease: cubic-bezier(.76, 0, .24, 1); }
.nav-fotas--flip .nff {
  position: relative; display: inline-block; overflow: hidden;
  height: 1.5em; line-height: 1.5em;
  width: var(--w0, 3.7em);          /* JS overwrites with the measured "FOTAS" width */
  perspective: 640px;
  transition: width .44s var(--nf-ease);
}
.nav a.nav-fotas--flip:hover .nff,
.nav a.nav-fotas--flip:focus-within .nff { width: var(--w1, 13em); }

.nff-flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .48s var(--nf-ease);
}
.nav a.nav-fotas--flip:hover .nff-flip,
.nav a.nav-fotas--flip:focus-within .nff-flip { transform: rotateX(180deg); }

.nff-face {
  position: absolute; left: 0; top: 0; height: 1.5em; line-height: 1.5em;
  white-space: nowrap; backface-visibility: hidden;
}
.nff-back { transform: rotateX(180deg); }

/* mobile burger menu (≤1024px): no hover → show the full term statically
   (the back face: NL "Glasvezelsensing" / DE "Glasfasersensorik"). */
@media (max-width: 1024px) {
  .nav a.nav-fotas--flip { display: block; }
  .nav-fotas--flip .nff { width: auto; height: auto; line-height: inherit;
    overflow: visible; perspective: none; }
  .nff-flip { position: static; transform: none; transition: none; }
  .nff-face { position: static; }
  .nff-front { display: none; }
  .nff-back { transform: none; }
}

/* reduced motion: instant flip, no tween */
@media (prefers-reduced-motion: reduce) {
  .nav-fotas--flip .nff,
  .nff-flip { transition: none; }
}

/* ==========================================================================
   FOTAS nav — EN "acronym unfurls into its meaning" letter animation.
   FOTAS → Fibre Optic Sensing: the capitals F/O/S persist as the same glyphs
   and grow a lowercase tail; T and A fade + collapse. Two-phase on hover/focus
   with a slow→fast→slow ease-in-out: phase 1 (~0–0.3s) the letters loosen and
   T/A vanish; phase 2 (~0.3–0.7s) the words unfurl from F/O/S. The growing
   width naturally pushes the items to the right (live reflow).

   Pure CSS — no JS. Direction-specific delays are achieved by declaring the
   transition (incl. delay) on each DESTINATION state: the rest-state rules
   describe the CLOSE animation (tails collapse first, T/A return last); the
   :hover/:focus-within rules describe the OPEN animation (T/A vanish first,
   words unfurl last). EN markup only (.nav-fotas--anim); NL/DE use .nav-fotas__*.
   ========================================================================== */
.nav a.nav-fotas--anim { --nf-ease: cubic-bezier(.76, 0, .24, 1); white-space: nowrap; }
/* inline-FLEX with align-items:baseline keeps every glyph on one baseline (an
   inline-block with overflow:hidden would baseline-shift). The collapsible items
   need min-width:0 so max-width:0 can actually close them (flex defaults to
   min-width:auto = content width). */
.nav-fotas--anim .nf { display: inline-flex; align-items: baseline; letter-spacing: .01em;
  transition: letter-spacing .26s var(--nf-ease); }
.nav-fotas--anim .nf-u { display: inline-flex; align-items: baseline; }
.nav-fotas--anim .nf-c { flex: 0 0 auto; }

/* rest state == the CLOSE transitions */
.nav-fotas--anim .nf-t {                 /* lowercase tails: collapsed, collapse FIRST on close */
  display: inline-block; min-width: 0; overflow: hidden; white-space: nowrap;
  max-width: 0; opacity: 0;
  transition: max-width .27s var(--nf-ease) 0s, opacity .18s var(--nf-ease) 0s;
}
.nav-fotas--anim .nf-sp {                /* inter-word spaces */
  flex: 0 0 auto; display: inline-block; width: 0;
  transition: width .27s var(--nf-ease) 0s;
}
.nav-fotas--anim .nf-drop {              /* T and A: visible, RETURN LAST on close (delayed) */
  flex: 0 0 auto; min-width: 0; overflow: hidden; max-width: 1.4ch; opacity: 1;
  transition: max-width .2s var(--nf-ease) .2s, opacity .18s var(--nf-ease) .22s;
}

/* OPEN state (hover / keyboard focus) == the OPEN transitions */
.nav a.nav-fotas--anim:hover .nf,
.nav a.nav-fotas--anim:focus-within .nf { letter-spacing: .05em; }   /* phase 1: loosen/spread */

.nav a.nav-fotas--anim:hover .nf-drop,
.nav a.nav-fotas--anim:focus-within .nf-drop {                        /* phase 1: T/A vanish FIRST */
  max-width: 0; opacity: 0;
  transition: max-width .2s var(--nf-ease) 0s, opacity .16s var(--nf-ease) 0s;
}
.nav a.nav-fotas--anim:hover .nf-t,
.nav a.nav-fotas--anim:focus-within .nf-t {                           /* phase 2: words unfurl */
  max-width: var(--tw); opacity: 1;
  transition: max-width .28s var(--nf-ease) .18s, opacity .22s var(--nf-ease) .2s;
}
.nav a.nav-fotas--anim:hover .nf-sp,
.nav a.nav-fotas--anim:focus-within .nf-sp {                          /* phase 2: spaces open */
  width: .34em;
  transition: width .28s var(--nf-ease) .18s;
}

/* reduced motion: instant swap, no tweening */
@media (prefers-reduced-motion: reduce) {
  .nav-fotas--anim .nf,
  .nav-fotas--anim .nf-t,
  .nav-fotas--anim .nf-sp,
  .nav-fotas--anim .nf-drop { transition: none; }
}

/* mobile burger menu (≤1024px): no hover → show the full term statically,
   "Fibre Optic Sensing" (tails + spaces shown, T/A hidden). */
@media (max-width: 1024px) {
  .nav a.nav-fotas--anim { display: block; white-space: normal; }
  .nav-fotas--anim .nf-t { max-width: none; opacity: 1; }
  .nav-fotas--anim .nf-sp { width: .34em; }
  .nav-fotas--anim .nf-drop { max-width: 0; opacity: 0; }
  .nav-fotas--anim .nf { letter-spacing: .01em; }
}

/* ==========================================================================
   FOTAS card — homepage "What we do" deck, 4th card (cross-discipline banner)
   --------------------------------------------------------------------------
   FOTAS (Fibre Optic Sensing) spans data + telecom + power, so it is presented
   as a full-width banner BELOW the three pillars rather than as a 4th column.

   • Full width on desktop : the deck is `repeat(3,1fr)`; `grid-column:1/-1`
     stretches the 4th .pcard across all three tracks on its own row.
   • Stacked on mobile     : at ≤900px the deck collapses to a single column
     (existing `.pillar-grid` rule), where `1/-1` resolves to `1/2` — i.e. one
     column — so the card simply stacks as the 4th item. No special handling.
   • The deck's stacked→fan-out transforms only target .pcard:nth-child(1..3),
     so this 4th card keeps the identity `.pcard` transform and is unaffected.
   • Reveal lives on the inner <article>, not the .pcard, so the scroll-reveal
     transform never fights the .pcard base transform.

   Gradient = brand slate → orange → red (diagonal), expressing FOTAS cutting
   ACROSS the three segments. Tokens: --slate-deep, --slate, --orange, --red,
   --red-deep. A dark veil sits over the gradient so white text/icons clear
   WCAG AA (≥4.5:1) even over the bright orange mid-stop.
   ========================================================================== */
.pcard--fotas {
  grid-column: 1 / -1;          /* span the whole deck on desktop; 1/2 on mobile */
  margin-top: var(--pgap, clamp(1rem, 2vw, 1.6rem));
}

/* NOTE: scoped under .pillar-deck (0,2,0) to override `.pillar-deck .pillar`
   (which sets a white card background) — a bare `.pillar--fotas` loses the cascade. */
.pillar-deck .pillar--fotas {
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.6rem);
  /* slate → orange → red, diagonal. Deeper burnt-orange mid-stop (instead of the
     bright --orange) so the warm band stays legible under white text without a
     heavy flat veil washing the gradient to grey. */
  background:
    linear-gradient(110deg, var(--slate-deep) 0%, var(--slate) 34%, #c2610a 64%, var(--red-deep) 100%);
  box-shadow: 0 26px 56px -22px rgba(209, 8, 18, .42), var(--shadow-lg);
}
/* LEFT-anchored scrim: darkens only the left text zone for contrast, then fades
   to transparent before the orange/red half so the cross-section gradient stays
   vivid (the right side carries only the self-contrasting pill tags). */
.pillar--fotas__veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.34) 40%, rgba(11,12,14,0) 72%);
}
/* keep the brand wedge ::before from re-tinting on top of our gradient */
.pillar--fotas::before { display: none; }

.pillar--fotas__body {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
}
.pillar--fotas__text { flex: 1 1 auto; min-width: 0; max-width: 52ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .40); /* inherited insurance over the gradient */ }

.pillar--fotas__head {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .85rem;
}
.pillar-deck .pillar--fotas__icon {
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
}
.pillar--fotas__icon svg { width: 32px; height: 32px; }
.pillar--fotas__titles { display: flex; flex-direction: column; gap: .15rem; }
.pillar--fotas h3 { margin: 0; color: #fff; line-height: 1.05; }
.pillar--fotas__tag {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .92);
}
.pillar--fotas p {
  margin: 0 0 1.2rem; color: rgba(255, 255, 255, .94);
  font-size: var(--fs-body); line-height: 1.6;
}

/* white link-arrow on the gradient (override the default red-deep) */
.pillar--fotas .link-arrow { color: #fff; }
.pillar--fotas .link-arrow:hover { color: #fff; }
.pillar--fotas .link-arrow:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 5px;
}

/* right-hand segment tags — the three disciplines FOTAS spans */
.pillar--fotas__tags {
  flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0;
  list-style: none; justify-content: flex-end;
}
.pillar--fotas__tags li {
  padding: .5rem .95rem; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .30);
}

/* hover: gentle lift, consistent with sibling pillars (transform/box-shadow
   only — no layout shift) */
.pillar-deck .pillar--fotas:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(209, 8, 18, .52), var(--shadow-lg);
}

/* ---- Tablet / mobile: stack text over tags; tags wrap, never scroll ---- */
@media (max-width: 760px) {
  .pillar--fotas__body { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .pillar--fotas__tags { flex-wrap: wrap; }
  /* stacked layout: text spans the full gradient width, so darken more evenly
     (still tinted, so slate→orange→red remains visible through the scrim) */
  .pillar--fotas__veil {
    background: linear-gradient(100deg, rgba(11,12,14,.56) 0%, rgba(11,12,14,.42) 55%, rgba(11,12,14,.30) 100%);
  }
}
@media (max-width: 900px) {
  /* deck is single-column here; remove the extra desktop top gap (grid gap
     already separates the stacked cards) */
  .pcard--fotas { margin-top: 0; }
}

/* reduced motion: no hover lift translate (still allow colour/shadow) */
@media (prefers-reduced-motion: reduce) {
  .pillar-deck .pillar--fotas:hover { transform: none; }
}

/* ==========================================================================
   Case studies / client testimonials
   Cards are shared by the homepage social-proof band (.case-band, featured
   items) and the dedicated Cases page grid (.case-grid, all items). Rendered
   from _data/cases.json by _ml_build.py. A card with a quote is a testimonial
   (.case-card--quote); one without is a short project reference (.case-card--ref).
   ========================================================================== */
.case-band,
.case-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 980px) {
  .case-band, .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .case-band, .case-grid { grid-template-columns: 1fr; }
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.7rem 1.55rem 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6dade;
}
.case-card::before {            /* signature top-left accent */
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px; width: 56px;
  background: linear-gradient(90deg, var(--orange), var(--red));
}
.case-card__sector {
  align-self: flex-start;
  font-size: .71rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-deep);
  background: #eef1f3;
  border-radius: 999px;
  padding: .34rem .72rem;
}
.case-card__mark {
  width: 30px; height: 30px;
  color: var(--orange);
}
.case-card__quote { margin: 0; }
.case-card__quote p {
  margin: .45rem 0 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}
.case-card__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.case-card__summary {
  margin: 0;
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.55;
}
.case-card__cite {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: auto;
  padding-top: .3rem;
}
.case-card__avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, var(--slate), var(--slate-deep));
}
.case-card__who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.case-card__name { font-weight: 700; font-size: .95rem; }
.case-card__role { font-size: .82rem; color: #6b7178; }
.case-card__client {
  font-size: .8rem;
  font-weight: 600;
  color: #6b7178;
}
.case-card--quote .case-card__client {
  padding-top: .9rem;
  margin-top: .2rem;
  border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .case-card:hover { transform: none; }
}

/* ==========================================================================
   Power → Applications (image tiles) + Offshore project experience (refs)
   Applications: a grid of photo tiles — photo behind a legibility veil with a
   label + caption and the brand -22° orange wedge. Photos drop into
   assets/img/applications/ (see that folder's README); until then each tile
   shows the slate-gradient fallback (no broken layout). Offshore: short
   reference cards that reuse the .case-card surface/elevation language.
   ========================================================================== */
.app-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 920px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .app-grid { grid-template-columns: 1fr; } }

.app-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2;
  background: radial-gradient(120% 120% at 30% 20%, #20303d, #12161b 70%);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.app-tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .5s ease;
}
.app-tile::after {                  /* legibility veil for the caption */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,14,16,0) 30%, rgba(13,14,16,.82) 100%);
}
.app-tile__angle {                  /* signature -22° orange wedge */
  position: absolute; left: -18%; bottom: -28%; width: 78%; height: 70%; z-index: 2;
  background: linear-gradient(var(--angle), var(--red), var(--orange));
  opacity: .22; transform: rotate(var(--angle)); filter: blur(3px); pointer-events: none;
}
.app-tile__body { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 3; }
.app-tile__title { margin: 0; font-size: 1.12rem; line-height: 1.2; color: #fff; font-weight: 700; }
.app-tile__cap   { margin: .3rem 0 0; font-size: .86rem; line-height: 1.45; color: rgba(255,255,255,.82); }
.app-tile:hover .app-tile__img { transform: scale(1.05); }
.app-tile__icon {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}
.app-tile__icon svg { width: 23px; height: 23px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .app-tile__img, .app-tile:hover .app-tile__img { transition: none; transform: none; }
}

/* ==========================================================================
   Application detail expansion ("appx")
   Clicking an app tile morphs it into a centred detail dialog: the panel is
   position:fixed, starts at the tile's rect and transitions top/left/width/
   height to the target rect (App Store card style). The panel is a single
   fixed element, so per-frame layout cost stays trivial; a transform-scale
   FLIP would distort the cover image, which is why box properties are
   animated here as the deliberate exception to the transform-only rule.
   Markup is generated by _ml_build.py from _data/applications.json; the
   interaction lives in main.js (initAppExpand).
   ========================================================================== */
.app-tile--x { cursor: pointer; }
.app-tile__more {
  position: absolute; right: .9rem; bottom: .95rem; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.app-tile__more svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.app-tile--x:hover .app-tile__more { background: rgba(255,255,255,.28); }
.app-tile--x:hover .app-tile__more svg { transform: rotate(90deg); }
.app-tile__more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the tile is hidden while its expanded panel is on screen (it "became" the panel) */
.app-tile--x.is-lifted { visibility: hidden; }

.appx-backdrop {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(13,14,16,.55);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  backdrop-filter: blur(8px) saturate(1.05);
  opacity: 0; transition: opacity .26s var(--ease);
}
.appx-backdrop.is-on { opacity: 1; }
.appx-backdrop[hidden] { display: none; }

.appx {
  position: fixed; z-index: 300; overflow: hidden;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -18px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.25);
  --appx-ease: cubic-bezier(.32,.72,0,1);   /* iOS sheet curve: fast start, long settle */
}
.appx[hidden] { display: none; }
.appx.is-anim {
  transition: top .34s var(--appx-ease), left .34s var(--appx-ease),
              width .34s var(--appx-ease), height .34s var(--appx-ease),
              border-radius .34s var(--appx-ease);
  will-change: top, left, width, height;
}
.appx__scroll { height: 100%; overflow: hidden; overscroll-behavior: contain; }
.appx.is-settled .appx__scroll { overflow-y: auto; }

.appx__close {
  position: absolute; top: .85rem; right: .85rem; z-index: 6;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(13,14,16,.45);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.appx__close:hover { background: rgba(13,14,16,.7); transform: rotate(90deg); }
.appx__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.appx__close svg { width: 17px; height: 17px; }

/* hero: mirrors the tile's visual language so the morph reads as the same card */
.appx__hero {
  position: relative; height: min(300px, 40vh); isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 120% at 30% 20%, #20303d, #12161b 70%);
}
.appx__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.appx__hero::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,14,16,0) 30%, rgba(13,14,16,.82) 100%);
}
.appx__angle {
  position: absolute; left: -18%; bottom: -28%; width: 78%; height: 70%; z-index: 2;
  background: linear-gradient(var(--angle), var(--red), var(--orange));
  opacity: .22; transform: rotate(var(--angle)); filter: blur(3px); pointer-events: none;
}
.appx__hero-body { position: absolute; left: clamp(1.25rem, 3vw, 2rem); right: 4.5rem; bottom: 1.2rem; z-index: 3; }
.appx__kicker {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange); margin-bottom: .35rem;
}
.appx__title { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); line-height: 1.15; color: #fff; font-weight: 700; }

/* content: children stagger in once the morph settles — kept brisk (sub-200ms
   total spread) so it reads as a reveal, not a queue of separate loads */
.appx__content { padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3.4vw, 2.4rem) clamp(1.6rem, 3vw, 2.2rem); }
.appx__content > * {
  opacity: 0; transform: translateY(8px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.appx.is-settled .appx__content > * { opacity: 1; transform: none; }
.appx.is-settled .appx__content > :nth-child(2) { transition-delay: .02s; }
.appx.is-settled .appx__content > :nth-child(3) { transition-delay: .04s; }
.appx.is-settled .appx__content > :nth-child(4) { transition-delay: .06s; }
.appx.is-settled .appx__content > :nth-child(5) { transition-delay: .08s; }
.appx.is-settled .appx__content > :nth-child(6) { transition-delay: .1s; }
.appx.is-settled .appx__content > :nth-child(7) { transition-delay: .12s; }
.appx.is-settled .appx__content > :nth-child(n+8) { transition-delay: .14s; }
.appx.is-closing .appx__content > * { opacity: 0; transform: none; transition: opacity .12s ease; }

.appx__p { margin: 0 0 1em; font-size: .96rem; line-height: 1.7; color: var(--text-soft); }
.appx__p:first-child { font-size: 1.06rem; color: var(--text); }

.appx__h {
  display: flex; align-items: center; gap: .55rem;
  margin: 1.7rem 0 .85rem; font-size: .76rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
.appx__h::before {
  content: ""; width: 18px; height: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--red), var(--orange));
}

.appx__prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.appx__prod {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--surface);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.appx__prod:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--slate); }
.appx__prod:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.appx__prod-img { display: block; height: 78px; background: #fff; border-bottom: 1px solid var(--border); }
.appx__prod-img img { width: 100%; height: 100%; object-fit: contain; padding: .45rem; }
.appx__prod-name {
  padding: .5rem .6rem .1rem; font-size: .78rem; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.appx__prod-code { padding: .15rem .6rem .55rem; font-size: .68rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .appx__prod-img { background: var(--bg-alt); }
.appx__browse { margin: .9rem 0 0; font-size: .92rem; }

.appx__cases { display: flex; flex-direction: column; gap: .55rem; }
.appx__case {
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .95rem; border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.appx__case:hover { transform: translateY(-1px); border-color: var(--slate); box-shadow: var(--shadow-sm); }
.appx__case:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.appx__case-tag {
  flex: 0 0 auto; font-size: .7rem; font-weight: 600; color: var(--text-soft);
  background: var(--mist); border-radius: 6px; padding: .22rem .5rem; white-space: nowrap;
}
.appx__case-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.appx__case-txt b { font-size: .9rem; line-height: 1.3; }
.appx__case-txt span { font-size: .8rem; color: var(--text-soft); }
.appx__case > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-faint); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.appx__case:hover > svg { transform: translateX(3px); color: var(--red); }
.appx__allcases { margin: .8rem 0 0; font-size: .9rem; }

.appx__points { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.appx__points li { position: relative; padding-left: 1.5rem; font-size: .92rem; line-height: 1.55; color: var(--text-soft); }
.appx__points li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--red));
}

.appx__cta { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* body lock while a panel is open */
body.appx-open { overflow: hidden; }

@media (max-width: 640px) {
  .appx__hero { height: min(240px, 34vh); }
  .appx__prods { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .appx.is-anim { transition: none; }
  .appx__content > *, .appx.is-settled .appx__content > * { opacity: 1; transform: none; transition: none; }
  .appx-backdrop { transition: opacity .15s linear; }
  .app-tile__more svg, .app-tile--x:hover .app-tile__more svg { transition: none; transform: none; }
}

.off-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) { .off-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .off-grid { grid-template-columns: 1fr; } }

.off-card {
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.45rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.off-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d6dade; }
.off-card::before {                 /* top-left orange accent (matches .case-card) */
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 56px;
  background: linear-gradient(90deg, var(--orange), var(--red));
}
.off-card__spec {
  align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--slate-deep); background: #eef1f3;
  border-radius: 999px; padding: .32rem .7rem;
  font-variant-numeric: tabular-nums;
}
.off-card__name { margin: .1rem 0 0; font-size: 1.12rem; line-height: 1.22; }
.off-card__meta { margin: 0; font-size: .85rem; color: var(--text-soft); font-weight: 600; }
.off-card__scope { margin: auto 0 0; font-size: .9rem; line-height: 1.5; color: var(--text-soft); padding-top: .4rem; }
@media (prefers-reduced-motion: reduce) { .off-card:hover { transform: none; } }

/* ==========================================================================
   Client stories — dark spotlight (homepage social-proof band)
   One testimonial shown at a time on a slate->ink panel with the brand -22°
   wedge; a client selector (pills) switches it, auto-rotating via
   initCaseSpotlight in main.js. Panels stack in one grid cell so the stage
   height is the tallest quote (no layout jump on switch). The dedicated Cases
   page keeps the .case-card grid above.
   ========================================================================== */
.case-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #1d2935 0%, #15171b 62%);
  color: #fff;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: var(--shadow-lg);
}
.case-spotlight__veil {            /* signature -22° slate->orange wedge */
  position: absolute;
  top: -30%; right: -12%;
  width: 55%; height: 170%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(107,130,146,.30), rgba(241,145,11,.10));
  transform: rotate(-22deg);
}
.case-spotlight__inner { position: relative; z-index: 1; }
.case-spotlight__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: .5;
  color: var(--orange);
  margin-bottom: .5rem;
}
.case-spotlight__stage { display: grid; }
.case-quote {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.case-quote.is-active { opacity: 1; visibility: visible; transform: none; }
.case-quote__text {
  margin: 0 0 1.6rem;
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.38;
  font-weight: 300;
  letter-spacing: -.01em;
  color: #fff;
  max-width: 32ch;
}
.case-quote__cite { display: flex; align-items: center; gap: .8rem; }
.case-quote__avatar {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, var(--slate), var(--slate-deep));
}
.case-quote__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.case-quote__who b { font-size: 1rem; font-weight: 700; color: #fff; }
.case-quote__who span { font-size: .86rem; color: #9fb0bd; }
.case-spotlight__foot {
  display: flex;
  align-items: center;
  gap: .8rem 1.2rem;
  flex-wrap: wrap;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.case-spotlight__pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.case-pill {                       /* liquid-glass, matching .btn--glass */
  font: inherit; font-size: .85rem; font-weight: 600;
  color: rgba(255,255,255,.80);
  background: rgba(255,255,255,.05);
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.05rem;
  min-height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  backdrop-filter: blur(8px) url(#lgce-liquid-glass) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 1.8px 3px 0 -2px rgba(255,255,255,.90),
    inset -2px -2px 0 -2px rgba(255,255,255,.80),
    inset -3px -8px 1px -6px rgba(255,255,255,.60),
    inset -0.3px -1px 4px 0 rgba(0,0,0,.12),
    inset -1.5px 2.5px 0 -2px rgba(0,0,0,.20),
    inset 0 3px 4px -2px rgba(0,0,0,.20),
    inset 2px -6.5px 1px -4px rgba(0,0,0,.10),
    0 1px 5px 0 rgba(0,0,0,.10),
    0 6px 16px 0 rgba(0,0,0,.08);
  transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.case-pill:hover { color:#fff; background: rgba(255,255,255,.10); transform: translateY(-1px); }
.case-pill.is-active {             /* selected: hero gradient (red -> orange), no glass edge */
  color:#fff;
  background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%);
  text-shadow: none;
  box-shadow: 0 6px 16px rgba(209,8,18,.28);
}
.case-pill.is-active:hover { background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%); }
.case-pill:active { transform: scale(.96); }
.case-pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.case-spotlight__all {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--orange); font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.case-spotlight__all svg { width: 18px; height: 18px; transition: transform .25s ease; }
.case-spotlight__all:hover { color: #ffa733; }
.case-spotlight__all:hover svg { transform: translateX(4px); }
@media (max-width: 560px) {
  .case-spotlight__all { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .case-quote { transition: opacity .2s ease; transform: none; }
}

/* ==========================================================================
   Cases page — featured case (dark), discipline filter, elevated grid
   The page leads with one featured testimonial in the spotlight language, then
   a discipline filter over the remaining cards. Rendered by render_cases_grid.
   ========================================================================== */
.case-feature {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, #1d2935 0%, #15171b 62%);
  color: #fff;
  padding: clamp(1.8rem, 4vw, 3.4rem);
  box-shadow: var(--shadow-lg);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.case-feature__veil {
  position: absolute; top: -30%; right: -12%; width: 55%; height: 170%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(107,130,146,.30), rgba(241,145,11,.10));
  transform: rotate(-22deg);
}
.case-feature__inner { position: relative; z-index: 1; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.case-feature__top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.case-feature__eyebrow {
  margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.case-feature__tag {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: #d7dde2;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; padding: .3rem .75rem;
}
.case-feature__mark {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .5; color: var(--orange); margin: .35rem 0 .2rem;
}
.case-feature__quote {
  margin: 0 0 1.7rem;
  font-size: clamp(1.35rem, 2.7vw, 2.15rem); line-height: 1.34; font-weight: 300;
  letter-spacing: -.01em; color: #fff; max-width: 34ch;
}
.case-feature__cite { display: flex; align-items: center; gap: .85rem; }
.case-feature__avatar {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, var(--slate), var(--slate-deep));
}
.case-feature__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.case-feature__who b { font-size: 1.05rem; font-weight: 700; color: #fff; }
.case-feature__who span { font-size: .9rem; color: #9fb0bd; }

.case-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.case-fpill {
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .55rem 1.1rem; min-height: 44px; min-width: 44px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.case-fpill:hover { color: var(--ink); border-color: #c8ccd1; }
.case-fpill.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%);
  box-shadow: 0 6px 16px rgba(209,8,18,.22);
}
.case-fpill:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.case-card.is-hidden { display: none; }

/* elevated card: the brand accent bar sweeps across the top on hover */
.case-card::before { transition: width .35s cubic-bezier(.65,.05,.36,1); }
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case-card:hover::before { width: 100%; }
.case-card__quote p { font-size: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  .case-card:hover { transform: none; }
  .case-card:hover::before { width: 56px; }
}

/* ==========================================================================
   Knowledge Center (knowledge.html hub + knowledge/ spokes, docs ch. 19) —
   dormant cluster while KC_LIVE is False in _ml_build.py. Token-driven
   throughout; the FAQ items reuse the existing .faq-item component, so only
   KC-specific chrome lives here (toolbar, pills, tool cards, glossary list,
   hub search/results/cards, list headings).
   ========================================================================== */
.kc-preview {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #ffb020; background: rgba(241,145,11,.14); border: 1px solid rgba(241,145,11,.4);
  border-radius: 999px; padding: .35rem .85rem;
}
.kc-preview::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); }

.kc-jump { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.kc-jump a {
  font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 999px; padding: .5rem 1.15rem; min-height: 40px;
  display: inline-flex; align-items: center; backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.kc-jump a:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.14);
  transform: translateY(-2px); }

.kc-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.kc-search { position: relative; flex: 1 1 260px; max-width: 460px; }
.kc-search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; }
.kc-search input {
  width: 100%; font: inherit; font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px;
  padding: .7rem 1.1rem .7rem 2.7rem; min-height: 48px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kc-search input:focus-visible { outline: none; border-color: var(--slate);
  box-shadow: 0 0 0 3px rgba(107,130,146,.18); }
.kc-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.kc-pill {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px;
  padding: .5rem 1.05rem; min-height: 44px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kc-pill:hover { color: var(--text); border-color: var(--slate); }
.kc-pill[aria-pressed="true"] {
  color: #fff; border-color: transparent;
  /* darker blend than the site's CTA gradient: white 14px/600 label needs
     >=4.5:1 across the whole surface (the red->orange CTA blend dips to ~2.8) */
  background: linear-gradient(100deg, var(--red-deep) 0%, #c23a00 120%);
  box-shadow: 0 6px 16px rgba(209,8,18,.22);
}
.kc-pill:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
/* dark bg #1d2025 leaves the red ring at ~2.9:1; orange clears 3:1 easily */
[data-theme="dark"] .kc-pill:focus-visible { outline-color: var(--orange); }
.kc-none { color: var(--text-soft); font-size: .95rem; padding: 1rem 0; }
.kc-none a { font-weight: 600; color: var(--red-deep); text-decoration: underline;
  text-underline-offset: 3px; }
[data-theme="dark"] .kc-none a { color: var(--orange); }

.kc-tools { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.kc-tool {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.kc-tool h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.kc-tool__desc { font-size: .9rem; line-height: 1.55; color: var(--text-soft);
  margin-bottom: 1.2rem; }
.kc-tool__form label { display: block; font-size: .8rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: .9rem; }
.kc-tool__form input, .kc-tool__form select {
  display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: .93rem;
  color: var(--text); background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 9px; padding: .55rem .7rem; min-height: 44px;
}
.kc-tool__form input:focus-visible, .kc-tool__form select:focus-visible {
  outline: 2px solid var(--slate); outline-offset: 1px; }
.kc-tool__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.kc-tool__result {
  margin: 1.1rem 0 .6rem; padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: var(--mist); font-size: .95rem; color: var(--text-soft);
}
.kc-tool__result output { font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
/* the normative fine print must stay AA-readable: --text-faint lands at
   ~3.2:1 (light) / ~3.0:1 (dark) on the card surface, --text-soft passes both */
.kc-tool__note { font-size: .78rem; line-height: 1.5; color: var(--text-soft); margin: 0; }
.kc-tool--soon { display: flex; flex-direction: column; gap: .5rem; }
.kc-soon {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-deep);
  background: rgba(107,130,146,.12); border: 1px solid rgba(107,130,146,.35);
  border-radius: 999px; padding: .3rem .75rem; margin-bottom: .4rem;
}
/* --slate on the dark badge wash is ~3.0:1 at 11.5px; --text-soft passes AA */
[data-theme="dark"] .kc-soon { color: var(--text-soft); }

/* ---- tools workbench: rail (tablist) + one focused tool panel ---- */
.kc-wb { display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(1rem, 2.4vw, 1.8rem); align-items: start; }
.kc-wb__glab { display: block; font-size: .64rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
  margin: .9rem .5rem 0; }
.kc-wb__glab:first-of-type { margin-top: .1rem; }
.kc-wb__nav { display: flex; flex-direction: column; gap: .45rem;
  position: sticky; top: calc(var(--header-h) + 16px); }
.kc-wb__tab {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  padding: .8rem .95rem; border-radius: 12px; border: 1px solid transparent;
  color: var(--text-soft); cursor: pointer; min-height: 44px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.kc-wb__tab svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--slate); }
.kc-wb__tab-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kc-wb__tab-txt b { font-size: .92rem; font-weight: 700; color: var(--text);
  line-height: 1.25; }
.kc-wb__tab-txt small { font-size: .74rem; color: var(--text-soft); line-height: 1.3; }
.kc-wb__tab:hover { background: var(--mist); }
.kc-wb__tab[aria-selected="true"] {
  background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm);
}
.kc-wb__tab[aria-selected="true"] svg { color: var(--orange); }
.kc-wb__tab[aria-selected="true"] .kc-wb__tab-txt b { color: var(--text); }
.kc-wb__stage > .kc-tool { animation: kcwbIn .28s var(--ease-out); }
@keyframes kcwbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kc-wb__stage > .kc-tool { animation: none; } }
/* desktop: the switch wrapper dissolves so nav stays the sticky rail column;
   the mobile picker button is hidden */
.kc-wb__switch { display: contents; }
.kc-wb__picker { display: none; }

@media (max-width: 880px) {
  .kc-wb { grid-template-columns: 1fr; }
  /* mobile: a full-width tool picker that opens the whole list as a dropdown,
     so it is obvious there are more than the couple of visible tools. Sticky
     just under the header keeps it reachable while scrolling the active tool. */
  .kc-wb__switch { display: block; position: sticky; top: calc(var(--header-h) + 8px); z-index: 30; }
  .kc-wb__picker { display: flex; align-items: center; gap: .8rem; width: 100%;
    padding: .7rem .85rem; border-radius: 14px; border: 1px solid var(--border);
    background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
    text-align: left; min-height: 56px; }
  .kc-wb__picker-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; background: rgba(241,145,11,.12); color: var(--orange); }
  .kc-wb__picker-ico svg { width: 22px; height: 22px; }
  .kc-wb__picker-txt { display: flex; flex-direction: column; gap: .05rem; min-width: 0; margin-right: auto; }
  .kc-wb__picker-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-faint); }
  .kc-wb__picker-name { font-size: .98rem; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kc-wb__picker-count { flex: 0 0 auto; font-size: .74rem; font-weight: 800;
    font-variant-numeric: tabular-nums; color: var(--orange); background: rgba(241,145,11,.14);
    padding: .2rem .5rem; border-radius: 999px; }
  .kc-wb__picker-chev { flex: 0 0 auto; width: 20px; height: 20px; color: var(--text-soft);
    transition: transform var(--t) var(--ease); }
  .kc-wb__switch.is-open .kc-wb__picker-chev { transform: rotate(180deg); }
  .kc-wb__switch.is-open .kc-wb__picker { border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(241,145,11,.14); }

  .kc-wb__nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
    display: none; flex-direction: column; gap: .25rem; max-height: 68vh; overflow-y: auto;
    padding: .4rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-lg); }
  .kc-wb__switch.is-open .kc-wb__nav { display: flex; animation: kcwbDrop .2s var(--ease-out); }
  .kc-wb__tab { width: 100%; }
  .kc-wb__tab-txt small { display: block; }
  @keyframes kcwbDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .kc-wb__switch.is-open .kc-wb__nav { animation: none; }
}

/* results: verdict chip + value tiles + composition bar + duct drawing.
   NB: "kc-res" is taken (hub search result rows) - calculator output
   blocks are "kc-out". */
.kc-out { margin: 1.1rem 0 .9rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--mist); }
.kc-verdict { display: flex; align-items: center; gap: .55rem; margin: 0 0 .85rem;
  font-size: .92rem; font-weight: 700; }
.kc-verdict:empty { display: none; }

/* calculator -> enquiry handoff (docs ch. 19, KC-ROADMAP B1) */
.kc-enq { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--border); }
.kc-enq__btn { display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 650; font-size: .92rem; text-decoration: none; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px; padding: .5rem 1rem;
  background: var(--paper); transition: border-color .15s, color .15s; }
.kc-enq__btn::after { content: "\2192"; font-weight: 400; }
.kc-enq__btn:hover { border-color: var(--red); color: var(--red-deep, var(--red)); }
.kc-enq__note { font-size: .8rem; color: var(--text-faint); max-width: 34ch; }
.kc-enq__copy { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  color: var(--text-soft); background: none; border: 1.5px solid var(--border);
  border-radius: 10px; padding: .45rem .85rem; transition: border-color .15s, color .15s; }
.kc-enq__copy:hover { border-color: var(--slate, #6b8292); color: var(--text); }
.kc-enq__copy.is-copied { color: #2e7d3a; border-color: #2e7d3a; }
.kc-verdict svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kc-verdict[data-state="pass"]  { color: #2e7d3a; }
.kc-verdict[data-state="check"] { color: #9a6a00; }
.kc-verdict[data-state="fail"]  { color: var(--red-deep); }
[data-theme="dark"] .kc-verdict[data-state="pass"]  { color: #7bc47f; }
[data-theme="dark"] .kc-verdict[data-state="check"] { color: #e6b566; }
[data-theme="dark"] .kc-verdict[data-state="fail"]  { color: #ff8080; }
.kc-vals { display: grid; gap: .7rem .9rem; margin: 0; }
.kc-vals--2 { grid-template-columns: 1fr 1fr; }
.kc-vals > div { background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .8rem; min-width: 0; }
.kc-vals dt { font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .15rem; }
.kc-vals dd { margin: 0; font-size: 1.06rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
.kc-out__main { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 .7rem; font-size: .92rem; font-weight: 700; color: var(--text-soft); }
.kc-out__value { font-size: 1.5rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
.kc-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--border); margin-bottom: .8rem; }
.kc-bar__seg { display: block; height: 100%; min-width: 0;
  transition: width var(--t) var(--ease); }
.kc-bar__seg--a, .kc-bar__dot--a { background: var(--slate); }
.kc-bar__seg--b, .kc-bar__dot--b { background: var(--orange); }
.kc-bar__seg--c, .kc-bar__dot--c { background: var(--red-deep); }
.kc-bar__seg--d, .kc-bar__dot--d { background: var(--grey-light); }
[data-theme="dark"] .kc-bar__seg--d, [data-theme="dark"] .kc-bar__dot--d { background: #4a5261; }
.kc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin: 0; }
.kc-legend > div { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.kc-legend dt { color: var(--text-soft); }
.kc-legend dd { margin: 0 0 0 auto; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
.kc-bar__dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.kc-out--viz { display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 1.1rem; align-items: center; }
.kc-viz svg { display: block; width: 100%; max-width: 220px; height: auto; }
.kc-viz__wall { fill: none; stroke: var(--slate); stroke-opacity: .45; stroke-width: 3; }
.kc-viz__duct { fill: var(--surface); stroke: var(--slate); stroke-width: 1.5; }
.kc-viz__cable { fill: rgba(241,145,11,.28); stroke: var(--orange); stroke-width: 1.8; }
.kc-viz__cable2 { fill: rgba(107,130,146,.24); stroke: var(--slate); }
.kc-viz__max { fill: none; stroke: var(--slate); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .65; }
.kc-viz__leg { display: flex; justify-content: center; gap: .9rem; margin: .5rem 0 0;
  font-size: .78rem; font-weight: 600; color: var(--text-soft); }
.kc-viz__leg > span { display: inline-flex; align-items: center; gap: .35rem; }
.kc-viz__leg i { width: .68rem; height: .68rem; border-radius: 50%; }
.kc-viz__dot1 { background: rgba(241,145,11,.28); border: 1.8px solid var(--orange); }
.kc-viz__dot2 { background: rgba(107,130,146,.24); border: 1.8px solid var(--slate); }
/* duct-fill: size -> catalog matches (chips baked at build time) */
.kc-fitwrap { margin: 1rem 0 0; }
.kc-fitwrap__k { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #9db4c3; margin-bottom: .45rem; }
.kc-fitwrap__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.kc-fitchip { font-size: .8rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .32rem .75rem; text-decoration: none; }
.kc-fitchip:hover, .kc-fitchip:focus-visible { border-color: var(--orange); color: var(--text); }
.kc-fitwrap__all { display: inline-block; margin-top: .5rem; font-size: .8rem;
  font-weight: 700; color: var(--slate-deep); text-decoration: none; }
.kc-fitwrap__all:hover, .kc-fitwrap__all:focus-visible { color: var(--orange); }
[data-theme="dark"] .kc-fitwrap__all { color: var(--text-soft); }
/* bend radius viz (tool 4): corner walls, cable band, dashed pull arc */
.kc-viz__bwall { fill: none; stroke: var(--text-faint); stroke-width: 2.5; stroke-linecap: round; }
.kc-viz__bdot { fill: var(--text-faint); }
.kc-viz__bcable { fill: rgba(241,145,11,.28); stroke: var(--orange); stroke-width: 1.8;
  stroke-linejoin: round; }
.kc-viz__bpull { fill: none; stroke: var(--slate); stroke-width: 2; stroke-dasharray: 7 5;
  stroke-linecap: round; }
[data-theme="dark"] .kc-viz__bpull { stroke: #9db4c3; }
.kc-viz__brad { stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 3 3; }
.kc-viz__btxt { fill: var(--text-soft); font: 700 11px/1 var(--font);
  font-variant-numeric: tabular-nums; }
.kc-vals__sub { display: block; margin-top: .1rem; font-size: .72rem; font-weight: 600;
  color: var(--text-faint); }

/* fibre macrobending comparison (tool-bend): nested to-scale circles per ITU-T
   class + an interactive legend that highlights one class at a time */
.kc-macro { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.kc-macro__title { margin: 0; font-size: .98rem; font-weight: 800; color: var(--text); }
.kc-macro__lead { margin: .35rem 0 1.1rem; font-size: .9rem; color: var(--text-soft);
  max-width: 62ch; }
.kc-macro__body { display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem); align-items: center; }
.kc-macro__viz { display: grid; place-items: center; }
.kc-macro__viz svg { display: block; width: 100%; max-width: 250px; height: auto; }
.kc-macro__axis { stroke: var(--border); stroke-width: 1.5; }
.kc-macro__mm { fill: var(--text-faint); font: 700 10px/1 var(--font); }
.kc-macro__val { font: 800 11.5px/1 var(--font); text-anchor: end;
  font-variant-numeric: tabular-nums; }
.kc-macro__legend { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .5rem; }
.kc-macro__item { display: flex; align-items: center; gap: .75rem; width: 100%;
  text-align: left; padding: .6rem .75rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease); }
.kc-macro__item:hover { border-color: var(--c); transform: translateY(-1px); }
.kc-macro__item[aria-pressed="true"] { border-color: var(--c);
  box-shadow: 0 4px 16px -4px var(--c), inset 0 0 0 1px var(--c); }
.kc-macro__sw { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.kc-macro__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kc-macro__meta b { font-size: .9rem; font-weight: 700; color: var(--text); }
.kc-macro__meta small { font-size: .74rem; color: var(--text-soft); line-height: 1.3; }
.kc-macro__r { margin-left: auto; flex: 0 0 auto; font-size: .95rem; font-weight: 800;
  color: var(--c); font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .kc-macro__body { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* cable code decoder (tool-code): mono input, example chips, token chips,
   breakdown rows and the stylised cross-section. One tint per category. */
.kc-cc__in { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 1rem; letter-spacing: .02em; }
.kc-cc__try { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin-top: .2rem; }
.kc-cc__tryl { font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); }
.kc-cc__ex { font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
  font-weight: 600; color: var(--slate-deep); background: var(--surface);
  border: 1.5px solid var(--border); border-radius: 8px; padding: .35rem .6rem;
  min-height: 34px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.kc-cc__ex:hover { border-color: var(--slate); color: var(--text); }
.kc-cc__ex:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
[data-theme="dark"] .kc-cc__ex { color: var(--text-soft); }
.kc-cc__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .6rem; }
.kc-cc__chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.kc-cc__chip { font-family: ui-monospace, Consolas, monospace; font-size: .92rem;
  font-weight: 700; padding: .28rem .55rem; border-radius: 7px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-bottom-width: 3px; transition: border-color var(--t-fast) var(--ease); }
.kc-cc__chip.is-hi { border-color: var(--orange); }
.kc-cc__chip.is-unknown { color: var(--text-faint); border-style: dashed; }
.kc-cc__badge { flex: 0 0 auto; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--slate-deep);
  border: 1.5px solid var(--border); border-radius: 999px; padding: .3rem .7rem;
  white-space: nowrap; }
[data-theme="dark"] .kc-cc__badge { color: var(--text-soft); }
.kc-cc__sum { margin: 0 0 1rem; font-size: .95rem; font-weight: 700; }
.kc-cc__body { align-items: start; grid-template-columns: 264px minmax(0, 1fr); }
.kc-cc__body .kc-viz svg { max-width: 264px; }
@media (max-width: 640px) { .kc-cc__body { grid-template-columns: 1fr; } }
.kc-cc__rows { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .45rem; }
.kc-cc__row { display: flex; gap: .75rem; align-items: flex-start;
  padding: .5rem .65rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; transition: border-color var(--t-fast) var(--ease); }
.kc-cc__row.is-hi, .kc-cc__row:hover { border-color: var(--slate); }
/* designation builder (K8) */
.kc-cc__buildwrap { margin: .2rem 0 .9rem; }
.kc-cc__build { background: var(--mist); border-radius: var(--radius-sm);
  padding: .9rem 1rem .2rem; margin-bottom: .9rem; }
.kc-cc__buildchk { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.kc-chk { display: inline-flex !important; align-items: center; gap: .5rem;
  font-size: .84rem; font-weight: 600; color: var(--text-soft); margin-bottom: 0 !important; }
.kc-chk input { width: auto !important; min-height: 0 !important; margin: 0 !important;
  accent-color: var(--orange); }
/* glossary link on decoder rows (K5) */
.kc-cc__gl { display: inline-block; margin-top: .25rem; font-size: .74rem;
  font-weight: 700; letter-spacing: .02em; color: var(--slate-deep);
  text-decoration: none; border-bottom: 1px dashed var(--slate); }
.kc-cc__gl:hover, .kc-cc__gl:focus-visible { color: var(--orange);
  border-bottom-color: var(--orange); }
[data-theme="dark"] .kc-cc__gl { color: var(--text-soft); }
/* partial-decode notice (K4) */
.kc-cc__partial { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: var(--mist); border-left: 3px solid var(--orange); }
.kc-cc__partial p { margin: 0; flex: 1 1 260px; font-size: .88rem; color: var(--text-soft); }
.kc-cc__partial .kc-enq__btn { flex: 0 0 auto; }
/* decoder suggestion dropdown (K3) */
.kc-cc__sugwrap { position: relative; display: block; }
.kc-cc__sug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 26, 34, .16); max-height: 300px; overflow: auto;
  padding: .3rem; }
.kc-cc__sugrow { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .6rem;
  border-radius: 7px; cursor: pointer; }
.kc-cc__sugrow b { font-family: ui-monospace, Consolas, monospace; font-size: .84rem;
  font-weight: 700; white-space: nowrap; }
.kc-cc__sugrow span { color: var(--text-faint); font-size: .78rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-cc__sugrow:hover, .kc-cc__sugrow.is-active { background: var(--mist); }
[data-theme="dark"] .kc-cc__sugrow:hover, [data-theme="dark"] .kc-cc__sugrow.is-active
  { background: rgba(255,255,255,.07); }
.kc-cc__tok { flex: 0 0 auto; min-width: 3.2em; text-align: center;
  font-family: ui-monospace, Consolas, monospace; font-size: .88rem; font-weight: 700;
  padding: .22rem .45rem; border-radius: 6px; background: var(--mist);
  border-left: 3px solid var(--border); }
[data-theme="dark"] .kc-cc__tok { background: rgba(255,255,255,.06); }
.kc-cc__row small { display: block; font-size: .66rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: .1rem; }
.kc-cc__row p { margin: 0; font-size: .89rem; line-height: 1.5; color: var(--text); }
.kc-cc__row.is-unknown p { color: var(--text-faint); font-style: italic; }
.kc-cc__none p { margin: 0; font-size: .9rem; color: var(--text-soft); }
/* category tints: chips take the bottom edge, row tokens the left edge */
.kc-cc__chip--product, .kc-cc__chip--system, .kc-cc__chip--shape, .kc-cc__chip--type
  { border-bottom-color: var(--slate); border-left-color: var(--slate); }
.kc-cc__chip--tube, .kc-cc__chip--insulation, .kc-cc__chip--fiber, .kc-cc__chip--class
  { border-bottom-color: var(--orange); border-left-color: var(--orange); }
.kc-cc__chip--construction, .kc-cc__chip--shield, .kc-cc__chip--voltage,
.kc-cc__chip--droplets, .kc-cc__chip--integrity
  { border-bottom-color: var(--red-deep); border-left-color: var(--red-deep); }
.kc-cc__chip--smoke
  { border-bottom-color: var(--slate); border-left-color: var(--slate); }
.kc-cc__chip--acidity
  { border-bottom-color: var(--slate-deep); border-left-color: var(--slate-deep); }
.kc-cc__chip--sheath, .kc-cc__chip--dims, .kc-cc__chip--suffix
  { border-bottom-color: var(--grey-dark); border-left-color: var(--grey-dark); }
[data-theme="dark"] .kc-cc__chip--sheath, [data-theme="dark"] .kc-cc__chip--dims,
[data-theme="dark"] .kc-cc__chip--suffix
  { border-bottom-color: var(--grey-light); border-left-color: var(--grey-light); }
.kc-cc__chip--count, .kc-cc__chip--cores, .kc-cc__chip--conductor
  { border-bottom-color: var(--slate-deep); border-left-color: var(--slate-deep); }
/* cross-section layers */
.kc-ccviz__core { fill: var(--mist); stroke: var(--border); stroke-width: 1; }
[data-theme="dark"] .kc-ccviz__core { fill: rgba(255,255,255,.05); }
.kc-ccviz__sheath { fill: none; stroke: var(--grey-dark); }
[data-theme="dark"] .kc-ccviz__sheath { stroke: var(--grey-light); }
.kc-ccviz__armour { fill: none; stroke: var(--red-deep); stroke-dasharray: 7 4; }
.kc-ccviz__yarn { fill: none; stroke: var(--slate); stroke-dasharray: 2.5 3; }
.kc-ccviz__rods { fill: none; stroke: var(--slate); stroke-opacity: .35; }
.kc-ccviz__rod { fill: var(--slate-deep); }
[data-theme="dark"] .kc-ccviz__rod { fill: #9db4c3; }
.kc-ccviz__foil { fill: none; stroke: var(--grey-light); }
[data-theme="dark"] .kc-ccviz__foil { stroke: #5a6472; }
.kc-ccviz__braid { fill: none; stroke: var(--red-deep); stroke-dasharray: 4 3; }
.kc-ccviz__screen { fill: none; stroke: var(--orange); stroke-dasharray: 5 4; }
.kc-ccviz__tube { fill: var(--surface); stroke: #9aa0a6; stroke-width: 1.7; }
[data-theme="dark"] .kc-ccviz__tube { fill: #f4f4f4; }
.kc-ccviz__clt { fill: var(--surface); stroke: var(--slate); stroke-width: 2; }
[data-theme="dark"] .kc-ccviz__clt { fill: #f4f4f4; }
.kc-ccviz__csm { fill: #f2d977; stroke: #c9a94e; stroke-width: 1.5; }
.kc-ccviz__filler { fill: var(--grey-light); opacity: .75; }
[data-theme="dark"] .kc-ccviz__filler { fill: #6b7280; }
.kc-ccviz__tape { fill: none; stroke: #b8a13a; }
.kc-ccviz__rip { fill: var(--red); }
.kc-ccviz__fdot { stroke: none; }
.kc-ccviz__fib { fill: var(--slate-deep); }
[data-theme="dark"] .kc-ccviz__fib { fill: #9db4c3; }
.kc-ccviz__cond { fill: rgba(107,130,146,.4); stroke: var(--slate-deep); stroke-width: 1.5; }
[data-theme="dark"] .kc-ccviz__cond { stroke: #9db4c3; }
.kc-ccviz__gy { fill: #3f9a4d; stroke: #ffd500; stroke-width: 3; }
#kc-cc-viz circle.is-hi { filter: drop-shadow(0 0 4px rgba(241,145,11,.85)); }

/* CPR guide card: persistent fiery callout to the CPR guide (2026-07-12).
   Dark ember-gradient panel + the -22deg brand wedge + a soft flickering
   glow; the whole card is the link. */
.kc-guidecard {
  position: relative; display: flex; align-items: center; gap: 1.15rem;
  margin: 1.4rem 0 .4rem; padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.15rem, 2.6vw, 1.7rem);
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  text-decoration: none; color: #fff;
  background:
    radial-gradient(120% 140% at 6% 120%, rgba(241,145,11,.42), rgba(241,145,11,0) 55%),
    radial-gradient(90% 120% at 98% -10%, rgba(209,8,18,.45), rgba(209,8,18,0) 60%),
    linear-gradient(115deg, #1a1310 0%, #241812 45%, #2e1a14 100%);
  box-shadow: 0 10px 30px rgba(160,40,8,.20), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* flickering ember glow behind the icon */
.kc-guidecard__flames {
  position: absolute; left: -8%; bottom: -60%; width: 46%; height: 200%; z-index: -1;
  background: radial-gradient(closest-side, rgba(241,145,11,.55), rgba(241,145,11,0) 70%);
  filter: blur(14px); transform: translateZ(0);
  animation: kc-ember 4.5s var(--ease) infinite;
}
@keyframes kc-ember {
  0%, 100% { opacity: .65; transform: scale(1) translateY(0); }
  50%      { opacity: 1;   transform: scale(1.12) translateY(-6%); }
}
/* the signature angle wedge, fire-tinted, on the right */
.kc-guidecard::after {
  content: ""; position: absolute; right: -6%; top: -55%; width: 42%; height: 210%; z-index: -1;
  background: linear-gradient(var(--angle), var(--red), var(--orange));
  opacity: .22; transform: rotate(var(--angle)); filter: blur(2px);
  transition: transform var(--t-slow) var(--ease), opacity var(--t) var(--ease);
}
.kc-guidecard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 46px rgba(200,60,10,.34), inset 0 0 0 1px rgba(255,255,255,.10);
}
.kc-guidecard:hover::after { transform: rotate(var(--angle)) translateY(8%); opacity: .32; }
.kc-guidecard:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.kc-guidecard__icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  color: #ffd9a8;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 14px rgba(241,145,11,.30);
}
.kc-guidecard__icon svg { width: 30px; height: 30px;
  filter: drop-shadow(0 1px 6px rgba(241,145,11,.7)); }
.kc-guidecard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.kc-guidecard__kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); }
.kc-guidecard__title { font-size: clamp(1.05rem, 1.9vw, 1.28rem); line-height: 1.2; color: #fff; }
.kc-guidecard__desc { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72); max-width: 62ch; }
.kc-guidecard__cta {
  flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; white-space: nowrap; padding: .6rem 1.05rem;
  border-radius: 999px; color: #fff;
  background: linear-gradient(100deg, var(--red) 0%, var(--orange) 115%);
  box-shadow: 0 6px 18px rgba(209,8,18,.34);
  transition: box-shadow var(--t) var(--ease); }
.kc-guidecard__cta svg { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.kc-guidecard:hover .kc-guidecard__cta { box-shadow: 0 8px 22px rgba(209,8,18,.46); }
.kc-guidecard:hover .kc-guidecard__cta svg { transform: translateX(4px); }
@media (max-width: 620px) {
  .kc-guidecard { flex-wrap: wrap; gap: .9rem; }
  .kc-guidecard__body { flex-basis: calc(100% - 72px); }
  .kc-guidecard__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-guidecard__flames { animation: none; }
  .kc-guidecard:hover { transform: none; }
  .kc-guidecard:hover::after { transform: rotate(var(--angle)); }
  .kc-guidecard:hover .kc-guidecard__cta svg { transform: none; }
}

/* --product variant: same rich guidecard, steel/slate theme (matches the
   site's dark .cta-band palette) instead of CPR's fire theme — used by
   the code decoder's "search in materials" callout */
.kc-guidecard--product {
  background:
    radial-gradient(120% 140% at 6% 120%, rgba(107,130,146,.34), rgba(107,130,146,0) 55%),
    radial-gradient(90% 120% at 98% -10%, rgba(209,8,18,.40), rgba(209,8,18,0) 60%),
    linear-gradient(115deg, #12161b 0%, #171e26 45%, #1c2733 100%);
  box-shadow: 0 10px 30px rgba(20,40,60,.22), inset 0 0 0 1px rgba(255,255,255,.06);
}
.kc-guidecard--product .kc-guidecard__flames {
  background: radial-gradient(closest-side, rgba(107,130,146,.55), rgba(107,130,146,0) 70%);
}
.kc-guidecard--product:hover {
  box-shadow: 0 20px 46px rgba(20,50,75,.36), inset 0 0 0 1px rgba(255,255,255,.10);
}
.kc-guidecard--product:focus-visible { outline-color: var(--slate); }
.kc-guidecard--product .kc-guidecard__icon {
  color: #cfe0e8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 4px 14px rgba(107,130,146,.35);
}
.kc-guidecard--product .kc-guidecard__icon svg {
  filter: drop-shadow(0 1px 6px rgba(157,180,195,.7));
}
.kc-guidecard--product .kc-guidecard__kicker { color: #9db4c3; }

/* two guidecards side by side (duct-fill: find a matching duct / cable) */
.kc-guidecard-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 1.4rem 0 .4rem;
}
/* each paired card is only ~half width, so wrap the CTA below the body
   (like the mobile treatment) to give the copy room and keep both cards
   the same height */
.kc-guidecard-pair .kc-guidecard {
  margin: 0; height: 100%; flex-wrap: wrap; align-content: center; row-gap: 1rem;
}
.kc-guidecard-pair .kc-guidecard__body { flex: 1 1 calc(100% - 72px); }
.kc-guidecard-pair .kc-guidecard__cta { width: 100%; justify-content: center; }
@media (max-width: 720px) {
  .kc-guidecard-pair { grid-template-columns: 1fr; }
}

/* colour codes tool (tool-color): segment pills reuse .dl-toolbar/.dl-ind/
   .dl-seg from Materials; below are the swatches, tiles and lists */
.kc-col__segs { margin: .4rem 0 1.4rem; }
.kc-swatch { display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid rgba(13,14,16,.18); flex: 0 0 auto; vertical-align: middle; }
[data-theme="dark"] .kc-swatch { border-color: rgba(255,255,255,.25); }
.kc-swatch--light { border-color: rgba(13,14,16,.35); }
.kc-swatch--big { width: 44px; height: 44px; border-width: 2px; }
.kc-swatch--ring { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #101010; }
.kc-swatch--gnye { background: repeating-linear-gradient(45deg, #159A3F 0 6px, #FFD100 6px 10px); }
.kc-col__res { display: flex; flex-wrap: wrap; gap: 1rem; }
.kc-col__res:empty { display: none; }
.kc-col__tile { display: flex; align-items: center; gap: .8rem; flex: 1 1 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem 1rem; }
.kc-col__tile small { display: block; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.kc-col__tile b { font-size: 1.02rem; }
.kc-col__subt { font-size: .78rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-soft); margin: 1.4rem 0 .6rem; }
.kc-col__seq { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .45rem;
  counter-reset: kcseq; }
.kc-col__seq li { display: flex; align-items: center; gap: .55rem; font-size: .88rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: .42rem .6rem; counter-increment: kcseq; }
.kc-col__seq li::before { content: counter(kcseq); min-width: 1.3em; text-align: right;
  font-size: .78rem; font-weight: 800; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.kc-col__jackets { display: flex; flex-wrap: wrap; gap: .5rem; }
.kc-col__jchip { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .35rem .8rem .35rem .45rem; }
.kc-col__jchip b { font-size: .82rem; }
.kc-col__jchip > span:last-child { color: var(--text-soft); }
/* the "look up a specific fibre" block, split out below the reference and
   set off with a divider + tinted inset panel so it reads as a separate step */
.kc-col__lookup { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.kc-col__lookup .kc-col__subt { margin-top: 0; }
.kc-col__lookup-desc { margin: 0 0 1rem; font-size: .9rem; color: var(--text-soft); }
.kc-col__lookup form { max-width: 260px; }
.kc-col__lookup .kc-col__res { margin-top: 1rem; }
.kc-col__list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: .4rem; }
.kc-col__list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: .45rem .65rem; }
.kc-colviz__rj { fill: var(--surface); stroke: var(--grey-dark); stroke-width: 2.5; }
[data-theme="dark"] .kc-colviz__rj { stroke: var(--grey-light); }
.kc-colviz__rjtab { fill: var(--mist); stroke: var(--grey-dark); stroke-width: 2; }
[data-theme="dark"] .kc-colviz__rjtab { fill: rgba(255,255,255,.06); stroke: var(--grey-light); }
.kc-colviz__pn { fill: var(--text-faint); font: 700 10px/1 var(--font);
  font-variant-numeric: tabular-nums; }
.kc-key { display: inline-block; width: 15px; border-top: 3px solid var(--orange);
  border-radius: 2px; margin-right: .45rem; vertical-align: 2px; }
.kc-key--pull { border-top-style: dashed; border-top-width: 2.5px;
  border-top-color: var(--slate); }
[data-theme="dark"] .kc-key--pull { border-top-color: #9db4c3; }
@media (max-width: 640px) {
  .kc-out--viz { grid-template-columns: 1fr; }
  .kc-viz { margin-inline: auto; }
  .kc-vals--2 { grid-template-columns: 1fr; }
  .kc-legend { grid-template-columns: 1fr; }
}
/* match the neighbouring label's bottom margin so the button's baseline
   lines up with the "Number of cables" input, not the cell bottom */
.kc-wb__addwrap { display: flex; align-items: end; margin-bottom: .9rem; }
.kc-wb__add { font-size: .82rem; font-weight: 700; color: var(--slate-deep);
  border: 1.5px dashed var(--border); border-radius: 9px; padding: .55rem .8rem;
  min-height: 44px; width: 100%; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.kc-wb__add:hover, .kc-wb__add.is-open { border-color: var(--slate); color: var(--text); }
[data-theme="dark"] .kc-wb__add { color: var(--text-soft); }

/* Glossary: A-Z rail + ONE readable column. (The old 1fr/1fr row-flow grid
   zigzagged the alphabetical order across two columns - a scanning trap.) */
.kc-glosswrap { display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.kc-az { position: sticky; top: calc(var(--header-h) + 16px);
  display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto; scrollbar-width: none; }
.kc-az a {
  display: grid; place-items: center; width: 40px; height: 30px; border-radius: 8px;
  font-size: .82rem; font-weight: 700; color: var(--text-soft); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kc-az a:hover { background: var(--mist); color: var(--text); }
.kc-az a.is-active { background: var(--orange); color: var(--black-pure); }
.kc-az a.is-empty { opacity: .32; pointer-events: none; }
.kc-glossmain { min-width: 0; max-width: 76ch; }
.kc-count { font-size: .84rem; font-weight: 700; color: var(--text-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-gloss { display: block; }
.kc-term { position: relative; padding: 1rem 0; border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 20px); }
.kc-term dt { font-weight: 700; font-size: 1.02rem; color: var(--text); margin-bottom: .3rem;
  display: flex; align-items: baseline; gap: .5rem; }
.kc-term dd { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-soft); }
.kc-term__anchor, .kc-anchor { font-weight: 700; color: var(--text-faint); opacity: 0;
  transition: opacity var(--t-fast) var(--ease); text-decoration: none; margin-left: .45rem; }
.kc-term:hover .kc-term__anchor, .kc-term__anchor:focus-visible,
.faq-item:hover .kc-anchor, .kc-anchor:focus-visible { opacity: 1; }
.kc-mini { font-size: .8rem; font-weight: 700; color: var(--slate-deep);
  border: 1.5px solid var(--border); border-radius: 999px; padding: .45rem .9rem;
  min-height: 40px; cursor: pointer; margin-left: auto;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.kc-mini:hover, .kc-mini[aria-pressed="true"] { border-color: var(--slate); color: var(--text); }
[data-theme="dark"] .kc-mini { color: var(--text-soft); }
@media (max-width: 720px) {
  .kc-glosswrap { grid-template-columns: 1fr; }
  .kc-az { position: sticky; top: var(--header-h); z-index: 5;
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none;
    background: var(--bg); padding: .4rem 0; }
  .kc-az a { flex: 0 0 auto; }
}

/* --- hub (knowledge.html): search-first hero + card navigation --- */
.kc-search--hub { flex: none; max-width: 620px; margin-top: 2.2rem; }
.kc-search--hub input { font-size: 1.02rem; min-height: 54px;
  padding: .85rem 3rem .85rem 2.9rem; }
.kc-search__kbd { position: absolute; right: .95rem; top: 50%; transform: translateY(-50%);
  font-family: inherit; font-size: .78rem; font-weight: 700; line-height: 1;
  color: var(--text-faint); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 6px;
  padding: .32rem .55rem; pointer-events: none; }
@media (max-width: 720px), (hover: none) { .kc-search__kbd { display: none; } }
.kc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.kc-chips__lbl { font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-right: .15rem; }
.kc-chip { font: inherit; font-size: .84rem; font-weight: 600; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px; padding: .42rem 1rem; min-height: 38px;
  backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease); }
.kc-chip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5);
  transform: translateY(-1px); }
.kc-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.kc-hub-hint { margin-top: .9rem; font-size: .85rem; color: rgba(255,255,255,.75); }

/* hub nav cards: icon tile + big count + wedge device, one tint per section
   (hub redesign 2026-07-12; the plain .kc-card stays for the spoke pages) */
.kc-navcard { position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.25rem, 2.2vw, 1.7rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease); }
.kc-navcard::after { content: ""; position: absolute; right: -45%; top: -65%;
  width: 75%; height: 130%; background: var(--wedge, rgba(107,130,146,.07));
  transform: rotate(var(--angle)); z-index: -1;
  transition: transform var(--t-slow) var(--ease); }
a.kc-navcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: transparent; }
a.kc-navcard:hover::after { transform: rotate(var(--angle)) translateY(9%); }
a.kc-navcard:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }
.kc-navcard[data-kc="faq"]    { --wedge: rgba(209,8,18,.07);   --tile: rgba(209,8,18,.10);   --tile-ink: var(--red-deep); }
.kc-navcard[data-kc="tools"]  { --wedge: rgba(241,145,11,.09); --tile: rgba(241,145,11,.13); --tile-ink: #b06a04; }
.kc-navcard[data-kc="gloss"]  { --wedge: rgba(107,130,146,.10);--tile: rgba(107,130,146,.14);--tile-ink: var(--slate-deep); }
.kc-navcard[data-kc="guides"] { --wedge: rgba(87,87,86,.09);   --tile: rgba(87,87,86,.11);   --tile-ink: var(--grey-dark); }
[data-theme="dark"] .kc-navcard[data-kc="faq"]    { --tile: rgba(209,8,18,.20);   --tile-ink: #ff8b93; }
[data-theme="dark"] .kc-navcard[data-kc="tools"]  { --tile: rgba(241,145,11,.16); --tile-ink: var(--orange); }
[data-theme="dark"] .kc-navcard[data-kc="gloss"]  { --tile: rgba(107,130,146,.22);--tile-ink: #9db4c3; }
[data-theme="dark"] .kc-navcard[data-kc="guides"] { --tile: rgba(215,213,213,.12);--tile-ink: var(--grey-light); }
.kc-navcard__top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .2rem; }
.kc-navcard__icon { width: 46px; height: 46px; border-radius: 11px;
  display: grid; place-items: center; background: var(--tile); color: var(--tile-ink);
  flex-shrink: 0; }
.kc-navcard__icon svg { width: 24px; height: 24px; }
.kc-navcard__count { text-align: right; }
.kc-navcard__count b { display: block; font-size: clamp(1.65rem, 2.4vw, 2.1rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text); }
.kc-navcard__count > span { font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); }
.kc-navcard h3 { font-size: 1.14rem; }
.kc-navcard p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-soft); }
.kc-navcard__foot { margin-top: auto; padding-top: .75rem; display: inline-flex;
  align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700;
  color: var(--red-deep); }
.kc-navcard__foot svg { width: 17px; height: 17px;
  transition: transform var(--t-fast) var(--ease); }
a.kc-navcard:hover .kc-navcard__foot svg { transform: translateX(4px); }
[data-theme="dark"] .kc-navcard__foot { color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  a.kc-navcard:hover { transform: none; }
  a.kc-navcard:hover::after { transform: rotate(var(--angle)); }
  a.kc-navcard:hover .kc-navcard__foot svg { transform: none; }
}

/* hub discipline tiles: photo variant of the homepage .ind-tile */
.ind-tile--kc { aspect-ratio: 3/2; }
.ind-tile--kc .ind-tile__name { font-size: .92rem; font-weight: 600; line-height: 1.45;
  color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.ind-tile[data-disc="fotas"] .ind-tile__tag { background: rgba(13,14,16,.55);
  border-color: rgba(255,255,255,.3); }
@media (max-width: 560px) { .ind-tile--kc .ind-tile__name { display: none; } }

.kc-results-sec { padding-top: clamp(2rem, 4vw, 3rem); }
.kc-res-group { margin-bottom: 1.6rem; }
.kc-res-group h3 { font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .7rem; }
.kc-res {
  display: block; padding: .7rem 1rem; margin-bottom: .5rem;
  font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .2s ease, transform .2s ease;
}
.kc-res:hover, .kc-res.is-active { border-color: var(--slate); transform: translateX(3px); }
.kc-res.is-active { box-shadow: var(--shadow-sm); border-color: var(--orange); }
.kc-res--all { font-weight: 700; color: var(--red-deep); }
[data-theme="dark"] .kc-res--all { color: var(--orange); }
button.kc-res { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.kc-res__code { float: right; margin-left: 1rem; font-size: .74rem; font-weight: 700;
  color: var(--text-faint); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.kc-cards { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.4rem); align-items: stretch; }
.kc-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.kc-card:hover { transform: translateY(-4px); border-color: var(--slate);
  box-shadow: var(--shadow-md); }
.kc-card__n { font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft); }
.kc-card h3 { font-size: 1.12rem; }
.kc-card p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-soft); }
.kc-card--soon .kc-soon { margin-bottom: 0; }

/* --- spoke lists: discipline headings, letter dividers, deep-link flash --- */
.kc-group { font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft);
  margin: 2rem 0 .7rem; }
.kc-faq-list .kc-group:first-child { margin-top: 0; }
.kc-letter { grid-column: 1 / -1; font-size: .95rem; font-weight: 800;
  color: var(--slate-deep); border-bottom: 2px solid var(--slate);
  padding: 1.6rem 0 .35rem; letter-spacing: .08em;
  scroll-margin-top: calc(var(--header-h) + 20px); }
[data-theme="dark"] .kc-letter { color: var(--text-soft); }
.kc-hit { animation: kc-hit-flash 2.2s ease; border-radius: var(--radius-sm); }
@keyframes kc-hit-flash {
  0%, 60% { background: rgba(241,145,11,.14); box-shadow: 0 0 0 2px rgba(241,145,11,.45); }
  100% { background: transparent; box-shadow: none; }
}

/* --- cross-links: chips on FAQ answers, glossary terms, guide pages --- */
.kc-chips { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  margin: .8rem 0 0; }
.kc-chips__l { font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-right: .2rem; }
.kc-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  font-size: .8rem; font-weight: 600; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .8rem; transition: color .2s ease, border-color .2s ease;
}
.kc-chip:hover { color: var(--text); border-color: var(--slate); }
.kc-chip--guide { color: var(--red-deep); border-color: rgba(209,8,18,.3); }
.kc-chip--guide:hover { color: var(--red-deep); border-color: var(--red-deep); }
[data-theme="dark"] .kc-chip--guide { color: var(--orange); border-color: rgba(241,145,11,.35); }
[data-theme="dark"] .kc-chip--guide:hover { border-color: var(--orange); }

/* --- auto-linked glossary terms in running text (FAQ answers, guides) --- */
.kc-t {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--slate);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.kc-t:hover { color: var(--red-deep); text-decoration-color: currentColor; }
[data-theme="dark"] .kc-t:hover { color: var(--orange); }

/* --- hub search: match highlight --- */
.kc-res mark { background: rgba(241,145,11,.25); color: inherit;
  border-radius: 3px; padding: 0 .1em; }

/* --- glossary: expandable long body --- */
.kc-more { margin-top: .55rem; }
.kc-more summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700; color: var(--slate-deep);
  -webkit-tap-highlight-color: transparent;
}
.kc-more summary::after { content: ""; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px); transition: transform .2s ease; }
.kc-more[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.kc-more summary:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
[data-theme="dark"] .kc-more summary { color: var(--text-soft); }
.kc-more p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--text-soft); }

/* --- guides: index meta row + article page --- */
.kc-card__meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.kc-card__meta .kc-soon { margin: 0; align-self: center; }
.g-meta { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  margin-top: 1.2rem; font-size: .88rem; color: rgba(255,255,255,.8); }
.g-meta__dot { width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.5); }
.g-wrap { max-width: 820px; }
/* "On this page" TOC: sticky right rail on wide screens (filled by JS when
   the article has 3+ h2 headings; hidden and harmless otherwise) */
@media (min-width: 1100px) {
  .g-wrap.g-wrap--toc { display: grid; max-width: 1090px;
    grid-template-columns: minmax(0, 820px) 220px; column-gap: clamp(2rem, 4vw, 3.4rem); }
  .g-wrap--toc > .g-toc { grid-column: 2; grid-row: 1 / span 5; }
  .g-wrap--toc > .g-art, .g-wrap--toc > .g-rel, .g-wrap--toc > .g-foot { grid-column: 1; }
}
.g-toc { position: sticky; top: calc(var(--header-h) + 20px); align-self: start;
  font-size: .86rem; }
.g-toc__title { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .6rem; }
.g-toc ol { list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--border); }
.g-toc li a { display: block; padding: .34rem 0 .34rem .85rem; color: var(--text-soft);
  border-left: 2px solid transparent; margin-left: -2px; line-height: 1.4;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.g-toc li a:hover { color: var(--text); }
.g-toc li a.is-active { color: var(--text); border-left-color: var(--orange); font-weight: 700; }
@media (max-width: 1099px) { .g-toc { display: none; } }
.g-art h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 2.2rem 0 .9rem;
  scroll-margin-top: calc(var(--header-h) + 20px); }
.g-art h3 { font-size: 1.12rem; margin: 1.8rem 0 .7rem; }
.g-art p { margin: 0 0 1.05rem; line-height: 1.75; color: var(--text-soft); }
.g-art p strong, .g-art li strong { color: var(--text); }
.g-art ul { margin: 0 0 1.05rem; padding-left: 1.25rem; }
.g-art li { margin-bottom: .5rem; line-height: 1.65; color: var(--text-soft); }
.g-table { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.g-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.g-table th { text-align: left; font-weight: 700; color: var(--text);
  background: var(--mist); padding: .6rem .85rem; white-space: nowrap; }
.g-table td { padding: .55rem .85rem; color: var(--text-soft);
  border-top: 1px solid var(--border); }
.g-fig { margin: 0 0 1.3rem; }
.g-fig img { display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); }
.g-fig figcaption { margin-top: .5rem; font-size: .8rem; line-height: 1.5;
  color: var(--text-soft); }
.g-note { border-left: 3px solid var(--orange); background: rgba(241,145,11,.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .85rem 1.05rem; margin: 0 0 1.2rem; }
.g-note p { margin: 0; font-size: .92rem; }
.g-rel { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.g-rel h2 { font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-soft); margin-bottom: .9rem; }
.g-foot { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

@media (max-width: 960px) {
  .kc-tools { grid-template-columns: 1fr; }
  .kc-gloss { grid-template-columns: 1fr; }
  .kc-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .kc-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Storefront island (assets/js/shop.js) — dormant unless the shop API
   answers; everything below only ever renders in that case. Token-driven,
   so light/dark need no separate blocks except where noted.
   ========================================================================== */
.shop-head { display: inline-flex; align-items: center; gap: .45rem; }
.shop-chip {
  font: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap;
  padding: .45rem .95rem; min-height: 36px; border-radius: 999px;
  color: var(--text); background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border);
  transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.shop-chip:hover { box-shadow: inset 0 0 0 1.5px var(--slate); transform: translateY(-1px); }
.shop-chip--cart em { font-style: normal; font-weight: 700; color: #fff;
  background: linear-gradient(100deg, var(--red) 0%, var(--orange) 120%);
  border-radius: 999px; padding: .05rem .45rem; margin-left: .2rem; font-size: .74rem; }
.shop-chip--ghost { background: transparent; }
.site-header:not(.is-solid) .shop-chip {
  color: #fff; background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); backdrop-filter: blur(8px);
}
@media (max-width: 640px) { .shop-chip--ghost { display: none; } }

.shop-badge { display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; color: var(--text-soft); padding: .1rem 0; }
.shop-badge b { color: var(--text); font-variant-numeric: tabular-nums; }
.shop-badge small { font-size: .72rem; color: var(--text-faint); }
.shop-badge__hint { font-size: .8rem; color: var(--slate-deep); font-weight: 600; }
[data-theme="dark"] .shop-badge__hint { color: var(--slate); }
.shop-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.shop-dot--in  { background: #24a148; box-shadow: 0 0 0 3px rgba(36,161,72,.18); }
.shop-dot--low { background: var(--orange); box-shadow: 0 0 0 3px rgba(241,145,11,.2); }
.shop-dot--rfq { background: var(--text-faint); box-shadow: 0 0 0 3px rgba(138,144,153,.18); }
.prod-card .shop-badge { padding: 0 .95rem .5rem; }
.shop-cell { display: flex; align-items: center; gap: .9rem; margin-top: .25rem; }
.shop-mini-add {
  font: inherit; font-size: .78rem; font-weight: 700; color: var(--red-deep);
  padding: .15rem .5rem; border-radius: 7px; border: 1.5px solid currentColor;
  background: transparent; transition: background .2s ease, color .2s ease;
}
.shop-mini-add:hover { background: var(--red-deep); color: #fff; }

.shop-scrim {
  position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center;
  background: rgba(13,14,16,.55); backdrop-filter: blur(4px); padding: 1rem;
}
.shop-panel {
  width: min(440px, 100%); max-height: 86vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 1.6rem; animation: shopIn .24s var(--ease-out);
}
.shop-panel--cart { width: min(520px, 100%); }
@keyframes shopIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.shop-panel h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.shop-panel label { display: block; font-size: .84rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: .9rem; }
.shop-panel input {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .75rem;
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 9px;
}
.shop-panel input:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; }
.shop-panel__row { display: flex; gap: .7rem; margin-top: .4rem; }
.shop-panel__row label { flex: 1; }
.shop-err { font-size: .84rem; color: var(--red-deep); margin: 0 0 .8rem; }
.shop-note { font-size: .86rem; color: var(--text-faint); margin: .2rem 0 1rem; }

/* checkout step: compact review + terms */
.shop-sums { margin: 0 0 .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .35rem .8rem; }
.shop-sum { display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; font-size: .86rem; color: var(--text-soft);
  border-bottom: 1px solid var(--border); }
.shop-sum:last-child { border-bottom: none; }
.shop-sum b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); }
.shop-sum--total { font-weight: 700; color: var(--text); }
.shop-terms { display: flex !important; gap: .6rem; align-items: flex-start;
  font-weight: 400 !important; font-size: .86rem !important; line-height: 1.5; }
.shop-terms input { width: auto !important; min-height: 0 !important;
  margin-top: .2rem !important; accent-color: var(--red-deep); }
.shop-terms a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .shop-terms a { color: var(--orange); }

.shop-line { display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border); }
.shop-line__name { flex: 1; font-size: .88rem; font-weight: 600; color: var(--text);
  line-height: 1.3; min-width: 0; }
.shop-line__name em { display: block; font-style: normal; font-weight: 400;
  font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.shop-line__qty { display: inline-flex; align-items: center; gap: .45rem; }
.shop-line__qty button {
  width: 26px; height: 26px; border-radius: 50%; font-weight: 700;
  background: var(--mist); color: var(--text-soft); display: grid; place-items: center;
}
.shop-line__qty button:hover { background: var(--border); }
.shop-line__qty b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.shop-line__price { font-size: .88rem; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.shop-subtotal { display: flex; justify-content: space-between; align-items: baseline;
  margin: .9rem 0 .2rem; font-size: .92rem; color: var(--text-soft); }
.shop-subtotal b { font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }

.shop-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 8px);
  z-index: 1500; padding: .7rem 1.3rem; border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: #fff; background: var(--ink);
  box-shadow: var(--shadow-lg); opacity: 0;
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.shop-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .shop-panel { animation: none; }
  .shop-toast { transition: opacity .22s ease; }
}

/* --- account page (account.html) — panels rendered by the island --- */
.acct-wrap { max-width: 1080px; }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); align-items: start; }
.acct-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.acct-card h2 { font-size: 1.15rem; margin-bottom: .7rem; }
.acct-card p { font-size: .92rem; line-height: 1.6; color: var(--text-soft); }
.acct-note { font-size: .86rem !important; color: var(--text-soft); margin: 0 0 1rem; }
.acct-card label { display: block; font-size: .84rem; font-weight: 600;
  color: var(--text-soft); margin-bottom: .9rem; }
.acct-card input {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .75rem;
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 9px;
  min-height: 44px;
}
.acct-card input:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; }
.acct-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.1rem 0 0; }
.acct-facts { margin: 0 0 .6rem; }
.acct-facts div { display: flex; gap: 1rem; padding: .45rem 0;
  border-bottom: 1px solid var(--border); }
.acct-facts dt { flex: 0 0 40%; font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.acct-facts dd { margin: 0; font-size: .92rem; color: var(--text); word-break: break-word; }
.acct-st { display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 999px;
  padding: .2rem .7rem; background: rgba(107,130,146,.14); color: var(--slate-deep); }
.acct-st--approved, .acct-st--accepted { background: rgba(46,125,50,.14); color: #2e7d32; }
.acct-st--pending { background: rgba(241,145,11,.14); color: #9a6a12; }
.acct-st--blocked, .acct-st--rejected, .acct-st--cancelled {
  background: rgba(209,8,18,.12); color: var(--red-deep); }

/* orders list + order detail */
.acct-ords { display: flex; flex-direction: column; }
.acct-ord { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .65rem 0; border-bottom: 1px solid var(--border); color: var(--text); }
.acct-ord:hover .acct-ord__nr { color: var(--red-deep); }
[data-theme="dark"] .acct-ord:hover .acct-ord__nr { color: var(--orange); }
.acct-ord__nr { font-weight: 700; font-size: .92rem; }
.acct-ord__date { font-size: .84rem; color: var(--text-soft); }
.acct-ord__total { margin-left: auto; font-weight: 700; font-size: .92rem;
  font-variant-numeric: tabular-nums; }
.acct-ordmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 1rem; font-size: .9rem; color: var(--text-soft); }
.acct-ordtbl { overflow-x: auto; margin: 0 0 .8rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); }
.acct-ordtbl table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.acct-ordtbl th { text-align: left; font-weight: 700; color: var(--text);
  background: var(--mist); padding: .55rem .8rem; }
.acct-ordtbl td { padding: .5rem .8rem; color: var(--text-soft);
  border-top: 1px solid var(--border); }
.acct-ordtbl td em { display: block; font-style: normal; font-size: .78rem;
  color: var(--text-faint); }
.acct-ordtbl td em a, .shop-line__name em a { color: inherit; }
.acct-ordtbl td em a:hover, .shop-line__name em a:hover {
  color: var(--red-deep); text-decoration: underline; }
[data-theme="dark"] .acct-ordtbl td em a:hover,
[data-theme="dark"] .shop-line__name em a:hover { color: var(--orange); }
.acct-ordtbl .num { text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.acct-ordtot td { font-weight: 700; color: var(--text); }
[data-theme="dark"] .acct-st { color: var(--text-soft); }
[data-theme="dark"] .acct-st--approved { color: #7bc47f; }
[data-theme="dark"] .acct-st--pending { color: var(--orange); }
[data-theme="dark"] .acct-st--blocked { color: #ff6b6b; }

/* ==========================================================================
   Product detail pages (PROTOTYPE) — products/<slug>.html, generated per
   catalog family by _ml_build.py (PRODUCT_PAGE_SLUGS). Light, article-like
   layout: no dark hero, so the header starts solid (main.js is-solid).
   Token-driven throughout, so dark mode needs no dedicated overrides; the
   photo frames stay white in both themes like the catalog cards do.
   ========================================================================== */
.pp-wrap { padding-top: calc(var(--header-h) + clamp(1.6rem, 4vw, 3rem)); }

.pp-crumb { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:.85rem; color: var(--text-faint); margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.pp-crumb a { color: var(--text-soft); transition: color .2s ease; }
.pp-crumb a:hover { color: var(--text); }
.pp-crumb span[aria-current] { color: var(--text-faint); max-width: 34ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pp-top { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,4rem);
  align-items: start; }
.pp-media { display:grid; gap: .9rem; }
.pp-media__frame { background:#fff; border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden; display:flex;
  align-items:center; justify-content:center; }
.pp-media__frame--main { aspect-ratio: 4/3; }
.pp-media__frame--none img { opacity: .18; filter: grayscale(1); max-width: 140px; }
.pp-media__frame img { max-width:100%; max-height:100%; object-fit:contain; padding: clamp(1rem,3vw,2rem); }
.pp-media__frame:not(.pp-media__frame--main) { aspect-ratio: 21/9; }
.pp-media__frame:not(.pp-media__frame--main) img { padding: .9rem; }

.pp-info > .tag { font-size:.78rem; font-weight:600; color:var(--text-soft);
  background:var(--mist); border-radius:6px; padding:.24rem .6rem; }
.pp-info h1 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height:1.18;
  letter-spacing:-.015em; margin: .9rem 0 .7rem; }
.pp-code { font-size:.9rem; color: var(--text-soft); margin-bottom: 1.1rem; }
.pp-code b { font-variant-numeric: tabular-nums; letter-spacing:.02em; }
.pp-desc { font-size:.97rem; line-height:1.7; color: var(--text-soft);
  white-space: pre-line; margin-bottom: 1.6rem; }
.pp-cta { display:flex; flex-wrap:wrap; gap:.9rem; }

.pp-variants, .pp-apps, .pp-related { margin-top: clamp(2.6rem,5vw,4rem); }
.pp-variants h2, .pp-apps h2, .pp-related h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 1.1rem; }

.pp-table-wrap { overflow-x:auto; border:1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); }
.pp-table { width:100%; border-collapse: collapse; font-size:.92rem; min-width: 540px; }
.pp-table th { text-align:left; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color: var(--text-faint); padding:.7rem .95rem;
  border-bottom: 2px solid var(--border); }
.pp-table td { padding:.7rem .95rem; border-bottom:1px solid var(--border);
  color: var(--text-soft); }
.pp-table tbody tr:last-child td { border-bottom: none; }
.pp-table tbody tr:hover { background: var(--mist); }
.pp-table__code { font-weight:600; color: var(--text); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.pp-table__act { text-align:right; white-space:nowrap; }
.pp-table__act a { font-weight:600; color: var(--slate-deep); margin-left: 1.2rem;
  transition: color .2s ease; }
.pp-table__act a:hover { color: var(--red-deep); }
[data-theme="dark"] .pp-table__act a { color: var(--slate); }

.pp-apps__row { display:flex; flex-wrap:wrap; gap:.8rem; }
.pp-app { display:flex; align-items:center; gap:.85rem; padding:.55rem .95rem .55rem .55rem;
  background: var(--surface); border:1px solid var(--border); border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pp-app img { width:56px; height:42px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.pp-app span { font-size:.9rem; font-weight:600; color: var(--text); }
.pp-app svg { width:16px; height:16px; color: var(--text-faint);
  transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.pp-app:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--slate); }
.pp-app:hover svg { transform: translateX(3px); color: var(--red-deep); }

.pp-related__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pp-rel { display:flex; flex-direction:column; background: var(--surface);
  border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pp-rel:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.pp-rel__img { display:block; aspect-ratio: 4/3; background:#fff;
  border-bottom:1px solid var(--border); }
.pp-rel__img img { width:100%; height:100%; object-fit:contain; padding:.8rem; }
.pp-rel__img--empty { position:relative; }
.pp-rel__img--empty::after { content:"LGCE"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-weight:700; letter-spacing:.2em;
  color:#d3d7db; }
.pp-rel__name { padding:.8rem .95rem .15rem; font-size:.92rem; font-weight:600;
  color: var(--text); line-height:1.35; }
.pp-rel__code { padding:0 .95rem .9rem; font-size:.78rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }

.pp-foot { margin-top: clamp(2.6rem,5vw,3.6rem); padding-top: 1.4rem;
  border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .pp-top { grid-template-columns: 1fr; }
  .pp-related__grid { grid-template-columns: 1fr; }
  .pp-table { min-width: 480px; }
  .pp-table__act a { margin-left: .8rem; }
}

/* ==========================================================================
   404 — "This cable's been cut" error page. .page-hero is a fixed dark
   surface regardless of site theme, so the illustration/diagnostics card
   below are hand-tuned for that dark background rather than semantic
   tokens; only the light quick-links section underneath uses tokens (and
   so needs no separate dark-mode block).
   ========================================================================== */
.nf-hero { overflow: visible; }
.nf-hero__inner {
  display: grid; grid-template-columns: 1fr .95fr; gap: clamp(2rem,5vw,4rem);
  align-items: center;
}
.nf-hero__text .lead { max-width: 46ch; }
.nf-contact {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem;
  font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.85);
  transition: color .2s ease;
}
.nf-contact svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.nf-contact:hover { color: #fff; }
.nf-contact:hover svg { transform: translateX(3px); }

.nf-hero__art { position: relative; }
.nf-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-54%);
  font-family: var(--font); font-weight: 300; font-size: clamp(6rem, 15vw, 11rem);
  letter-spacing: -.04em; color: rgba(255,255,255,.05); line-height: 1;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.nf-cable { position: relative; width: 100%; height: auto; z-index: 1; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.nf-cable__path { fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .5; }
.nf-cable__jacket { fill: #333c46; stroke: #454f5b; stroke-width: 1; }
.nf-cable__hl { stroke: rgba(255,255,255,.16); stroke-width: 2; stroke-linecap: round; }
.nf-cable__sh { stroke: rgba(0,0,0,.3); stroke-width: 2; stroke-linecap: round; }
.nf-strands line { stroke-width: 2; stroke-linecap: round; opacity: .9; }
.nf-spark-ring {
  fill: none; stroke: var(--red); stroke-width: 1.6; opacity: .55;
  transform-box: fill-box; transform-origin: center; animation: nf-ping 2.2s var(--ease-out) infinite;
}
.nf-spark-dot { fill: var(--red); filter: drop-shadow(0 0 6px rgba(255,0,0,.65)); }
@keyframes nf-ping {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.nf-diag {
  margin-top: 1.4rem; max-width: 300px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: 1rem 1.15rem; backdrop-filter: blur(10px);
}
.nf-diag__head {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.nf-diag__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--red); box-shadow: 0 0 0 4px rgba(255,0,0,.22);
  animation: nf-pulse-red 2.4s var(--ease) infinite;
}
@keyframes nf-pulse-red {
  0%,100% { box-shadow: 0 0 0 3px rgba(255,0,0,.25); }
  50%     { box-shadow: 0 0 0 7px rgba(255,0,0,0); }
}
.nf-diag__rows { display: flex; flex-direction: column; gap: .55rem; }
.nf-diag__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nf-diag__rows dt { font-size: .82rem; color: rgba(255,255,255,.5); }
.nf-diag__rows dd { font-size: .84rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.nf-diag__rows dd.is-down { color: #ff8080; }

@media (prefers-reduced-motion: reduce) {
  .nf-spark-ring { animation: none; opacity: .3; }
  .nf-diag__dot { animation: none; }
}

.nf-quicklinks { padding-top: clamp(2.4rem,5vw,3.6rem); padding-bottom: clamp(2.4rem,5vw,3.6rem); }
.nf-quick__label { font-size: .86rem; color: var(--text-faint); margin-bottom: 1rem; }
.nf-quick__row { display: flex; flex-wrap: wrap; gap: .7rem; }
.nf-quick__row a {
  font-size: .9rem; font-weight: 600; color: var(--text-soft);
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px;
  padding: .6rem 1.2rem; min-height: 44px; display: inline-flex; align-items: center;
  transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nf-quick__row a:hover { color: var(--text); border-color: var(--slate); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nf-quick__row a:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

@media (max-width: 860px) {
  .nf-hero__inner { grid-template-columns: 1fr; }
  .nf-hero__art { order: 2; margin-top: 2.4rem; }
  .nf-diag { margin-inline: auto; }
  .nf-mark { font-size: clamp(5rem, 24vw, 7rem); }
}

/* ==========================================================================
   Dark mode — semantic token overrides.
   Toggle: html[data-theme="dark"]
   Anti-FOUC: inline script in <head> reads localStorage('lgce-theme')
   and sets data-theme before first paint (see base.html).
   Toggle button: .theme-toggle injected by components.js.

   Structure: --ink (#16181c) stays as the darkest surface so
   .section--dark (which uses --ink) is still visually distinct from the
   main page background (--bg = #1d2025), preserving the same contrast
   hierarchy as light mode (intentionally-dark sections feel darker).
   ========================================================================== */
[data-theme="dark"] {
  --bg:         #1d2025;
  --bg-alt:     #23282f;
  --surface:    #282d37;
  --mist:       #2d3340;
  --paper:      #282d37;
  --text:       #e9ebee;
  --text-soft:  #b7bdc6;
  --text-faint: #8b95a0;   /* ~5.3:1 on --bg #1d2025 - keep >=4.5 (AA), it's used for small text */
  --border:     #303848;
  --shadow-sm:  0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22);
  --shadow:     0 6px 18px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.24);
  --shadow-lg:  0 22px 50px rgba(0,0,0,.62), 0 8px 18px rgba(0,0,0,.36);
}

/* ---- Header solid state ---- */
[data-theme="dark"] .site-header.is-solid {
  background: rgba(29,32,37,.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
@media (max-width: 640px) {
  [data-theme="dark"] .site-header.is-solid {
    background: rgba(29,32,37,.99);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---- Nav links on solid header adapt via --text but need the is-solid
   overide: the transparent-header rule gives them rgba(255,255,255,.92)
   which would revert to light on scroll if not overridden for dark mode. ---- */
[data-theme="dark"] .site-header.is-solid .nav a { color: var(--text); }
[data-theme="dark"] .site-header.is-solid .nav a:hover { color: #fff; }

/* ---- Pillar / service cards: brand gradient top-bar stays, base goes dark ---- */
[data-theme="dark"] .pillar-deck .pillar {
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) top left / 100% 4px no-repeat,
    linear-gradient(168deg, var(--field) 0%, rgba(29,32,37,0) 54%),
    var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] body[data-page="home"] .pillar-deck .pcard:nth-child(2) > .pillar {
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) top left / 100% 5px no-repeat,
    linear-gradient(168deg, var(--field) 0%, rgba(29,32,37,0) 62%),
    var(--surface);
  box-shadow: 0 26px 56px -22px rgba(241,145,11,.30), var(--shadow);
}

/* ---- Homepage pillars section: was white-to-near-white gradient ---- */
[data-theme="dark"] #pillars {
  background:
    radial-gradient(72% 55% at 50% -6%, rgba(241,145,11,.06), rgba(29,32,37,0) 66%),
    linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

/* ---- Product modal: image panel was plain white ---- */
[data-theme="dark"] .prod-modal__media { background: var(--bg-alt); }
[data-theme="dark"] .prod-modal__media .prod-modal__img img { mix-blend-mode: normal; }

/* ---- Product grid thumbnail: same white-photo-well issue as the modal
   (and the same fix) — was a stark white square in an otherwise dark grid. ---- */
[data-theme="dark"] .prod-card__img { background: var(--bg-alt); }
[data-theme="dark"] .prod-card__img--empty::before {
  background: radial-gradient(circle at 50% 45%, var(--surface) 0%, var(--bg-alt) 70%);
}

/* ---- Team showcase photo placeholders on dark ---- */
[data-theme="dark"] .tm2-photo { background: linear-gradient(155deg, var(--bg-alt), var(--surface)); }

/* ---- Mobile downloads tab-bar switcher ---- */
[data-theme="dark"] .mat-switcher {
  background: var(--surface);
  border-color: var(--border);
}

/* ---- Mobile catalog search gradient (toolbar) ---- */
@media (max-width: 768px) {
  [data-theme="dark"] .prod-toolbar {
    background: linear-gradient(180deg, rgba(241,145,11,.06) 0%, rgba(241,145,11,0) 56px), var(--bg);
  }
  [data-theme="dark"] [data-mat-panel="catalog"] .prod-search input {
    background: var(--surface);
  }
}

/* ---- var(--ink) is a fixed dark brand colour; it's invisible on dark
   backgrounds. Override hover/active text colour for interactive controls. ---- */
[data-theme="dark"] .cat-chip:hover,
[data-theme="dark"] .cat-chip[aria-pressed="true"],
[data-theme="dark"] .pg-seg:hover,
[data-theme="dark"] .pg-seg[aria-pressed="true"],
[data-theme="dark"] .dl-seg:hover,
[data-theme="dark"] .dl-seg[aria-pressed="true"],
[data-theme="dark"] .nf-seg:hover,
[data-theme="dark"] .nf-seg[aria-pressed="true"],
[data-theme="dark"] .prv-item:hover,
[data-theme="dark"] .case-fpill:hover { color: var(--text); }

/* ==========================================================================
   Theme toggle — pill switch (ported from 21st.dev "switch" variant)
   Spring-like cubic-bezier(.34,1.56,.64,1) replicates framer-motion spring.
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px 2px;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 999px;
}
.theme-toggle:focus-visible {
  outline: 3px solid var(--slate);
  outline-offset: 3px;
  border-radius: 999px;
}

/* The visible pill track */
.tt-track {
  position: relative;
  width: 52px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--bg-alt);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
  flex-shrink: 0;
}

/* Over transparent hero: glass treatment matching the lang-btn */
.site-header:not(.is-solid) .tt-track {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* The sliding thumb circle */
.tt-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1b1d21;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  /* Spring-like cubic-bezier for the bounce feel */
  transition:
    transform .42s cubic-bezier(.34,1.56,.64,1),
    background .3s var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
  will-change: transform;
}
[data-theme="dark"] .tt-thumb {
  transform: translateX(24px);
  background: #f0f2f4;
}
/* Over transparent header: thumb stays light so it's visible on dark hero */
.site-header:not(.is-solid) .tt-thumb {
  background: rgba(255,255,255,.9);
}
[data-theme="dark"] .site-header:not(.is-solid) .tt-thumb {
  background: #f0f2f4;
}

/* Sun icon (visible in light mode) */
.tt-sun {
  position: absolute;
  width: 12px;
  height: 12px;
  color: #f59e0b;
  opacity: 1;
  transform: rotate(0deg) scale(1);
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
/* Moon icon (visible in dark mode) */
.tt-moon {
  position: absolute;
  width: 11px;
  height: 11px;
  color: #475569;
  opacity: 0;
  transform: rotate(90deg) scale(.5);
  transition: opacity .2s var(--ease), transform .25s var(--ease);
}
[data-theme="dark"] .tt-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}
[data-theme="dark"] .tt-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  color: #334155;
}

/* Over transparent header: icon colours adapt for visibility */
.site-header:not(.is-solid) .tt-sun  { color: #1b1d21; }
.site-header:not(.is-solid) .tt-moon { color: #334155; }

@media (prefers-reduced-motion: reduce) {
  .tt-thumb { transition: transform .15s linear, background .15s linear; }
  .tt-sun, .tt-moon { transition: opacity .12s linear; }
}

/* ---- Lang button mode-hint (tiny sun/moon peek, passive affordance) ---- */
.lang-hint { position:relative; width:10px; height:10px; flex-shrink:0; }
.lang-hint svg { position:absolute; inset:0; width:10px; height:10px;
  transition:opacity .25s var(--ease); }
.lang-hint-sun { color:#f59e0b; opacity:.55; }
.lang-hint-moon { color:#94a3b8; opacity:0; }
[data-theme="dark"] .lang-hint-sun { opacity:0; }
[data-theme="dark"] .lang-hint-moon { opacity:.55; }
.lang[data-open="true"] .lang-hint { opacity:0; transition:opacity .15s var(--ease); pointer-events:none; }
.site-header:not(.is-solid) .lang-hint svg { color:rgba(255,255,255,.55); }

/* ---- Lang dropdown — separator + appearance row ---- */
/* brand-tinted separator: a hairline that fades in from the edges */
.lang-sep {
  height:1px; margin:.45rem .6rem;
  background: linear-gradient(90deg,
    rgba(255,0,0,0), rgba(255,0,0,.25) 28%, rgba(241,145,11,.25) 72%, rgba(241,145,11,0));
}
.lang-menu .lang-theme-row {
  justify-content:space-between; gap:.5rem;
  min-height:42px; padding:.5rem .6rem;
}
.lang-ti-sun { width:14px; height:14px; flex-shrink:0; color:#f59e0b; opacity:.6;
  transition:opacity .2s var(--ease), transform .25s var(--ease); }
.lang-ti-moon { width:13px; height:13px; flex-shrink:0; color:#475569; opacity:.3;
  transition:opacity .2s var(--ease), transform .25s var(--ease); }
[data-theme="dark"] .lang-ti-sun { opacity:.3; }
[data-theme="dark"] .lang-ti-moon { color:#94a3b8; opacity:.7; }
.lang-menu .lang-theme-row:hover .lang-ti-sun { opacity:1; transform: rotate(22deg); }
.lang-menu .lang-theme-row:hover .lang-ti-moon { opacity:.6; transform: rotate(-14deg); }
[data-theme="dark"] .lang-menu .lang-theme-row:hover .lang-ti-sun { opacity:.6; }
[data-theme="dark"] .lang-menu .lang-theme-row:hover .lang-ti-moon { opacity:1; }

/* glass menu: dark-mode surface + active colours that hold contrast on dark */
[data-theme="dark"] .lang-menu {
  background: rgba(40,45,55,.9);
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,.6),
    0 6px 18px -8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .lang-menu .flag { color: var(--text-soft); }
[data-theme="dark"] .lang-menu button[aria-current="true"] { color: var(--red); }
[data-theme="dark"] .lang-menu .lang-check { color: var(--red); }

/* ---- Partner marquee — dark mode logo swap ----
   Processed logos (assets/img/partners/<slug>-grey.png / -color.png) are dark
   marks built for the white site background; a flat CSS invert() isn't
   enough to make them read on a dark background, because it can't restore
   the alpha that the light-mode grey version already baked down to ~55%
   (thin/low-coverage marks, e.g. script wordmarks, would still look faint).
   The CMS instead generates a dedicated brightened pair (-grey-dark.png /
   -color-dark.png, see _cms/partners.py) with higher resting opacity, and
   this swaps to it in dark mode. Editors can opt a specific logo out in the
   CMS (Partners page), which renders .no-dark-invert — it then just keeps
   showing the light-mode pair unchanged. */
[data-theme="dark"] .partner-swap:not(.no-dark-invert) .ps-base,
[data-theme="dark"] .partner-swap:not(.no-dark-invert) .ps-color { opacity: 0; }
[data-theme="dark"] .partner-swap:not(.no-dark-invert) .ps-base-dark { opacity: 1; }
[data-theme="dark"] .partner-swap:not(.no-dark-invert):hover .ps-base-dark,
[data-theme="dark"] .partner-swap:not(.no-dark-invert).is-lit .ps-base-dark { opacity: 0; }
[data-theme="dark"] .partner-swap:not(.no-dark-invert):hover .ps-color-dark,
[data-theme="dark"] .partner-swap:not(.no-dark-invert).is-lit .ps-color-dark { opacity: 1; }

/* glossary term anchor: copied confirmation (KC-ROADMAP B4) */
.kc-term__anchor.is-copied { color: #2e7d3a; }

/* "Recently updated" strip on the LGCE-pedia hub (KC-ROADMAP B4) */
.kc-newest { padding: 1.6rem 0 .4rem; }
.kc-newest__title { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin: 0 0 .7rem; }
.kc-newest__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .7rem; }
.kc-newest__item { display: flex; flex-direction: column; gap: .2rem; text-decoration: none;
  border: 1px solid var(--border); border-radius: 12px; padding: .7rem .9rem;
  background: var(--paper); color: var(--text); transition: border-color .15s; }
.kc-newest__item:hover { border-color: var(--red); }
.kc-newest__type { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--red); }
.kc-newest__name { font-weight: 650; font-size: .95rem; line-height: 1.3; }
.kc-newest__date { font-size: .78rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; }

/* print: a guide page becomes a clean document (KC-ROADMAP B4) */
@media print {
  #site-header, #site-footer, .hero__canvas, .page-hero__veil, .page-hero__angle,
  .g-toc, .g-rel, .cta-band, .kc-preview { display: none !important; }
  body { background: #fff !important; color: #000; }
  .page-hero--article { background: none !important; color: #000; padding: 0 0 .5rem; }
  .page-hero--article .display { color: #000; font-size: 1.9rem; }
  .page-hero--article .breadcrumb, .page-hero--article .breadcrumb a,
  .page-hero--article .g-meta { color: #444; }
  .g-wrap { display: block; }
  .g-art { max-width: none; color: #000; }
  .g-art a { color: #000; text-decoration: underline; }
  .g-art a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .82em; color: #555; }
  .g-art h2, .g-art h3, .g-art figure, .g-art table { page-break-inside: avoid; }
  .g-art figure svg, .g-art img { max-width: 100% !important; }
}

/* reader feedback thumbs (KC-ROADMAP C3) */
.kc-fb { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: .9rem; border-top: 1px dashed var(--border); }
.g-wrap .kc-fb { max-width: 76ch; }
.kc-fb__q { font-size: .9rem; font-weight: 650; color: var(--text-soft); }
.kc-fb__btn { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; background: var(--paper); color: var(--text-soft);
  border: 1.5px solid var(--border); border-radius: 9px; cursor: pointer;
  transition: border-color .15s, color .15s; }
.kc-fb__btn svg { width: 17px; height: 17px; }
.kc-fb__btn:hover:not(:disabled) { border-color: var(--red); color: var(--text); }
.kc-fb__btn:disabled { cursor: default; opacity: .55; }
.kc-fb__btn.is-on { border-color: #2e7d3a; color: #2e7d3a; opacity: 1; }
.kc-fb__note { display: flex; gap: .5rem; align-items: flex-start; flex-basis: 100%;
  font-size: .88rem; color: var(--text-faint); }
.kc-fb__note textarea { flex: 1 1 auto; max-width: 46ch; font: inherit; font-size: .88rem;
  padding: .45rem .6rem; border: 1.5px solid var(--border); border-radius: 8px;
  background: var(--paper); color: var(--text); resize: vertical; }
.kc-fb__send { font: inherit; font-size: .85rem; font-weight: 650; cursor: pointer;
  color: var(--text); background: var(--paper); border: 1.5px solid var(--border);
  border-radius: 8px; padding: .45rem .85rem; }
.kc-fb__send:hover { border-color: var(--red); }
.faq-a .kc-fb { margin-top: .8rem; padding-top: .6rem; }
.faq-a .kc-fb .kc-fb__q { font-size: .82rem; }
.faq-a .kc-fb__btn { width: 32px; height: 29px; }
@media print { .kc-fb { display: none !important; } }