/* RiskCherry
   ------------------------------------------------------------------
   Poppins for headings (stand-in for Gilroy), Nunito for body
   (stand-in for Filson Soft). Both are self-hosted from /fonts (SIL
   Open Font License), so no request goes to Google before a visitor
   has made a cookie choice. Latin and Latin Extended subsets only.

   Everything below is driven by the tokens in :root. The vertical
   rhythm in particular is one number: --section-y sets the space above
   and below every band on the page, so the whole site retunes from a
   single line rather than from thirty separate padding values.
   ------------------------------------------------------------------ */

/* ---- Fonts ---- */

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-latin-ext-800-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/poppins-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/nunito-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/nunito-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/nunito-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/nunito-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/nunito-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* brand */
  --red: #da2142;        /* was #eb2448: white text was 4.30:1, now 4.91:1 */
  --red-deep: #bf2136;
  --green: #208442;      /* was #2bb059: white text was 2.82:1, now 4.73:1 */
  --green-dark: #1a6c36;   /* hover fill, a step darker than --green */
  --green-text: #1b7239;   /* text on white: the brand green is 2.82:1, this is 5.98:1 */
  --white: #ffffff;
  --pink-soft: #ffffff;  /* the old #f7b9c4 tops out at 2.97:1 on the red,
                            and even the palest pink only reaches 4.41:1 */

  /* text on white */
  --ink: #222222;
  --ink-body: #3a3a3a;
  --ink-muted: #444444;
  --ink-faint: #777777;
  --rule: #e4e4e4;

  /* layout */
  --wrap: 1140px;          /* main content width */
  --wrap-narrow: 820px;    /* long-form reading width: policy, news, FAQ */
  --gutter: 32px;          /* page side padding */
  --section-y: 56px;       /* space above and below every section */
  --header-offset: 118px;  /* sticky header height, for anchor scrolling */
  --radius: 16px;
  --radius-sm: 8px;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--red);
  color: var(--white);
  font-family: Nunito, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* The section padding (--section-y) is the only space at the top and
   bottom of a band. Margins on the first or last element inside would add
   to it and make some gaps bigger than others, so they are zeroed here. */
section > :first-child,
[class$="-inner"] > :first-child {
  margin-top: 0;
}
section > :last-child,
[class$="-inner"] > :last-child {
  margin-bottom: 0;
}

/* Content wrappers. Every section centres its content in one of two
   widths: the wide one for the home page, the narrow one for pages
   that are mostly prose, where a long line is tiring to read. */
.hero-inner,
.about-inner,
.services-inner,
.process-inner,
.markets-inner,
.accreditations-inner,
.contact-inner,
.portal-inner,
.team-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.policy-hero-inner,
.policy-inner,
.news-hero-inner,
.news-inner,
.faq-hero-inner,
.faq-inner,
.more-inner {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
}

/* ---- Header ---- */

html {
  scroll-behavior: smooth;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--red);
  padding: 24px var(--gutter);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1140px;
  margin: 0 auto;
}

.logo-bubble {
  display: inline-block;
  background-color: var(--white);
  border-radius: 40px;
  padding: 10px 22px;
  text-decoration: none;
  line-height: 0;
}

.logo-image {
  display: block;
  height: 34px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 26px;
}

.nav-link {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}



/* ---- Hero ---- */

/* overflow:hidden is load-bearing. Without it the large decorative circle
   sticks 140px past the right edge, creates horizontal scroll, and every
   centred container on the page drifts right. */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-circle-large {
  position: absolute;
  top: -200px;
  right: -140px;
  width: 540px;
  height: 540px;
  border-radius: 270px;
  background-color: var(--red-deep);
}

.hero-circle-small {
  position: absolute;
  bottom: -160px;
  left: -110px;
  width: 340px;
  height: 340px;
  border-radius: 170px;
  background-color: var(--red-deep);
}

.page-caption {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink-soft);
  margin: 0 0 24px 0;
}

/* line-height must stay at or above ~1.3. The green highlight is an inline
   background sized from the font's content area (~1.35em in Poppins), so a
   tighter line-height makes the box on one line overlap the line above. */
.hero-heading {
  font-family: Poppins, sans-serif;
  font-size: 68px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--white);
  max-width: 640px;
  margin: 0 0 28px 0;
}

.highlight-green {
  background-color: var(--green);
  border-radius: 4px;
  padding: 0 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-text {
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  max-width: 620px;
  margin: 0 0 36px 0;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 0;  /* the section padding is the gap; extra margin here made it 104px */
}

.button-primary {
  display: inline-block;
  background-color: var(--green);
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
}

.button-primary:hover {
  background-color: var(--green-dark);
}

.button-secondary {
  display: inline-block;
  background-color: var(--white);
  color: var(--red-deep);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 8px;
  text-decoration: none;
}


/* ---- Services ---- */

.services {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}


.section-heading-dark {
  font-family: Poppins, sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--red-deep);
  margin: 0 0 20px 0;
}

.section-intro-dark {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 640px;
  margin: 0 0 56px 0;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}

.service-card {
  background-color: var(--white);
  border: 2px solid var(--red);
  border-radius: 16px;
  padding: 32px;
}

.service-title {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 12px 0;
}

.service-text {
  font-size: 16px;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Services CTA ---- */

.services-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.services-cta-text {
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--red-deep);
  margin: 0;
}

/* ---- Process ---- */

.process {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}


.section-heading-light {
  font-family: Poppins, sans-serif;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 24px 0;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
  margin-top: 32px;
}

.process-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}

/* was brand green, which is 1.53:1 against this red */
.process-number {
  font-family: Poppins, sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  color: var(--white);
  margin: 0;
}

.process-title {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 0;
}

.process-text {
  font-size: 16px;
  color: var(--white);
  margin: 0;
}

/* ---- Markets ---- */

.markets {
  background-color: var(--red-deep);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}


.markets-intro {
  font-size: 18px;
  color: var(--white);
  max-width: 620px;
  margin: 0 0 40px 0;
}

/* The map stays a single SVG file rather than inline markup: it contains
   ~1250 circles, which would bloat the page for no benefit. */
.markets-map-wrap {
  position: relative;
  margin: 0 0 56px 0;
}

.markets-map {
  display: block;
  width: 100%;
  height: auto;
}

/* tapping anywhere on the map goes to the full list; the pins below sit on
   top of this and go to their own region */
.markets-map-area {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* positioned from each pin's real coordinates in the SVG, as percentages so
   they track the image at any width. 44px keeps the tap target usable even
   though the painted pin is smaller. */
.map-pin {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
}

.map-pin:hover,
.map-pin:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
  outline: none;
}

.markets-map-area:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: -4px;
}

/* Europe carries 19 of the 26, so it takes a double-width column
   and splits internally rather than running as one very tall list. */
.market-grid {
  scroll-margin-top: var(--header-offset);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 28px;
}

.market-list-split {
  column-count: 2;
  column-gap: 32px;
}

.market-list-split .market-item {
  break-inside: avoid;
}

.market-region {
  scroll-margin-top: var(--header-offset);
  display: inline-block;
  background-color: var(--green);
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 8px;
  margin: 0 0 20px 0;
}

.market-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.market-item {
  font-size: 16px;
  color: var(--white);
  padding: 8px 0;
  border-bottom: 1px solid #d1495f;
}

/* no max-width: it is one short sentence, and a 720px cap was breaking it
   onto a second line on a wide screen for no reason. It still wraps
   naturally once the viewport is narrow enough to need it. */
.markets-note {
  font-size: 15px;
  color: var(--white);
  margin: 44px 0 0 0;
}

/* ---- About ---- */

.about {
  background-color: var(--red-deep);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}


.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  margin-top: 40px;
}

.about-text {
  font-size: 18px;
  line-height: 1.65;
  color: var(--white);
  margin: 0 0 20px 0;
}

/* the last paragraph's margin was adding 20px to the gap below the section */
.about-column > :last-child {
  margin-bottom: 0;
}

.mission-card {
  background-color: var(--red);
  border-radius: 16px;
  padding: 36px;
}

/* green on this red measures 1.53:1 and cannot be read. White is the
   best available on this background, as with .person-role. */
.mission-label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 16px 0;
}

.mission-text {
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
}

/* ---- Accreditations ---- */

.accreditations {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}


.accreditation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
}

/* flex column so the "View scope" link sits on the baseline across all four
   cards, whether or not a card carries an accreditation mark */
.accreditation-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--red);
  border-radius: 16px;
  padding: 28px;
}

/* The four marks have three different aspect ratios (NAB is 2:1, SGS 27001
   is square, SGS 9001 is 4:3). Sizing by height rather than width gives them
   equal visual weight instead of letting the square one tower over the rest. */
.accreditation-mark {
  display: block;
  /* the card is a flex column, so without this the default stretch forces
     full width and squashes the mark against the fixed height */
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  height: 92px;
  object-fit: contain;
  margin: 4px 0 20px 0;
}

.accreditation-standard {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--red-deep);
  margin: 0 0 4px 0;
}

.accreditation-number {
  font-family: Poppins, sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--red);
  margin: 0 0 14px 0;
}

/* reserve three lines in every card so the accreditation marks below sit on
   one line, whatever length each issuer description happens to be */
.accreditation-issuer {
  font-size: 15px;
  line-height: 24px;
  min-height: 72px;
  color: var(--ink-muted);
  margin: 0 0 20px 0;
}

.accreditation-card .accreditation-link {
  margin-top: auto;
}

.accreditation-link {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-text);
  text-decoration: none;
}

.accreditation-link:hover {
  text-decoration: underline;
}

/* ---- Accreditations in progress ----
   Deliberately not styled as a card: an outlined, quieter block so it cannot
   be mistaken at a glance for an accreditation we already hold. */

.accreditation-pending {
  margin-top: 32px;
  border: 1px dashed #d4d4d4;
  border-radius: 16px;
  padding: 28px 32px;
  background-color: #fbfbfb;
}

.pending-label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0 0 16px 0;
}

.pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}

.pending-item {
  margin: 0;
}

.pending-standard {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.pending-text {
  display: block;
  font-size: 15px;
  line-height: 24px;
  color: #666666;
}

.pending-note {
  font-size: 15px;
  line-height: 24px;
  color: #666666;
  margin: 20px 0 0 0;
}

/* ---- What accreditation commits us to ---- */

.commitment {
  margin-top: 56px;
}

.commitment-heading {
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px 0;
}

.commitment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.commitment-item {
  border-top: 3px solid var(--green);
  padding-top: 16px;
}

.commitment-term {
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--red-deep);
  margin: 0 0 6px 0;
}

.commitment-text {
  font-size: 15px;
  line-height: 24px;
  color: var(--ink-muted);
  margin: 0;
}

/* ---- Contact ---- */

.contact {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
  text-align: center;
}


.contact-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--white);
  max-width: 560px;
  margin: 20px auto 0 auto;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  margin-top: 56px;
  text-align: left;
}

.contact-form {
  display: block;
}

.form-label {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 8px 0;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--white);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: Nunito, sans-serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 22px 0;
}

.form-consent-link {
  color: var(--white);
}

.contact-detail {
  margin-bottom: 36px;
}

.contact-detail:last-child {
  margin-bottom: 0;
}

.contact-detail-label {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 10px 0;
}

.contact-detail-link {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  margin-bottom: 10px;
}

.contact-detail-link:hover {
  text-decoration: underline;
}

.contact-detail-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
}

/* ---- Want to know more ---- */

.more {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}

.more-heading {
  font-family: Poppins, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--red-deep);
  margin: 0 0 14px 0;
}

.more-text {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 600px;
  margin: 0 auto 30px auto;
}

.more-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ---- 404 ---- */

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 36px 0 0 0;
}

.notfound-note {
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  margin: 36px 0 0 0;
}

/* inline inside a sentence, so it loses the block layout the contact page
   gives this class */
.notfound-link {
  display: inline;
  font-size: inherit;
  margin: 0;
  text-decoration: underline;
}

/* ---- Closing CTA ---- */

.cta-band {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}

.cherry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 46px;
  background-color: var(--white);
  margin-bottom: 28px;
}

.cherry-icon {
  display: block;
  width: 52px;
  height: auto;
}

.cta-heading {
  font-family: Poppins, sans-serif;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  max-width: 760px;
  margin: 0 auto 32px auto;
}

/* ---- Footer ---- */

.site-footer {
  background-color: var(--red-deep);
  padding: 40px var(--gutter);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

.footer-text {
  font-size: 14px;
  color: var(--white);
  margin: 0;
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-link {
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* ---- Client portal ---- */

.portal {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}



.portal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px 36px;
  margin-top: 56px;
}

.portal-feature {
  border-top: 3px solid var(--green);
  padding-top: 20px;
}

.portal-feature-title {
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--red-deep);
  margin: 0 0 10px 0;
}

.portal-feature-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.portal-feature-cta {
  border-top-color: var(--red);
}

.portal-demo-link {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--green-text);
  text-decoration: none;
  margin-top: 14px;
}

.portal-demo-link:hover {
  text-decoration: underline;
}

/* ---- Privacy policy page ---- */

.policy-hero {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}


.policy-title {
  font-family: Poppins, sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 20px 0;
}

.policy-meta {
  font-size: 15px;
  color: var(--white);
  margin: 0 0 6px 0;
}

.policy {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
}


.policy-heading {
  font-family: Poppins, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--red-deep);
  margin: 48px 0 18px 0;
}

.policy-number {
  display: inline-block;
  color: var(--green-text);
  margin-right: 12px;
}

.policy-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 0 18px 0;
}

.policy-list {
  margin: 0 0 18px 0;
  padding-left: 22px;
}

.policy-item {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: 12px;
}

.policy-link {
  color: var(--red-deep);
  font-weight: 600;
}

/* ---- Cookie consent bar ---- */

.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background-color: var(--white);
  border-top: 4px solid var(--green);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 240ms ease;
}

.consent-bar.is-open {
  transform: translateY(0);
}

.consent-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 32px;
}

.consent-title {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--red-deep);
  margin: 0 0 6px 0;
}

.consent-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-body);
  margin: 0;
  max-width: 680px;
}

.consent-link {
  color: var(--red-deep);
  font-weight: 600;
}

.consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* accept and reject are deliberately identical in size and weight */
.consent-button {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  min-width: 124px;
  padding: 14px 24px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.consent-button-accept {
  background-color: var(--green);
  color: var(--white);
}

.consent-button-accept:hover {
  background-color: var(--green-dark);
}

.consent-button-reject {
  background-color: var(--ink-body);
  color: var(--white);
}

.consent-button-reject:hover {
  background-color: var(--ink);
}

.consent-button:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* ---- News topic filter ---- */

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
}

/* the second row sits closer to the first: they read as one control */
.news-filters + .news-filters {
  margin-bottom: 14px;
}

/* same lozenge shape as the tag on each card, so it is obvious what the
   buttons correspond to */
.news-filter {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-body);
  background-color: #f1f1f1;
  border: 2px solid #f1f1f1;
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
}

.news-filter:hover:not(:disabled) {
  border-color: var(--green);
}

/* a combination with nothing in it stays in place but stops responding,
   so the rows do not reflow while you click around them */
.news-filter:disabled {
  opacity: 0.45;
  cursor: default;
}

.news-filter.is-active {
  color: var(--white);
  background-color: var(--green);
  border-color: var(--green);
}

.news-filter:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* no opacity here: dimming it drops the count to 3.39:1. The lighter weight
   is enough to keep it subordinate to the label. */
.news-filter-count {
  font-weight: 600;
  margin-left: 4px;
}

.news-filter-status {
  font-size: 14px;
  color: #767676;
  margin: 0 0 30px 0;
}

/* ---- News ---- */

.news-hero {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}


.news-title {
  font-family: Poppins, sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 22px 0;
}

.news-intro {
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
  max-width: 620px;
}

.news {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
}


.news-card {
  border-top: 3px solid var(--green);
  padding: 26px 0 34px 0;
}

.news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 12px 0;
}

.news-card-link {
  color: var(--red-deep);
  font-weight: 700;
}

.news-card-link:hover {
  color: var(--red);
}

.news-date {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #767676;
}

.news-tag {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--green);
  border-radius: 5px;
  padding: 5px 11px;
}

.news-card-title {
  font-family: Poppins, sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--red-deep);
  margin: 0 0 12px 0;
}

.news-card-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 0 14px 0;
}

.news-card-text:last-child {
  margin-bottom: 0;
}




/* ---- Form validation states ---- */

.form-required {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 8px;
}

.form-required {
  color: var(--white);
}

.form-optional {
  color: var(--white);
  font-weight: 600;
}

.form-input.is-invalid,
.form-textarea.is-invalid {
  box-shadow: 0 0 0 3px #7a0d1f;
}

.form-error {
  font-size: 14px;
  font-weight: 600;
  color: #ffe08a;
  margin: -14px 0 20px 0;
}

.form-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 20px 0;
}

.form-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  accent-color: var(--green);
  cursor: pointer;
}

.form-checkbox.is-invalid {
  outline: 3px solid #ffe08a;
  outline-offset: 2px;
}

.form-consent {
  font-size: 14px;
  color: var(--white);
  margin: 0;
  cursor: pointer;
}

.form-summary {
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffe08a;
  margin: 0 0 20px 0;
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.form-checkbox:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* ---- FAQ ---- */

.faq-hero {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}


.faq-title {
  font-family: Poppins, sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 22px 0;
}

.faq-intro {
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
  max-width: 560px;
}

.faq {
  background-color: var(--white);
  padding: var(--section-y) var(--gutter);
}


.faq-group {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-text);
  margin: 48px 0 8px 0;
}

.faq-group:first-child {
  margin-top: 0;
}

.faq-item {
  border-bottom: 1px solid var(--rule);
}

/* native <details> so it opens with no JavaScript and is keyboard operable */
.faq-question {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--red-deep);
  padding: 22px 48px 22px 0;
}

.faq-question::-webkit-details-marker {
  display: none;
}

/* the default triangle is replaced with a plus that becomes a minus */
.faq-question::after,
.faq-question::before {
  content: "";
  position: absolute;
  right: 6px;
  background-color: var(--green);
  transition: transform 180ms ease, opacity 180ms ease;
}

.faq-question::before {
  top: 50%;
  width: 16px;
  height: 3px;
  margin-top: -1.5px;
}

.faq-question::after {
  top: 50%;
  width: 3px;
  height: 16px;
  margin-top: -8px;
  right: 12.5px;
}

.faq-item[open] .faq-question::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-question:hover {
  color: var(--red);
}

.faq-question:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px;
}

.faq-body {
  padding: 0 48px 24px 0;
}

.faq-answer {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-body);
  margin: 0 0 14px 0;
}

.faq-link {
  color: var(--red-deep);
  font-weight: 700;
}

.faq-link:hover {
  color: var(--red);
}

.faq-answer:last-child {
  margin-bottom: 0;
}

.faq-cta {
  border-top: 3px solid var(--red);
  margin-top: 56px;
  padding-top: 32px;
}

.faq-cta-title {
  font-family: Poppins, sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--red-deep);
  margin: 0 0 22px 0;
}

.news-year {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--green-text);
  margin: 52px 0 4px 0;
}

/* the filter bar now precedes the first year, so target it directly */
.news-year:first-child,
.news-filter-status + .news-year {
  margin-top: 0;
}

/* ---- Team ---- */

/* deeper red: separates Team from the closing CTA below it, and lifts white
   text from 4.30:1 to 6.02:1, which clears the AA threshold */
.team {
  background-color: var(--red-deep);
  padding: var(--section-y) var(--gutter);
  scroll-margin-top: var(--header-offset);
}


.team-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 32px;
}

.team-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--white);
  margin: 0 0 18px 0;
}

.team-text:last-child {
  margin-bottom: 0;
}

.team-subhead {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  margin: 64px 0 0 0;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 820px;
  align-items: start;
  gap: 28px 36px;
  margin-top: 28px;
}

.person {
  border-top: 3px solid var(--green);
  padding-top: 18px;
}

/* native <details>, same pattern as the FAQ: opens without JavaScript and is
   keyboard operable. People without a bio render as a plain block instead,
   so there is no toggle promising something that is not there. */
.person-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  list-style: none;
  padding-right: 34px;
}

/* square source, circular here. The ring keeps the face from bleeding into
   the red behind it, which otherwise happens with a dark jacket or hair. */
.person-photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--green);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.person-expandable .person-head:hover .person-photo {
  transform: rotate(-4deg) scale(1.04);
  box-shadow: 0 0 0 4px var(--white);
}

.person-expandable[open] .person-photo {
  transform: rotate(3deg);
}

.person-id {
  display: block;
  min-width: 0;
}

.person-expandable .person-head {
  cursor: pointer;
}

.person-head::-webkit-details-marker {
  display: none;
}

.person-expandable .person-head::before,
.person-expandable .person-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  background-color: var(--white);
  transition: transform 180ms ease, opacity 180ms ease;
}

.person-expandable .person-head::before {
  width: 14px;
  height: 2px;
  margin-top: -1px;
}

.person-expandable .person-head::after {
  width: 2px;
  height: 14px;
  margin-top: -7px;
  right: 10px;
}

.person-expandable[open] .person-head::after {
  transform: rotate(90deg);
  opacity: 0;
}

.person-expandable .person-head:hover .person-name {
  color: #ffd9e0;
}

.person-expandable .person-head:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 4px;
}

/* Card wrapper used when a person has a LinkedIn link: the link sits
   outside the <details> toggle, absolutely placed beside the name. */
.person-card {
  position: relative;
}

.person-card .person-head {
  padding-right: 84px;   /* room for the LinkedIn circle and the +/- toggle */
}

.person-linkedin {
  position: absolute;
  top: 61px;             /* 3px border + 18px padding + half the 80px photo */
  right: 38px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--white);
  color: #0a66c2;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.person-linkedin svg {
  display: block;
  fill: currentColor;
}

.person-linkedin:hover {
  background-color: #0a66c2;
  color: var(--white);
  transform: translateY(-50%) scale(1.08);
}

.person-linkedin:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.person-name {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 4px 0;
}

/* green on this red measures 1.53:1 and is unreadable. White is 4.30:1,
   matching how body text is handled elsewhere on the same background. */
.person-role {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  opacity: 0.88;
  margin: 0;
}

.person-body {
  padding-top: 4px;
}

/* the human line: set a touch larger than the rest of the card, because it
   is the bit anyone actually reads */
.person-spark {
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  margin: 0 0 18px 0;
  padding-right: 34px;
}

.person-prev {
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 8px 0;
}

/* chips rather than a comma list: a career reads faster as a row of logos
   than as a sentence, and this is the closest we get without logo files */
.company-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 16px 0;
  padding-right: 34px;
}

.company-chip {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 6px 12px;
  white-space: nowrap;
}

.person-bio {
  font-size: 14px;
  line-height: 1.65;
  color: var(--white);
  opacity: 0.9;
  margin: 0;
  padding-right: 34px;
}

/* ---- Netlify form honeypot (must stay hidden from people, visible to bots) ---- */

.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.thankyou-actions {
  margin: 36px 0 0 0;
}



/* ---- Mobile nav toggle (shown only below 900px, see the mobile block) ---- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: var(--white);
  transition: transform 200ms ease, opacity 200ms ease;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-toggle:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

/* ---- Under the hood (/game-cert) ----
   A dark workbench against the brand red, so the panels read as instruments
   rather than marketing. Everything here is scoped to this page. */

.hood-hero {
  background-color: var(--red);
  padding: var(--section-y) var(--gutter);
}

.hood-hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.hood-title {
  font-family: Poppins, sans-serif;
  font-size: 54px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin: 0 0 22px 0;
}

.hood-intro {
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  margin: 0;
  max-width: 720px;
}

.hood-intro + .hood-intro {
  margin-top: 16px;
}

/* the tagline sits on its own line under the title, with the same green
   highlight the home page hero uses for "made simple" */
.hood-title-sub {
  display: block;
  font-size: 0.62em;
  line-height: 1.35;   /* the green highlight needs this, see .hero-heading */
  margin-top: 12px;
}

.hood {
  background-color: #141418;
  padding: var(--section-y) var(--gutter);
}

.hood-inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

.hood-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.hood-panel {
  display: flex;
  flex-direction: column;
  background-color: #1d1d23;
  border: 1px solid #2e2e38;
  border-radius: var(--radius);
  overflow: hidden;
}

.hood-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background-color: #23232b;
  border-bottom: 1px solid #2e2e38;
}

.hood-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--green);
  flex-shrink: 0;
}

.hood-panel-title {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.hood-tag {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #a7a7b4;
  white-space: nowrap;
}

.hood-note {
  font-size: 12px;
  line-height: 1.5;
  color: #8e8e9c;
  margin: 12px 0 0 0;
}

/* ---- the build under test ---- */

.hood-screen {
  padding: 20px 18px 18px 18px;
}

.slot {
  position: relative;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0%, #3a1030 0%, #1a0a18 70%);
  border: 1px solid #44324a;
  padding: 16px;
}

.slot-reels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.reel {
  height: 138px;           /* exactly three 46px cells */
  overflow: hidden;
  border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.42);
}

.reel-strip {
  will-change: transform;
}

.reel-strip.is-spinning {
  animation: reel-roll 220ms linear infinite;
  filter: blur(1.4px);
}

/* the strip repeats its symbols, so shifting by one block loops seamlessly */
@keyframes reel-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-460px); }
}

.reel-cell {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.slot-win {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #141418;
  background-color: #ffd54a;
  border-radius: 8px;
  padding: 8px 18px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.slot-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0 0 0;
}

.slot-meta-cell {
  background-color: #23232b;
  border-radius: 8px;
  padding: 10px 12px;
}

.slot-meta dt {
  font-family: Poppins, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a9aa8;
  margin: 0 0 4px 0;
}

.slot-meta dd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  color: #ffffff;
  margin: 0;
}

.slot-meta dd.is-up { color: #4ad17a; }
.slot-meta dd.is-down { color: #ff8a9b; }

/* ---- test execution ---- */

.hood-terminal {
  flex: 1;
  min-height: 330px;
  max-height: 330px;
  overflow: hidden;
  padding: 14px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}

.term-line {
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.term-time { color: #8e8e9c; margin-right: 10px; }
.term-verb { font-weight: 700; margin-right: 10px; }
.term-id   { color: #ffffff; margin-right: 10px; }
.term-ref  { color: #9a9aa8; }

.is-run .term-verb  { color: #7cc0ff; }
.is-pass .term-verb { color: #4ad17a; }
.is-obs .term-verb  { color: #4ad17a; }
.is-obs .term-ref   { color: #ffd166; }
.is-fail .term-verb { color: #ff8a9b; }
.is-hold .term-verb { color: #ffd166; }
.term-jur { color: #8e8e9c; margin-left: 10px; }
.term-multi { color: #7cc0ff; margin-left: 10px; }

.is-req { padding-left: 76px; margin-bottom: 8px; }
.term-req  { color: #c9c9d4; }
.term-note { color: #8e8e9c; margin-left: 10px; }

/* ---- defects ---- */

.bug-list {
  list-style: none;
  margin: 0;
  padding: 10px 18px 6px 18px;
  /* fixed height so the panel, and the page with it, does not grow each time
     a finding lands. Newest is on top; older ones fade out at the bottom. */
  height: 300px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.bug {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "id sev title" ".  .   ref";
  gap: 2px 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #2a2a33;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.bug.is-in { opacity: 1; transform: none; }

.bug-id {
  grid-area: id;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #9a9aa8;
}

.bug-sev {
  grid-area: sev;
  font-family: Poppins, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 7px;
}

.bug-sev-nc  { background-color: #7a1226; color: #ffd9e0; }   /* non-conformity: blocks */
.bug-sev-obs { background-color: #5c4a12; color: #ffe8a8; }   /* observation: noted */

.bug-title {
  grid-area: title;
  font-size: 14px;
  line-height: 1.45;
  color: #e8e8ef;
}

.bug-ref {
  grid-area: ref;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #8e8e9c;
}

.bug-sent {
  grid-column: 3;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #8e8e9c;
  margin-top: 2px;
}

.bug-sent::before { content: "\2192  "; }
.bug-sent.is-sent { color: #7cc0ff; }

/* the small print, in the spirit of a product demo's "sequences shortened" */
.hood-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: #8e8e9c;
  max-width: 760px;
  margin: 36px 0 0 0;
  padding-top: 16px;
  border-top: 1px solid #2e2e38;
}

/* ---- client Slack channel ----
   Pinned to the bottom of the findings panel, and light like the client's
   own workspace so it reads as their side, not more of the lab bench. Laid
   out like the real RiskCherry Alerts post; generic chat styling, no Slack
   branding. */

.slack {
  margin-top: auto;
  background-color: #ffffff;
  color: #1d1c1d;
}

.slack-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid #e4e4e7;
  font-size: 13px;
}

.slack-hash { color: #616061; font-weight: 700; }
.slack-channel { color: #1d1c1d; font-weight: 700; }
.slack-where {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #616061;
}

.slack-feed {
  padding: 4px 18px 14px 18px;
  min-height: 176px;
}

.slack-empty {
  font-size: 13px;
  color: #616061;
  margin: 12px 0 0 0;
}

.slack-msg {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 280ms ease;
}

.slack-msg + .slack-msg { border-top: 1px solid #ececef; }
.slack-msg.is-in { opacity: 1; transform: none; }

.slack-avatar img { width: 34px; height: auto; display: block; }

.slack-body p { margin: 0; }

.slack-from { font-size: 14px; color: #1d1c1d; }

.slack-app {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #616061;
  background-color: #ececef;
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 6px;
  vertical-align: 1px;
}

.slack-time { font-size: 12px; color: #616061; }

.slack-title {
  font-size: 15px;
  color: #1d1c1d;
  margin-top: 2px !important;
}

.slack-fields {
  font-size: 12.5px;
  line-height: 1.5;
  color: #454245;
  margin-top: 4px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececef;
}

.slack-fields b { color: #454245; font-weight: 700; }
.slack-pipe { color: #767676; }

.slack-cta {
  font-size: 13px;
  color: #1d1c1d;
  margin-top: 8px !important;
}

.slack-button {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffffff;
  background-color: #1b6b4f;
  border-radius: 5px;
  padding: 6px 12px;
}

.bug-sent.is-retest { color: #ffd166; }

/* ---- maths ---- */

.hood-chart {
  height: 230px;
  padding: 14px 10px 0 10px;
}

.hood-chart canvas { display: block; }

.sim-cmd,
.sim-log {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-cmd {
  font-size: 12px;
  color: #4ad17a;
  margin: 14px 18px 0 18px;
}

/* mirrors the line the client's simulator prints every 10,000 rounds. It
   wraps rather than truncating, because the field that gets cut off is the
   one that matters (Current RTP). Two lines reserved so nothing jumps. */
.sim-log {
  font-size: 11px;
  line-height: 1.5;
  color: #a7a7b4;
  white-space: normal;
  min-height: 3em;
  margin: 4px 18px 10px 18px;
}

.math-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 6px 18px 0 18px;
}

.math-cell {
  background-color: #23232b;
  border-radius: 8px;
  padding: 10px 12px;
}

.math-meta dt {
  font-family: Poppins, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a9aa8;
  margin: 0 0 4px 0;
}

.math-meta dd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  color: #ffffff;
  margin: 0;
}

.math-meter { padding: 14px 18px 18px 18px; }

.math-meter-head {
  display: flex;
  justify-content: space-between;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a9aa8;
  margin-bottom: 8px;
}

.math-meter-head .is-pass { color: #4ad17a; }
.math-meter-head .is-warn { color: #ffc266; }

.math-meter-track {
  height: 7px;
  border-radius: 4px;
  background-color: #2e2e38;
  overflow: hidden;
}

.math-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background-color: var(--green);
  transition: width 200ms linear;
}

.hood-legend {
  font-size: 16px;
  line-height: 1.6;
  color: #a7a7b4;
  max-width: 760px;
  margin: 26px 0 0 0;
}

.hood-legend + .hood-legend {
  margin-top: 14px;
}

/* ======================================================
   Mobile. Must stay LAST in this file: these rules share
   specificity with the desktop ones, so anything written
   below here would override them.
   ====================================================== */

@media (max-width: 900px) {
  /* Retunes every section at once: tighter bands and narrower gutters,
     so a phone screen gives more of its width to the content. */
  :root {
    --section-y: 44px;
    --gutter: 22px;
  }

  .hero-heading {
    font-size: 42px;
  }
  .section-heading-dark {
    font-size: 32px;
  }
  .section-heading-light {
    font-size: 32px;
  }
  .cta-heading {
    font-size: 30px;
  }
  .service-grid {
    grid-template-columns: 1fr;
  }
  .process-grid {
    grid-template-columns: 1fr;
  }
  .market-grid {
    grid-template-columns: 1fr;
  }
  .market-list-split {
    column-count: 1;
  }
  .pending-list {
    grid-template-columns: 1fr;
  }
  .accreditation-pending {
    padding: 24px 20px;
  }
  .commitment-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .commitment {
    margin-top: 44px;
  }
  .more-heading {
    font-size: 27px;
  }
  .more-actions {
    flex-direction: column;
  }
  .notfound-actions {
    gap: 10px;
  }
  .services-cta {
    gap: 14px;
  }
  .services-cta-text {
    font-size: 17px;
  }
  .hood-title {
    font-size: 36px;
  }
  .hood-grid {
    grid-template-columns: 1fr;
  }
  .slot-meta,
  .math-meta {
    grid-template-columns: 1fr 1fr;
  }
  .reel-cell {
    font-size: 21px;
  }
  .hood-terminal {
    min-height: 260px;
    max-height: 260px;
    font-size: 11px;
  }
  .is-req {
    padding-left: 0;
  }
  .hood-chart {
    height: 190px;
  }
  .sim-cmd {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .person-photo {
    width: 64px;
    height: 64px;
  }
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .policy-title {
    font-size: 36px;
  }
  .news-title {
    font-size: 36px;
  }
  .faq-title {
    font-size: 36px;
  }
  .faq-question {
    font-size: 17px;
  }
  .news-card-title {
    font-size: 22px;
  }
  .policy-heading {
    font-size: 21px;
  }
  .consent-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 24px;
  }
  .consent-actions {
    width: 100%;
    flex-direction: column;
  }
  .consent-button {
    width: 100%;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .team-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* keep name, role, LinkedIn and toggle on one row at phone width */
  .person-photo {
    width: 64px;
    height: 64px;
  }
  .person-name {
    font-size: 18px;
  }
  .person-role {
    font-size: 14px;
  }
  .person-card .person-head {
    padding-right: 72px;
  }
  .person-linkedin {
    top: 53px;           /* 3px border + 18px padding + half the 64px photo */
    right: 34px;
    width: 32px;
    height: 32px;
  }
  .accreditation-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .mission-text {
    font-size: 20px;
  }
  /* the whole wrap, not just the image: the pins and the map link are
     positioned over it and would otherwise stay as invisible tap targets */
  .markets-map-wrap,
  .market-region-num {
    display: none;
  }
  .nav-links {
    display: none;
  }
  .logo-image {
    height: 28px;
  }
  .cherry-badge {
    width: 76px;
    height: 76px;
    border-radius: 38px;
  }
  .nav-toggle {
    display: flex;
  }
  .header-inner {
    position: relative;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    z-index: 20;
    flex-direction: column;
    gap: 0;
    margin-top: 24px;
    padding: 8px 0;
    background-color: var(--red-deep);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  }
  .nav-links.is-open {
    display: flex;
  }
  .nav-link {
    padding: 15px var(--gutter);
    font-size: 17px;
  }
  .nav-link:hover {
    background-color: #a81b2e;
    text-decoration: none;
  }
}