/* ============================================================
   Solution Library — the public highlights page.

   Its own stylesheet rather than a section inside styles.css. That file dresses a dense
   filterable index for people who already know what they are looking for; this page is a
   handful of films for someone who has never heard of any of it. Sharing the tokens and
   nothing else keeps a change to the index from quietly reshaping the marketing page.
   ============================================================ */

:root {
  --bg: #FAFAF8;
  --card: #FFFFFF;
  --border: #E5E2DB;
  --rule: #D8D4CB;
  --text: #1C1B17;
  --ink-soft: #33322D;
  --sub: #6E6C63;
  --muted: #9A978C;

  --accent: #2D5A3D;            /* Questt forest green */
  --accent-hover: #234A31;
  --accent-soft: #E7EEE8;
  --accent-line: #CBDCCF;
  --copper: #A85D3B;
  --neutral-soft: #F1F0EA;

  --display: Georgia, 'Times New Roman', serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

/* ---- top bar ---- */
.top { border-bottom: 1px solid var(--border); background: var(--card); }
.top-line { height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { text-decoration: none; }
.brand-mark { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.brand-mark .dot { color: var(--accent); }
.top-cta {
  font-size: 13px; font-weight: 500; text-decoration: none; color: #fff;
  background: var(--accent); padding: 9px 18px; border-radius: 999px;
  transition: background .18s; white-space: nowrap;
}
.top-cta:hover { background: var(--accent-hover); }

/* ---- masthead ---- */
.masthead { padding: 44px 0 22px; }
.eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--copper); font-weight: 600; margin-bottom: 12px;
}
.masthead h1 {
  font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.1;
  letter-spacing: -.02em;
}
.masthead h1 .hl { color: var(--accent); font-style: italic; }
@media (max-width: 640px) { .masthead { padding: 32px 0 18px; } .masthead h1 { font-size: 30px; } }

/* ---- Highlights / Others ---- */
.tabs {
  display: flex; gap: 26px; align-items: flex-end;
  border-bottom: 1px solid var(--rule); margin-bottom: 8px;
}
.tab {
  position: relative; padding: 0 2px 11px; text-decoration: none;
  font-size: 14.5px; font-weight: 500; color: var(--sub); transition: color .15s;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); font-weight: 600; }
.tab.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent);
}
.tab-note {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 7px;
}

/* ---- one solution per row ---- */
.sols { display: flex; flex-direction: column; }

.sol { padding: 30px 0; border-bottom: 1px solid var(--border); }
.sol:last-child { border-bottom: 0; }

.sol-title {
  font-family: var(--display); font-weight: 400; font-size: 25px; line-height: 1.2;
  letter-spacing: -.01em; margin-bottom: 18px;
}
.sol-title .for { color: var(--sub); }
.sol-title a { text-decoration: none; display: inline-flex; align-items: baseline; gap: 9px; }
.sol-title a:hover { color: var(--accent); }
.sol-title a:hover .for { color: var(--accent); }
.sol-title .chev { font-family: var(--body); font-size: 19px; color: var(--muted); transition: transform .15s, color .15s; }
.sol-title a:hover .chev { color: var(--accent); transform: translateX(3px); }

.sol-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; align-items: start; }

.sol-video {
  position: relative; aspect-ratio: 16 / 9; background: #14150F;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.sol-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sol-video .novideo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--neutral-soft); text-align: center; padding: 20px;
}

.sol-copy { display: flex; flex-direction: column; height: 100%; padding-top: 2px; }
.sol-copy p { font-size: 15px; color: var(--sub); }
.sol-meta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: 14px;
}

.sol-cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 20px;
  padding: 10px 22px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none; transition: .18s;
}
.sol-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

@media (max-width: 760px) {
  .sol-row { grid-template-columns: 1fr; gap: 18px; }
  .sol-title { font-size: 21px; margin-bottom: 14px; }
  .sol { padding: 24px 0; }
}

/* ---- tail + foot ---- */
.tail-note {
  font-size: 13.5px; color: var(--muted); padding: 26px 0 60px; max-width: 640px;
}
.tail-note a { color: var(--accent); font-weight: 500; }

.foot { border-top: 1px solid var(--border); background: var(--card); }
.foot-line {
  min-height: 62px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--muted); padding-top: 16px; padding-bottom: 16px;
}
.foot-links { display: flex; gap: 20px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--accent); }