/* Custom styles on top of the Webflow export. Keep Webflow's own CSS files unedited. */

/* Footer: the design system's SiteFooter. The footer carries data-theme="dark", so
   --ink, --ink-muted, --line, --control-border and --focus take their navy-ground values.
   Brand block (logo, tagline, Book a demo, LinkedIn) left; Platform, Company and Legal
   columns right; a hairline, then the credit and the NZ line. */
.footer4_top-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-large);
}
.footer4_brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  max-width: 26rem;
}
.footer4_tagline {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: balance;
}
.footer4_actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footer4_social-square {
  flex: none;
  width: 2.625rem;
  min-width: 2.625rem;
  height: 2.625rem;
  justify-content: center;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-small);
  color: var(--ink);
  transition: background-color 0.2s;
}
.footer4_social-square:hover {
  background-color: var(--fill-subtle);
}
.footer4_columns {
  display: flex;
  gap: 4.5rem;
}
.footer4_column {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
/* 1rem below the heading: the column gap plus this margin */
.footer4_column-heading {
  margin: 0 0 0.125rem;
  color: var(--cyan);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
}
.footer4_columns .footer4_link {
  padding: 0;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.footer4_columns .footer4_link:hover,
.footer4_columns .footer4_link[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}
.footer4_component .divider-horizontal {
  background-color: var(--line);
}
/* Bottom row: company details left, NZ line right, smaller and muted */
.footer4_bottom-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xxsmall) var(--space-small);
}
.footer4_credit-text,
.footer4_credit-note {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Footer spacing: 48px above, 48px down to the hairline, 24px above and 32px below
   the bottom row. Replaces Webflow's padding-global and padding-xxlarge stack. */
.footer4_component .padding-global {
  padding-top: 0;
}
.footer4_component .padding-vertical.padding-xxlarge {
  padding-top: var(--space-large);
  padding-bottom: var(--space-medium);
}
.footer4_component .padding-bottom.padding-xxlarge {
  padding-bottom: var(--space-large);
}
.footer4_component .padding-top.padding-medium {
  padding-top: var(--space-small);
}

/* At 991px the columns move under the brand block */
@media screen and (max-width: 991px) {
  .footer4_top-wrapper {
    flex-direction: column;
  }
  .footer4_columns {
    gap: var(--space-large);
  }
}

/* At 767px the columns wrap two per row and the bottom row stacks */
@media screen and (max-width: 767px) {
  .footer4_columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: var(--space-medium);
  }
  .footer4_bottom-wrapper {
    flex-direction: column;
  }
}

/* Homepage feature grid ("Everything your team needs..."): Webflow's CSS sets one
   column below 768px, but the grid's two named template areas forced a second
   column, which squeezed the cards and pushed the page 6px wider than phones. */
@media screen and (max-width: 767px) {
  .layout308_list {
    grid-template-areas: none;
  }
  .layout308_list:not(.is-3) > .layout308_item {
    border-left-style: solid;
  }
}

/* Webflow sets .heading-style-h1 and .text-size-medium to 110% width, which pushes
   them past their 48rem heading block: off-centre on desktop, past the page edge
   (a sideways scroll) on tablets. It also gives .heading-style-h1 a 32px top margin
   that stacks on the section padding. The design system's heading block is 48rem,
   centred, with the title at its top. */
.heading-style-h1,
.text-size-medium {
  width: 100%;
}
main .heading-style-h1 {
  margin-top: 0;
}
/* Some sections nest a second .padding-global inside the first, doubling the top
   padding (+80px) and the side gutter (+5%). Only the outer one should pad. */
main > * > .padding-global .padding-global {
  padding: 0;
}
/* Landing-page hero (Politik Recommends): its 1fr columns wouldn't shrink below the
   photo's natural width, so the photo and stats ran past the edge below ~1280px. */
.header2_content.dark-1-1-ratio-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 991px) {
  .header2_content.dark-1-1-ratio-6 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media screen and (max-width: 767px) {
  .header2_content.dark-1-1-ratio-6 > * {
    min-width: 0;
    max-width: 100%;
  }
}
/* The "by the numbers" stats rows (Politik Recommends, Intelligence Briefing)
   didn't wrap, so they ran past the edge on narrower screens. */
.stats-grid {
  flex-wrap: wrap;
}

/* Nav: between 992px and ~1100px, "Select Committees", "About us" and "Book a demo"
   broke onto two lines and the logo was squeezed to half size. Keep items and the
   logo at full size, and tighten the spacing slightly in that range only. */
@media screen and (min-width: 992px) {
  .navbar12_menu-links > a,
  .navbar12_menu-buttons > a,
  .navbar12_menu .navbar12_logo-link {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
@media screen and (min-width: 992px) and (max-width: 1099px) {
  .navigation-container {
    column-gap: 1rem;
  }
  .navbar12_menu-links {
    column-gap: 0.5rem;
  }
  .nav-toggle {
    padding-left: 6px;
    padding-right: 6px;
  }
  .navbar12_menu-buttons {
    column-gap: 0.5rem;
    margin-left: 0.5rem;
  }
}

/* Contact page photo (Messenger Services door): a portrait crop with the crest in its
   upper half. Where the frame is square (phones), keep the crest in view. */
.contact10_map { object-position: 50% 20%; }
/* From 768px up (photo beside the form) the frame is locked to 4:5 instead of
   stretching to the form's height, which made it a thin strip on tablets.
   Phones keep the square frame. */
@media screen and (min-width: 768px) {
  .contact10_map-wrapper { align-self: start; height: auto; }
  .contact10_map { aspect-ratio: 4 / 5; height: auto; }
}

/* <picture> wrappers added for AVIF images with JPEG fallbacks: lay out as if the
   <img> were still a direct child, so Webflow's layout is unchanged. */
picture.ds-picture { display: contents; }

/* Hero / CTA background photo (xylene-ladores, 3024x4032, 858KB): AVIF with a JPEG
   fallback. Wide screens get the bottom 3:2 band (the part that shows, as the image is
   anchored to the bottom), phones the full portrait. AVIFs are kept under the size at
   which macOS sips tiles them (tiled AVIFs can render blank in Chromium). Same gradients and layout as Webflow's rules;
   the plain url() line is the fallback for browsers without image-set(). */
.section_home_hero-header {
  background-image: linear-gradient(135deg, var(--tint-cyan), #fff0), linear-gradient(90deg, var(--white) 18%, #ffffffb3), url("../images/opt/xylene-ladores-wide.jpg");
  background-image: linear-gradient(135deg, var(--tint-cyan), #fff0), linear-gradient(90deg, var(--white) 18%, #ffffffb3), image-set(url("../images/opt/xylene-ladores-wide.avif") type("image/avif"), url("../images/opt/xylene-ladores-wide.jpg") type("image/jpeg"));
}
.section_cta27.text-color-white.color-scheme-1 {
  background-image: linear-gradient(165deg, var(--_primitives---colors--port-gore), color-mix(in srgb, var(--cyan-dark) 94%, transparent)), url("../images/opt/xylene-ladores-wide.jpg");
  background-image: linear-gradient(165deg, var(--_primitives---colors--port-gore), color-mix(in srgb, var(--cyan-dark) 94%, transparent)), image-set(url("../images/opt/xylene-ladores-wide.avif") type("image/avif"), url("../images/opt/xylene-ladores-wide.jpg") type("image/jpeg"));
}
@media screen and (max-width: 767px) {
  .section_home_hero-header {
    background-image: linear-gradient(135deg, var(--tint-cyan), #fff0), linear-gradient(90deg, var(--white) 18%, #ffffffb3), url("../images/opt/xylene-ladores-tall.jpg");
    background-image: linear-gradient(135deg, var(--tint-cyan), #fff0), linear-gradient(90deg, var(--white) 18%, #ffffffb3), image-set(url("../images/opt/xylene-ladores-tall.avif") type("image/avif"), url("../images/opt/xylene-ladores-tall.jpg") type("image/jpeg"));
  }
  .section_cta27.text-color-white.color-scheme-1 {
    background-image: linear-gradient(165deg, var(--_primitives---colors--port-gore), color-mix(in srgb, var(--cyan-dark) 94%, transparent)), url("../images/opt/xylene-ladores-tall.jpg");
    background-image: linear-gradient(165deg, var(--_primitives---colors--port-gore), color-mix(in srgb, var(--cyan-dark) 94%, transparent)), image-set(url("../images/opt/xylene-ladores-tall.avif") type("image/avif"), url("../images/opt/xylene-ladores-tall.jpg") type("image/jpeg"));
  }
}

/* Blog posts: "View all" (to the blog page) below Recent Posts at every width.
   Webflow showed it on phones only, with nothing in its place on wider screens. */
.blog-post3-related_button-row.mobile-landscape {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-large);
}

/* Contact: "Prefer to talk?" pointer under the intro, jumping to Geoff and Tom's
   numbers lower down. The target clears the fixed nav when jumped to. */
.contact10_call-link {
  margin-top: var(--space-xsmall);
  font-weight: 500;
}
.contact10_call-link a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact10_call-link a:hover { text-decoration-thickness: 2px; }
#call-the-team { scroll-margin-top: 6rem; }

/* Form consent checkbox: Privacy Policy and Terms links read as links */
.form_checkbox-label a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form_checkbox-label a:hover { text-decoration-thickness: 2px; }
/* Contact cards: keep each phone number on one line */
.contact-card a[href^="tel:"] { white-space: nowrap; }

/* Intelligence Briefing form note: the Terms of Use link reads as a link */
.text-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* Contact: "Talk to one of our team directly" heading and the Geoff / Tom cards.
   Phones and small tablets (up to 767px): one card per row; inside each card the
   photo stays beside the name, with the number and email underneath. */
.contact-team_heading {
  margin-bottom: var(--space-medium);
}
.contact-team .contact-card img {
  flex: none;
  width: 4rem; /* 64px: large enough to read the faces */
  height: 4rem;
}
@media screen and (max-width: 767px) {
  .contact-team {
    display: flex;
    flex-direction: column;
  }
  .contact-team .flex-horizontal.is-space-between.is-roll {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact-team .flex-horizontal._0-5-rem.is-roll {
    flex-wrap: nowrap;
  }
}

/* Contact form: under the Send button, what happens next and a privacy note
   (in place of a consent checkbox) */
.contact10_form-note {
  margin-top: -0.75rem; /* 12px below the button rather than the form's 24px row gap */
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.contact10_form-note p { margin: 0; }
.contact10_form-next {
  color: var(--ink);
  font-weight: 500;
}
.contact10_form-note a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact10_form-note a:hover { text-decoration-thickness: 2px; }