/* ==========================================================================
   SPOWER — visual system
   Built around the company's own mark: signal red on graphite and paper.
   No gradients, no glass, one accent, deliberate asymmetry.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  /* brand — sampled from the company logo */
  --red:        #c8202a;
  --red-deep:   #a4161d;
  --red-soft:   rgba(200, 32, 42, .12);

  --ink:        #15171a;   /* headings */
  --graphite:   #3d4044;   /* body text */
  --slate:      #6d7378;   /* secondary text */
  --hair:       #e2e0dc;   /* hairlines on paper */
  --hair-dark:  rgba(255, 255, 255, .14);

  --paper:      #ffffff;
  --sand:       #f4f2ef;   /* warm neutral band */
  --night:      #17191c;   /* dark band */
  --night-2:    #101214;

  /* type scale */
  --display:    clamp(2.6rem, 6.2vw, 5.4rem);
  --h1:         clamp(2.1rem, 4.4vw, 3.4rem);
  --h2:         clamp(1.6rem, 2.9vw, 2.35rem);
  --h3:         1.24rem;
  --lead:       clamp(1.05rem, 1.35vw, 1.22rem);

  --shell:      1280px;
  --gutter:     clamp(20px, 4vw, 56px);

  --ease:       cubic-bezier(.22, .61, .28, 1);
  --slow:       .65s var(--ease);
  --fast:       .22s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font: 400 16.5px/1.62 "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /* clip, not hidden: a sideways overflow never creates a scrollbar,
     but sticky and fixed children keep working */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-family: "Manrope", "IBM Plex Sans", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); letter-spacing: -.012em; }
p { margin: 0 0 1.05em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
ul, ol { padding-left: 20px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.shell-wide { width: min(100% - (var(--gutter) * 2), 1560px); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 18px; }

/* ------------------------------------------------------------ typography */
.display {
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: var(--display);
  line-height: .98; letter-spacing: -.035em; color: var(--ink); margin: 0;
}
.display .thin { font-weight: 300; }
.display .accent { color: var(--red); }

.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "IBM Plex Sans", sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--red);
}
.kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.kicker.plain::before { display: none; }

.lead { font-size: var(--lead); line-height: 1.55; color: var(--graphite); }
.muted { color: var(--slate); }
.measure { max-width: 62ch; }
.measure-tight { max-width: 46ch; }

/* dark context — .hero and .pagehead sit on the same near-black ground, so
   they inherit every dark-context rule instead of re-declaring them */
.night { background: var(--night); color: rgba(255, 255, 255, .72); }
.night h1, .night h2, .night h3, .night h4, .night .display,
.hero h1, .hero h2, .hero h3, .hero h4, .hero .display,
.pagehead h1, .pagehead h2, .pagehead .display { color: #fff; }
.night .kicker, .hero .kicker, .pagehead .kicker { color: #ff5f6a; }
.night .muted, .hero .muted, .pagehead .muted { color: rgba(255, 255, 255, .5); }
.night .lead, .hero .lead, .pagehead .lead { color: rgba(255, 255, 255, .74); }
.night .statement, .hero .statement, .pagehead .statement { color: #fff; }
.sand { background: var(--sand); }

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 26px; border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg);
  font: 500 15px "IBM Plex Sans", sans-serif; cursor: pointer; overflow: hidden;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.btn span { position: relative; z-index: 1; }
.btn svg { position: relative; z-index: 1; transition: transform var(--fast); flex: none; }
.btn:hover svg { transform: translateX(4px); }
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--red); transform: scaleX(0);
  transform-origin: right; transition: transform .38s var(--ease); z-index: 0;
}
.btn:hover::after { transform: scaleX(1); transform-origin: left; }
.btn:hover { border-color: var(--red); color: #fff; }

.btn-red { --btn-bg: var(--red); --btn-bd: var(--red); }
.btn-red::after { background: var(--ink); }
.btn-red:hover { border-color: var(--ink); }

.btn-line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--hair); }
.btn-line:hover { color: #fff; }

.btn-ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); }

/* text link with rule */
.tlink {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 500; font-size: 15px;
  color: var(--ink); padding-bottom: 3px; position: relative;
}
.tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .34s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink svg { transition: transform var(--fast); }
.tlink:hover svg { transform: translateX(4px); }
.night .tlink { color: #fff; }

/* ---------------------------------------------------------------- header */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead::before {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  opacity: 0; transition: opacity .35s var(--ease);
}
.masthead.solid::before { opacity: 1; }
.masthead.solid { border-bottom-color: var(--hair); }

.masthead-inner {
  position: relative; display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  height: 92px; transition: height .35s var(--ease);
}
.masthead.solid .masthead-inner { height: 74px; }

.brand { display: flex; align-items: center; gap: 15px; flex: none; }
.brand-mark { display: block; height: 46px; width: auto; transition: height .35s var(--ease); }
.masthead.solid .brand-mark { height: 38px; }
.brand-mark.light { display: none; }
.masthead.over-dark:not(.solid) .brand-mark.dark { display: none; }
.masthead.over-dark:not(.solid) .brand-mark.light { display: block; }
/* descriptor beside the mark, separated by a hairline rather than repeating the name */
.brand-words { display: flex; padding-left: 15px; border-left: 1px solid var(--hair); }
.brand-words span {
  font-size: 10px; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase;
  color: var(--slate); max-width: 15ch;
  /* the global break-word would split "TECHNOLOGY" across two lines */
  overflow-wrap: normal; word-break: keep-all;
}
.masthead.over-dark:not(.solid) .brand-words { border-left-color: rgba(255,255,255,.22); }
.masthead.over-dark:not(.solid) .brand-words span { color: rgba(255,255,255,.62); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-link {
  position: relative; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--graphite);
  transition: color var(--fast);
}
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.current::after { transform: scaleX(1); transform-origin: left; }
.nav-link.current { color: var(--ink); font-weight: 600; }
.masthead.over-dark:not(.solid) .nav-link { color: rgba(255,255,255,.78); }
.masthead.over-dark:not(.solid) .nav-link:hover,
.masthead.over-dark:not(.solid) .nav-link.current { color: #fff; }

.nav-tools { display: flex; align-items: center; gap: 10px; flex: none; }
.lang-switch { display: flex; gap: 1px; }
.lang-switch a {
  padding: 6px 9px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); transition: color var(--fast), background var(--fast);
}
.lang-switch a.on { color: var(--ink); background: var(--sand); }
.masthead.over-dark:not(.solid) .lang-switch a { color: rgba(255,255,255,.55); }
.masthead.over-dark:not(.solid) .lang-switch a.on { color: #fff; background: rgba(255,255,255,.14); }

.nav-cta { padding: 12px 22px; font-size: 14.5px; }
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--hair); background: transparent;
  cursor: pointer; align-items: center; justify-content: center; color: var(--ink);
}
.masthead.over-dark:not(.solid) .burger { border-color: rgba(255,255,255,.3); color: #fff; }

/* the Solutions/Products mega panel was removed: both pages now carry their
   full list in one screen, so the dropdown only repeated the destination */

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 130; background: var(--night); color: #fff;
  transform: translateY(-100%); transition: transform .5s var(--ease); overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.drawer-close { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.25); background: none; color: #fff; cursor: pointer; }
.drawer-nav { display: flex; flex-direction: column; padding: 20px 0 40px; }
.drawer-nav a {
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 7vw, 2.4rem);
  letter-spacing: -.03em; color: #fff; padding: 14px 0; border-bottom: 1px solid var(--hair-dark);
  opacity: 0; transform: translateY(14px);
}
.drawer.open .drawer-nav a { animation: drawerIn .5s var(--ease) forwards; }
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer-foot { margin-top: auto; padding: 28px 0 40px; border-top: 1px solid var(--hair-dark); display: grid; gap: 14px; }
.drawer-foot a { color: rgba(255,255,255,.8); font-size: 16px; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; background: var(--night); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; transform: scale(1.06); animation: heroZoom 14s var(--ease) forwards; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(23,25,28,.94) 0%, rgba(23,25,28,.72) 55%, rgba(23,25,28,.45) 100%); }

/* Ground used when there is no photograph. No rulings and no diagonal block:
   the only graphic is the company's own S, set very large, very quiet and
   bleeding off the right edge, over a soft tonal fall. */
.hero-plate { position: absolute; inset: 0; overflow: hidden; }
.hero-plate::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(200, 32, 42, .20) 0%, rgba(200, 32, 42, 0) 62%),
    radial-gradient(90% 70% at 8% 92%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #1c1f23 0%, #17191c 46%, #101214 100%);
}
.hero-plate::after {
  content: ""; position: absolute; right: -11%; top: 44%; translate: 0 -50%;
  width: min(54vw, 620px); aspect-ratio: 1075 / 902;
  background-image: var(--mark, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .06;
}

/* neither width:100% nor flex-grow here — both would override the .shell-wide
   gutter and push the whole composition flush against the viewport edge */
.hero-inner { position: relative; z-index: 2; padding: clamp(120px, 16vh, 190px) 0 clamp(40px, 6vh, 64px); flex: 0 1 auto; }
.hero-title { max-width: 18ch; margin-bottom: 26px; }
/* the mask that drives the line-by-line entrance would otherwise cut the
   cedilla of C/S and the descenders of g/y in Turkish and Russian */
.hero-title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero-title .line > span { display: block; transform: translateY(105%); animation: lineUp .9s var(--ease) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: .1s; }
.hero-title .line:nth-child(3) > span { animation-delay: .2s; }
@keyframes lineUp { to { transform: none; } }
.hero-sub { max-width: 52ch; color: rgba(255,255,255,.76); font-size: var(--lead); margin-bottom: 34px; opacity: 0; animation: fadeUp .8s var(--ease) .38s forwards; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; opacity: 0; animation: fadeUp .8s var(--ease) .5s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero-foot {
  position: relative; z-index: 2; border-top: 1px solid var(--hair-dark);
  display: grid; grid-template-columns: repeat(4, 1fr); opacity: 0; animation: fadeUp .8s var(--ease) .62s forwards;
}
.hero-foot div { padding: 22px 26px 26px 0; }
.hero-foot dt { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.hero-foot dd { margin: 0; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hero-scroll i { display: block; width: 1px; height: 46px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; inset: 0; background: #fff; animation: scrollHint 2.4s var(--ease) infinite; }
@keyframes scrollHint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

.hero-dots { position: absolute; left: var(--gutter); bottom: 34px; z-index: 4; display: flex; gap: 10px; }
.hero-dots button { width: 34px; height: 2px; padding: 0; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }
.hero-dots button.on { background: var(--red); }

/* ---------------------------------------------------------------- blocks */
.block { padding: clamp(64px, 9vw, 130px) 0; }
.block.snug { padding: clamp(48px, 6vw, 84px) 0; }
.block.flush-top { padding-top: 0; }

.head-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.head-split .display, .head-split h2 { margin: 0; }
.head-split p { margin: 0; }

/* statement: oversized editorial type */
.statement { font-family: "Manrope", sans-serif; font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.9rem); line-height: 1.22; letter-spacing: -.025em; color: var(--ink); max-width: 20ch; }
.statement b { font-weight: 800; }
.statement .accent { color: var(--red); }

/* index rows — services, products */
.index { border-top: 1px solid var(--hair); }
.index-row {
  display: grid; grid-template-columns: 78px minmax(0, 4fr) minmax(0, 6fr) auto; gap: clamp(16px, 3vw, 44px);
  align-items: baseline; padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--hair);
  position: relative; transition: background var(--fast);
}
.index-row::before {
  content: ""; position: absolute; left: -24px; right: -24px; top: 0; bottom: 0; background: var(--sand);
  opacity: 0; transition: opacity var(--fast); z-index: -1;
}
.index-row:hover::before { opacity: 1; }
.index-num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; color: var(--red); letter-spacing: .06em; }
.index-row h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.index-row p { margin: 0; font-size: 15.5px; color: var(--slate); }
.index-meta { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.index-row .go { width: 34px; height: 34px; border: 1px solid var(--hair); display: grid; place-items: center; color: var(--ink); transition: all var(--fast); }
.index-row:hover .go { background: var(--red); border-color: var(--red); color: #fff; transform: translateX(4px); }
.night .index, .night .index-row { border-color: var(--hair-dark); }
.night .index-row p { color: rgba(255,255,255,.6); }
.night .index-row::before { background: rgba(255,255,255,.05); }
.night .index-row .go { border-color: var(--hair-dark); color: #fff; }

/* alternating editorial rows */
.alt-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: center; padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--hair); }
.alt-row .alt-media { grid-column: 1 / span 6; }
.alt-row .alt-body { grid-column: 8 / span 5; }
.alt-row:nth-child(even) .alt-media { grid-column: 7 / span 6; order: 2; }
.alt-row:nth-child(even) .alt-body { grid-column: 1 / span 5; order: 1; }
.alt-media figure { position: relative; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.alt-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.alt-row:hover .alt-media img { transform: scale(1.04); }
.alt-plate { position: relative; aspect-ratio: 4 / 3; background: var(--night); overflow: hidden; display: grid; place-items: center; }
.alt-plate span { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(3rem, 7vw, 5.4rem); color: rgba(255,255,255,.08); letter-spacing: -.04em; }
.alt-plate::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 4px; background: var(--red); }
.alt-body .index-num { display: block; margin-bottom: 14px; }
.alt-body h2 { margin-bottom: 14px; }

/* feature grid — asymmetric */
.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.tile { position: relative; overflow: hidden; background: var(--night); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .9s var(--ease), opacity .5s var(--ease); }
.tile:hover img { transform: scale(1.05); opacity: .68; }
/* drawn covers are already dark artwork and do not need dimming */
.tile.drawn img { opacity: .92; }
.tile.drawn:hover img { opacity: 1; }
.tile.drawn::after { background: linear-gradient(to top, rgba(14,16,18,.94) 8%, rgba(14,16,18,.28) 52%, rgba(14,16,18,0) 100%); }
.tile-body { position: relative; z-index: 2; padding: clamp(20px, 2.4vw, 34px); }
.tile-body .meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.tile h3 { color: #fff; margin: 0 0 8px; }
.tile p { margin: 0; color: rgba(255,255,255,.7); font-size: 15px; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,18,20,.92) 12%, rgba(16,18,20,.25) 62%, rgba(16,18,20,.1) 100%); z-index: 1; }
/* structural fill for tiles with no photograph, so an empty tile still reads
   as a designed surface rather than a missing image */
.tile-grid { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.tile-grid::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(100% 90% at 88% 10%, rgba(200, 32, 42, .22) 0%, rgba(200, 32, 42, 0) 64%),
    linear-gradient(155deg, #1f2226 0%, #17191c 62%, #111315 100%);
}
.tile-grid::after {
  content: ""; position: absolute; right: -8%; top: 44%; translate: 0 -50%;
  width: 52%; aspect-ratio: 1075 / 902;
  background-image: var(--mark, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .1; transition: opacity .5s var(--ease), translate .8s var(--ease);
}
.tile:hover .tile-grid::after { opacity: .16; translate: -3% -50%; }

.tile.plain { background: var(--sand); color: var(--graphite); }
.tile.plain .tile-grid::before {
  background:
    radial-gradient(100% 90% at 88% 10%, rgba(200, 32, 42, .08) 0%, rgba(200, 32, 42, 0) 62%),
    linear-gradient(155deg, #faf9f7 0%, var(--sand) 60%, #ece9e4 100%);
}
.tile.plain .tile-grid::after { opacity: .07; }
.tile.plain::after { display: none; }
.tile.plain h3 { color: var(--ink); }
.tile.plain p { color: var(--slate); }
.tile.plain .meta { color: var(--slate); }

.tile-xl { grid-column: span 7; grid-row: span 2; min-height: clamp(360px, 46vw, 560px); }
.tile-md { grid-column: span 5; min-height: clamp(240px, 22vw, 268px); }
.tile-sm { grid-column: span 4; min-height: 240px; }
.tile-wide { grid-column: span 8; min-height: 280px; }
.tile-narrow { grid-column: span 4; min-height: 280px; }
.tile-half { grid-column: span 6; min-height: 300px; }

/* video */
/* a single video is a component on the page, not a full-width billboard */
.video-feature {
  display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 46px); align-items: center;
}
.video-meta h2, .video-meta h3 { margin: 0 0 12px; font-size: clamp(1.15rem, 1.9vw, 1.6rem); }
.video-meta p { margin: 0 0 18px; font-size: 15.5px; max-width: 46ch; }
.night .video-meta p { color: rgba(255, 255, 255, .64); }
.video-meta .tlink { background: none; border: 0; padding: 0 0 3px; cursor: pointer; font-family: inherit; }

.video-hero { position: relative; display: block; overflow: hidden; background: var(--night-2); aspect-ratio: 16 / 9; }
.video-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform .9s var(--ease), opacity .4s var(--ease); }
.video-hero:hover img { transform: scale(1.03); opacity: .85; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(52px, 5vw, 68px); height: clamp(52px, 5vw, 68px); border-radius: 50%;
  background: var(--red); display: grid; place-items: center; color: #fff; z-index: 2;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.video-hero:hover .video-play { transform: translate(-50%, -50%) scale(1.07); background: var(--red-deep); }
.video-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 3vw, 38px); background: linear-gradient(to top, rgba(16,18,20,.92), transparent); }
.video-caption h3 { color: #fff; margin: 0 0 6px; font-size: clamp(1.1rem, 2vw, 1.6rem); }
.video-caption p { color: rgba(255,255,255,.7); margin: 0; font-size: 15px; }
.video-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.video-card { display: block; }
.video-thumb { position: relative; overflow: hidden; background: var(--night-2); aspect-ratio: 16 / 9; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-thumb .video-play { width: 54px; height: 54px; }
.video-card h3 { font-size: 1.02rem; margin: 16px 0 4px; }
.video-card p { font-size: 14.5px; color: var(--slate); margin: 0; }

/* video modal */
.vmodal { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(12,14,16,.94); padding: clamp(16px, 5vw, 60px); }
.vmodal.open { display: grid; place-items: center; }
.vmodal-inner { width: min(100%, 880px); }
.vmodal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vmodal-frame iframe { width: 100%; height: 100%; border: 0; }
.vmodal-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; color: #fff; }
.vmodal-bar h3 { color: #fff; margin: 0; font-size: 1.1rem; }
.vmodal-close { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; cursor: pointer; flex: none; }

/* reference wall — the emblems are the point here, so they get real room:
   a white plate per client, the logo large on it, the name spelled out below */
.refs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ref-card {
  background: #fff; border: 1px solid var(--hair);
  padding: clamp(26px, 2.6vw, 34px) 22px clamp(22px, 2.2vw, 28px);
  display: grid; justify-items: center; align-content: start; gap: 16px; text-align: center;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ref-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20, 22, 26, .09); }
.ref-plate { min-height: clamp(92px, 9vw, 120px); display: grid; place-items: center; width: 100%; }
/* the cap is a length, not a percentage: a percentage max-height does not
   resolve reliably against a grid area and tall emblems overran the name */
.ref-plate img {
  max-height: clamp(84px, 8.4vw, 112px); max-width: 82%; width: auto; height: auto;
  filter: grayscale(1) contrast(1.04);
  transition: filter .45s var(--ease), transform .45s var(--ease);
}
.ref-card:hover .ref-plate img { filter: none; transform: scale(1.04); }
/* monogram shown when the institution has no usable mark on file */
.ref-plate b {
  display: grid; place-items: center; width: 84px; height: 84px;
  border: 1px solid var(--hair);
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.7rem;
  letter-spacing: .04em; color: var(--ink); line-height: 1;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.ref-card:hover .ref-plate b { border-color: var(--red); color: var(--red); }
.refs.on-dark .ref-plate b { border-color: var(--hair-dark); color: #fff; }
.refs.on-dark .ref-card:hover .ref-plate b { border-color: var(--red); color: var(--red); }
.ref-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
.ref-note { font-size: 13px; line-height: 1.5; color: var(--slate); }

/* the same wall on a dark band */
.refs.on-dark .ref-card { background: rgba(255, 255, 255, .05); border-color: var(--hair-dark); }
.refs.on-dark .ref-card:hover { background: #fff; border-color: #fff; }
.refs.on-dark .ref-plate img { filter: grayscale(1) brightness(2.2) contrast(.7); opacity: .72; }
.refs.on-dark .ref-card:hover .ref-plate img { filter: none; opacity: 1; }
.refs.on-dark .ref-name { color: #fff; }
.refs.on-dark .ref-card:hover .ref-name { color: var(--ink); }
.refs.on-dark .ref-note { color: rgba(255, 255, 255, .55); }
.refs.on-dark .ref-card:hover .ref-note { color: var(--slate); }

/* service ledger — staggered two-column entries, no leading numerals, so it
   never reads as a second copy of the numbered operations index */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 84px); align-items: start; }
/* the offset lives on the column, not the item, so it never fights the reveal
   animation (which owns the item's transform) */
.ledger-col:nth-child(2) { margin-top: 58px; }
.ledger-item {
  position: relative; display: block; padding: clamp(26px, 2.6vw, 34px) 0 clamp(28px, 3vw, 38px);
  border-bottom: 1px solid var(--hair);
}
.ledger-col > .ledger-item:first-child { padding-top: 0; }
.ledger-rule { display: block; width: 34px; height: 3px; background: var(--red); margin-bottom: 20px; transition: width .45s var(--ease); }
.ledger-item:hover .ledger-rule { width: 76px; }
.ledger-item h3 { margin: 0 0 10px; font-size: clamp(1.2rem, 1.9vw, 1.5rem); transition: color var(--fast); }
.ledger-item:hover h3 { color: var(--red); }
.ledger-item p { margin: 0; color: var(--slate); font-size: 15.5px; max-width: 42ch; }
.ledger-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.ledger-foot em {
  font-style: normal; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--hair); padding: 5px 11px;
}
.ledger-foot i { display: inline-flex; color: var(--red); transform: translateX(-6px); opacity: 0; transition: all .4s var(--ease); }
.ledger-item:hover .ledger-foot i { transform: none; opacity: 1; }
.ledger + * { margin-top: 46px; }

.card-label {
  margin: 16px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red);
}
.card-label:first-of-type { margin-top: 8px; }

/* oversized section numeral on the operations page */
.sol-num {
  display: block; margin-bottom: 18px;
  font-family: "Manrope", sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.04em;
  color: var(--red); opacity: .34;
}
.night .sol-num { opacity: .6; }

/* channel panel — shown instead of an empty player when the video library
   has no entries yet */
.channel-panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(20px, 3vw, 40px);
  border: 1px solid var(--hair-dark); padding: clamp(26px, 3vw, 40px);
  background: rgba(255, 255, 255, .03);
}
.channel-mark {
  width: 76px; height: 76px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--red); color: var(--red); border-radius: 50%;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.channel-panel:hover .channel-mark { background: var(--red); color: #fff; }
.channel-name {
  display: block; font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: 1.15rem; color: #fff; margin-bottom: 6px;
}
.channel-body p { margin: 0; color: rgba(255, 255, 255, .62); font-size: 15.5px; max-width: 56ch; }

/* catalogue — parallel entries in two columns, no sequence numbers */
.catalogue {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 5vw, 80px);
  border-top: 1px solid var(--hair);
}
.cat-item {
  position: relative; display: block; padding: 24px 0 26px 24px;
  border-bottom: 1px solid var(--hair);
}
.cat-item::before {
  content: ""; position: absolute; left: 0; top: 33px; width: 9px; height: 9px;
  background: var(--red); opacity: 0; transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cat-item:hover::before { opacity: 1; transform: none; }
.cat-item h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: 1.16rem; transition: color var(--fast), transform .35s var(--ease);
}
.cat-item h3 svg { opacity: 0; transform: translateX(-6px); transition: all .35s var(--ease); color: var(--red); }
.cat-item:hover h3 { color: var(--red); transform: translateX(4px); }
.cat-item:hover h3 svg { opacity: 1; transform: none; }
.cat-item p { margin: 0; color: var(--slate); font-size: 15px; max-width: 46ch; }
.cat-brands {
  display: block; margin-top: 12px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); opacity: .55;
}

/* brand table */
.brand-table { border-top: 1px solid var(--hair); }
.brand-line { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 40px); align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.brand-line b { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.brand-line span { font-size: 15px; color: var(--slate); }
.brand-line .ext { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* facts / stats */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); }
.fact { padding: 28px 24px 30px 0; border-right: 1px solid var(--hair); }
.fact:last-child { border-right: 0; }
.fact b { display: block; font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); margin-bottom: 8px; }
.fact span { font-size: 14px; color: var(--slate); }
.night .facts, .night .fact { border-color: var(--hair-dark); }
.night .fact b { color: #fff; }
.night .fact span { color: rgba(255,255,255,.55); }

/* timeline */
.timeline { border-left: 1px solid var(--hair); padding-left: clamp(24px, 4vw, 48px); }
.tl-item { position: relative; padding-bottom: clamp(28px, 4vw, 44px); }
.tl-item::before { content: ""; position: absolute; left: calc(-1 * clamp(24px, 4vw, 48px) - 4px); top: 9px; width: 7px; height: 7px; background: var(--red); }
.tl-item b { display: block; font-family: "Manrope", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.tl-item p { margin: 0; color: var(--slate); font-size: 15.5px; }

/* accordion */
.acc { border-top: 1px solid var(--hair); }
.acc-item { border-bottom: 1px solid var(--hair); }
.acc-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 clamp(1rem, 1.5vw, 1.15rem) "Manrope", sans-serif; color: var(--ink); letter-spacing: -.01em;
}
.acc-q i { flex: none; width: 22px; height: 22px; position: relative; margin-top: 3px; }
.acc-q i::before, .acc-q i::after { content: ""; position: absolute; background: var(--red); transition: transform .3s var(--ease); }
.acc-q i::before { left: 0; right: 0; top: 10px; height: 2px; }
.acc-q i::after { top: 0; bottom: 0; left: 10px; width: 2px; }
.acc-item.open .acc-q i::after { transform: scaleY(0); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.acc-a-inner { padding: 0 60px 26px 0; color: var(--graphite); }
.acc-a-inner p:last-child { margin-bottom: 0; }
.night .acc, .night .acc-item { border-color: var(--hair-dark); }
.night .acc-q { color: #fff; }
.night .acc-a-inner { color: rgba(255,255,255,.7); }

/* page masthead */
.pagehead { position: relative; background: var(--night); color: #fff; padding: clamp(150px, 20vh, 220px) 0 clamp(50px, 7vw, 86px); overflow: hidden; }
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(110% 100% at 88% 6%, rgba(200, 32, 42, .18) 0%, rgba(200, 32, 42, 0) 60%),
    linear-gradient(160deg, #1c1f23 0%, #17191c 60%, #131518 100%);
}
.pagehead::after {
  content: ""; position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: min(46vw, 480px); aspect-ratio: 1075 / 902;
  background-image: var(--mark, none);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: .07;
}
.pagehead .shell { position: relative; z-index: 2; }
.crumbs { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: rgba(255,255,255,.5); transition: color var(--fast); }
.crumbs a:hover { color: #fff; }
.pagehead h1 { margin-bottom: 16px; max-width: 20ch; }
.pagehead p { color: rgba(255,255,255,.72); font-size: var(--lead); max-width: 60ch; margin: 0; }
.pagehead-media { position: absolute; inset: 0; z-index: 0; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }

/* prose */
.prose { max-width: 70ch; font-size: 17px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-top: 1.8em; }
.prose h3 { font-size: 1.16rem; margin-top: 1.7em; }
.prose p { margin-bottom: 0; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: .4em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose img { margin: 1.6em 0; }
.prose a { color: var(--red); border-bottom: 1px solid currentColor; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-card { border-top: 2px solid var(--ink); padding-top: 22px; margin-bottom: 34px; }
.contact-card h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-family: "IBM Plex Sans", sans-serif; font-weight: 600; margin-bottom: 12px; }
.contact-card p { margin: 0 0 6px; font-size: 16.5px; color: var(--ink); white-space: pre-line; }
.contact-card a { color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color var(--fast); }
.contact-card a:hover { border-color: var(--red); color: var(--red); }
.map-frame { position: relative; overflow: hidden; background: var(--sand); border: 1px solid var(--hair); }
.map-frame iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block; filter: grayscale(1) contrast(.92); transition: filter .5s var(--ease); }
.map-frame:hover iframe { filter: none; }
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-top: 1px solid var(--hair); background: var(--paper); flex-wrap: wrap; }
.map-bar span { font-size: 14.5px; color: var(--slate); }

/* form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { margin-bottom: 20px; }
.field.wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent;
  color: var(--ink); font: 400 16.5px "IBM Plex Sans", sans-serif; transition: border-color var(--fast);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.hp { position: absolute; left: -9999px; }
.notice { padding: 16px 20px; border-left: 3px solid; margin-bottom: 24px; font-size: 15.5px; }
.notice.ok { border-color: #1c6b46; background: #f0f7f3; color: #17542f; }
.notice.err { border-color: var(--red); background: #fdf2f2; color: var(--red-deep); }
.notice ul { margin: 8px 0 0; padding-left: 18px; }

/* CTA band */
.cta-band { background: var(--red); color: #fff; }
.cta-band .shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: clamp(44px, 6vw, 76px) 0; }
.cta-band h2 { color: #fff; margin: 0 0 10px; max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,.82); margin: 0; max-width: 56ch; }
.cta-band .btn { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.cta-band .btn::after { background: var(--ink); }
.cta-band .btn:hover { color: #fff; border-color: var(--ink); }

/* ==========================================================================
   FLAT SECTIONS — solutions, services and products have no detail pages.
   Each record is a terminal entry on its own listing page, addressed by an
   anchor. Nothing here links onward, so nothing invites a second click that
   would only repeat what is already on screen.
   ========================================================================== */

/* an anchored entry must not slide under the fixed masthead when jumped to */
.anchored { scroll-margin-top: 104px; }

/* --- solutions: numbered editorial bands -------------------------------- */
.domains { border-top: 1px solid var(--hair); }
.domain {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 88px) minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 4vw, 64px); align-items: start;
  padding: clamp(34px, 4.6vw, 64px) 0; border-bottom: 1px solid var(--hair);
}
/* the wash sits behind the row and bleeds past the shell gutter, so a wide
   entry still reads as one band rather than a boxed card */
.domain::before {
  content: ""; position: absolute; left: calc(var(--gutter) * -.5); right: calc(var(--gutter) * -.5);
  top: 0; bottom: 0; background: var(--sand); opacity: 0;
  transition: opacity var(--fast); z-index: -1;
}
.domain:hover::before { opacity: 1; }
.domain-num {
  font-family: "Manrope", sans-serif; font-weight: 800; line-height: 1;
  font-size: clamp(1.9rem, 3.4vw, 3rem); letter-spacing: -.04em;
  color: var(--red); opacity: .32; transition: opacity var(--fast);
}
.domain:hover .domain-num { opacity: 1; }
.domain h2 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.95rem); }
.domain-rule { display: block; width: 34px; height: 3px; background: var(--red); margin-top: 18px; transition: width .45s var(--ease); }
.domain:hover .domain-rule { width: 78px; }
.domain p { margin: 0; color: var(--graphite); font-size: 16.5px; line-height: 1.62; max-width: 58ch; }
.domain figure { margin: 22px 0 0; overflow: hidden; background: var(--sand); }
.domain figure img { width: 100%; height: auto; display: block; }

/* --- services: a process spine ------------------------------------------ */
/* services genuinely run in order (consulting → configuration → supply →
   installation → engineering → support), so they are drawn as one continuous
   line rather than as parallel cards */
.spine { position: relative; display: grid; gap: 0; }
.spine::before {
  content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 1px;
  background: var(--hair);
}
.stage {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 56px); align-items: start;
  padding: clamp(28px, 3.6vw, 48px) 0 clamp(28px, 3.6vw, 48px) clamp(34px, 5vw, 58px);
}
.stage + .stage { border-top: 1px solid var(--hair); }
/* the dot is drawn on the row, not the spine, so it stays aligned with the
   heading no matter how tall the entry grows */
.stage::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(28px, 3.6vw, 48px) + 9px);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--red);
  transition: background var(--fast), transform var(--fast), box-shadow var(--fast);
}
/* the first station is filled, so the eye finds where the sequence starts */
.stage:first-child::before { background: var(--red); }
.stage:hover::before { background: var(--red); transform: scale(1.2); box-shadow: 0 0 0 4px var(--red-soft); }
.stage-step {
  display: block; margin-bottom: 12px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.stage h2 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
.stage-metric {
  display: inline-block; margin-top: 16px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--hair); padding: 5px 11px;
}
.stage p { margin: 0; color: var(--graphite); font-size: 16.5px; line-height: 1.62; max-width: 56ch; }
.stage figure { margin: 20px 0 0; overflow: hidden; background: var(--sand); }
.stage figure img { width: 100%; height: auto; display: block; }

/* --- products: a dense catalogue index ---------------------------------- */
/* forty-plus parallel supply groups: a two-column ledger keeps the page
   scannable without turning each line into a card */
.ledger-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 76px); align-items: start; }
.ledger-index > div { border-top: 1px solid var(--hair); }
.cat-entry { position: relative; display: block; padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--hair); }
.cat-entry h3 { margin: 0 0 8px; font-size: 1.12rem; display: flex; align-items: baseline; gap: 12px; }
.cat-entry h3::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 2px; background: var(--red);
  transform: translateY(-.28em); transition: width .4s var(--ease);
}
.cat-entry:hover h3::before { width: 40px; }
.cat-entry p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--slate); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cat-chips span {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--slate); border: 1px solid var(--hair); padding: 3px 9px;
  transition: border-color var(--fast), color var(--fast);
}
.cat-entry:hover .cat-chips span { border-color: var(--red); color: var(--red); }

/* --- brand wall with marks ---------------------------------------------- */
/* brands carry logos now; the ones without a mark fall back to their wordmark
   so the grid never shows a hole */
.marks { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.mark {
  display: grid; place-items: center; gap: 10px; text-align: center;
  min-height: 132px; padding: 22px 16px;
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  transition: background var(--fast);
}
.mark:hover { background: var(--sand); }
.mark img {
  max-height: 46px; max-width: 78%; width: auto; height: auto;
  filter: grayscale(1) contrast(1.04); opacity: .78;
  transition: filter .45s var(--ease), opacity .45s var(--ease);
}
.mark:hover img { filter: none; opacity: 1; }
.mark b { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.3; }
.mark span { font-size: 12px; line-height: 1.45; color: var(--slate); }
a.mark:hover b { color: var(--red); }

/* ==========================================================================
   COPY DETERRENCE — pairs with the handlers in site.js.
   A deterrent against casual copying, not a protection: the browser has to
   receive the text and the image files in order to display them at all.
   Form fields stay fully selectable so the contact form remains usable.
   ========================================================================== */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* an image inside a link must stay clickable, so the block above is lifted
   wherever the picture itself is the control */
a img, button img, .mark img, label img { pointer-events: auto; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--night); color: rgba(255,255,255,.66); padding-top: clamp(56px, 7vw, 92px); font-size: 15px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr); gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
.footer-brand img { height: 58px; width: auto; max-width: 220px; object-fit: contain; object-position: left; margin-bottom: 22px; }
.footer-brand p { max-width: 38ch; color: rgba(255,255,255,.6); font-size: 14.5px; }
.footer h4 { color: #fff; font-family: "IBM Plex Sans", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: rgba(255,255,255,.66); transition: color var(--fast), padding-left var(--fast); }
.footer-links a:hover { color: #fff; padding-left: 5px; }
.footer-contact p { margin: 0 0 12px; white-space: pre-line; color: rgba(255,255,255,.66); font-size: 14.5px; }
.footer-contact a { color: rgba(255,255,255,.85); }
.footer-map-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 3px; }
.footer-map-link:hover { border-color: var(--red); }
.footer-social { display: flex; gap: 8px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border: 1px solid var(--hair-dark); display: grid; place-items: center; color: rgba(255,255,255,.75); transition: all var(--fast); }
.footer-social a:hover { border-color: var(--red); background: var(--red); color: #fff; }
.footer-bottom { border-top: 1px solid var(--hair-dark); padding: 20px 0 28px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.42); }
.footer-bottom a { color: rgba(255,255,255,.6); }

/* pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 54px; }
.pager a, .pager span { min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--hair); font-size: 15px; transition: all var(--fast); }
.pager a:hover { border-color: var(--ink); }
.pager .on { background: var(--ink); border-color: var(--ink); color: #fff; }

.empty-note { padding: clamp(40px, 6vw, 70px); border: 1px dashed var(--hair); text-align: center; color: var(--slate); }

/* --------------------------------------------------------------- motion
   Every hidden starting state is scoped to .js, so a visitor whose JavaScript
   never runs sees the finished page instead of blank sections. */
.js [data-reveal] { opacity: 0; transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js [data-reveal="up"]    { transform: translateY(26px); }
.js [data-reveal="right"] { transform: translateX(-28px); }
.js [data-reveal="scale"] { transform: scale(.97); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* The wipe is done with a curtain rather than clip-path on the element itself:
   a fully clipped element reports zero intersection, so IntersectionObserver
   would never fire and the section would stay invisible for good. */
[data-reveal="clip"] { position: relative; }
.js [data-reveal="clip"] { opacity: 1; }
.js [data-reveal="clip"]::before {
  content: ""; position: absolute; inset: -1px; z-index: 6; pointer-events: none;
  background: var(--curtain, var(--paper));
  transform-origin: bottom; transition: transform .9s var(--ease);
}
.js [data-reveal="clip"].in::before { transform: scaleY(0); }
.night { --curtain: var(--night); }
.sand  { --curtain: var(--sand); }

.js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .1s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .34s; }
.stagger.in > *:nth-child(7) { transition-delay: .4s; }
.stagger.in > *:nth-child(8) { transition-delay: .46s; }

/* page transition */
.page-veil {
  position: fixed; inset: 0; z-index: 400; background: var(--night); transform: scaleY(0);
  transform-origin: bottom; pointer-events: none;
}
body.leaving .page-veil { animation: veilIn .42s var(--ease) forwards; }
body.arriving .page-veil { animation: veilOut .5s var(--ease) forwards; }
@keyframes veilIn { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@keyframes veilOut { from { transform: scaleY(1); transform-origin: top; } to { transform: scaleY(0); transform-origin: top; } }
main { animation: pageIn .6s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@view-transition { navigation: auto; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .nav, .nav-cta { display: none; }
  .burger { display: inline-flex; }
  .nav-tools { margin-left: auto; }
  .alt-row .alt-media, .alt-row:nth-child(even) .alt-media { grid-column: 1 / -1; order: 1; margin-bottom: 26px; }
  .alt-row .alt-body, .alt-row:nth-child(even) .alt-body { grid-column: 1 / -1; order: 2; }
  .tile-xl, .tile-md, .tile-sm, .tile-wide, .tile-narrow, .tile-half { grid-column: span 6; }
  .contact-grid { grid-template-columns: 1fr; }
  .head-split { grid-template-columns: 1fr; align-items: start; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* the staggered ledger only works while there are two real columns */
  .ledger { grid-template-columns: 1fr; }
  .catalogue { grid-template-columns: 1fr; }
  .ledger-col:nth-child(2) { margin-top: 0; }
  .ledger-col > .ledger-item:first-child { padding-top: clamp(26px, 2.6vw, 34px); }
  .ledger-col:first-child > .ledger-item:first-child { padding-top: 0; }

  /* flat sections: collapse the three-track domain row to numeral + text */
  .domain { grid-template-columns: minmax(0, 64px) minmax(0, 1fr); row-gap: 14px; }
  .domain > *:nth-child(3) { grid-column: 2; }
  .stage { grid-template-columns: 1fr; row-gap: 14px; }
  /* the catalogue's second column only earns its keep on a wide screen */
  .ledger-index { grid-template-columns: 1fr; }
  .ledger-index > div + div { border-top: 0; }
}

@media (max-width: 860px) {
  .hero-foot { grid-template-columns: repeat(2, 1fr); }
  .hero-foot div { padding-right: 16px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  .video-list { grid-template-columns: repeat(2, 1fr); }
  .video-feature { grid-template-columns: 1fr; }
  .index-row { grid-template-columns: 46px minmax(0, 1fr); row-gap: 8px; }
  .index-row > *:nth-child(2), .index-row > *:nth-child(3), .index-row > *:nth-child(4) { grid-column: 2; }
  .index-row .go { display: none; }
  /* long Russian labels must be allowed to break once the row is narrow */
  .index-meta { white-space: normal; }
  .timeline { padding-left: 26px; }
  .map-frame iframe { height: 340px; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 16px; }

  /* header: shorter bar, logo only, comfortable tap targets */
  .masthead-inner, .masthead.solid .masthead-inner { height: 68px; }
  .brand-mark, .masthead.solid .brand-mark { height: 36px; }
  .brand-words { display: none; }
  .burger { width: 44px; height: 44px; }
  .lang-switch a { min-width: 34px; min-height: 34px; display: inline-grid; place-items: center; }

  /* hero: svh keeps the mobile browser chrome from cropping the composition */
  .hero { min-height: 86vh; }
  .hero-inner { padding-top: 116px; padding-bottom: 34px; }
  .hero-title { max-width: none; margin-bottom: 20px; }
  .hero-sub { margin-bottom: 26px; font-size: 1rem; }
  /* two by two, not four stacked rows — the hero has to stay one screen tall */
  .hero-foot { grid-template-columns: repeat(2, 1fr); }
  .hero-foot div { padding: 14px 14px 14px 0; }
  .hero-foot div:nth-child(-n+2) { border-bottom: 1px solid var(--hair-dark); }
  .hero-scroll { display: none; }
  .hero-dots { bottom: 22px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  .pagehead { padding-top: 116px; padding-bottom: 42px; }
  .pagehead::after { display: none; }

  .tile-xl, .tile-md, .tile-sm, .tile-wide, .tile-narrow, .tile-half { grid-column: span 12; }
  .video-list { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--hair); padding: 20px 0 22px; }
  .fact:last-child { border-bottom: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .cta-band .shell { grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; justify-content: center; }
  .brand-line { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .channel-panel { grid-template-columns: 1fr; text-align: left; }
  .channel-panel .btn { width: 100%; justify-content: center; }
  .acc-a-inner { padding-right: 0; }
  .acc-q { padding-right: 38px; }

  /* forms and buttons need a finger, not a mouse */
  .field input, .field textarea, .field select { font-size: 16px; padding: 14px 16px; }
  .btn { padding: 14px 22px; }

  .vmodal { padding: 16px; }
  .map-frame iframe { height: 300px; }
  .prose { font-size: 16px; }
  .prose table { display: block; overflow-x: auto; }

  /* flat sections on a phone: one column, numeral above the heading */
  .anchored { scroll-margin-top: 78px; }
  .domain { grid-template-columns: 1fr; row-gap: 10px; padding: 30px 0; }
  .domain > *:nth-child(3) { grid-column: 1; }
  .domain-num { font-size: 1.9rem; }
  .stage { padding-left: 28px; }
  .stage::before { top: calc(clamp(28px, 3.6vw, 48px) + 6px); width: 13px; height: 13px; }
  .spine::before { left: 6px; }
  .marks { grid-template-columns: repeat(2, 1fr); }
  .mark { min-height: 112px; }
}

/* ------------------------------------------------------- small phones */
@media (max-width: 400px) {
  :root { --gutter: 15px; }
  .refs { grid-template-columns: 1fr; }
  .ref-plate { height: 96px; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot div { border-bottom: 1px solid var(--hair-dark); }
  .hero-foot div:last-child { border-bottom: 0; }
  .lang-switch { gap: 0; }
  .ledger-foot { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal], .stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="clip"]::before { display: none !important; }
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
}

@media print {
  .masthead, .footer, .cta-band, .drawer, .page-veil, .hero-scroll { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ================================================================
   Video conferencing & smart board page (site/collab.php) and the
   home page teaser that replaced the video block
   ================================================================ */
.cx-head .shell { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cx-title { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 17ch; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.cx-head-visual img { width: 100%; height: auto; filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .55)); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 30px; }
.cx-chip { font-size: 12.5px; font-weight: 600; letter-spacing: .03em; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .84); }
.cx-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cx-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); margin-top: clamp(20px, 3vw, 40px); }
.cx-pillar { padding: 34px clamp(18px, 2.4vw, 34px) 10px; border-right: 1px solid var(--hair); }
.cx-pillar:first-child { padding-left: 0; }
.cx-pillar:last-child { border-right: 0; padding-right: 0; }
.cx-pillar svg { color: var(--red); margin-bottom: 18px; }
.cx-pillar h3 { margin: 0 0 10px; }
.cx-pillar p { margin: 0; font-size: 15.5px; color: var(--slate); }

.cx-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-jump a { font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid var(--hair); background: var(--paper); color: var(--ink); transition: border-color var(--fast), color var(--fast); }
.cx-jump a:hover { border-color: var(--red); color: var(--red); }

.cx-models { border-top: 1px solid var(--hair); }
.cx-model { scroll-margin-top: 90px; }
.cx-model .alt-media figure { aspect-ratio: 1100 / 680; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, #ebe8e3 100%); display: grid; place-items: center; padding: 6%; margin: 0; }
.cx-model .alt-media img { object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .18)); }
.cx-model .alt-body h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.cx-model .alt-body > p { margin: 0 0 12px; }
.cx-size { font-style: normal; margin-left: 10px; padding: 3px 8px; font-size: 11.5px; letter-spacing: .06em; color: var(--ink); border: 1px solid var(--hair); background: var(--paper); }
.cx-tag { font-family: "Manrope", sans-serif; font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.cx-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; margin: 22px 0; }
.cx-feats dt { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 3px; padding-left: 14px; position: relative; }
.cx-feats dt::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--red); }
.cx-feats dd { margin: 0; padding-left: 14px; font-size: 14.5px; color: var(--slate); line-height: 1.5; }
.cx-specs { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 0 0 22px; }
.cx-specs summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 600; color: var(--ink); font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
.cx-specs summary::-webkit-details-marker { display: none; }
.cx-specs summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--red); transition: transform var(--fast); }
.cx-specs[open] summary::after { transform: rotate(45deg); }
.cx-specs dl { margin: 0 0 16px; }
.cx-specs dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 9px 0; border-top: 1px dashed var(--hair); font-size: 14.5px; }
.cx-specs dt { color: var(--slate); }
.cx-specs dd { margin: 0; color: var(--ink); }

.cx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--hair-dark); }
.cx-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14.5px; }
.cx-table th, .cx-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--hair-dark); vertical-align: top; }
.cx-table thead th { font-family: "Manrope", sans-serif; font-weight: 800; color: #fff; font-size: 15px; white-space: nowrap; }
.cx-table thead th a { color: #fff; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.cx-table tbody th { font-weight: 500; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.cx-table td { color: rgba(255, 255, 255, .88); }
.cx-table th:first-child { position: sticky; left: 0; background: var(--night); z-index: 1; padding-left: 0; }
.cx-table tbody tr:hover td { background: rgba(255, 255, 255, .04); }

.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 34px); border-top: 1px solid var(--hair); }
.cx-steps li { padding-top: 26px; }
.cx-steps .index-num { display: block; margin-bottom: 12px; }
.cx-steps h3 { margin: 0 0 10px; }
.cx-steps p { margin: 0; font-size: 15px; color: var(--slate); }

/* home teaser */
.cx-teaser { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.cx-teaser-media img { width: 100%; height: auto; filter: drop-shadow(0 30px 54px rgba(0, 0, 0, .5)); }
.cx-teaser-list { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--hair-dark); }
.cx-teaser-list li { padding: 16px 0; border-bottom: 1px solid var(--hair-dark); }
.cx-teaser-list b { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
.cx-teaser-list span { font-size: 15px; color: rgba(255, 255, 255, .62); }

@media (max-width: 1100px) {
  .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
}
@media (max-width: 860px) {
  .cx-head .shell, .cx-teaser { grid-template-columns: 1fr; }
  .cx-head-visual { order: 2; max-width: 560px; }
  .cx-pillars { grid-template-columns: 1fr; }
  .cx-pillar, .cx-pillar:first-child, .cx-pillar:last-child { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .cx-feats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cx-steps { grid-template-columns: 1fr; }
  .cx-specs dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* smart office page: system grid, featured product cards, folded comparison */
.cx-systems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.cx-system { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 36px); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--paper); }
.cx-system svg { color: var(--red); margin-bottom: 18px; }
.cx-system h3 { margin: 0 0 10px; }
.cx-system p { margin: 0 0 18px; font-size: 15px; color: var(--slate); }
.cx-brands { margin-top: auto; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }

.cx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cx-card { display: flex; flex-direction: column; border: 1px solid var(--hair-dark); background: rgba(255, 255, 255, .03); transition: border-color var(--fast), background var(--fast); }
.cx-card:hover { border-color: var(--red); background: rgba(255, 255, 255, .06); }
.cx-card-media { display: block; aspect-ratio: 1100 / 680; padding: 8% 8% 2%; }
.cx-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.cx-card:hover .cx-card-media img { transform: scale(1.04); }
.cx-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 18px; }
.cx-card-body b { font-family: "Manrope", sans-serif; font-weight: 800; color: #fff; font-size: 1.05rem; }
.cx-card-body span { font-size: 14px; color: rgba(255, 255, 255, .62); }
.cx-card-body em { font-style: normal; font-size: 12px; letter-spacing: .06em; color: #ff5f6a; margin-top: 4px; }

.cx-compare { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--hair-dark); }
.cx-compare summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.cx-compare summary::-webkit-details-marker { display: none; }
.cx-compare summary::after { content: "+"; font-size: 22px; line-height: 1; color: #ff5f6a; transition: transform var(--fast); }
.cx-compare[open] summary::after { transform: rotate(45deg); }

.domain-more { display: inline-flex; margin-top: 14px; }

@media (max-width: 1100px) {
  .cx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cx-systems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cx-systems { grid-template-columns: 1fr; }
}