/* Talon Biomarkers — site chrome.
 *
 * BRAND VALUES LIVE HERE. Everything below the brand block derives from these
 * variables, so swapping in real Talon colours and typefaces is an edit to
 * this one section rather than a hunt through the stylesheet.
 */

/* Metric-matched fallback.
 *
 * Nav links are right-aligned, so any change in text width moves the whole
 * group. Before Inter loads the browser draws these in a system face whose
 * letters are narrower, then swaps — which reads as the menu jumping on
 * every page navigation.
 *
 * These overrides stretch Arial to Inter's metrics, so pre-swap and
 * post-swap widths match and nothing moves. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Brand values taken from the Talon override stylesheet.
   Typefaces are placeholders — swap --font-display and --font-body once the
   real faces are confirmed from the theme's compiled stylesheet. */
:root {
  --brand-ink: #0b1220;
  --brand-ink-soft: #1b2942;
  --brand-card: #111a2e;
  --brand-glass: rgba(17, 48, 89, 0.25);
  --brand-tile-border: #384459;
  --brand-accent: #6052d4;
  --brand-accent-dark: #4f43b5;
  /* Lighter tint of the accent, for small text on the dark ground. #6052d4
     is a strong fill colour but only reaches 3.3:1 against the navy, which
     is under the 4.5:1 usually wanted for text. Swap --brand-accent for
     --brand-accent-light on the kicker rules if the labels read too dim. */
  --brand-accent-light: #9d93e8;
  --brand-glow: 0 0 0 1px rgba(96, 82, 212, 0.6), 0 0 14px rgba(96, 82, 212, 0.45);
  --brand-paper: #0b1220;
  --brand-surface: #111a2e;

  --font-display: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --site-max: 1320px;
}

/* Pages tall enough to scroll show a scrollbar and lose roughly 15px of
   viewport width; short pages do not. That difference moves every
   right-aligned element, which reads as the menu jumping on navigation.
   Reserving the gutter on all pages holds it still. */
/* One reservation, not two.
 *
 * Setting scrollbar-gutter AND overflow-y together is redundant: on a page
 * that scrolls, the real scrollbar occupies the gutter and they cancel. On a
 * page that does not scroll — the home page, whose masthead fills the
 * viewport exactly — the space can be reserved twice, pulling content inward.
 *
 * overflow-y: scroll alone shows exactly one scrollbar track on every page,
 * scrolling or not, so the usable width never changes. */
html { overflow-y: scroll; }

body.site {
  margin: 0;
  background: var(--brand-paper);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-shell { max-width: var(--site-max); margin: 0 auto; padding: 0 28px; width: 100%; }

/* ---------- nav ---------- */

.site-nav {
  background: var(--brand-ink);
  position: sticky; top: 0; z-index: 50;
}

.site-nav-inner {
  max-width: var(--site-max); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; gap: 20px;
}

.site-logo {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; white-space: nowrap;
}
.site-logo-mark {
  width: 8px; height: 8px; background: var(--brand-accent);
  transform: rotate(45deg); border-radius: 1px;
}
.site-logo-text {
  font-size: 14.5px; font-weight: 500; color: #FFFFFF; letter-spacing: 0.005em;
}

.site-links { display: flex; align-items: center; gap: 24px; }
.site-links a {
  font-size: 13.5px; color: #9DB2B8; text-decoration: none; white-space: nowrap;
}
.site-links a:hover { color: #FFFFFF; }
.site-links a[aria-current="page"] { color: #FFFFFF; }
.site-links a.nav-cta {
  background: var(--brand-accent); color: #FFFFFF;
  padding: 7px 16px; border-radius: 4px; font-weight: 500;
}
.site-links a.nav-cta:hover {
  background: var(--brand-accent-dark);
  box-shadow: var(--brand-glow);
}

/* ---------- page content ---------- */

.site-main { flex: 1; }

.page-head {
  background: var(--brand-ink); color: #E8EEEC; padding: 48px 0 44px;
}
.page-eyebrow {
  font: 500 11px var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--brand-accent-light); margin: 0 0 12px;
}
.page-title {
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  letter-spacing: -0.03em; margin: 0 0 12px; color: #FFFFFF; line-height: 1.15;
  max-width: 22ch;
}
.page-lede {
  margin: 0; font-size: 16px; color: #9DB2B8; max-width: 62ch; line-height: 1.6;
}

.prose { padding: 44px 0 56px; max-width: 68ch; }
.prose h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.02em; margin: 34px 0 10px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 16px; font-weight: 600; margin: 24px 0 6px;
}
.prose p { margin: 0 0 14px; }
.prose a { color: var(--brand-accent); }
.prose p { color: rgba(255,255,255,0.88); }

/* ---------- capability cards ---------- */

.capabilities {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; padding: 8px 0 12px;
}
.capability {
  background: var(--brand-glass);
  border: 1px solid var(--brand-tile-border);
  border-radius: 15px; padding: 30px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.capability h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  margin: 0 0 7px; letter-spacing: -0.01em;
}
.capability p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.88); line-height: 1.55; }

/* ---------- footer: thin legal band ---------- */

.site-footer {
  background: var(--brand-ink);
  margin-top: auto;
  /* No top border. On the landing view the footer sits directly against the
     dark masthead, so a lighter rule between them reads as a seam rather
     than a divider. */
}

.footer-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  height: 44px;
  font-size: 12px;
}

.footer-copy { color: #6C848D; }

.footer-links { display: flex; gap: 18px; }
.footer-links a { color: #6C848D; text-decoration: none; }
.footer-links a:hover { color: #9DB2B8; }

@media (max-width: 700px) {
  .site-nav-inner { height: auto; padding: 12px 18px; flex-wrap: wrap; }
  .site-links { gap: 16px; }
  .site-shell, .site-nav-inner { padding-left: 18px; padding-right: 18px; }
  .page-title { font-size: 27px; }
}

/* ---------- logo ---------- */

.site-logo { line-height: 0; }

.site-logo-img {
  /* The bar is 84px tall, giving the lockup room to read properly rather
     than being squeezed into a thin strip. Width is explicit rather than
     auto so the slot is reserved before the image decodes and cannot
     reflow the bar on load. */
  height: 52px;
  width: 170px;
  display: block;
}

/* The artwork is white, so it needs no colour treatment on the dark
   masthead. Slight dimming on the nav keeps it from competing with the
   links, and it returns to full strength on hover. */
.site-logo-img { opacity: 0.92; transition: opacity 0.15s; }
.site-logo:hover .site-logo-img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-logo-img { transition: none; }
}

@media (max-width: 700px) {
  .site-logo-img { height: 40px; width: 130px; }
}

/* ---------- about page ---------- */

.hero-statement { padding: 52px 0 16px; }

/* Same treatment as the homepage kicker: mono, uppercase, wide tracking,
   accent blue. Matching the values exactly rather than approximating them
   keeps the two pages reading as one site. */
.hero-eyebrow-label {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
  margin: 0 0 18px;
}
.hero-statement h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
  max-width: 18ch;
}

/* ---- chapters ----
   Repeated rhythm: small kicker, rule, large statement headline, then body.
   The rule is doing real work — it separates the label from the statement so
   the statement reads as a claim rather than a subheading. */

/* Two columns: section label left, headline and copy right. The label column
   is deliberately wide with a large gap — the empty space beneath the label
   is what makes the layout read as editorial rather than as a cramped
   sidebar. */
.chapter {
  display: grid;
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
  gap: 52px;
  padding: 64px 0 0;
}

.chapter:last-of-type { padding-bottom: 72px; }

.chapter-kicker {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
  margin: 0;
  padding: 4px 0 0;   /* sits level with the cap height of the headline */
}

.chapter-content { min-width: 0; }

.chapter-headline {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 22px;
}

/* No max-width. The copy runs the full width of its column, out to the right
   page margin. */
.chapter-body {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.80);
}
.chapter-body p { margin: 0 0 18px; }
.chapter-body p:last-child { margin-bottom: 0; }

.chapter-sub {
  margin: -8px 0 30px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.80);
}

/* ---- team ---- */

.chapter--team { padding-bottom: 8px; }

.team-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
}

.member { min-width: 0; }

.member-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 15px;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
}

/* Deliberately plain, so it reads as "a photo goes here" rather than as a
   design element somebody might decide to keep. */
.member-photo--empty {
  background: var(--brand-glass);
  border: 1px dashed var(--brand-tile-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.member-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 3px;
}

.member-title {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 860px) {
  .chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-top: 40px;
  }
}



/* ---------- contact page ---------- */

/* Same two-column rhythm as the About page: supporting detail on the left,
   the substance on the right. */
.chapter--contact {
  /* Fixed pixel column rather than a percentage.
     A percentage resolves against the container, and the container's own
     width depends on the viewport, the page max-width and the scrollbar — so
     the result was hard to predict and did not match what the numbers
     suggested. 320px is enough for the address block and nothing more, and
     it resolves to the same value on every screen. */
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  padding-bottom: 72px;
}

.detail-block { margin-bottom: 26px; }

.detail-label {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
  margin: 0 0 7px;
}

.detail-value {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.detail-value a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.detail-value a:hover { color: var(--brand-accent); }

.detail-note {
  border-top: 1px solid var(--brand-tile-border);
  padding-top: 20px;
  margin-top: 34px;
}
.detail-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}
.detail-note a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-note a:hover { color: var(--brand-accent); }

/* ---- form ---- */

/* Text inputs get unusable well before they run out of column. A single
   line of typed text across 830px is hard to scan back along, and a form
   that wide reads as a wall.
   Capped, and pushed to the right of its column so the form's right edge
   lands on the page margin — the same line the Contact Us button in the
   navigation sits on. The slack falls in the middle of the page instead. */
.contact-form-wrap {
  min-width: 0;
  /* Right edge pinned to the page margin, under the Contact Us button.
     650px puts the left edge roughly halfway across the page, which is the
     line marked in the reference. */
  max-width: 650px;
  margin-left: auto;
}

.form-heading {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 26px;
}

.field { margin-bottom: 14px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font: 400 15px var(--font-body);
  color: #ffffff;
  background: var(--brand-glass);
  border: 1px solid var(--brand-tile-border);
  border-radius: 15px;
  padding: 15px 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-form textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

.contact-form ::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(96, 82, 212, 0.9);
  box-shadow: var(--brand-glow);
}

/* The spam trap has to be reachable by a bot parsing the DOM but never seen
   or focused by a person, so it is moved off-screen rather than hidden with
   display:none — which some bots check for. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-send {
  margin-top: 20px;
  width: 100%;
  font: 500 15.5px var(--font-body);
  color: #ffffff;
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: 100px;
  padding: 15px 30px;
  cursor: pointer;
}
.form-send:hover {
  background: var(--brand-accent-dark);
  box-shadow: var(--brand-glow);
  border-color: rgba(96, 82, 212, 0.9);
}
.form-send:disabled { opacity: 0.6; cursor: progress; }

.form-status {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 1px;
}
.form-status:empty { display: none; }
.form-status.ok { color: #99f6e4; }
.form-status.err { color: #fecdd3; }

@media (max-width: 860px) {
  .chapter--contact { grid-template-columns: minmax(0, 1fr); }
  .detail-note { margin-top: 20px; }
}

/* ---------- contact layout, hardened ----------
 *
 * The rules above are correct and appear last in the cascade, yet the form
 * kept rendering far narrower than any value set for it. Rather than keep
 * hunting for what outranks them, these repeat the same geometry at higher
 * specificity and with an explicit width rather than a maximum.
 *
 * .chapter.chapter--contact is (0,2,0); a single class is (0,1,0), so this
 * wins regardless of source order. width is stated outright so the element
 * cannot be sized by its container.
 */

.chapter.chapter--contact {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.chapter.chapter--contact .contact-details {
  width: 320px;
  max-width: 100%;
}

.chapter.chapter--contact .contact-form-wrap {
  width: 650px;
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.chapter.chapter--contact .contact-form,
.chapter.chapter--contact .form-heading {
  width: 100%;
}

@media (max-width: 860px) {
  .chapter.chapter--contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .chapter.chapter--contact .contact-details,
  .chapter.chapter--contact .contact-form-wrap {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- contact page ---------- */

/* Same two-column rhythm as the About page: supporting detail on the left,
   the substance on the right. */
.chapter--contact {
  /* Fixed pixel column rather than a percentage.
     A percentage resolves against the container, and the container's own
     width depends on the viewport, the page max-width and the scrollbar — so
     the result was hard to predict and did not match what the numbers
     suggested. 320px is enough for the address block and nothing more, and
     it resolves to the same value on every screen. */
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  padding-bottom: 72px;
}

.detail-block { margin-bottom: 26px; }

.detail-label {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
  margin: 0 0 7px;
}

.detail-value {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.detail-value a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.detail-value a:hover { color: var(--brand-accent); }

.detail-note {
  border-top: 1px solid var(--brand-tile-border);
  padding-top: 20px;
  margin-top: 34px;
}
.detail-note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.58);
}
.detail-note a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-note a:hover { color: var(--brand-accent); }

/* ---- form ---- */

/* Text inputs get unusable well before they run out of column. A single
   line of typed text across 830px is hard to scan back along, and a form
   that wide reads as a wall.
   Capped, and pushed to the right of its column so the form's right edge
   lands on the page margin — the same line the Contact Us button in the
   navigation sits on. The slack falls in the middle of the page instead. */
.contact-form-wrap {
  min-width: 0;
  /* Right edge pinned to the page margin, under the Contact Us button.
     650px puts the left edge roughly halfway across the page, which is the
     line marked in the reference. */
  max-width: 650px;
  margin-left: auto;
}

.form-heading {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: #ffffff;
  margin: 0 0 26px;
}

.field { margin-bottom: 14px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  font: 400 15px var(--font-body);
  color: #ffffff;
  background: var(--brand-glass);
  border: 1px solid var(--brand-tile-border);
  border-radius: 15px;
  padding: 15px 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-form textarea {
  resize: vertical;
  min-height: 180px;
  line-height: 1.6;
}

.contact-form ::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: rgba(96, 82, 212, 0.9);
  box-shadow: var(--brand-glow);
}

/* The spam trap has to be reachable by a bot parsing the DOM but never seen
   or focused by a person, so it is moved off-screen rather than hidden with
   display:none — which some bots check for. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-send {
  margin-top: 20px;
  width: 100%;
  font: 500 15.5px var(--font-body);
  color: #ffffff;
  background: var(--brand-accent);
  border: 1px solid var(--brand-accent);
  border-radius: 100px;
  padding: 15px 30px;
  cursor: pointer;
}
.form-send:hover {
  background: var(--brand-accent-dark);
  box-shadow: var(--brand-glow);
  border-color: rgba(96, 82, 212, 0.9);
}
.form-send:disabled { opacity: 0.6; cursor: progress; }

.form-status {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  min-height: 1px;
}
.form-status:empty { display: none; }
.form-status.ok { color: #99f6e4; }
.form-status.err { color: #fecdd3; }

@media (max-width: 860px) {
  .chapter--contact { grid-template-columns: minmax(0, 1fr); }
  .detail-note { margin-top: 20px; }
}

/* ---------- contact layout, hardened ----------
 *
 * The rules above are correct and appear last in the cascade, yet the form
 * kept rendering far narrower than any value set for it. Rather than keep
 * hunting for what outranks them, these repeat the same geometry at higher
 * specificity and with an explicit width rather than a maximum.
 *
 * .chapter.chapter--contact is (0,2,0); a single class is (0,1,0), so this
 * wins regardless of source order. width is stated outright so the element
 * cannot be sized by its container.
 */

.chapter.chapter--contact {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.chapter.chapter--contact .contact-details {
  width: 320px;
  max-width: 100%;
}

.chapter.chapter--contact .contact-form-wrap {
  width: 650px;
  max-width: 100%;
  margin-left: auto;
  margin-right: 0;
}

.chapter.chapter--contact .contact-form,
.chapter.chapter--contact .form-heading {
  width: 100%;
}

@media (max-width: 860px) {
  .chapter.chapter--contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
  .chapter.chapter--contact .contact-details,
  .chapter.chapter--contact .contact-form-wrap {
    width: 100%;
    margin-left: 0;
  }
}

/* ---------- news & insights ---------- */

/* ---------- page container, made authoritative ----------
 *
 * The tool's container was sized by --shell, defined in style.css. When that
 * file went stale on disk it kept an older value of 1180px while site.css
 * carried 1320px, so the page rendered at two different widths depending on
 * which stylesheet won — which is what read as the layout stretching.
 *
 * This rule is (0,2,0) and site.css's own variable, so it outranks the
 * .shell rule in style.css regardless of source order or which file is
 * current. One definition, one width, no way for the two to disagree.
 */

/* align-self: stretch is the fix.
 *
 * body.site is a column flex container. A flex child in that arrangement
 * sizes to its CONTENT unless told to stretch — so the page container was
 * narrow when rows were collapsed and grew when one was expanded and its
 * cards demanded more room, up to the 1320px cap. That is the stretching:
 * not scrollbars, not overflow, not grid tracks. A flex child sizing to
 * content.
 *
 * width: 100% cannot fix it on its own, because 100% of a shrink-to-fit
 * parent is still shrink-to-fit. align-self overrides the cross-axis
 * behaviour directly. */
/* Direct children of body only.
 *
 * The first version of this rule used `body.site .shell`, which also matched
 * the masthead's inner container. The masthead centres its content
 * vertically, and stretching that container to full height pushed the
 * wordmark and search bar to the top of the screen instead. The child
 * combinator keeps the fix on the elements that are actually flex children
 * of body. */
body.site > main,
body.site > header,
body.site > footer,
body.site > nav,
body.site > .shell {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

body.site > .shell,
body.site > main.shell {
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}

/* Keeps the tool's own variable in step, in case anything else reads it. */
body.site { --shell: var(--site-max); }

/* ---------- news & insights ---------- */

.release-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 36px 0 4px;
  border-bottom: 1px solid var(--brand-tile-border);
  padding-bottom: 20px;
}

/* Second and later labels get breathing room from the control before them. */
.release-filter label + select { margin-right: 6px; }
.release-filter select + label { margin-left: 8px; }

.release-filter select option:disabled { color: rgba(255, 255, 255, 0.3); }

.release-reset {
  font: 400 13px var(--font-body);
  color: var(--brand-accent);
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
}
.release-reset:hover { text-decoration: underline; text-underline-offset: 3px; }

.release-filter label {
  font: 500 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-accent);
}

.release-filter select {
  font: 400 14px var(--font-body);
  color: #ffffff;
  background: #0f172a;
  border: 1px solid var(--brand-tile-border);
  border-radius: 8px;
  padding: 7px 30px 7px 12px;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' fill-opacity='0.7' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}
.release-filter select option { background: #0f172a; color: #ffffff; }
.release-filter select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--brand-glow);
}

.release-count {
  margin-left: auto;
  font: 400 13px var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
}

/* ---- the list ---- */

.release-list {
  list-style: none;
  margin: 0;
  padding: 0 0 72px;
}

/* Rows separated by a rule rather than boxed as cards. A list of headlines
   is easier to scan down than a grid, which is the point of this layout. */
.release {
  padding: 26px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.release[hidden] { display: none; }

/* Date and content type share one line above the headline, so the headline
   starts at the left margin and runs the full width of the page. */
.release-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.release-date {
  font: 400 13px var(--font-mono);
  color: rgba(255, 255, 255, 0.55);
}

.release-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  /* No width cap — headlines run the full page width. */
}
.release-title a { color: #ffffff; text-decoration: none; }
/* Colour change only on hover. No underline — at 22px it sits far enough
   from the text to read as a rule rather than as emphasis. */
.release-title a:hover { color: var(--brand-accent); }

.release-type {
  display: inline-block;
  font: 700 11px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.95);
}
.release-type[data-type="article"] {
  background: rgba(45, 212, 191, 0.16);
  border-color: rgba(45, 212, 191, 0.32);
  color: #99f6e4;
}
.release-type[data-type="case-study"] {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.32);
  color: #bae6fd;
}
.release-type[data-type="video"] {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.32);
  color: #e9d5ff;
}
.release-type[data-type="webinar"] {
  background: rgba(244, 63, 94, 0.16);
  border-color: rgba(244, 63, 94, 0.32);
  color: #fecdd3;
}
.release-type[data-type="services"] {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.32);
  color: #fde68a;
}

.release-excerpt {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  /* Headlines run full width, but prose does not read well past about 90
     characters — the eye loses the line on the way back. */
  max-width: 88ch;
}

.release-empty {
  padding: 40px 0 72px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}

@media (max-width: 700px) {
  .release { padding: 20px 0; }
  .release-title { font-size: 18.5px; }
  .release-filter { flex-wrap: wrap; }
  .release-count { margin-left: 0; width: 100%; }
}