/*
  Site-wide overrides: the deliberate differences from the Webflow original.

  The 34 published documents and the original stylesheet stay untouched. The
  build injects this file into every page's head right after the original
  stylesheet, so every intentional deviation lives here, can be diffed, and can
  be removed by deleting one link. Keep it small.

  1. Header between 992px and 1200px (small laptops, iPads held sideways, and
     desktop windows that are not full width). The original desktop header uses
     a fixed 100px left padding, a 6.25% right padding and 40px between links,
     which leaves too little room for the four links plus the "REQUEST A MEETING"
     button below roughly 1075px: the links and the button wrapped onto two
     lines. In this range the header now uses the page's own 5% side padding and
     24px link gaps, and link and button text may not wrap. Fonts, sizes,
     colours and the header height are unchanged. Above 1200px and from 991px
     down (tablet and phone menu) nothing changes.

  2. Home page "stacked" illustration. Its image box is 70% of the container
     and sits beside a fixed 374px text column, so it overhangs the container by
     about 70px at every desktop width. Below roughly 1440px that overhang
     crosses the viewport edge and the page scrolls sideways. Between 992px and
     1200px the image box now takes the space left beside the text column, so
     the section stays inside the viewport. From 1201px up only the transparent
     margin of the PNGs overhung, so the section is simply clipped at the
     viewport edge: nothing visible changes there, and the sideways scroll is
     gone. The edge-to-edge marquee, gallery and testimonial slider are not
     affected.

  3. Article extras (added with the Sanity move). Editors can give an article
     a "Key takeaways" box above the body and "Frequently asked questions" and
     "Sources and further reading" sections after it. The blocks sit inside the
     article's rich-text container, so headings, paragraphs and lists inherit
     the original typography; the rules below only add the box around the
     takeaways and the spacing of the Q&A items, using the site's own colour
     variables. Articles without these fields render exactly as before.

     The same section styles the blocks editors can place inside the body:
     picture captions (Webflow's own <figcaption> styling already applies),
     tables, downloadable files, "Read next" cards, expandable sections and
     click-to-play videos. A video is a poster image with a play button; the
     player iframe only appears after a click (site-assets/js/article-extras.js).
*/

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .navbar3_component {
    padding-left: 5%;
    padding-right: 5%;
  }

  .menu-link-wrapper {
    grid-column-gap: 24px;
    column-gap: 24px;
  }

  .navbar3_link,
  .navbar3_menu .button {
    white-space: nowrap;
  }

  .stacked_image-wrapper {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
  }
}

@media screen and (min-width: 992px) {
  .section_stacked {
    overflow-x: clip;
  }
}

/* 3. Article extras */
.text-rich-text .article-takeaways {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--color-scheme-1--green-light-1);
  background-color: var(--_primitives---opacity--white-5);
}

.text-rich-text .article-takeaways_heading {
  margin-bottom: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: var(--color-scheme-1--green-light-2);
}

.text-rich-text .article-takeaways ul {
  margin-bottom: 0;
}

.text-rich-text .article-takeaways li:last-child {
  margin-bottom: 0;
}

.text-rich-text .article-faq_heading,
.text-rich-text .article-sources_heading {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--_primitives---opacity--white-15);
}

.text-rich-text .article-faq_item + .article-faq_item {
  margin-top: 1.5rem;
}

.text-rich-text .article-faq_item h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
}

.text-rich-text .article-faq_item p:last-child {
  margin-bottom: 0;
}

.text-rich-text .article-sources a {
  text-decoration: underline;
}

/* 3a. Tables: scroll sideways on narrow screens instead of breaking the layout. */
.text-rich-text .article-table {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.text-rich-text .article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.text-rich-text .article-table caption {
  padding-bottom: 0.5rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--_primitives---opacity--white-60);
}

.text-rich-text .article-table th,
.text-rich-text .article-table td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--_primitives---opacity--white-15);
  text-align: left;
  vertical-align: top;
}

.text-rich-text .article-table th {
  background-color: var(--_primitives---opacity--white-10);
  font-weight: 600;
}

/* 3b. Downloadable file */
.text-rich-text a.article-download {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--_primitives---opacity--white-15);
  background-color: var(--_primitives---opacity--white-5);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

.text-rich-text a.article-download:hover {
  background-color: var(--_primitives---opacity--white-10);
}

.text-rich-text .article-download_badge {
  flex: 0 0 auto;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-scheme-1--green-light-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-scheme-1--green-light-2);
}

.text-rich-text .article-download_text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.text-rich-text .article-download_title {
  font-weight: 600;
}

.text-rich-text .article-download_meta {
  font-size: 0.8125rem;
  color: var(--_primitives---opacity--white-60);
}

.text-rich-text .article-download_cta {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-scheme-1--violet-light-1);
  text-decoration: underline;
}

/* 3c. "Read next" card */
.text-rich-text a.article-readnext {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  margin: 2rem 0;
  border: 1px solid var(--_primitives---opacity--white-15);
  background-color: var(--_primitives---opacity--white-5);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s;
}

.text-rich-text a.article-readnext:hover {
  background-color: var(--_primitives---opacity--white-10);
}

/* The picture is positioned absolutely so it fills the column whatever the text height is. */
.text-rich-text .article-readnext_image {
  position: relative;
  flex: 0 0 11rem;
  align-self: stretch;
  min-height: 7rem;
}

.text-rich-text .article-readnext_image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.text-rich-text .article-readnext_text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem 1.25rem 1rem 0;
  min-width: 0;
}

.text-rich-text .article-readnext_image + .article-readnext_text {
  padding-left: 0;
}

.text-rich-text .article-readnext_text:first-child {
  padding-left: 1.25rem;
}

.text-rich-text .article-readnext_label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-scheme-1--green-light-2);
}

.text-rich-text .article-readnext_title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.text-rich-text .article-readnext_meta {
  font-size: 0.8125rem;
  color: var(--_primitives---opacity--white-60);
}

@media screen and (max-width: 479px) {
  .text-rich-text a.article-readnext {
    flex-direction: column;
    gap: 0;
  }

  .text-rich-text .article-readnext_image {
    flex-basis: auto;
    height: 10rem;
  }

  .text-rich-text .article-readnext_image + .article-readnext_text {
    padding: 1rem 1.25rem;
  }
}

/* 3d. Expandable section (native <details>, no script needed) */
.text-rich-text .article-expandable {
  margin: 1rem 0;
  border: 1px solid var(--_primitives---opacity--white-15);
  background-color: var(--_primitives---opacity--white-5);
}

.text-rich-text .article-expandable summary {
  position: relative;
  padding: 0.875rem 3rem 0.875rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.text-rich-text .article-expandable summary::-webkit-details-marker {
  display: none;
}

.text-rich-text .article-expandable summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.text-rich-text .article-expandable[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.text-rich-text .article-expandable_body {
  padding: 0 1.25rem 0.25rem;
}

.text-rich-text .article-expandable_body > :last-child {
  margin-bottom: 1rem;
}

/* 3e. Click-to-play video */
.text-rich-text .article-video {
  margin: 1.5rem 0;
}

.text-rich-text a.article-video_poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background-color: #000;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
}

.text-rich-text .article-video_poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.text-rich-text .article-video_poster:hover img {
  transform: scale(1.03);
}

.text-rich-text .article-video_play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background-color: var(--color-scheme-1--violet);
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
  transition: background-color 0.2s;
}

.text-rich-text .article-video_play svg {
  margin-left: 0.25rem;
}

.text-rich-text .article-video_poster:hover .article-video_play {
  background-color: var(--color-scheme-1--violet-light-1);
}

.text-rich-text .article-video_frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background-color: #000;
}

.text-rich-text .article-video_caption {
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--color-scheme-1--text);
  font-size: 0.875rem;
}