@charset "UTF-8";
/* ==========================================================================
   Treacle Technologies — global styles
   Base / desktop only. All media queries live in css/responsive.css.
   Tokens live in css/root.css. Compile this file to style.css manually.
   ========================================================================== */
/* ==========================================================================
   1. Base
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #3a404d;
  background: #fff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}
a:hover {
  color: #c3443f;
}

ul,
ol {
  list-style: none;
  /* `* { margin: 0 }` loses to normalize.css and UA element rules on
       specificity, so the resets that matter are repeated per element here. */
  margin: 0;
  padding: 0;
}

figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* ==========================================================================
   2. Typography — scale from Figma
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading, "Inter", sans-serif);
  color: #0c1d2e;
}

h1 {
  font-size: 3.75rem;
  line-height: 4.125rem;
  font-weight: 500;
}

h2 {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 500;
}

/* h3 / h4 are not used on the home page — sizes interpolated from the scale.
   Reconcile against the Figma node that first uses them. */
h3 {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 500;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
}

h5 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
}

h6 {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  color: #3a404d;
}

/* Lead paragraph — section subtitles, hero copy */
.lead {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--muted-slate, #506a7c);
}

/* Accent word inside a heading — Figma splits headings with a red span */
.accent {
  color: #c3443f;
}

/* ==========================================================================
   3. Section primitives
   ========================================================================== */
.sec-space {
  padding: 7.5rem 0;
}

.sec-space-sm {
  padding: 3.75rem 0;
}

.sec-space-md {
  padding: 6.25rem 0;
}

/* Centered section head: badge + heading + subtitle */
.sechead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.sechead h2 {
  margin: 0;
}
.sechead p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--muted-slate, #506a7c);
  max-width: 45rem;
}

/* Left-aligned variant */
.sechead.sechead-left {
  align-items: flex-start;
  text-align: left;
}

/* Dark panel carrying Figma's two-layer backdrop: 0.5px rules on a 40px grid,
   then 1.5px dots on the same pitch. Pure decoration, so both are gradients
   rather than exported assets. Shared by the home hero and the inner-page
   banners — add `gridbg` alongside the section's own class. */
.gridbg {
  position: relative;
  overflow: hidden;
  background: #032638;
}
.gridbg:before, .gridbg:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 2.5rem 2.5rem;
}
.gridbg:before {
  background-image: linear-gradient(to right, var(--grid-line, rgba(255, 255, 255, 0.08)) 0.0625rem, transparent 0.0625rem), linear-gradient(to bottom, var(--grid-line, rgba(255, 255, 255, 0.08)) 0.0625rem, transparent 0.0625rem);
}
.gridbg:after {
  background-image: radial-gradient(circle, var(--grid-dot, rgba(255, 255, 255, 0.1)) 0.046875rem, transparent 0.046875rem);
}
.gridbg {
  /* Lifts the real content above both decorative layers. */
}
.gridbg > .container {
  position: relative;
  z-index: 1;
}

.innerbanner {
  padding: 7rem 0 10rem;
  text-align: center;
}
.innerbanner .bannertext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 65rem;
  margin: 0 auto;
}
.innerbanner h1 {
  color: #fff;
}
.innerbanner p {
  font-size: 1.125rem;
  line-height: 1.4;
  color: #8fa3b5;
}

.faqbody {
  display: none;
}

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.taglist li {
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background: var(--panel-grey, #f5f6f8);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: normal;
  color: var(--dark-gray, #3a404d);
  white-space: nowrap;
}

.taglist.taglist-dark li {
  background: var(--tag-dark-bg, rgba(255, 255, 255, 0.1));
  color: var(--hero-body, #8fa3b5);
}

/* ==========================================================================
   4. Eyebrow / section badge
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 6.25rem;
  background: var(--badge-tint, rgba(195, 68, 63, 0.08));
  color: #c3443f;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Solid blue variant — used on the dark hero */
.eyebrow.eyebrow-blue {
  background: var(--primary-blue, #0a5176);
  color: #fff;
  letter-spacing: 0.125rem;
  font-weight: 600;
}

/* ==========================================================================
   5. Buttons

   Every variant ships in two forms — with a trailing arrow and without.
   The arrow is markup, not CSS, so it stays a WP-editable node:
     <a class="btn redbtn">Book a Demo <i class="fa-solid fa-arrow-right"></i></a>
     <a class="btn redbtn">Book a Demo</a>
   Figma calls the arrow the component's `showLayers` toggle: on in the navbar,
   off on the hero and final-CTA primary buttons.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 0.0625rem solid transparent;
  border-radius: 6.25rem;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.btn i {
  font-size: 0.875rem;
}

/* Primary — solid red */
.btn.redbtn {
  background: #c3443f;
  border-color: #c3443f;
  color: #fff;
}
.btn.redbtn:hover {
  background: var(--primary-blue, #0a5176);
  border-color: var(--primary-blue, #0a5176);
  color: #fff;
}

/* Outline — used on dark backgrounds */
.btn.btnborder {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn.btnborder:hover {
  background: #fff;
  border-color: #fff;
  color: #0c1d2e;
}

/* Outline — light background variant */
.btn.btnborder.btnborder-dark {
  border-color: var(--border-light, #e1e6eb);
  color: #0c1d2e;
}
.btn.btnborder.btnborder-dark:hover {
  background: #0c1d2e;
  border-color: #0c1d2e;
  color: #fff;
}

/* Submit button that needs an icon — see SOP §6 */
.submitbtn {
  position: relative;
}
.submitbtn input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ==========================================================================
   6. Forms
   ========================================================================== */
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #0c1d2e;
  margin-bottom: 0.5rem;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
input[type=password],
input[type=date],
select,
textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 0.5rem;
  background: #fff;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #3a404d;
  outline: none;
  transition: border-color 0.3s ease-in-out;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=date]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--muted-slate, #506a7c);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=url]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=date]::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--muted-slate, #506a7c);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-blue, #0a5176);
}

textarea {
  height: 8.75rem;
  resize: none;
}

select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border: 0.0625rem solid #c3443f;
  border-radius: 6.25rem;
  background: #c3443f;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
input[type=submit]:hover {
  background: var(--primary-blue, #0a5176);
  border-color: var(--primary-blue, #0a5176);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.checkbox input[type=checkbox] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
  accent-color: #c3443f;
  cursor: pointer;
}
.checkbox label {
  margin: 0;
  font-weight: 400;
  color: var(--muted-slate, #506a7c);
  cursor: pointer;
}

/* ==========================================================================
   7. Hero section
   ========================================================================== */
.herosec .herorow {
  align-items: center;
}
.herosec .heroleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.herosec .heroleft h1 {
  color: #fff;
}
.herosec .heroleft p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--hero-body, #8fa3b5);
  max-width: 39.3125rem;
}
.herosec .herobtn {
  display: flex;
  gap: 1rem;
}
.herosec .heroimg {
  background: #fff;
  border: 0.625rem solid var(--border-frame, #dee8ed);
  border-radius: 1.875rem;
  padding: 0.9375rem 0.625rem 0.5625rem;
  overflow: hidden;
}
.herosec .heroimg img {
  width: 100%;
}
.herosec .herostats {
  margin-top: 4.375rem;
}
.herosec .heroline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.0625rem;
  /* 32x2 rule that leads the tagline */
}
.herosec .heroline:before {
  content: "";
  flex-shrink: 0;
  width: 2rem;
  height: 0.125rem;
  background: #fff;
}
.herosec .heroline span {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
  color: #fff;
}
.herosec .statrow {
  row-gap: 1.5rem;
}
.herosec .statcard {
  height: 100%;
  padding: 2rem;
  border: 0.0625rem solid var(--border-hairline, rgba(255, 255, 255, 0.1));
  border-radius: 1rem;
  background: var(--stat-card-bg, rgba(10, 81, 118, 0.8));
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
}
.herosec .statcard h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  margin-bottom: 0.75rem;
}
.herosec .statcard p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}

/* ==========================================================================
   8. Platform overview — About page
   ========================================================================== */
.overviewsec {
  /* Figma runs this one 135 / 95 rather than the 120 of .sec-space. */
  padding: 8.4375rem 0 5.9375rem;
  background: #fff;
}
.overviewsec .overviewrow {
  align-items: flex-start;
}
.overviewsec .overviewtext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.overviewsec .overviewtext h2 {
  line-height: normal;
}
.overviewsec .overviewtext p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--muted-slate, #506a7c);
}
.overviewsec .cybermaze {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.0625rem;
  text-align: center;
}
.overviewsec .cybermaze img {
  width: 100%;
  max-width: 34.75rem;
}
.overviewsec .cybermaze figcaption {
  display: flex;
  flex-direction: column;
}
.overviewsec .cybermaze strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: normal;
  color: #0c1d2e;
}
.overviewsec .cybermaze span {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #0c1d2e;
}

/* ==========================================================================
   9. Key capabilities — About page
   ========================================================================== */
.capabilitysec {
  background: var(--panel-grey, #f5f6f8);
}
.capabilitysec .sechead {
  margin-bottom: 5.5rem;
}
.capabilitysec .sechead p {
  max-width: 73.75rem;
}
.capabilitysec .capabilityrow {
  row-gap: 1.5rem;
}
.capabilitysec .capabilitycard {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  padding: 1.875rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  background: #fff;
}
.capabilitysec .capabilityico {
  flex-shrink: 0;
  width: 4.375rem;
  height: 4.375rem;
}
.capabilitysec .capabilityico img {
  width: 100%;
  height: 100%;
}
.capabilitysec .capabilitytext h5 {
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: #c3443f;
}
.capabilitysec .capabilitytext p {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

/* ==========================================================================
   10. Core benefits — About page
   ========================================================================== */
.benefitsec {
  background: #fff;
  /* A single statement rather than a heading plus lede, so it runs smaller
     than the global h2 — 34px, between the h2 (48) and h3 (32). */
}
.benefitsec .sechead h2 {
  max-width: 67.875rem;
  font-size: 2.125rem;
  line-height: normal;
}

/* ==========================================================================
   12. Platform architecture — About page
   ========================================================================== */
.archsec {
  background: var(--section-tint, #f0f4f6);
}
.archsec .sechead {
  max-width: 62.5rem;
  margin: 0 auto 4rem;
  /* Runs the full header width and in the darker body grey, unlike the
     usual 720px muted-slate lede. */
}
.archsec .sechead p {
  max-width: none;
  font-size: 1rem;
  color: var(--dark-gray, #3a404d);
}
.archsec .archcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.archsec .archcard h5 {
  line-height: normal;
}
.archsec .archcard p {
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--muted-slate, #506a7c);
}

/* ==========================================================================
   13. Detection by proof
   ========================================================================== */
.detectionsec .sechead {
  margin-bottom: 4rem;
}
.detectionsec .comparerow {
  --bs-gutter-x: 2rem;
}
.detectionsec .comparecard {
  height: 100%;
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: var(--panel-grey, #f5f6f8);
  /* Panel label. Global h6 is already 18px/700 — only the uppercase
     treatment and tracking are new. */
}
.detectionsec .comparecard > h6 {
  margin-bottom: 2rem;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
}
.detectionsec .comparecard > ul {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.detectionsec .comparecard > ul > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.detectionsec .comparecard > ul > li > i {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
  color: #c3443f;
}
.detectionsec .comparecard .comparetext h6 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: normal;
}
.detectionsec .comparecard .comparetext p {
  font-size: 0.875rem;
  line-height: normal;
  color: var(--muted-slate, #506a7c);
}
.detectionsec {
  /* Right-hand panel — same component, dark surface. */
}
.detectionsec .comparecard.comparedark {
  background: var(--primary-blue, #0a5176);
}
.detectionsec .comparecard.comparedark > h6,
.detectionsec .comparecard.comparedark .comparetext h6 {
  color: #fff;
}
.detectionsec .comparecard.comparedark > ul > li > i {
  color: var(--success-green, #10b981);
}
.detectionsec .comparecard.comparedark .comparetext p {
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}

/* ==========================================================================
   14. Platform coverage
   ========================================================================== */
.platformsec {
  background: var(--panel-grey, #f5f6f8);
}
.platformsec .sechead {
  margin-bottom: 4rem;
}
.platformsec .domainrow {
  --bs-gutter-x: 1.875rem;
}
.platformsec {
  /* Cards are flat on purpose: icon, title, copy, tags as siblings, so each
     one maps to a single WP loop iteration / ACF repeater row. */
}
.platformsec .domaincard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.5rem 1.875rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1.5rem;
  background: #fff;
}
.platformsec .domaincard h5 {
  margin-bottom: 1.25rem;
  line-height: normal;
}
.platformsec .domaincard p {
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}
.platformsec .domainico {
  width: 4.375rem;
  height: 4.375rem;
  margin-bottom: 1.25rem;
  border-radius: 0.625rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.platformsec .domainico img {
  width: 4rem;
  height: 4rem;
}
.platformsec {
  /* Chips come from the global .taglist; margin-top:auto keeps the rows on a
     common baseline once the cards are equal height, and the 24px above still
     holds as the minimum. */
}
.platformsec .domaincard .taglist {
  margin-top: auto;
}

/* ==========================================================================
   15. How it works
   ========================================================================== */
.stepsec {
  background: #fff;
}
.stepsec .sechead {
  margin-bottom: 5rem;
}
.stepsec .stepcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0.625rem;
  border-radius: 1rem;
  text-align: center;
}
.stepsec .stepcard h5 {
  margin-bottom: 0.5rem;
  line-height: normal;
}
.stepsec .stepcard p {
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.stepsec .stepcard h5,
.stepsec .stepcard p {
  max-width: 13rem;
}
.stepsec .stepcard {
  /* Dotted connector into the next step. Figma exports it as a PNG; it is
     a 2px-on/2px-off rule plus a chevron, so it is drawn here instead.
     Decoration only — never a content node. */
}
.stepsec .stepcard:before, .stepsec .stepcard:after {
  position: absolute;
  top: 2.8125rem;
  transform: translateY(-50%);
  color: var(--connector-grey, #b8b8b8);
  pointer-events: none;
}
.stepsec .stepcard:before {
  content: "";
  right: -2.65625rem;
  width: 4.609375rem;
  height: 0.0625rem;
  background-image: linear-gradient(to right, var(--connector-grey, #b8b8b8) 0 0.125rem, transparent 0.125rem 0.25rem);
  background-size: 0.25rem 0.0625rem;
}
.stepsec .stepcard:after {
  content: "\f054";
  /* fa-chevron-right */
  right: -3.453125rem;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1;
}
.stepsec {
  /* Nothing to connect to after the last step. */
}
.stepsec .steprow > div:last-child .stepcard:before, .stepsec .steprow > div:last-child .stepcard:after {
  content: none;
}
.stepsec .stepico {
  width: 4.375rem;
  height: 4.375rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepsec .stepico img {
  width: 100%;
  height: 100%;
}
.stepsec .stepnum {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  color: #c3443f;
}

/* ==========================================================================
   16. Why deception
   ========================================================================== */
.whysec {
  position: relative;
  /* Figma layers a 30%-opacity photo over solid #073e5b. Compositing the
     colour at 70% over the full-strength photo lands on the same pixel
     values, and keeps the photo an inline, WP-editable background. */
}
.whysec:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(7, 62, 91, 0.7);
}
.whysec > .container {
  position: relative;
  z-index: 1;
}
.whysec .whyrow {
  --bs-gutter-x: 4rem;
}
.whysec .whyleft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3.125rem;
}
.whysec .whyleft h2 {
  line-height: 1.5;
  color: #fff;
}
.whysec .whyleft > p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}
.whysec .whystatrow {
  --bs-gutter-x: 1rem;
  margin-bottom: 1.5rem;
}
.whysec .whystat {
  height: 100%;
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  background: #fff;
}
.whysec .whystat h6 {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
}
.whysec .whystat p {
  font-size: 0.75rem;
  line-height: normal;
  color: var(--muted-slate, #506a7c);
}
.whysec {
  /* Display figure, not a heading — it carries no outline weight. */
}
.whysec .whynum {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: normal;
  color: #c3443f;
}
.whysec .whynote {
  padding: 1.25rem 2rem;
  border-radius: 1rem;
  background: var(--mid-blue, #196389);
}
.whysec .whynote h6 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: normal;
  color: #fff;
}
.whysec .whynote p {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: #fff;
}
.whysec {
  /* The photo is taller than the copy column at this width, so leaving it in
     flow lets its intrinsic height drive the row (924px against the 806px of
     text). Taking it out of flow lets the copy set the row height and the
     stretched column gives the image something definite to fill. */
}
.whysec .whyimgcol {
  position: relative;
}
.whysec .whyimg {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  overflow: hidden;
}
.whysec .whyimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ==========================================================================
   17. Client logos
   ========================================================================== */
.logosec {
  padding: 6rem 0;
  background: #fff;
}
.logosec .sechead {
  margin-bottom: 4rem;
}
.logosec .sechead .eyebrow {
  letter-spacing: normal;
}
.logosec .sechead h2 {
  line-height: 1.3;
}
.logosec .sechead p {
  line-height: 1.4;
}
.logosec .logorow {
  row-gap: 1.5rem;
}
.logosec .logocard {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7.375rem;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--logo-card-bg, #f6f6f6);
}
.logosec .logocard img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.proofsec {
  background: var(--section-tint, #f0f4f6);
}
.proofsec .sechead {
  margin-bottom: 4rem;
}
.proofsec .proofrow {
  align-items: center;
}
.proofsec .interceptcard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: var(--footer-dark, #05223a);
}
.proofsec .interceptcard h4 {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: normal;
  color: #fff;
}
.proofsec .interceptcard p {
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider-navy, #1e3b50);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}
.proofsec .interceptmeta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 0.75rem;
  line-height: normal;
  white-space: nowrap;
}
.proofsec .interceptstatus {
  font-weight: 700;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #c3443f;
}
.proofsec .interceptid {
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}
.proofsec {
  /* Deployment picker. Figma shows the first row selected; .proofactive is the
     hook for whichever row is current. */
}
.proofsec .prooflist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.proofsec .prooflist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  color: #0c1d2e;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.proofsec .prooflist i {
  flex-shrink: 0;
  font-size: 1rem;
}
.proofsec .prooflist li.proofactive a,
.proofsec .prooflist a:hover {
  background: var(--primary-blue, #0a5176);
  color: #fff;
}

/* ==========================================================================
   19. Team
   ========================================================================== */
.teamsec {
  background: #fff;
}
.teamsec .sechead {
  margin-bottom: 4rem;
  /* This heading runs larger and lighter than the global h2 — 56px regular
     against 48px medium. */
}
.teamsec .sechead h2 {
  font-size: 3.5rem;
  font-weight: 400;
  line-height: normal;
}
.teamsec .teamrow {
  margin-bottom: 4rem;
}
.teamsec .teamcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  text-align: center;
}
.teamsec .teamcard h5 {
  margin-bottom: 0.5rem;
  line-height: normal;
  color: var(--primary-blue, #0a5176);
}
.teamsec .teamcard p {
  font-size: 0.875rem;
  line-height: 1.375rem;
}
.teamsec .teamimg {
  width: 8rem;
  height: 8rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  overflow: hidden;
}
.teamsec .teamimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.teamsec .teamrole {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.09375rem;
  text-transform: uppercase;
  color: #c3443f;
}
.teamsec .advisorynote {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: var(--blue-tint, rgba(10, 81, 118, 0.06));
}
.teamsec .advisorynote i {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--primary-blue, #0a5176);
}
.teamsec .advisorynote p {
  font-size: 0.875rem;
  line-height: normal;
  color: #0c1d2e;
}
.teamsec.companyPg {
  background-color: #f5f6f8;
}

/* ==========================================================================
   20. Blog and resources
   ========================================================================== */
.blogsec {
  background: var(--panel-grey, #f5f6f8);
}
.blogsec .sechead {
  margin-bottom: 4rem;
}
.blogsec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.blogsec .sechead h2 {
  line-height: 3.5rem;
  letter-spacing: -0.0625rem;
}
.blogsec .blogrow {
  --bs-gutter-x: 2rem;
  row-gap: 2rem;
}
.blogsec .blogcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
  /* 22px — between the global h5 (20) and h4 (24); card titles stay on h5
     across the build, so the size is scoped rather than the tag swapped. */
}
.blogsec .blogcard h5 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  line-height: 1.875rem;
}
.blogsec .blogcard p {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--muted-slate, #506a7c);
}
.blogsec .blogimg {
  width: 100%;
  height: 13.75rem;
  margin-bottom: 1.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.blogsec .blogimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.blogsec {
  /* Same chip geometry as .taglist li, but it carries a single taxonomy term
     rather than a list, so it stays a plain span for the WP field. */
}
.blogsec .blogcat {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  background: var(--badge-tint, rgba(195, 68, 63, 0.08));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #c3443f;
}
.blogsec {
  /* Pinned to the card floor so the links align once the cards equalise. */
}
.blogsec .blogmore {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #c3443f;
}
.blogsec .blogmore i {
  font-size: 1rem;
}
.blogsec .industry-cont {
  row-gap: 4rem;
  margin-top: 4rem;
}
.blogsec .industry-cont .blogcard h5 {
  font-size: 1.5rem;
}
.blogsec .industry-cont .blogcard p {
  color: var(--Dark-gray, #3a404d);
}
.blogsec .industry-cont .blogimg {
  height: 11.25rem;
}

.industry-wrap h2 {
  margin-bottom: 1rem;
}

/* ==========================================================================
   21. Compliance
   ========================================================================== */
.compliancesec {
  background: #fff;
}
.compliancesec .sechead {
  gap: 1.5rem;
  margin-bottom: 2.625rem;
}
.compliancesec .sechead h2 {
  line-height: 3.375rem;
}
.compliancesec .sechead p {
  max-width: 70.375rem;
  line-height: 1.5rem;
}
.compliancesec .compliancerow {
  --bs-gutter-x: 2.625rem;
}
.compliancesec .complianceimg {
  height: 333px;
  border-radius: 1.5rem;
  overflow: hidden;
}
.compliancesec .complianceimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.compliancesec {
  /* Five items over two columns — the row wraps to 2 / 2 / 1 on its own. */
}
.compliancesec .compliancegrid {
  --bs-gutter-x: 1.875rem;
  row-gap: 1.875rem;
}
.compliancesec .complianceitem {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--panel-grey, #f5f6f8);
}
.compliancesec .complianceitem img {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.compliancesec .complianceitem p {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #0c1d2e;
}

/* ==========================================================================
   22. FAQ

   Markup uses the .faq / .faqitem / .faqhead / .faqbody / .faqactive hooks the
   accordion in js/app.js already binds to — one item open at a time.
   ========================================================================== */
.faqsec {
  background: var(--panel-grey, #f5f6f8);
}
.faqsec .sechead {
  gap: 1.25rem;
  margin-bottom: 5rem;
}
.faqsec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.faqsec .sechead h2 {
  line-height: 1.15;
  letter-spacing: -0.0625rem;
}
.faqsec .sechead p {
  max-width: 50rem;
  line-height: 1.5;
}
.faqsec {
  /* The accordion is narrower than the container and centred. */
}
.faqsec .faq {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 69.5625rem;
  margin: 0 auto;
}
.faqsec .faqitem {
  padding: 1.875rem;
  border-radius: 0.75rem;
  background: #fff;
}
.faqsec .faqhead {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  /* Figma exports the bullet as an 11px SVG circle — it is one flat colour,
     so it is drawn here rather than shipped as a file. */
}
.faqsec .faqhead:before {
  content: "";
  flex-shrink: 0;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-top: 0.4375rem;
  border-radius: 50%;
  background: #c3443f;
}
.faqsec .faqhead h6 {
  flex: 1 0 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
}
.faqsec {
  /* Two 14x2 bars — a plus that loses its upright when the item opens. */
}
.faqsec .faqicon {
  position: relative;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.3125rem;
}
.faqsec .faqicon:before, .faqsec .faqicon:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: #c3443f;
  transform: translateY(-50%);
  transition: transform 0.3s ease-in-out;
}
.faqsec .faqicon:after {
  transform: translateY(-50%) rotate(90deg);
}
.faqsec .faqactive .faqicon:after {
  transform: translateY(-50%) rotate(0deg);
}
.faqsec {
  /* app.js drives display via slideUp/slideDown; the closed default comes from
     the global rule. The indent lines the answer up with the question. */
}
.faqsec .faqbody {
  padding-top: 0.875rem;
  padding-left: 1.6875rem;
}
.faqsec .faqbody p {
  font-size: 0.875rem;
  line-height: 1.5rem;
  max-width: 62rem;
}

/* ==========================================================================
   23. Final CTA
   ========================================================================== */
.ctasec {
  background: var(--primary-blue, #0a5176);
  /* No badge on this one — just heading and lede, on the dark band. */
}
.ctasec .sechead {
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.ctasec .sechead h2 {
  max-width: 50rem;
  line-height: normal;
  color: #fff;
}
.ctasec .sechead h2.w-full {
  max-width: 100%;
}
.ctasec .sechead p {
  max-width: none;
  line-height: normal;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}
.ctasec .ctabtn {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* ==========================================================================
   24. Header
   ========================================================================== */
.mainhd {
  position: sticky;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 5.625rem;
  background: #fff;
  border-bottom: 0.0625rem solid var(--border-light, #e1e6eb);
}
.mainhd > .container {
  height: 100%;
}
.mainhd .headerrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.mainhd .logo {
  flex-shrink: 0;
}
.mainhd .logo img {
  width: 10.625rem;
  height: 4.8125rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.mainhd .navigation .stellarnav > ul {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.mainhd .navigation .stellarnav > ul > li {
  /* :not(.dd-toggle) — stellarnav injects its own <a class="dd-toggle">
             as a sibling link inside the same li. It must stay display:none
             on desktop, so the flex/padding here must not reach it. */
}
.mainhd .navigation .stellarnav > ul > li > a:not(.dd-toggle) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #0c1d2e;
}
.mainhd .navigation .stellarnav > ul > li > a:not(.dd-toggle) i {
  font-size: 0.5625rem;
  line-height: 1;
  transition: transform 0.3s ease-in-out;
}
.mainhd .navigation .stellarnav > ul > li {
  /* stellarnav.css underlines the active/hovered link — the
             design only changes its colour. */
}
.mainhd .navigation .stellarnav > ul > li:hover > a:not(.dd-toggle), .mainhd .navigation .stellarnav > ul > li.active > a:not(.dd-toggle) {
  color: #c3443f;
  text-decoration: none;
}
.mainhd .navigation .stellarnav > ul > li.has-sub:hover > a i {
  transform: rotate(180deg);
}
.mainhd .navigation {
  /* Dropdown panel — stellarnav.css ships defaults from another build,
         so the panel is restyled here to the Treacle system. */
}
.mainhd .navigation .stellarnav ul ul {
  top: 100%;
  width: auto;
  min-width: 14.375rem;
  padding: 0.5rem 0;
  border-radius: 0.75rem;
  background: #fff;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  box-shadow: 0 0.75rem 2rem rgba(12, 29, 46, 0.12);
}
.mainhd .navigation .stellarnav ul ul li {
  border: none;
}
.mainhd .navigation .stellarnav ul ul li + li {
  border-top: 0;
}
.mainhd .navigation .stellarnav ul ul li a {
  display: block;
  padding: 0.625rem 1.25rem;
  border-bottom: 0;
  background: transparent;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--muted-slate, #506a7c);
  white-space: nowrap;
}
.mainhd .navigation .stellarnav ul ul li a:hover {
  color: #c3443f;
}
.mainhd .navigation {
  /* Icon-led mega panels. Still a plain <ul> child of the li, because
     stellarnav binds mouseenter to `li.has-sub > ul` — swapping in a <div>
     would lose both the hover reveal and the mobile toggle. */
}
.mainhd .navigation .stellarnav ul.megapanel {
  border-radius: 0.625rem;
}
.mainhd .navigation .stellarnav ul.megapanel li {
  margin-bottom: 1rem;
}
.mainhd .navigation .stellarnav ul.megapanel li:last-child {
  margin-bottom: 0;
}
.mainhd .navigation .stellarnav ul.megapanel li a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #0c1d2e;
  white-space: normal;
}
.mainhd .navigation .stellarnav ul.megapanel li a:hover {
  color: #c3443f;
}
.mainhd .navigation .stellarnav ul.megapanel .megaico {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
}
.mainhd .navigation .stellarnav ul.megapanel .megaico img {
  width: 100%;
  height: 100%;
}
.mainhd .navigation .stellarnav ul.megaplatform {
  width: 20.1875rem;
  padding: 1.5rem 2.75rem 1.875rem 1.5625rem;
}
.mainhd .navigation {
  /* Two columns under a spanning label. column-count flows the seven rows
     column-major — four then three — which is how Figma splits them;
     flex-wrap would run them across the rows instead. */
}
.mainhd .navigation .stellarnav ul.megaindustry {
  width: 35.625rem;
  padding: 2.5rem;
  -moz-column-count: 2;
       column-count: 2;
  -moz-column-gap: 2.875rem;
       column-gap: 2.875rem;
}
.mainhd .navigation .stellarnav ul.megaindustry li {
  width: 13.1875rem;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.mainhd .navigation .stellarnav ul.megaindustry .megatitle {
  width: auto;
  -moz-column-span: all;
       column-span: all;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #c3443f;
}
.mainhd .contact {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.mainhd .contact .seeit {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0c1d2e;
}
.mainhd .contact .seeit:hover {
  color: #c3443f;
}

/* Subtle lift once the page is scrolled — app.js toggles body.scroll-active */
.scroll-active .mainhd {
  box-shadow: 0 0.125rem 0.75rem rgba(12, 29, 46, 0.08);
}

/* ==========================================================================
   25. Footer
   ========================================================================== */
.mainft {
  background: var(--footer-dark, #05223a);
  padding-top: 6.25rem;
  padding-bottom: 3.75rem;
}
.mainft .ftrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 3.875rem;
}
.mainft .ftabout {
  width: 20rem;
}
.mainft .ftabout .ftlogo img {
  width: 10.625rem;
  height: 4.8125rem;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 1.5rem;
}
.mainft .ftabout p {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--footer-text, rgba(255, 255, 255, 0.73));
}
.mainft .ftcol {
  width: 11.25rem;
}
.mainft .ftcol h6 {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.mainft .ftcol ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Sized on the li, not the a: an inline <a> does not shrink its parent's
     line box, so the li would keep the inherited 16px/1.5 strut and stand
     24px tall instead of 17px. */
}
.mainft .ftcol ul li {
  font-size: 0.875rem;
  line-height: normal;
}
.mainft .ftcol ul li a {
  color: var(--footer-text, rgba(255, 255, 255, 0.73));
}
.mainft .ftcol ul li a:hover {
  color: #fff;
}
.mainft .ftbottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 3.875rem;
  border-top: 0.0625rem solid var(--border-divider, rgba(255, 255, 255, 0.2));
}
.mainft .ftbottom p,
.mainft .ftbottom li {
  font-size: 0.8125rem;
  line-height: normal;
  color: var(--footer-text, rgba(255, 255, 255, 0.73));
}
.mainft .ftbottom .ftlegal {
  display: flex;
  gap: 1.5rem;
}

/* ==========================================================================
   26. i-Mirage decoys — Healthcare page

   Same three-up card grid the rest of the build uses, so it rides the
   Bootstrap row: the 24px Figma gap is already the default gutter.
   ========================================================================== */
.decoysec {
  padding: 6.25rem 0;
  background: var(--panel-grey, #f5f6f8);
}
.decoysec .sechead {
  margin-bottom: 3.75rem;
}
.decoysec .sechead h2 {
  line-height: normal;
  color: #0c1d2e;
}
.decoysec .sechead {
  /* The lede runs the full content width here and in the darker body grey,
     not the usual 720px muted-slate. */
}
.decoysec .sechead p {
  max-width: none;
  color: #3a404d;
}
.decoysec .decoyrow {
  row-gap: 1.5rem;
  justify-content: center;
}
.decoysec .decoycard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 3.125rem 1.5rem;
  border-radius: 1rem;
  background: #fff;
  text-align: center;
}
.decoysec .decoycard h5 {
  line-height: normal;
}
.decoysec .decoycard p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.decoysec .decoyico {
  flex-shrink: 0;
  width: 4.375rem;
  height: 4.375rem;
}
.decoysec .decoyico img {
  width: 100%;
  height: 100%;
}
.decoysec .decoytext {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.breachsec {
  background: #032638;
}
.breachsec .sechead {
  margin-bottom: 3.5rem;
}
.breachsec .sechead h2 {
  line-height: normal;
  color: #fff;
}
.breachsec .sechead p {
  max-width: none;
  font-size: 1.25rem;
  line-height: normal;
  color: rgba(255, 255, 255, 0.7019607843);
}
.breachsec .breachrow {
  display: flex;
  flex-wrap: wrap;
}
.breachsec .breachstat {
  position: relative;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 11.25rem;
  padding: 0 1.5rem;
  text-align: center;
}
.breachsec .breachstat p {
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: #fff;
}
.breachsec .breachstat:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.0625rem;
  height: 7.5rem;
  transform: translateY(-50%);
  background: rgba(209, 213, 219, 0.3);
  pointer-events: none;
}
.breachsec .breachstat + .breachstat:before {
  content: "";
}
.breachsec .breachnum {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: normal;
  color: #c3443f;
  white-space: nowrap;
}

.benefitcardsec {
  background: var(--panel-grey, #f5f6f8);
}
.benefitcardsec .sechead {
  margin-bottom: 3rem;
}
.benefitcardsec .sechead h2 {
  line-height: 1.4;
}
.benefitcardsec .sechead p {
  max-width: 50rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #3a404d;
}
.benefitcardsec .benefitcardrow {
  row-gap: 1.5rem;
}
.benefitcardsec .benefitcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding: 2rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  background: var(--primary-blue, #0a5176);
}
.benefitcardsec .benefitcardimg {
  height: 8rem;
}
.benefitcardsec .benefitcardimg img {
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.benefitcardsec.common-pg .benefitcardimg {
  height: 3.25rem;
  width: 3.25rem;
}
.benefitcardsec .benefitcardtext {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}
.benefitcardsec .benefitcardtext h5 {
  line-height: 1.75rem;
  color: #fff;
}
.benefitcardsec .benefitcardtext p {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}

/* ==========================================================================
   29. Scenario and conclusion — Healthcare page

   Figma names both panels `intercept-card`, the same component as the home
   page proof band, but scopes it under .proofsec — so the chrome is rebuilt
   here rather than unscoped. Two changes on top of that card: art beside the
   copy, and a blue variant for the second panel.
   ========================================================================== */
.scenariosec {
  padding: 0 0 6.25rem;
  background: #fff;
}
.scenariosec .sechead {
  margin-bottom: 3.125rem;
}
.scenariosec .sechead h2 {
  max-width: 70.75rem;
  line-height: 1.4;
}
.scenariosec .sechead p {
  max-width: 50rem;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #3a404d;
}
.scenariosec .scenariorow {
  row-gap: 1.875rem;
}
.scenariosec .scenariocard {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  height: 100%;
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: #05223a;
}
.scenariosec .scenarioart {
  flex-shrink: 0;
  width: 9.5625rem;
}
.scenariosec .scenarioart img {
  width: 100%;
  height: auto;
}
.scenariosec .scenariotext {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1 0 0;
  min-width: 0;
}
.scenariosec .scenariotext h4 {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: normal;
  color: #fff;
}
.scenariosec .scenariotext {
  /* The rule below the title is Figma's own <line>. A border on the copy
     keeps the 24px rhythm on both sides of it without an empty node — the
     column gap supplies the 24px above, this padding the 24px below. */
}
.scenariosec .scenariotext p {
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--divider-navy, #1e3b50);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--hero-body, #8fa3b5);
}
.scenariosec .scenariolabel {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #fff;
}
.scenariosec .scenariocard.scenarioblue {
  background: #0a5176;
}
.scenariosec .scenariocard.scenarioblue .scenariotext p {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.scenariosec .scenariocard.scenarioSkyBlue {
  background: #4d7fa4;
}
.scenariosec .scenariocard.scenarioSkyBlue .scenariotext p {
  border-top-color: #86b1d0;
  color: #fff;
}

/* ==========================================================================
   30. Notable threat activity — Healthcare page

   Genuine tabular data — a header row and six paired rows — so it ships as a
   real <table>. The first column labels its row, hence <th scope="row">.
   The rounded frame belongs to the wrapper; the rules between rows are cell
   borders, and the last row drops its own so it does not double up against
   the wrapper's.
   ========================================================================== */
.threatsec {
  background: #fff;
}
.threatsec .sechead {
  margin-bottom: 2.5rem;
}
.threatsec .sechead h2 {
  line-height: normal;
}
.threatsec .threattable {
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 0.75rem;
  overflow: hidden;
}
.threatsec .threattable table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
.threatsec .threattable th,
.threatsec .threattable td {
  padding: 1.25rem;
  border-bottom: 0.0625rem solid var(--border-light, #e1e6eb);
  text-align: left;
  vertical-align: top;
}
.threatsec .threattable th:first-child {
  width: 21.875rem;
}
.threatsec .threattable {
  /* Column headings and row labels share the same 15px bold treatment —
     only the header row's tint separates them. */
}
.threatsec .threattable th {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: normal;
  color: #0c1d2e;
}
.threatsec .threattable thead th {
  background: var(--panel-grey, #f5f6f8);
}
.threatsec .threattable td {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.375rem;
  color: #3a404d;
}
.threatsec .threattable tbody tr:last-child th,
.threatsec .threattable tbody tr:last-child td {
  border-bottom: 0;
}

.ctasec.shSec h2 {
  max-width: unset;
}

.missionsec .sechead {
  margin-bottom: 4rem;
}
.missionsec .sechead h2 {
  line-height: 1.3;
}
.missionsec .missionrow {
  align-items: flex-start;
}
.missionsec .missionmedia {
  position: relative;
  padding-bottom: 7.5rem;
  padding-right: 6.1875rem;
}
.missionsec .missionimg {
  height: 25rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
.missionsec .missionimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.missionsec .missionvideo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20.8125rem;
  aspect-ratio: 1.37/1;
}
.missionsec .missionvideo img,
.missionsec .missionvideo video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.5rem;
}
.missionsec .missionplay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: #c3443f;
  color: #fff;
  transition: background-color 0.3s ease-in-out;
  outline: none;
  border: none;
}
.missionsec .missionplay i {
  font-size: 1.25rem;
  margin-left: 0.1875rem;
}
.missionsec .missionplay:hover {
  background: #0c1d2e;
}
.missionsec .missiontext {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-left: 1.5rem;
}
.missionsec .missiontext p {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--muted-slate, #506a7c);
}
.missionsec .missiontext p strong {
  font-weight: 700;
  font-size: 1.25rem;
  color: #0c1d2e;
}
.missionsec .missionperson {
  position: relative;
}
.missionsec .missionline {
  position: absolute;
  left: -102px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 90px;
  height: 2px;
  background: #a8b2c7;
}
.missionsec .missionpersontext {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.missionsec .missionname {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.625rem;
  color: #0c1d2e;
}
.missionsec .missionrole {
  font-size: 0.75rem;
  line-height: 1.625rem;
  color: #c3443f;
}

.featuresec {
  background: var(--panel-grey, #f5f6f8);
}
.featuresec .sechead {
  margin-bottom: 4.5rem;
}
.featuresec .sechead h2 {
  line-height: normal;
}
.featuresec {
  /* Figma fixes the panel at 603x700; the ratio holds that proportion at
     whatever width the column resolves to. */
}
.featuresec .featurevisual {
  position: relative;
  overflow: hidden;
  padding-right: 2rem;
}
.featuresec .featurevisual img {
  border-radius: 1.25rem;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.featuresec .featurelist {
  padding-left: 1rem;
}
.featuresec .featurelist > li {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 0.0625rem solid var(--border-light, #e1e6eb);
}
.featuresec {
  /* 56px tile on a 6% red wash — lighter than the 8% of --badge-tint, so it
     stays a literal here. */
}
.featuresec .featureico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: rgba(195, 68, 63, 0.06);
}
.featuresec .featureico img {
  width: 2.5rem;
  height: 2.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.featuresec .featuretext {
  flex: 1 0 0;
  min-width: 0;
}
.featuresec .featuretext h6 {
  margin-bottom: 0.37rem;
  line-height: 1.3;
}
.featuresec .featuretext p {
  line-height: 1.4;
  color: #506a7c;
}

.problemsec {
  background: #fff;
  /* Left-aligned, and no lede under the heading on this one. */
}
.problemsec .sechead {
  margin-bottom: 3.5rem;
}
.problemsec .sechead h2 {
  line-height: 1.3;
  letter-spacing: -0.0625rem;
}
.problemsec .problemrow {
  --bs-gutter-x: 2rem;
  row-gap: 2rem;
}
.problemsec .problemcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding: 2rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  background: var(--panel-grey, #f5f6f8);
}
.problemsec {
  /* Display figure, not a heading — it carries no outline weight. */
}
.problemsec .problemnum {
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  color: #c3443f;
  white-space: nowrap;
}
.problemsec .problemtext {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.problemsec .problemtext h6 {
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
}
.problemsec .problemtext p {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--muted-slate, #506a7c);
}

.worksec {
  background: var(--panel-grey, #f5f6f8);
}
.worksec .sechead {
  margin-bottom: 4rem;
}
.worksec .sechead h2 {
  line-height: 1.3;
  letter-spacing: -0.0625rem;
}
.worksec .workrow {
  row-gap: 2.5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.worksec .worktext {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.worksec .worktext h5 {
  line-height: 1.3;
}
.worksec .worktext p {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--muted-slate, #506a7c);
}
.worksec .workmesh {
  position: relative;
  height: 17.5rem;
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: #0c1d2e;
  overflow: hidden;
}
.worksec .workmesh:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(10, 81, 118) 0%, rgb(11, 55, 82) 50%, rgb(12, 29, 46) 100%);
}
.worksec .meshinner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  height: 100%;
}
.worksec {
  /* Three tiles in a row. The middle one is the decoy being struck, hence
     the red fill and the larger ring. */
}
.worksec .meshnodes {
  display: flex;
  align-items: center;
  gap: 3rem;
}
.worksec .meshnodes > li {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #fff;
}
.worksec .meshnodes > li img {
  width: 1.5rem;
  height: 1.5rem;
}
.worksec .meshnodes > li.meshtarget {
  width: 4rem;
  height: 4rem;
  border: 0.125rem solid #fff;
  background: #c3443f;
}
.worksec .meshnodes > li.meshtarget img {
  width: 2rem;
  height: 2rem;
}
.worksec .meshlabel {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: normal;
  color: var(--hero-body, #8fa3b5);
  text-align: center;
}
.worksec .workcardrow {
  row-gap: 1.5rem;
}
.worksec .workcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  padding: 2rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  background: #fff;
}
.worksec {
  /* Icon left, step number hard right on the same baseline. */
}
.worksec .workcardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.worksec .workcardico {
  flex-shrink: 0;
  width: 4.375rem;
  height: 4.375rem;
}
.worksec .workcardico img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.worksec .workcardnum {
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  color: var(--primary-blue, #0a5176);
}
.worksec .workcardtext {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.worksec .workcardtext h5 {
  line-height: normal;
}
.worksec .workcardtext p {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--muted-slate, #506a7c);
}

.comparesec {
  background: #fff;
}
.comparesec .sechead {
  margin-bottom: 3.5rem;
}
.comparesec .sechead h2 {
  line-height: 1.3;
  letter-spacing: -0.0625rem;
}
.comparesec .comparetable {
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  overflow: hidden;
}
.comparesec .comparetable table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}
.comparesec .comparetable {
  /* Figma pads the row 20px and gaps the cells 12px, so the shared 6px
     halves meet at 12px between columns while the outer edges stay 20px. */
}
.comparesec .comparetable th,
.comparesec .comparetable td {
  padding: 1.25rem 0.375rem;
  font-size: 0.875rem;
  line-height: normal;
  text-align: left;
  vertical-align: middle;
}
.comparesec .comparetable tr > :first-child {
  padding-left: 1.25rem;
}
.comparesec .comparetable tr > :last-child {
  padding-right: 1.25rem;
}
.comparesec .comparetable {
  /* Figma fixes the label column at 260px; fixed layout splits what is
     left evenly across the four vendor columns. */
}
.comparesec .comparetable thead th:first-child {
  width: 16.25rem;
}
.comparesec .comparetable {
  /* Header band. The rival columns sit back in the muted slate-blue; only
     Feature and i-Mirage carry full white. */
}
.comparesec .comparetable thead th {
  background: var(--primary-blue, #0a5176);
  font-weight: 700;
  color: var(--hero-body, #8fa3b5);
}
.comparesec .comparetable thead th:first-child,
.comparesec .comparetable thead th.compareown {
  color: #fff;
}
.comparesec .comparetable {
  /* Zebra rather than borders — it is what separates the rows here. */
}
.comparesec .comparetable tbody tr:nth-child(odd) {
  background: var(--panel-grey, #f5f6f8);
}
.comparesec .comparetable {
  /* Row label. */
}
.comparesec .comparetable tbody th {
  font-weight: 600;
  color: #0c1d2e;
}
.comparesec .comparetable tbody td {
  font-weight: 400;
  color: var(--muted-slate, #506a7c);
}
.comparesec {
  /* The i-Mirage answer — ticked and in full heading navy, against the
     regular muted copy of the three rival columns. */
}
.comparesec .comparewin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: #0c1d2e;
}
.comparesec .comparewin img {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.featuredsec .sechead {
  margin-bottom: 3.5rem;
}
.featuredsec .sechead h2 {
  line-height: 1.3;
}

.featuredcard {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.featuredcard .featuredimg {
  position: relative;
  height: 22.5rem;
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.featuredcard .featuredimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.featuredcard .featuredimgtext {
  position: absolute;
  left: 2.19rem;
  top: 1.75rem;
  max-width: 19rem;
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.1;
  color: #ffffff;
}
.featuredcard .featuredmeta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.featuredcard .featuredmeta h4 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
}
.featuredcard .featuredmeta p {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #506a7c;
}
.featuredcard .featuredtag {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: #0a5176;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #ffffff;
  /* Red chip — carries a live event rather than a content type */
}
.featuredcard .featuredtag.red {
  background: #c3443f;
}

.featuredsec.events .featuredimg {
  height: 20rem;
}
.featuredsec.events .featuredtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1rem;
}
.featuredsec.events .featuredtag {
  margin-bottom: 0;
}
.featuredsec.events .featureddate {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #8fa3b5;
  white-space: nowrap;
}
.featuredsec.events .featuredmeta h4 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.featuredsec.events .featuredmeta p {
  margin-bottom: 1rem;
}
.featuredsec.events {
  /* Design runs the pill at 12/24 rather than the global 14/28. */
}
.featuredsec.events .btn {
  margin-top: auto;
  padding: 0.75rem 1.5rem;
}
.featuredsec.events .btn.btnborder-red {
  color: #c3443f;
  border-color: #c3443f;
}

.readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #c3443f;
}
.readmore i {
  font-size: 1rem;
  margin-top: 3px;
}
.readmore:hover {
  color: #0a5176;
}

.bloglistsec {
  background: #f5f6f8;
}
.bloglistsec .sechead {
  margin-bottom: 3.5rem;
}
.bloglistsec .row {
  row-gap: 3.5rem;
}

.postcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 0.75rem rgba(12, 29, 46, 0.04);
}
.postcard .postimg {
  margin-bottom: 1.25rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.postcard .postimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.postcard .postinfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.postcard .posttop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.75rem;
}
.postcard .postcat {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  color: #c3443f;
}
.postcard .postdate {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: normal;
  color: #8fa3b5;
  font-family: Inter;
}
.postcard {
  /* Titles clamp at 2 lines and excerpts at 3 so the six cards keep a common
     floor whatever length the CMS feeds them. */
}
.postcard h5 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 700;
}
.postcard p {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3a404d;
}

.reportsec {
  background: #ffffff;
}
.reportsec .sechead {
  margin-bottom: 3.5rem;
}
.reportsec .sechead h2 {
  line-height: 1.3;
}
.reportsec .row {
  row-gap: 1.5rem;
}

.reportcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  border: 0.0625rem solid #e1e6eb;
  border-radius: 0.75rem;
}
.reportcard .reporttop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.25rem;
}
.reportcard .reportico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: rgba(10, 81, 118, 0.06);
}
.reportcard .reportico img {
  width: 1.5rem;
  height: 1.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.reportcard .reportpages {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: normal;
  color: #8fa3b5;
  white-space: nowrap;
}
.reportcard {
  /* flex:1 + margin-top:auto on the link floors the CTAs once the cards
     equalise on unequal title lengths. */
}
.reportcard .reportinfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.reportcard h5 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 700;
}
.reportcard p {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #506a7c;
}

.articlesec {
  padding: 5rem 0;
  background: #f5f6f8;
  position: relative;
}

.articlemain {
  padding-right: 2.5rem;
}
.articlemain h3 {
  margin-bottom: 1.25rem;
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 800;
  color: #0e141b;
}

.articlehero {
  height: 30rem;
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.articlehero img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.articlebody {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3a404d;
}
.articlebody h4 {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.375rem;
  font-weight: 600;
  color: #3a404d;
}
.articlebody p {
  margin-bottom: 1.25rem;
}
.articlebody ul,
.articlebody ol {
  margin-bottom: 1.25rem;
  padding-left: 1.3125rem;
}
.articlebody ul {
  list-style: disc;
}
.articlebody ol {
  list-style: decimal;
}
.articlebody li:not(:last-child) {
  margin-bottom: 0.5rem;
}
.articlebody > *:last-child {
  margin-bottom: 0;
}

.commentform {
  margin-top: 2.5rem;
}
.commentform textarea {
  display: block;
  width: 100%;
  height: 8.75rem;
  padding: 0.875rem;
  border: 0.0625rem solid #e4e1d9;
  border-radius: 0.625rem;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3a404d;
  resize: vertical;
}
.commentform textarea::-moz-placeholder {
  color: #3a404d;
}
.commentform textarea::placeholder {
  color: #3a404d;
}
.commentform textarea:focus {
  outline: none;
  border-color: #c3443f;
}

.commentfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}
.commentfoot p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: normal;
  color: #506a7c;
}

.commentlist {
  margin-top: 2.5rem;
}

.commentcount {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #0e141b;
}

.commentcard {
  padding: 1.5rem;
  border: 0.0625rem solid #e4e1d9;
  border-radius: 0.875rem;
  background: #ffffff;
}
.commentcard + .commentcard {
  margin-top: 1rem;
}
.commentcard > p {
  margin: 1rem 0;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #3a404d;
}

.commenthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.commentauthor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.commentavatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  background: #0f6b64;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  color: #faf9f6;
}

.commentname {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.commentname strong {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: normal;
  color: #0e141b;
}
.commentname span {
  font-size: 0.8125rem;
  line-height: normal;
  color: #506a7c;
}

.commentdate {
  font-size: 0.8125rem;
  line-height: normal;
  color: #8fa3b5;
  white-space: nowrap;
}

.commentactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.commentact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: normal;
  color: #506a7c;
}
.commentact i {
  font-size: 1rem;
}

a.commentact {
  font-weight: 600;
}
a.commentact:hover {
  color: #c3443f;
}

.articleside {
  top: 6.875rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sidetitle {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: #0e141b;
}

.sidesearch {
  flex-shrink: 0;
  padding: 1.5rem;
  border: 0.0625rem solid #e1e6eb;
  border-radius: 0.75rem;
  background: #ffffff;
}

.sidesearchbox {
  position: relative;
}
.sidesearchbox input {
  width: 100%;
  height: 3rem;
  padding: 0 3.5rem 0 1rem;
  border: 0;
  border-radius: 0.25rem;
  background: #e8eaed;
  font-family: inherit;
  font-size: 0.875rem;
  color: #000000;
}
.sidesearchbox input::-moz-placeholder {
  color: #000000;
}
.sidesearchbox input::placeholder {
  color: #000000;
}
.sidesearchbox input:focus {
  outline: none;
}
.sidesearchbox button {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  color: #0e141b;
  cursor: pointer;
}
.sidesearchbox button:hover {
  color: #c3443f;
}

.siderecent .postcard + .postcard {
  margin-top: 1.5rem;
}

.whytreacle {
  background: #ffffff;
}

.whytreaclecontent .eyebrow {
  margin-bottom: 1.25rem;
}
.whytreaclecontent h2 {
  margin-bottom: 1.25rem;
}
.whytreaclecontent p {
  font-size: 1.125rem;
  line-height: 1.5;
}
.whytreaclecontent ul {
  margin-top: 1.75rem;
  padding-left: 1.6875rem;
  list-style: disc;
}
.whytreaclecontent ul li {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #3a404d;
}

.whytreacleimg {
  height: 25.1875rem;
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
}
.whytreacleimg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.partnersec {
  background: #ffffff;
}
.partnersec .sechead {
  margin-bottom: 3.5rem;
}
.partnersec .sechead h2 {
  line-height: 3.5rem;
}

.partnergrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 2rem;
}

.partnercard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.partnercard h5 {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 700;
  text-align: center;
  color: #0c1d2e;
}

/* contain, not cover — these are logos on transparent grounds and must not
   be cropped to fill the box. */
.partnerlogo {
  height: 9rem;
  margin: 0;
  border-radius: 0.75rem;
  overflow: hidden;
}
.partnerlogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.resultSec {
  padding: 7rem 0 4.56rem;
}

.resultSec {
  background: #ffffff;
}
.resultSec .sechead {
  gap: 1.25rem;
}
.resultSec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.resultSec .sechead h2 {
  max-width: 60.625rem;
  line-height: 1.3;
}
.resultSec .sechead p {
  max-width: 70.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #506a7c;
}

/* Industry row — blue by default, red on hover. */
.resulttabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.0625rem;
  margin: 3.5rem auto 0;
  max-width: 67rem;
}
.resulttabs li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.375rem;
  padding: 1.125rem;
  border-radius: 0.3125rem;
  background: #0a5176;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}
.resulttabs li:hover {
  background: #c3443f;
}

.industrysec {
  padding: 3.75rem 0 7.5rem;
  background: #fff;
}
.industrysec .industrycontent .eyebrow {
  margin-bottom: 1.25rem;
}
.industrysec .industrycontent h2 {
  margin-bottom: 1.25rem;
}
.industrysec .industrycontent p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.industrysec .sideimg {
  border-radius: 0.75rem;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.industrysec.dml {
  padding: 8.44rem 0 7.81rem;
}
.industrysec.dml .sideimg {
  border-radius: 0;
}

.challengesec {
  padding-bottom: 7.5rem;
  background: #ffffff;
}
.challengesec .sechead {
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.challengesec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.challengesec .sechead p {
  max-width: 50rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #506a7c;
}
.challengesec .row {
  row-gap: 1.5rem;
}

.challengecard {
  height: 100%;
  padding: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #0a5176;
}
.challengecard .challengeico {
  display: block;
  width: 4.375rem;
  height: 4.375rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.challengecard .challengeico img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.challengecard h5 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-weight: 600;
  color: #ffffff;
}
.challengecard p {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.helpsec {
  border-top: 0.0625rem solid #e2e8f0;
  border-bottom: 0.0625rem solid #e2e8f0;
  background: #f5f6f8;
}
.helpsec .sechead {
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.helpsec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.helpsec .sechead h2 {
  color: #032638;
}
.helpsec .sechead p {
  max-width: 56.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #506a7c;
}
.helpsec .row {
  --bs-gutter-x: 2rem;
  row-gap: 2rem;
}

.helpcard {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #ffffff;
}
.helpcard .helpico img {
  width: 8rem;
  height: 7rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.helpcard {
  /* min-width:0 lets the copy wrap instead of forcing the flex row wide. */
}
.helpcard .helpinfo {
  flex: 1;
  min-width: 0;
}
.helpcard h5 {
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  color: #c3443f;
}
.helpcard p {
  font-size: 1rem;
  line-height: 1.625rem;
  color: #506a7c;
}

.deploysec {
  background: #ffffff;
}
.deploysec .sechead {
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.deploysec .sechead .eyebrow {
  letter-spacing: 0.09375rem;
}
.deploysec .sechead p {
  max-width: 56.25rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #506a7c;
}

.deploylist li {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  padding: 2rem 0;
  border-bottom: 0.0625rem solid #e2e8f0;
}
.deploylist .deploynum {
  flex-shrink: 0;
  width: 3.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: normal;
  color: #c3443f;
}
.deploylist h5 {
  width: 18.75rem;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: normal;
  color: #0c1d2e;
}
.deploylist p {
  flex: 1;
  min-width: 0;
  color: #506a7c;
}

.scenariodv {
  padding-bottom: 7.5rem;
  background: #ffffff;
}
.scenariodv .scenariocard {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 3.5rem;
  border-radius: 1.5rem;
  background: #0a5176;
  overflow: hidden;
}
.scenariodv .scenariocard .scenariohead {
  flex-shrink: 0;
  width: 15.375rem;
}
.scenariodv .scenariocard {
  /* Dark-panel badge — .eyebrow supplies the geometry, this swaps the fill. */
}
.scenariodv .scenariocard .eyebrow {
  margin-bottom: 1.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
.scenariodv .scenariocard h3 {
  margin: 0;
  font-size: 2.25rem;
  line-height: 2.75rem;
  font-weight: 500;
  color: #ffffff;
}
.scenariodv .scenariocard .scenariobody {
  flex: 1;
  min-width: 0;
}
.scenariodv .scenariocard p {
  font-size: 1.125rem;
  line-height: 1.875rem;
  color: #e2f1ff;
}
.scenariodv .scenariocard p + p {
  margin-top: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.Concludingsec {
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.conclusionleft {
  padding-right: 3.5rem;
}
.conclusionleft .eyebrow {
  margin-bottom: 1.5rem;
  letter-spacing: 0.09375rem;
}
.conclusionleft h2 {
  margin-bottom: 1.5rem;
}
.conclusionleft p {
  font-size: 1rem;
  line-height: 1.625rem;
  color: #506a7c;
}

.conclusionlist li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 0.0625rem solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f8fafc;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #3a404d;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.conclusionlist li + li {
  margin-top: 1rem;
}
.conclusionlist li i {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #c3443f;
  transition: color 0.3s ease-in-out;
}
.conclusionlist li:hover {
  background: #0a5176;
  color: #ffffff;
}
.conclusionlist li:hover i {
  color: #ffffff;
}

.contactsec {
  background: #f5f6f8;
}
.contactsec > .container > .row {
  align-items: flex-start;
}

.contactmain {
  padding-right: 2.5rem;
}
.contactmain .sechead {
  margin-bottom: 1.25rem;
}
.contactmain .sechead h2 {
  line-height: 3.5rem;
}

.contactform {
  padding: 1.5rem;
  border: 1px solid #e8eaed;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.5rem rgba(12, 29, 46, 0.04);
}
.contactform label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #0e141b;
}
.contactform input:not([type=submit]),
.contactform textarea {
  height: 3rem;
  padding: 0 1rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  background: #f5f6f8;
  color: #3a404d;
}
.contactform input:not([type=submit]):focus,
.contactform textarea:focus {
  border-color: #0a5176;
}
.contactform textarea {
  min-height: 10rem;
  resize: none;
}
.contactform .btn {
  margin-top: 1.25rem;
}

.formgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
  row-gap: 1.25rem;
}

.formfull {
  grid-column: 1/-1;
}

.captcharow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.25rem;
}
.captcharow .captchafield {
  flex: 1;
  min-width: 12.5rem;
  max-width: 22.5rem;
}

.captchabox {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.captchabox img {
  width: 14rem;
  height: 4.75rem;
  border: 0.0625rem solid #e8eaed;
  border-radius: 0.75rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.captchareload {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: normal;
  color: #c3443f;
}
.captchareload:hover {
  color: #0a5176;
}

.contactside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contactintro h2 {
  margin-bottom: 0.75rem;
}
.contactintro p {
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #3a404d;
}

.contactlist {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.contactlist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.contactlist .contactico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: 0.75rem;
  overflow: hidden;
}
.contactlist .contactico img {
  width: 1.9rem;
  height: 1.9rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.contactlist li:nth-child(1) .contactico {
  background: #c3443f;
}
.contactlist li:nth-child(2) .contactico {
  background: #1e3b50;
}
.contactlist li:nth-child(3) .contactico {
  background: #1e1e1e;
}
.contactlist .contactinfo {
  flex: 1;
  min-width: 0;
}
.contactlist .contactinfo h6 {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #0e141b;
}
.contactlist .contactinfo p {
  font-size: 1rem;
  color: #3a404d;
}
.contactlist .contactinfo p + p {
  margin-top: 0.5rem;
}
.contactlist .contactinfo {
  /* Fixed label column keeps the two phone numbers aligned. */
}
.contactlist .contactinfo span {
  display: inline-block;
  width: 8.5rem;
  color: #000000;
}

.map {
  width: 100%;
  height: 38rem;
}
.map iframe {
  width: 100%;
  height: 100%;
}

/* Floating partner badge — pinned bottom-right over the page. z-index sits
   below the sticky header (99) so the nav drawer still covers it. */
.forlink {
  position: fixed;
  right: 1.5rem;
  bottom: 6.4rem;
  z-index: 90;
}
.forlink > a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9375rem;
  width: 18.125rem;
  padding: 1.3125rem 1.4375rem;
  border-radius: 0.625rem;
  background: #c3443f;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
  color: #ffffff;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
}
.forlink .forlinkico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: #0a5176;
}
.forlink .forlinkico img {
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.forlink .forlinkico {
  /* Flag laps over the circle's top-left corner. */
}
.forlink .forlinkico .forlinkflag {
  position: absolute;
  top: -0.25rem;
  left: -0.1875rem;
}
.forlink .forlinktext {
  flex: 1;
  min-width: 0;
}
.forlink .forlinktext strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem;
}
.forlink .forlinktext span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.1875rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
}
.forlink .forlinkarrow {
  position: absolute;
  top: 0.8125rem;
  right: 0.8125rem;
  width: 0.625rem;
  height: 0.625rem;
}

.contentImg-cont hgroup {
  margin-bottom: 3rem;
  text-align: left;
  align-items: start;
}
.contentImg-cont .content {
  padding-right: 1.5625rem;
}
.contentImg-cont .content p {
  margin-bottom: 2rem;
}
.contentImg-cont .content ul {
  margin-bottom: 2.5rem;
}
.contentImg-cont .content ul li {
  color: var(--Dark-gray, #3a404d);
  font-family: Inter;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.46;
  position: relative;
  padding-left: 30px;
}
.contentImg-cont .content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: url(../images/list-arrow-icon.svg) no-repeat;
  background-size: 100%;
  width: 18px;
  height: 18px;
}
.contentImg-cont .content ul li:not(:last-child) {
  margin-bottom: 1rem;
}
.contentImg-cont figure {
  border-radius: 24px;
  overflow: hidden;
  padding-left: 25px;
  margin-bottom: 0;
}
.contentImg-cont figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contentImg-cont .row {
  align-items: center;
}

.contentImg-wrap:nth-child(even) {
  background: #f5f6f8;
}
.contentImg-wrap:nth-child(even) .contentImg-cont .row {
  flex-direction: row-reverse;
}
.contentImg-wrap:nth-child(even) .contentImg-cont .content {
  padding-left: 25px;
  padding-right: 0;
}
.contentImg-wrap:nth-child(even) .contentImg-cont figure {
  padding-left: 0px;
  padding-right: 25px;
}

.story-sec-wrap {
  padding: 5.87rem 0 8.5rem 0;
}

.story-sec-cont .sechead {
  align-items: start;
  margin-bottom: 1rem;
}
.story-sec-cont > p {
  color: #506a7c;
  font-family: Inter;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 1.5rem;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.88rem;
  margin-top: 4rem;
}

.story-grid-left .content h3,
.story-grid-right-content h3 {
  color: #fff;
  font-family: Inter;
  font-size: 1.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0.8rem;
}
.story-grid-left .content p,
.story-grid-right-content p {
  color: rgba(255, 255, 255, 0.7);
  font-family: Inter;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.375rem;
  margin-bottom: 1.5rem;
}
.story-grid-left .content ul,
.story-grid-right-content ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
}
.story-grid-left .content ul li,
.story-grid-right-content ul li {
  color: #fff;
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  gap: 0.5rem;
}
.story-grid-left .content ul li::before,
.story-grid-right-content ul li::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: url(../images/list-arrow-icon.svg) no-repeat;
  display: block;
  flex-shrink: 0;
  background-size: contain;
}

.story-grid-left {
  position: relative;
}
.story-grid-left figure {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  height: 100%;
}
.story-grid-left figure::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28.43%, #032638 79.91%);
}
.story-grid-left figure img {
  width: 100%;
  height: auto;
  -o-object-position: top;
     object-position: top;
  -o-object-fit: contain;
     object-fit: contain;
}
.story-grid-left .content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1.88rem;
}

.story-grid-right {
  display: grid;
  gap: 2rem;
}

.story-grid-right-top {
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: var(--Blue, #0a5176);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-grid-right-bottom {
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: var(--Deep-blue, #032638);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bloglistsec.newsec {
  background-color: #fff;
}
.bloglistsec.newsec .postcard {
  border: 1px solid rgba(227, 227, 227, 0.6);
}
.bloglistsec.newsec .postcard .postcat {
  color: #0a5176;
}
.bloglistsec.newsec .postcard img {
  max-height: 18.75rem;
}
.bloglistsec.newsec .postcard h5 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pubsec .sechead {
  margin-bottom: 3.5rem;
}
.pubsec .row {
  row-gap: 3.5rem;
}
.pubsec .postcard {
  border: 1px solid rgba(227, 227, 227, 0.6);
}
.pubsec .postcard .postimg {
  aspect-ratio: 418/515;
}

.helpsec.capsec {
  border: none;
}
.helpsec.capsec .sechead {
  gap: 1rem;
  margin-bottom: 4.375rem;
}
.helpsec.capsec .sechead p {
  max-width: 73.75rem;
  line-height: 1.625rem;
}
.helpsec.capsec .row {
  row-gap: 1.5rem;
}
.helpsec.capsec .helpcard {
  align-items: center;
  gap: 1.5rem;
}
.helpsec.capsec .helpcard .helpico img {
  width: 4.375rem;
  height: 4.375rem;
}
.helpsec.capsec .helpcard h5 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.helpsec.capsec .helpcard p {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #3a404d;
}

.benefitsec.advantage h2 {
  max-width: none;
}

.accpad {
  padding-right: 6.25rem;
}
.accpad .benefitacc .faqitem:last-child {
  border-bottom: 0.0625rem solid var(--divider-soft, rgba(0, 0, 0, 0.1));
}

.benefitaccsec {
  padding-bottom: 7.5rem;
  background: #fff;
}
.benefitaccsec .faqitem.faqactive .faqhead h6 {
  color: #c3443f;
}
.benefitaccsec .faq {
  padding-right: 5rem;
}
.benefitaccsec .faq .faqitem {
  padding: 1.25rem 0;
  border-top: 1px solid var(--divider-soft, rgba(0, 0, 0, 0.1));
}
.benefitaccsec .faq .faqhead {
  cursor: pointer;
}
.benefitaccsec .faq .faqhead h6 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  transition: color 0.3s ease-in-out;
}
.benefitaccsec .faq .faqbody {
  padding-top: 2.12rem;
}
.benefitaccsec .faq .faqbody h3 {
  margin-bottom: 1.5rem;
  font-size: 2.1875rem;
  line-height: 1.2;
}
.benefitaccsec .faq .faqbody p {
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.benefitaccsec .accimg {
  height: 37rem;
  border-radius: 1.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.benefitaccsec .benefitaccimg {
  position: relative;
  height: 37rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
.benefitaccsec .benefitaccimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
.benefitaccsec .benefitaccimg img.imgactive {
  opacity: 1;
}

.whyworksec .sechead {
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.whyworksec .sechead p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.625rem;
}
.whyworksec .whyworkrow {
  --bs-gutter-x: 1.875rem;
  row-gap: 1.875rem;
}
.whyworksec .whyworkcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  border: 0.0625rem solid var(--border-light, #e1e6eb);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06);
}
.whyworksec .whyworkcard h6 {
  margin-bottom: 0.625rem;
  line-height: normal;
}
.whyworksec .whyworkcard p {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: #6b7e8f;
}
.whyworksec .whyworkico {
  width: 4.375rem;
  height: 4.375rem;
  margin-bottom: 1.25rem;
}
.whyworksec .whyworkico img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.whyworksec .taglist {
  margin-top: auto;
}
.whyworksec .taglist li {
  border-radius: 6.25rem;
  font-weight: 500;
  color: var(--muted-slate, #506a7c);
}

.openingsec {
  background: var(--panel-grey, #f5f6f8);
}
.openingsec .sechead {
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.openingsec .sechead h2 {
  color: #032638;
}
.openingsec .sechead p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.3;
  color: #3a404d;
}
.openingsec .openinglist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.openingsec .openinglist > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: #fff;
}
.openingsec .openinginfo h6 {
  margin-bottom: 0.375rem;
  font-weight: 600;
  line-height: normal;
}
.openingsec .openingmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  line-height: normal;
  color: var(--muted-slate, #506a7c);
}
.openingsec .openingmeta li + li:before {
  content: "•";
  margin-right: 0.25rem;
}

.perksec {
  background: var(--primary-blue, #0a5176);
}
.perksec .perkrow {
  row-gap: 2.5rem;
}
.perksec .perkimg {
  width: 100%;
  border-radius: 1.5rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.perksec .sechead {
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.perksec .sechead .eyebrow-blue {
  background: var(--mid-blue, #196389);
}
.perksec .sechead h2 {
  color: #fff;
}
.perksec .sechead p {
  max-width: 100%;
  font-size: 1rem;
  line-height: 1.625rem;
  color: var(--text-on-dark, rgba(255, 255, 255, 0.7));
}
.perksec .perklist {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.perksec .perklist > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(50% - 0.75rem);
}
.perksec .perkico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background: #c3443f;
}
.perksec .perkico img {
  width: 1.25rem;
  height: 1.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.perksec .perktext h6 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  color: #fff;
}
.perksec .perktext p {
  font-size: 0.8125rem;
  line-height: normal;
  color: rgba(255, 255, 255, 0.7019607843);
}

.scenariosec .scenariodetailrow .scenariolist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #1e3b50;
}
.scenariosec .scenariodetailrow .scenariolistitem {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.scenariosec .scenariodetailrow .scenariolistitem h6 {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: normal;
  color: #c3443f;
}
.scenariosec .scenariodetailrow .scenariolist p {
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #8fa3b5;
  border: none;
}
.scenariosec .scenariodetailrow .scenarionote {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #0a415a;
}
.scenariosec .scenariodetailrow .scenarionotelabel {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  color: #f59e0b;
}
.scenariosec .scenariodetailrow .scenarionotelabel i {
  margin-right: 0.25rem;
}
.scenariosec .scenariodetailrow .scenariocard .scenariotext .scenarionote p {
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8fa3b5;
  border: none;
}

.conclusionsec {
  background: #032638;
  /* distinct dark navy from Figma - doesn't match the existing --heading-text
     token (#0c1d2e), so left literal here rather than reusing that variable.
     Flag for review: may be worth adding as its own token if reused elsewhere. */
  padding: 5rem 0;
  /* 80px */
}
.conclusionsec .conclusionhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* 20px */
  max-width: 56.25rem;
  /* 900px */
  margin: 0 auto;
  text-align: center;
}
.conclusionsec .conclusionhead h2 {
  font-size: 2rem;
  /* 32px */
  font-weight: 500;
  line-height: 2.625rem;
  /* 42px */
  color: var(--white, #ffffff);
}
.conclusionsec .conclusionhead p {
  font-size: 1rem;
  /* 16px */
  line-height: 1.625rem;
  /* 26px */
  color: rgba(255, 255, 255, 0.7);
}
.conclusionsec .conclusionbadge {
  display: inline-flex;
  padding: 0.375rem 0.875rem;
  /* 6px 14px */
  border-radius: 6.25rem;
  /* 100px */
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.6875rem;
  /* 11px */
  font-weight: 700;
  letter-spacing: 0.0625rem;
  /* 1px */
  text-transform: uppercase;
}
.conclusionsec .conclusionnote {
  display: flex;
  gap: 0.75rem;
  /* 12px */
  align-items: flex-start;
  max-width: 56.25rem;
  /* 900px */
  margin: 2rem auto 0;
  padding: 1.5rem;
  /* 24px */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  /* 12px */
  background: rgba(255, 255, 255, 0.05);
}
.conclusionsec .conclusionnote > i {
  flex-shrink: 0;
  margin-top: 0.125rem;
  font-size: 1.25rem;
  color: #c3443f;
}
.conclusionsec .conclusionnotetext {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* 6px */
}
.conclusionsec .conclusionnotelabel {
  font-size: 0.8125rem;
  /* 13px */
  font-weight: 700;
  color: #c3443f;
}
.conclusionsec .conclusionnotetext p {
  font-size: 0.8125rem;
  /* 13px */
  line-height: 1.25rem;
  /* 20px */
  color: rgba(255, 255, 255, 0.73);
}

.scenariosec .scenariocaserow {
  --bs-gutter-x: 1.875rem;
}
.scenariosec .scenariocaserow .scenariotext {
  gap: 1rem;
}
.scenariosec .scenariocaserow .scenariotext h4 {
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--divider-navy, #1e3b50);
}
.scenariosec .scenariocaserow .scenariotext > p,
.scenariosec .scenariocaserow .scenariotext .scenarionote p,
.scenariosec .scenariocaserow .scenariotext .scenariosteps p {
  padding-top: 0;
  border-top: 0;
}
.scenariosec .scenariocaserow .scenariocard.scenarioblue .scenariotext h4 {
  border-bottom-color: var(--border-divider, rgba(255, 255, 255, 0.2));
}
.scenariosec .scenariocaserow .scenarionote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
}
.scenariosec .scenariocaserow .scenarionotelabel {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  color: #c3443f;
}
.scenariosec .scenariocaserow .scenarionote p {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--hero-body, #8fa3b5);
}
.scenariosec .scenariocaserow .scenariosteps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.scenariosec .scenariocaserow .scenariosteps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.scenariosec .scenariocaserow .scenariostepnum {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background: #c3443f;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
.scenariosec .scenariocaserow .scenariosteps p {
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #fff;
}/*# sourceMappingURL=style.css.map */