/* ============================================================================
   MediaPOINTE — Design System
   A single dark visual world: navy grounds, bright type, blue primary and one
   amber accent reserved for the TAC tactical line.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
:where(h1,h2,h3,h4,h5,h6) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* --- Tokens ---------------------------------------------------------------
   One committed visual world: a navy ground with bright type and two accents.
   Everything is declared on :root, so the page renders identically whatever
   theme the host or the viewer's OS asks for — nothing lives behind a media
   query or a [data-theme] stamp that could leave half the palette unapplied. */
:root {
  --bg:        #131a26;   /* page ground */
  --bg-2:      #19212f;   /* alternating band */
  --bg-3:      #222c3c;   /* wells, image plates */
  --surface:   #1d2634;   /* cards, panels */
  --ink:       #eef4fb;   /* headings */
  --ink-2:     #a9b8cc;   /* body */
  --ink-3:     #8798ae;   /* captions, labels */
  --line:      #2b3546;
  --line-2:    #3a4658;

  --brand:      #5b9dff;  /* the logo blue, lifted for a dark ground */
  --brand-ink:  #86b7ff;
  --brand-soft: #1b2a44;
  --accent:     #f0a94a;  /* amber — the single warm pop, on the TAC line */
  --accent-soft:#33260f;
  --signal:     #4fd0de;  /* cool support tone, used sparingly */
  --signal-soft:#0f2f36;

  /* legacy aliases so older rules keep resolving */
  --tactical:      var(--accent);
  --tactical-soft: var(--accent-soft);

  --btn-fg:    #0a1220;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.42);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.45), 0 32px 70px rgba(0,0,0,.55);

  --header-bg: rgba(19,26,38,.84);
  --header-line: #29334300;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --maxw: 1200px;
}
/* The preview bundle stamps this on its wrapper; it resolves to the same set. */
[data-theme="dark"], [data-theme="light"] { color-scheme: dark; }

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
}
[data-theme] { background: var(--bg); color: var(--ink-2); }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); letter-spacing: -.028em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.018em; }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }

a { text-decoration: none; }
p a:not([class]) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); }
p a:not([class]):hover { text-decoration-color: var(--brand); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* Inline icons default to text size. Zero specificity, so any component that
   sets its own icon dimensions below still wins. */
svg { flex-shrink: 0; }
:where(.btn, .btn__arrow, .link-arrow, .eyebrow, .chip, .newsitem__date,
       .prod__colhead, .flowcard__label, .callbox h4, .footer-col h4, h4) svg {
  width: 1.05em; height: 1.05em; vertical-align: -.15em;
}
.callbox h4 { display: flex; align-items: center; gap: .45rem; }

/* --- Layout primitives ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.section--alt { background: var(--bg-2); }

.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); }

/* --- Eyebrow / section head ----------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .715rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brand);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow--signal { color: var(--signal); }
.eyebrow--tactical { color: var(--tactical); }

.sec-head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.sec-head p { font-size: 1.075rem; margin-top: 1.05rem; color: var(--ink-2); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }

.lead { font-size: clamp(1.06rem, 1.55vw, 1.22rem); line-height: 1.6; color: var(--ink-2); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem; border-radius: 100px;
  font-size: .93rem; font-weight: 550; letter-spacing: -.005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--brand); color: #08111f; box-shadow: 0 1px 2px rgba(11,95,255,.28), 0 8px 20px -6px rgba(11,95,255,.45); }
.btn--primary:hover { background: var(--brand-ink); box-shadow: 0 2px 4px rgba(11,95,255,.3), 0 14px 30px -8px rgba(11,95,255,.55); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink-3); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn--sm { padding: .55rem 1rem; font-size: .855rem; }
.btn--lg { padding: .95rem 1.7rem; font-size: 1rem; }
.btn__arrow { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.btn:hover .btn__arrow { transform: translateX(3px); }
@media (max-width: 520px) {
  /* Long labels wrap rather than push the page sideways. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn-row > .btn { flex: 1 1 auto; }
}

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 550; color: var(--brand);
}
.link-arrow svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.link-arrow:hover svg { transform: translateX(3px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 70px; }

/* Brand mark — the real MediaPOINTE logo, in a light-ground and a dark-ground
   variant. Only one is ever rendered; the other is display:none, so a viewer
   never sees the wrong contrast while the theme resolves. */
.wordmark { display: inline-flex; align-items: center; flex-shrink: 0; }
.wordmark img { width: auto; height: 34px; }
.wordmark--footer img { height: 36px; }
.brandlogo--light { display: none; }
@media (max-width: 420px) { .wordmark img { height: 27px; } }

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
/* :not(.btn) so the header CTA keeps its own button colours — a bare `.nav a`
   rule outranks `.btn--primary` on specificity. */
.nav a:not(.btn) {
  position: relative; padding: .5rem .78rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  transition: color .16s, background-color .16s;
}
.nav a:not(.btn):hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .78rem; right: .78rem; bottom: .12rem;
  height: 2px; border-radius: 2px; background: var(--brand);
}
.header-cta { margin-left: .6rem; }

/* Menu button — three bars stepped like a level meter, with the middle one in
   the accent. The bars must stack, so the button is an explicit column flex;
   laying them out in the default row direction is what produced three dashes
   sitting side by side. Bars are 2px so they land on a whole device pixel at
   2x and 3x instead of rendering as a broken hairline. */
.nav-toggle {
  display: none; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 5px; width: 46px; height: 46px; margin-left: auto; flex-shrink: 0;
  padding: 0 12px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--surface);
  transition: border-color .18s, background-color .18s;
}
.nav-toggle:hover { border-color: var(--ink-3); }
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px; background: currentColor; color: var(--ink);
  transition: width .28s cubic-bezier(.3,.8,.3,1), transform .28s cubic-bezier(.3,.8,.3,1), opacity .16s;
}
.nav-toggle span:nth-child(1) { width: 20px; }
.nav-toggle span:nth-child(2) { width: 13px; background: var(--accent); }
.nav-toggle span:nth-child(3) { width: 17px; }

body.nav-open .nav-toggle { border-color: var(--accent); }
body.nav-open .nav-toggle span { width: 20px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 70px 0 auto; margin: 0; z-index: 89;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.6rem;
    max-height: calc(100dvh - 70px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s;
  }
  body.nav-open .nav { transform: none; opacity: 1; pointer-events: auto; }
  .nav a:not(.btn) { padding: .82rem .5rem; font-size: 1.02rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--brand); }
  .header-cta { margin: 1rem 0 0; align-self: flex-start; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 5.5rem); }
@media (max-width: 900px) { .hero { padding-block: 2.25rem 3rem; } }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 65% at 62% 20%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 62% 20%, #000 5%, transparent 72%);
}
.hero__glow {
  position: absolute; width: 780px; height: 620px; right: -12%; top: -32%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 66%);
  filter: blur(18px);
}
.hero__glow--2 {
  right: auto; left: -18%; top: 28%; width: 620px; height: 520px;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 66%);
}
.hero .wrap { position: relative; z-index: 1; }
/* Two rows so the product can span the full height of the copy beside it,
   and drop between the headline and the body copy once it stacks. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr);
  grid-template-areas: "lede media" "tail media";
  column-gap: clamp(1.75rem, 3.6vw, 3.25rem);
  align-items: center;
}
.hero__lede { grid-area: lede; align-self: end; }
.hero__tail { grid-area: tail; align-self: start; }
/* Scoped: .hero__product is reused outside the hero (the exhibit card), where a
   named grid area would land it in an implicit track and crush its sibling. */
.hero__inner > .hero__product { grid-area: media; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; grid-template-areas: "lede" "media" "tail"; row-gap: 1.4rem; }
  .hero__lede, .hero__tail { align-self: auto; }
}
.hero h1 { margin-bottom: 1.4rem; }
.hero__lede h1 { margin-bottom: 0; font-size: clamp(2.3rem, 4.5vw, 3.6rem); }
.hero__tail { padding-top: 1.4rem; }
@media (max-width: 900px) { .hero__tail { padding-top: 0; } }
.hero__sub { font-size: clamp(1.04rem, 1.5vw, 1.19rem); line-height: 1.6; max-width: 56ch; margin-bottom: 2rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem;
  padding: .38rem .38rem .38rem .85rem; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .82rem; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.hero__badge b { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 480px) {
  .hero__badge { font-size: .76rem; padding-left: .7rem; gap: .45rem; }
  .hero__badge .pill { font-size: .64rem; padding: .16rem .5rem; }
}
.hero__badge .pill {
  padding: .16rem .6rem; border-radius: 100px; font-size: .7rem; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase;
  background: var(--tactical-soft); color: var(--tactical);
}

/* Hero visual — the TAC-CR itself, floating on the glow.
   Runs past the right edge of the wrap on wide screens; on phones it goes
   edge to edge and sits directly under the headline, inside the first screen. */
.hero__product { position: relative; }
.hero__inner > .hero__product { margin-right: calc(-1 * clamp(0rem, 3vw, 3.25rem)); }
.hero__product img { width: 100%; filter: drop-shadow(0 30px 54px rgba(0,0,0,.55)); }
@media (max-width: 900px) {
  .hero__inner > .hero__product {
    margin-inline: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter) * 2);
  }
  .hero__product img { filter: drop-shadow(0 18px 34px rgba(0,0,0,.5)); }
}
.hero__product figcaption {
  margin-top: .9rem; text-align: center;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero__product figcaption b { color: var(--ink-2); font-weight: 500; }
@media (max-width: 520px) {
  .hero__product figcaption { margin-top: .7rem; font-size: .61rem; letter-spacing: .06em; }
}

/* Motion is decoration here — hold the still frame when motion is unwelcome. */
.motion-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-anim { display: none; }
  .motion-still { display: block; }
}

/* --- Signal path strip ----------------------------------------------------- */
.signal {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 900px) { .signal { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .signal { grid-template-columns: 1fr; } }
.signal__step {
  position: relative; background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 1.35rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .55rem;
}
.signal__n {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  color: var(--brand); display: flex; align-items: center; gap: .5rem;
}
.signal__n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signal__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.signal__ico svg { width: 16px; height: 16px; }
.signal__t { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em; }
.signal__d { font-size: .84rem; line-height: 1.55; color: var(--ink-3); }

/* --- Legacy hero flow card (kept for reference layouts) -------------------- */
.flowcard {
  position: relative; border-radius: var(--radius-lg); padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.flowcard__head { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.15rem; }
.flowcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .flowcard__dot { animation: none; } }
.flowcard__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.flow { display: grid; gap: .5rem; }
.flow__step {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line);
}
.flow__ico { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); }
.flow__ico svg { width: 16px; height: 16px; }
.flow__step > span { min-width: 0; }
.flow__t { display: block; font-size: .885rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.flow__d { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.4; margin-top: .1rem; }
.flow__arrow { display: grid; place-items: center; color: var(--line-2); height: 12px; }
.flow__arrow svg { width: 12px; height: 12px; }

/* --- Stats ---------------------------------------------------------------- */
/* Grid hairlines: cells carry a 1px ring that meets its neighbour inside the
   1px gap, so trailing empty cells stay the surface colour instead of showing
   the divider colour through. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 1.5rem 1.4rem; box-shadow: 0 0 0 1px var(--line); }
.stat__n { font-family: var(--font-display); font-size: clamp(1.55rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1.08; text-wrap: balance; }
.stat__l { font-size: .845rem; color: var(--ink-3); margin-top: .5rem; line-height: 1.4; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
a.card:hover, .card--hover:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
a.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.card__body > h3 { margin-bottom: .55rem; }
.card__body > p { font-size: .92rem; line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: 1.1rem; }

/* Solution cards get a tinted scrim so text over the legacy photos stays legible */
.card--solution .card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(4,10,20,.72));
}
.card--solution .card__tag {
  position: absolute; left: 1rem; bottom: .85rem; z-index: 2;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.02em; color: #fff;
}

/* Graceful stand-in when a photo can't be fetched. */
.img-missing { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%),
    repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--ink) 4%, transparent) 10px 11px),
    var(--bg-3);
}
.img-missing::after {
  content: attr(data-label);
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; max-width: 26ch; line-height: 1.6;
}
.card--solution .img-missing::after { margin-bottom: 1.6rem; }

/* --- Chips / badges ------------------------------------------------------- */
.chip {
  /* align-self keeps a chip its own width inside the column-flex card and tier
     bodies, where a flex item would otherwise stretch edge to edge. */
  display: inline-flex; align-self: flex-start; align-items: center; gap: .38rem;
  padding: .26rem .68rem; border-radius: 100px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line);
}
.chip--brand { background: var(--brand-soft); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.chip--signal { background: var(--signal-soft); color: var(--signal); border-color: color-mix(in srgb, var(--signal) 24%, transparent); }
.chip--tactical { background: var(--tactical-soft); color: var(--tactical); border-color: color-mix(in srgb, var(--tactical) 26%, transparent); }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* --- Feature list --------------------------------------------------------- */
.ticks { display: grid; gap: .62rem; }
.ticks li { display: flex; gap: .65rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.ticks svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .26rem; color: var(--brand); }
.ticks--signal svg { color: var(--signal); }
.ticks--tactical svg { color: var(--tactical); }

/* --- Feature blocks ------------------------------------------------------- */
/* --- Line card (the two product families, side by side) -------------------- */
.linecard {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.linecard:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.linecard__ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: .5rem;
}
.linecard__ico svg { width: 20px; height: 20px; }
.linecard--tactical .linecard__ico { background: var(--tactical-soft); color: var(--tactical); }
.linecard--tactical:hover { border-color: color-mix(in srgb, var(--tactical) 40%, var(--line)); }
.linecard h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.linecard > p { font-size: .93rem; line-height: 1.62; }
.linecard .ticks { margin-top: .85rem; }
.linecard .card__foot { padding-top: 1.3rem; }

.feature { display: flex; flex-direction: column; gap: .7rem; }
.feature__ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: .3rem; }
.feature__ico svg { width: 19px; height: 19px; }
.feature--tactical .feature__ico { background: var(--tactical-soft); color: var(--tactical); }
.feature h3 { font-size: 1.06rem; }
.feature p { font-size: .92rem; line-height: 1.6; }

/* --- Split media block ---------------------------------------------------- */
/* The Government band leads with the TAC-CR3 render, so the media column takes
   the larger share and the render is allowed to run past the text column's
   baseline width. */
.split--showcase { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); align-items: center; }
.split--showcase .split__media--bare { width: 112%; max-width: none; margin-left: -6%; }
@media (max-width: 1100px) { .split--showcase .split__media--bare { width: 100%; margin-left: 0; } }
@media (max-width: 900px) { .split--showcase { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* .split--reverse puts the media first in the DOM so it lands in the left
   column on wide screens. Once stacked, that would flip the reading order
   section to section, so below the breakpoint the copy always comes first.
   Scoped to the collapsed layout only — an unscoped order rule cancels the
   alternation the DOM order exists to create. */
@media (max-width: 900px) {
  .split--reverse > :first-child { order: 2; }
}
.split__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--bg-3); }
.split__media img { width: 100%; }
.split__media--banner img { aspect-ratio: 21/8; object-fit: cover; }
/* Extension tag — keeps "ext. 2" attached to the number it belongs to. */
.ext {
  display: inline-block; padding: .1rem .45rem;
  border-radius: 5px; background: var(--bg-3); color: var(--ink-2);
  font-family: var(--font-mono); font-size: .82em; letter-spacing: .02em;
  vertical-align: .06em;
}

/* Extension directory — department left, extension right, one type size, with
   a leader between so the pairs never come apart across a line break. */
.extlist { display: grid; gap: .4rem; margin-top: .7rem; }
.extlist li { display: flex; align-items: baseline; gap: .5rem; font-size: .87rem; color: var(--ink-2); }
.extlist li::after {
  content: ""; order: 1; flex: 1 1 auto; min-width: 1rem;
  border-bottom: 1px dotted var(--line-2); transform: translateY(-.28em);
}
.extlist li b {
  order: 2; flex-shrink: 0; font-family: var(--font-mono); font-weight: 500;
  font-size: .84em; letter-spacing: .02em; color: var(--ink); white-space: nowrap;
}

/* Logo plate — the mark standing in for a photograph. */
.markplate {
  display: grid; place-items: center; gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    var(--surface);
}
.markplate img { width: min(100%, 380px); height: auto; }
.markplate span {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}

/* Wide industry banners. Modest source resolution, so the display width is
   capped rather than letting the column stretch them soft, and every one is
   held to the same shape so the sections read as a set however they alternate. */
.split__media--strip { max-width: 520px; margin-inline: auto; }
.split__media--strip img { display: block; width: 100%; aspect-ratio: 900 / 254; object-fit: cover; }
@media (max-width: 900px) {
  /* Stacked: full column width, still one shared shape. */
  .split__media--strip { max-width: none; }
}
/* Small source photo — never scale it past what it can carry. */
.split__media--sm { max-width: 400px; }
.split__media--sm img { width: 100%; }
/* Transparent product renders sit on the page, not in a frame. */
.split__media--bare { border: 0; box-shadow: none; background: none; border-radius: 0; }
.split__media--bare img { filter: drop-shadow(0 26px 48px rgba(0,0,0,.55)); }
.tier .ticks + .prod__colhead { margin-top: 1.5rem; }

/* --- Products ------------------------------------------------------------- */
.filterbar { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2.25rem; }
.filterbar button {
  padding: .5rem 1rem; border-radius: 100px; font-size: .87rem; font-weight: 500;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface);
  transition: all .18s;
}
.filterbar button:hover { border-color: var(--line-2); color: var(--ink); }
.filterbar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.prod {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .22s, box-shadow .22s;
}
.prod:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); }
.prod { position: relative; }
.prod--flag {
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--tactical) 38%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tactical) 5%, transparent), transparent 220px),
    var(--surface);
}
/* Declared after .prod--flag: both selectors carry the same specificity, so the
   narrow-screen collapse has to come last to beat the flagship's wider grid. */
@media (max-width: 980px) { .prod--flag { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
@media (max-width: 780px) { .prod, .prod--flag { grid-template-columns: 1fr; } }
/* Product renders are cut-outs, so they sit straight on the page ground with a
   drop shadow. Only true photographs get a framed plate. */
.prod__media { position: relative; align-self: start; }
.prod__media img { width: 100%; filter: drop-shadow(0 18px 34px rgba(0,0,0,.5)); }
.prod__media--photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); }
.prod__media--photo img { aspect-ratio: 16/11; object-fit: cover; filter: none; }
/* Spec-only entries: no media column at all, so nothing reads as missing. */
.prod--nomedia .prod__specslabel {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem;
}
.prod__plate {
  aspect-ratio: 16/10; display: grid; place-content: center; gap: .5rem; text-align: center; padding: 1.25rem;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--ink) 3.5%, transparent) 9px 10px),
    var(--bg-2);
}
.prod__plate span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.prod__plate strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; color: var(--ink); line-height: 1.1; }
.prod__head { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.prod__head h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.prod__tag { font-size: 1rem; line-height: 1.55; color: var(--ink); font-weight: 500; margin-bottom: .7rem; }
.prod__desc { font-size: .935rem; line-height: 1.65; margin-bottom: 1.25rem; }
.prod__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.prod__colhead { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }

.specs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.specs dt, .specs .k { color: var(--ink-3); flex-shrink: 0; }
.specs dd, .specs .v { color: var(--ink); text-align: right; font-family: var(--font-mono); font-size: .795rem; margin: 0; }

/* --- Resource / document links -------------------------------------------- */
.docs { display: flex; flex-wrap: wrap; gap: .4rem; }
.docs a {
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .36rem .72rem .36rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: .795rem; font-weight: 500; color: var(--ink-2);
  transition: border-color .16s, color .16s, background-color .16s;
}
.docs a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.docs a svg { width: 13px; height: 13px; color: var(--ink-3); }
.docs a:hover svg { color: var(--brand); }

/* --- Section edge lift -----------------------------------------------------
   A very slight gradient at the top and bottom of a band, so consecutive dark
   sections read as distinct planes rather than one flat field. */
.section--fade { position: relative; overflow: hidden; }
.section--fade::before, .section--fade::after {
  content: ""; position: absolute; left: 0; right: 0; height: 200px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent), transparent);
}
.section--fade::before { top: 0; }
.section--fade::after { bottom: 0; transform: scaleY(-1); }
.section--fade > * { position: relative; z-index: 1; }

/* --- Exhibit / event card -------------------------------------------------- */
.exhibit {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 90% at 92% 10%, color-mix(in srgb, var(--tactical) 8%, transparent), transparent 70%),
    var(--surface);
}
@media (max-width: 820px) { .exhibit { grid-template-columns: 1fr; } }
.exhibit__meta { display: grid; gap: .55rem; margin: 1.25rem 0 1.5rem; }
.exhibit__meta div { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; }
.exhibit__meta svg { width: 16px; height: 16px; margin-top: .28rem; color: var(--tactical); }
.exhibit__meta b { color: var(--ink); font-weight: 600; }

/* "with Logitech" lockup */
.withlogo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.withlogo span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.withlogo img { height: 17px; width: auto; }
.partnerlogo--light { display: none; }

/* --- Upcoming event promo -------------------------------------------------- */
.upnext {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 140% at 6% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--surface);
}
@media (max-width: 860px) { .upnext { grid-template-columns: 1fr; text-align: left; } }
.upnext__date {
  display: grid; place-items: center; gap: .1rem; flex-shrink: 0;
  width: 92px; height: 92px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.upnext__mon { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.upnext__yr { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.upnext h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: .35rem; }
.upnext p { font-size: .91rem; }
.upnext__where { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; font-size: .84rem; color: var(--ink-3); }
.upnext__where span { display: inline-flex; align-items: center; gap: .35rem; }
.upnext__where svg { width: 14px; height: 14px; color: var(--accent); }

/* --- Support tiers -------------------------------------------------------- */
.tier { display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.tier--hero { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent), var(--shadow-md); }
.tier h3 { margin-bottom: .5rem; }
.tier > p { font-size: .92rem; margin-bottom: 1.25rem; }
.tier .ticks { margin-top: auto; padding-top: .25rem; }
/* A tier with labelled groups reads top-down; don't bottom-align the first list. */
.tier:has(.prod__colhead) .ticks { margin-top: 0; }

/* --- Contact / callouts --------------------------------------------------- */
.callbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.callbox > div { background: var(--surface); padding: 1.35rem 1.35rem 1.5rem; box-shadow: 0 0 0 1px var(--line); }
.callbox h4 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .75rem; }
.callbox a, .callbox p { display: block; font-size: .96rem; color: var(--ink); line-height: 1.65; }
/* A number followed by an extension tag has to read as one unit. */
.callbox p:has(> .ext) { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .3rem; }
.callbox p > .ext ~ *, .callbox p:has(> .ext) a { display: inline; }
.callbox a:hover { color: var(--brand); }
.callbox .muted { font-size: .84rem; color: var(--ink-3); }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .42rem; }
.field label { font-size: .84rem; font-weight: 550; color: var(--ink); }
.field label .req { color: var(--tactical); }
.field input, .field textarea, .field select {
  padding: .72rem .9rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font-size: .94rem; transition: border-color .16s, box-shadow .16s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.field textarea { resize: vertical; min-height: 130px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__note { font-size: .8rem; color: var(--ink-3); }

/* --- Logo wall ------------------------------------------------------------ */
.logowall { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logowall span {
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  padding: 1.15rem .9rem; text-align: center;
  font-size: .82rem; font-weight: 550; color: var(--ink-2); line-height: 1.35;
  display: grid; place-items: center; min-height: 82px;
  transition: color .18s, background-color .18s;
}
.logowall span:hover { color: var(--ink); background: var(--bg-2); }

/* --- Timeline / news ------------------------------------------------------ */
.newsitem { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: clamp(1rem,3vw,2rem); padding-block: 1.6rem; border-bottom: 1px solid var(--line); }
@media (max-width: 620px) { .newsitem { grid-template-columns: 1fr; gap: .6rem; } }
.newsitem__date { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); letter-spacing: .02em; padding-top: .2rem; }
.newsitem h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.newsitem p { font-size: .92rem; line-height: 1.6; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(2.25rem, 5vw, 3.75rem); text-align: center; }
.cta-band { border: 1px solid var(--line-2); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 65% 130% at 12% 0%, color-mix(in srgb, var(--brand) 34%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 120% at 92% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 64%),
    var(--bg-3);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--ink); margin-bottom: .9rem; }
.cta-band p { color: var(--ink-2); max-width: 54ch; margin: 0 auto 1.8rem; font-size: 1.03rem; }
.cta-band .btn--ghost { border-color: color-mix(in srgb, var(--ink) 26%, transparent); }

/* --- Page banner (interior page headers) ---------------------------------- */
.pagehead { position: relative; overflow: hidden; padding-block: clamp(3rem, 6.5vw, 4.75rem) clamp(2.25rem, 5vw, 3.25rem); border-bottom: 1px solid var(--line); }
.pagehead .hero__grid { mask-image: radial-gradient(ellipse 80% 90% at 20% 0%, #000 5%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 20% 0%, #000 5%, transparent 70%); }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); margin-bottom: 1rem; }
.pagehead p { max-width: 62ch; font-size: clamp(1rem, 1.4vw, 1.13rem); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
/* Explicit tracks, not auto-fit. `repeat(auto-fit, minmax(140px,1fr))` forced
   four 140px columns at phone widths and left the brand column 26px wide, so
   the columns wrapped back on top of each other. */
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer-brand p { font-size: .9rem; line-height: 1.65; margin-top: 1rem; max-width: 44ch; }
.footer-brand address { font-style: normal; font-size: .875rem; line-height: 1.7; margin-top: 1.1rem; color: var(--ink-2); }
.footer-brand address a:hover { color: var(--brand); }
/* support@mediapointe.com is one unbreakable token ~193px wide, which sets the
   column's min-content size and pushes it past its grid track on a phone.
   `anywhere` (not `break-word`) is the one that also shrinks min-content. */
.footer-col, .footer-brand { min-width: 0; }
.footer-col a, .footer-brand address, .footer-brand address a { overflow-wrap: anywhere; }
.footer-col h4 { font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .55rem; list-style: none; padding: 0; margin: 0; }
.footer-col a { display: inline-block; font-size: .89rem; line-height: 1.45; padding-block: .12rem; color: var(--ink-2); transition: color .16s; }
.footer-col a:hover { color: var(--brand); }
.footer-col ul.u-mt-2 { margin-top: 1.1rem; }
.footer-col .extlist { gap: .35rem; margin-top: .5rem; }
.footer-col .extlist li { font-size: .84rem; color: var(--ink-3); }
.footer-col .extlist li b { color: var(--ink-2); }
.footer-bottom { margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; }
@media (max-width: 620px) { .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; } }
.footer-bottom p, .footer-bottom span { font-size: .81rem; color: var(--ink-3); }
.footer-made { font-family: var(--font-mono); font-size: .72rem !important; letter-spacing: .06em; text-transform: uppercase; }

/* --- Utilities ------------------------------------------------------------ */
.u-center { text-align: center; }
.u-mono { font-family: var(--font-mono); }
.u-muted { color: var(--ink-3); }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-2 { margin-top: 2rem; }
.u-mt-3 { margin-top: clamp(2rem,4vw,3rem); }
.u-maxw { max-width: 66ch; }
.hr { height: 1px; background: var(--line); border: 0; margin-block: clamp(2.5rem,5vw,4rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: .7rem 1.1rem; background: var(--ink); color: var(--bg); border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* --- Scroll reveal -------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
  .btn:hover, a.card:hover, .card--hover:hover { transform: none; }
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }