/* ============================================================
   IAM Cloud — site stylesheet
   ------------------------------------------------------------
   One stylesheet for the whole site. Tokens at the top, then
   primitives, then components in roughly the order they appear
   down the homepage (header → hero → sections → footer).
   ============================================================ */


/* ---- 1. Tokens (edit these to retheme) -------------------- */

:root {
  /* Brand palette — IAM Cloud guidelines */
  --light-blue:        #00A7DF;          /* primary */
  --blue:              #007ABD;          /* primary, pairs with light-blue */
  --green:             #1ABC9C;
  --gold:              #FAA928;
  --brick:             #E74C3C;
  --purple:            #9B59B6;
  --dark:              #36495E;          /* primary dark / heading text */
  --primary-gradient:  linear-gradient(135deg, #007ABD 0%, #00A7DF 100%);

  /* Neutrals (matched to the live site) */
  --ink:               #36495E;
  --text:              #5b6470;
  --muted:             #6b7785;
  --line:              #d9dee3;
  --line-soft:         #eef1f4;
  --page-bg:           #ffffff;
  --section-bg:        #f4f6f8;
  --band-bg:           #1e1e1e;          /* live site's dark row base */
  --hero-bg:           #000000;
  --footer-bg:         #2a3744;

  /* Type */
  --font-heading:      "Lato", Helvetica, Arial, sans-serif;
  --font-body:         "Open Sans", Helvetica, Arial, sans-serif;
  --base-size:         16px;
  --base-line:         1.65;

  /* Spacing scale (8-px multiples) */
  --s-1:  0.5rem;   --s-2:  1rem;    --s-3:  1.5rem;
  --s-4:  2rem;     --s-5:  2.5rem;  --s-6:  3rem;    --s-8:  4rem;    --s-12: 6rem;

  /* Radii / shadows */
  --radius:            6px;
  --radius-lg:         10px;
  --radius-pill:       999px;
  --shadow-card:       0 1px 2px rgba(54,73,94,0.05), 0 4px 12px rgba(54,73,94,0.06);
  --shadow-cta:        0 4px 14px rgba(0,122,189,0.28);
  --shadow-cta-hover:  0 6px 18px rgba(0,122,189,0.34);

  /* Layout */
  --container:         1200px;
  --container-narrow:  760px;
  --header-height:     72px;
}


/* ---- 2. Reset & base -------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--base-size);
  line-height: var(--base-line);
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--light-blue); text-decoration: underline; }
ul, ol { padding-left: 1.25rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }


/* ---- 3. Typography ---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 var(--s-2);
}
/* Space ABOVE a heading is what visually separates one section from the
   next. Give H2/H3/H4 asymmetric top margins so headings "own" the space
   above them, and pair tightly with the paragraph that follows. First-
   child headings inside a container reset — they lean on the container's
   own top padding instead of adding to it. */
h2 { margin-top: var(--s-6); }
h3 { margin-top: var(--s-5); }
h4 { margin-top: var(--s-4); }
h5 { margin-top: var(--s-3); }

.container > h2:first-child,        .container > h3:first-child,
.container-narrow > h2:first-child, .container-narrow > h3:first-child,
.container > :first-child > h2:first-child,
.container-narrow > :first-child > h2:first-child,
.section > .container > h2:first-child,
.section > .container-narrow > h2:first-child { margin-top: 0; }

h1 { font-size: 3.875rem; line-height: 1.1; }     /* ~62px — matches live */
h2 { font-size: 2.5rem; }                          /* ~40px */
h3 { font-size: 1.5rem; line-height: 1.3; }
h4 { font-size: 1.25rem; line-height: 1.35; }
h5 { font-size: 1.05rem; line-height: 1.4; }
h6 { font-size: 0.95rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }

p { margin: 0 0 var(--s-2); }
/* Long-form article content (Solutions, blog, Industries): a slightly
   more generous rhythm than the site's UI-dense contexts. Scoped
   narrowly so cards, forms, testimonials and other tight areas keep
   their existing feel. */
.section .container-narrow p,
.section .container-narrow ul,
.section .container-narrow ol,
.section .container-narrow blockquote,
.section .prose p,
.section .prose ul,
.section .prose ol,
.section .prose blockquote,
.section .benefit-split-copy p,
.section .benefit-split-copy ul,
.section .benefit-split-copy ol,
.section .benefit-split-copy blockquote { margin-bottom: var(--s-3); }
.section .container-narrow li,
.section .prose li,
.section .benefit-split-copy li { margin-bottom: var(--s-1); }
.section .container-narrow li:last-child,
.section .prose li:last-child,
.section .benefit-split-copy li:last-child { margin-bottom: 0; }
.lede { font-size: 1.15rem; color: var(--ink); }

/* Optional callout-style lede — accent stripe + brand-blue type. Use as a
   single highlighted intro line on article pages (e.g. Solutions articles)
   when the opening sentence carries proof or positioning that ought to
   read distinct from the article body. */
.lede-highlight {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--blue);
  letter-spacing: -0.01em;
  line-height: 1.45;
  border-left: 4px solid var(--light-blue);
  padding: 0.4rem 0 0.4rem var(--s-3);
  margin: 0 0 var(--s-4);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--s-2);
}

@media (max-width: 1300px) {
  h1 { font-size: 2.95rem; }    /* ~47px */
  h2 { font-size: 2.25rem; }    /* ~36px */
}
@media (max-width: 999px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.85rem; }
  h3 { font-size: 1.25rem; }
}
@media (max-width: 690px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.6rem; }
}


/* ---- 4. Layout primitives --------------------------------- */

.container       { width: 100%; max-width: var(--container);        margin: 0 auto; padding: 0 var(--s-3); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-3); }

.section         { padding: var(--s-12) 0; }
.section-tight   { padding: var(--s-8) 0; }
.section-tint    { background: var(--section-bg); }

.grid            { display: grid; gap: var(--s-3); }
.grid-2          { grid-template-columns: repeat(2, 1fr); }
.grid-3          { grid-template-columns: repeat(3, 1fr); }
.grid-4          { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 999px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 690px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.text-center  { text-align: center; }


/* ---- 5. Buttons / CTAs ------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--blue);           /* --blue (#007ABD) on white = 4.65:1, passes WCAG AA */
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { color: #fff; background: #005E93; box-shadow: var(--shadow-cta-hover); }

/* Secondary CTA colour, used when a button pair needs visual distinction
   from the primary blue. Purple #9B59B6 vs white = 4.67:1 (WCAG AA).
   Semantically fits "premium" or "alternative action" contexts. */
.btn-purple {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 14px rgba(155,89,182,0.30);
}
.btn-purple:hover { color: #fff; background: #7B4498; box-shadow: 0 6px 18px rgba(155,89,182,0.38); }

.btn-secondary {
  background: var(--dark);
  color: #fff;
}
.btn-secondary:hover { color: #fff; background: #46596f; }

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-outline-light:hover { background: #fff; color: var(--blue); }

.btn-jumbo {
  font-size: 1.1rem;
  padding: 1.1rem 2rem;
}


/* ---- 6. Site header --------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header-inner {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--header-height);
}
.site-logo { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-logo img { height: 36px; width: auto; }
.site-logo:hover { text-decoration: none; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;        /* push the nav to the right of the logo */
}
.primary-nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--blue); text-decoration: none; border-bottom-color: var(--light-blue); }
.primary-nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--light-blue); }

/* "Login" is styled as a compact pill button on the right edge of the nav
   so it reads as the destination action, not just another section link. */
.primary-nav .nav-login {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  background: var(--light-blue);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.2rem;
  border-bottom: 0;
  margin-left: 0.5rem;
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.primary-nav .nav-login:hover {
  color: #fff;
  background: var(--blue);
  border-bottom: 0;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink);
}
.nav-toggle:hover { border-color: var(--blue); color: var(--blue); }

.mobile-nav { display: none; }
.mobile-nav a {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
  padding: 0.85rem var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:hover { color: var(--blue); background: var(--section-bg); text-decoration: none; }

@media (max-width: 949px) {
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .mobile-nav.is-open { display: block; border-bottom: 1px solid var(--line); }
}


/* ---- 7. HERO — dark, full-viewport, dim background image -- */

.hero {
  position: relative;
  background: var(--hero-bg);
  color: #fff;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--s-12) 0;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Stay centred on both axes so the focal point of the image
     remains in view regardless of viewport ratio. Full opacity —
     dimming is done by the .hero-overlay layer above when needed. */
  object-position: center center;
  opacity: 1;
}
/* Per-page crop overrides — where the interesting part of the image
   sits away from the centre. */
.page-pricing-cdm .hero-bg img { object-position: center top; }
.hero-overlay {
  position: absolute; inset: 0;
  /* Overlay halved twice to let the screenshot read through clearly. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.21) 0%, rgba(10,10,10,0.14) 55%, rgba(10,10,10,0.24) 100%);
  z-index: 1;
}
.hero-inner {
  position: relative; z-index: 2;
  text-align: center;
}
.hero h1 {
  color: #fff;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s-3);
}
.subheader {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin: 0;
}
/* Centred CTA underneath the hero subheader (used on /cloud-drive-mapper/). */
.hero-inner .hero-cta { margin: var(--s-6) 0 0; }

@media (max-width: 690px) {
  .hero { min-height: 65vh; padding: var(--s-8) 0; }
  .subheader { font-size: 0.78rem; letter-spacing: 0.24em; }
}


/* ---- 8. SECTION — Cloud Drive Mapper intro (split) -------- */

.section-split .split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.split-copy h2 { margin-bottom: var(--s-3); }
.split-copy .lede { margin-bottom: var(--s-3); }
.split-media img,
.split-media .video-embed {
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(54,73,94,0.18), 0 2px 6px rgba(54,73,94,0.08);
}

/* 16:9 responsive video container — works for any embedded player. */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Click-to-load facade — the button sits inside .video-embed and is
   replaced with the real iframe on click. Removes third-party cookies
   and ~300 KB of Vimeo JS until the user actually wants the video. */
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  display: block;
  cursor: pointer;
  background-color: #0b1220;
  background-size: cover;
  background-position: center;
}
.video-facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  transition: background 0.15s ease;
}
.video-facade:hover::before,
.video-facade:focus-visible::before { background: rgba(0, 0, 0, 0.15); }
.video-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
  transform: translate(-50%, -50%) scale(1.08);
}
.video-facade-play::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #007ABD;
  margin-left: 4px;
}
@media (max-width: 999px) {
  .section-split .split-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}


/* ---- 9. SECTION — Pillars ("IAM" + 4-up text columns) ----- */

/* Closer to the CDM intro above because the "IAM" wordmark that used
   to anchor the top of this section has been removed. */
.section-pillars { text-align: center; padding-top: var(--s-3); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  text-align: left;
}
.pillar { padding: 0; }
.pillar-icon {
  width: 44px; height: 44px;
  stroke: var(--light-blue);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: var(--s-2);
}
.pillar h3 { margin-bottom: var(--s-1); color: var(--dark); }
.pillar p  { margin: 0; }

@media (max-width: 999px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
@media (max-width: 690px) {
  .pillar-grid { grid-template-columns: 1fr; }
}


/* ---- 10. SECTION — Testimonial ---------------------------- */

.section-testimonial { text-align: center; }
.section-testimonial .eyebrow { color: var(--muted); }
.big-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--ink);
  margin: var(--s-3) auto var(--s-3);
  max-width: 56rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-style: italic;
}
.attribution { margin: 0 0 var(--s-3); }
.attribution strong { display: block; color: var(--ink); font-weight: 700; }
.attribution span   { display: block; color: var(--muted); font-size: 0.95rem; }
.testimonial-cta    { margin: var(--s-3) 0 0; }


/* ---- 11. SECTION — MSP / Reseller dark gradient band ------ */

.band {
  position: relative;
  padding: var(--s-12) 0;
  background: var(--band-bg);
  color: #fff;
  overflow: hidden;
}
.band-gradient::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #007ABD 0%, #00A7DF 100%);
  opacity: 0.85;
  z-index: 0;
}
.band-inner {
  position: relative; z-index: 1;
  text-align: center;
  max-width: 56rem;
}
.band h2 { color: #fff; margin-bottom: var(--s-2); }
.band p  { color: rgba(255,255,255,0.92); margin-bottom: var(--s-4); font-size: 1.1rem; }

/* Two-column band variant: copy on the left, media on the right. The
   default .band-inner is a centred text column; .band-split swaps that
   for a 2-up grid for sections like the Partnerships "Powered by Partners"
   block. Stacks vertically below 999px. */
.band-split {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.band-copy h2 { margin-bottom: var(--s-2); }
.band-copy p  { margin-bottom: 0; }
.band-media .video-embed { box-shadow: 0 18px 48px rgba(0,0,0,0.28); }
@media (max-width: 999px) {
  .band-split { grid-template-columns: 1fr; gap: var(--s-4); }
}


/* ---- 12. SECTION — Trust badges --------------------------- */

.section-trust { text-align: center; }
.trust-heading { max-width: 56rem; margin: 0 auto var(--s-8); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.trust-cell { padding: 0 var(--s-1); }
.trust-icon {
  width: 56px; height: 56px;
  stroke: var(--light-blue);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 0 auto var(--s-2);
}
.trust-cell h4 { color: var(--dark); margin-bottom: var(--s-1); }
.trust-cell p  { margin: 0; color: var(--text); }

@media (max-width: 999px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
}
@media (max-width: 690px) {
  .trust-grid { grid-template-columns: 1fr; }
}


/* ---- 13. SECTION — Closer (3 buttons) -------------------- */

/* Override the default .section padding — the closer is just three
   buttons, so the full 6rem top/bottom looks disconnected from the
   trust row above. */
.section-closer { padding: 0 0 var(--s-12); }

.closer-buttons {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
/* Inline CTA groups sitting inside article prose (Solutions, blog):
   give them proper breathing room from the paragraph above so buttons
   feel like a distinct action, not a run-on. */
.section .container-narrow .closer-buttons { margin-top: var(--s-5); }


/* ---- 14. Footer — 4-column widget area + copyright base --- */

.site-footer {
  background: var(--footer-bg);
  color: #aab4be;
  padding: var(--s-12) 0 var(--s-4);
}
.site-footer a { color: #c9d1da; }
.site-footer a:hover { color: #fff; }

.footer-widgets {
  display: grid;
  /* minmax(0, 1fr) prevents columns from blowing out when a child has
     wide unbreakable content (a long URL, an image). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: start;
}
.footer-col { min-width: 0; }   /* allow shrinking inside the grid track */
.footer-col .footer-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}
.footer-col .footer-heading + .footer-heading,   /* second submenu within a column */
.footer-col ul + .footer-heading {
  margin-top: var(--s-4);
}

/* Stacked submenu lists */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-2);
}
.footer-menu li {
  margin-bottom: 0.45rem;
  line-height: 1.4;
}
.footer-menu a { font-size: 0.92rem; }

/* Phone + email block under the Support menu */
.footer-contact { margin-top: var(--s-4); font-size: 0.9rem; }
.footer-contact p { margin: 0 0 0.3rem; }
.footer-contact strong { color: #fff; font-weight: 600; margin-right: 0.25rem; }

/* Office addresses (col 3) */
.footer-address {
  font-style: normal;
  font-size: 0.9rem;
  margin-bottom: var(--s-3);
  line-height: 1.55;
}
.footer-address strong { color: #fff; font-weight: 600; }
.footer-address small  { color: #8a96a3; font-size: 0.82rem; display: inline-block; margin-top: 0.35rem; }

/* Recent posts list (col 4) */
.footer-recent {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-recent li {
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  line-height: 1.4;
}
.footer-recent li:last-child { border-bottom: 0; }
.footer-recent a {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
}
.footer-recent a:hover { color: var(--light-blue); }
.footer-recent-date {
  display: block;
  font-size: 0.78rem;
  color: #8a96a3;
  margin-top: 0.15rem;
}

/* Bottom strip: copyright on the left, small wordmark on the right */
.footer-base {
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: 0.85rem;
  color: #8a96a3;
}
.footer-base .footer-logo img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1) opacity(0.7);
}

/* Footer columns collapse independently from the header nav so we keep
   the 4-up layout for as much of the desktop range as we can. */
@media (max-width: 999px) {
  .footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (max-width: 600px) {
  .footer-widgets { grid-template-columns: 1fr; gap: var(--s-6); }
}


/* ---- 15. SECTION — Compact gradient hero (inner pages) ---- */

/* Shorter, lighter hero used on every page except the homepage. The
   homepage keeps the dark dim-screenshot treatment in section 7. */
.hero.hero-page {
  background: var(--primary-gradient);
  min-height: 38vh;
  padding: var(--s-8) 0;
}
.hero.hero-page::before {
  /* very faint radial highlight so the flat gradient feels less plastic */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,0.18), transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.hero.hero-page h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

/* Section colour variants — applied alongside .hero-page to give each
   site section a distinct hero hue. The radial highlight from
   .hero.hero-page::before still applies on all variants. */
.hero.hero-page.hero-dark  { background: linear-gradient(135deg, #1a1a1a 0%, #2a3744 100%); }
.hero.hero-page.hero-gold  { background: linear-gradient(135deg, #C26A00 0%, #FAA928 100%); }
.hero.hero-page.hero-green { background: linear-gradient(135deg, #0F8170 0%, #1ABC9C 100%); }

/* On the Solutions and Industries index pages, the feature-card icons
   pick up the same gold accent that the hero uses. Keeps the page's
   colour story coherent. */
.page-solutions .feature-card .feature-icon,
.page-industries .feature-card .feature-icon,
.page-case-studies .feature-card .feature-icon { stroke: var(--gold); }



/* ---- 15a. Key points list (<dl> with bold term + definition)
   Used wherever a tight 3- or 4-point value list reads better
   than prose. The accent stripe on the dt visually links each
   pair so readers can scan the dt-only line quickly. */
.key-points {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.key-points dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  padding: var(--s-3) 0 0.25rem 1.25rem;
  position: relative;
}
.key-points dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--s-3) + 0.5rem);
  width: 4px; height: 1.05rem;
  background: var(--light-blue);
  border-radius: 2px;
}
.key-points dd {
  margin: 0 0 0 1.25rem;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
}


/* ---- 16. Feature cards (product page 3-up sections) ------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.feature-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.feature-card .feature-icon {
  width: 44px; height: 44px;
  stroke: var(--light-blue);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: var(--s-1);
}
.feature-card h4 { margin: 0 0 var(--s-1); color: var(--dark); }
.feature-card p  { margin: 0 0 var(--s-3); }   /* min breathing room below copy, especially before an in-card CTA */
/* When a card carries an in-card CTA, pin it to the bottom-left of the card
   so the three CTA cards in a row stay aligned regardless of body length.
   The paragraph margin above guarantees a minimum gap; margin-top: auto
   absorbs any extra space when a card has shorter copy than its siblings. */
.feature-card .feature-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
}

/* Variant: case-story cards get a blue left-accent stripe to visually
   distinguish them from feature cards elsewhere on the same page.
   Same border pattern as .attributed-quote/.pull-quote, but blue rather
   than gold to fit the CDM product page's colour language. */
.case-stories-grid .feature-card {
  border-left: 4px solid var(--blue);
  padding-left: calc(var(--s-4) - 3px);
}

@media (max-width: 999px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
  .feature-grid { grid-template-columns: 1fr; }
}


/* ---- 17. Pricing landing card ---------------------------- */

.pricing-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.pricing-card h3 { margin: 0 0 var(--s-1); }
.pricing-card p  { margin: 0 0 var(--s-3); }


/* ---- 17a. Sector landing pages (magazine layout) ---------- */

/* Used on /testimonials/* sector pages — these are info + landing hybrid
   pages, not blog posts. They use the wider container and a magazine-y
   mix of columns + image-led cards. */

/* Editorial 2:1 split — main copy on the left, sidebar (e.g. stats card)
   on the right. Stacks at ≤999px. */
.editorial-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
.editorial-copy h2 { margin-top: 0; }
.editorial-copy p:last-child { margin-bottom: 0; }
@media (max-width: 999px) {
  .editorial-split { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Facts / sidebar card — gradient block carrying 2–4 sector stats. */
.facts-card {
  background: var(--primary-gradient);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-cta);
}
.facts-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.22), transparent 60%);
  pointer-events: none;
}
.facts-card h3 {
  color: #fff;
  margin: 0 0 var(--s-3);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.facts-card ul {
  margin: 0; padding: 0; list-style: none;
  position: relative; z-index: 1;
}
.facts-card li {
  padding: var(--s-2) 0;
  border-top: 1px solid rgba(255,255,255,0.2);
}
.facts-card li:first-child { border-top: 0; padding-top: 0; }
.facts-card .fact-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1.05;
  color: #fff;
}
.facts-card .fact-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  display: block;
  margin-top: 0.3rem;
}

/* Case-study card grid + magazine-style card with image-block head. */
.case-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 999px) {
  .case-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 690px) {
  .case-cards-grid { grid-template-columns: 1fr; }
}

a.case-card-mag {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  color: inherit;
}
a.case-card-mag:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(54,73,94,0.14);
  text-decoration: none;
  color: inherit;
}

/* The card's image block. Placeholder visual: brand gradient + soft
   highlight + a centered sector icon. Swap the background to a real
   image URL when actual artwork is available. */
.case-card-mag .case-art {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.case-card-mag .case-art--green  { background: linear-gradient(135deg, #0F8170 0%, #1ABC9C 100%); }
.case-card-mag .case-art--gold   { background: linear-gradient(135deg, #C26A00 0%, #FAA928 100%); }
.case-card-mag .case-art--purple { background: linear-gradient(135deg, #6A2A8C 0%, #9B59B6 100%); }
.case-card-mag .case-art--dark   { background: linear-gradient(135deg, #2A3744 0%, #007ABD 100%); }
.case-card-mag .case-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.22), transparent 55%);
}
.case-card-mag .case-art svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}
.case-card-mag .case-art-tag {
  position: absolute;
  bottom: var(--s-2);
  left: var(--s-2);
  background: rgba(0,0,0,0.42);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  z-index: 2;
}

.case-card-mag .case-body {
  padding: var(--s-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.case-card-mag .case-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--light-blue);
  margin: 0;
}
.case-card-mag h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ink);
}
.case-card-mag p {
  margin: 0;
  font-size: 0.92rem;
  flex: 1;
  color: var(--text);
  line-height: 1.55;
}
.case-card-mag .case-link {
  margin-top: var(--s-1);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--blue);
  font-size: 0.95rem;
}
a.case-card-mag:hover .case-link { color: var(--light-blue); }

/* Magazine-style featured pull-quote with a giant decorative quote glyph
   behind the text. Used on sector pages to make the headline customer
   quote feel like a full editorial moment, not just a row of text. */
.feature-quote-magazine {
  position: relative;
  text-align: center;
  padding: var(--s-12) 0;
  background: var(--section-bg);
}
.feature-quote-magazine::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  top: var(--s-3);
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 12rem;
  line-height: 1;
  color: var(--light-blue);
  opacity: 0.14;
  font-weight: 900;
  pointer-events: none;
}
.feature-quote-magazine .container { position: relative; z-index: 1; }
.feature-quote-magazine .eyebrow { color: var(--blue); }
.feature-quote-magazine blockquote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--ink);
  margin: var(--s-3) auto var(--s-3);
  max-width: 52rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.feature-quote-magazine .attribution { margin: 0; }
.feature-quote-magazine .attribution strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.feature-quote-magazine .attribution span {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
}


/* ---- 17b. Legal prose — long-form contracts and policies -- */

/* Scoped to .legal-prose so it only affects long-form legal pages, not
   stray tables elsewhere. The Master Services Agreement (and a few other
   long agreements) carries a definitions table at the bottom — without
   borders the rows blur into each other and scanning a single term is
   painful. */
/* Legal changelog entry — used on /legal-center/changelog/ to render
   each published update inline with date, title, summary and read-more. */
.changelog-entry {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-soft);
}
.changelog-entry:last-of-type { border-bottom: 1px solid var(--line-soft); }
.changelog-entry h2 {
  font-size: 1.5rem;
  margin: 0 0 var(--s-2);
}
.changelog-entry h2 a { color: var(--ink); }
.changelog-entry h2 a:hover { color: var(--blue); }
.changelog-meta {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-1);
}

.legal-prose table {
  width: 100%;
  margin: var(--s-4) 0;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal-prose table td,
.legal-prose table th {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
}
.legal-prose table tr:last-child td,
.legal-prose table tr:last-child th { border-bottom: 1px solid var(--line-soft); }
.legal-prose table td:first-child,
.legal-prose table th:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 28%;
}
.legal-prose table td p { margin: 0 0 0.5rem; }
.legal-prose table td p:last-child { margin-bottom: 0; }

/* Legal Center content-area links and ghost buttons use the dark
   brand colour rather than blue, in line with the section's sober
   register. Scoped to .section so header, mobile nav and footer chrome
   keep their normal colours. */
.page-legal .section a { color: var(--dark); }
.page-legal .section a:hover { color: var(--dark); text-decoration: underline; }
.page-legal .section .btn-ghost { color: var(--dark); }
.page-legal .section .btn-ghost:hover {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}

/* Industry pages — links and article buttons take the brand-gold
   accent to match the section numerals, pull-quote borders and other
   editorial accents. Scoped to .section so the header nav, footer
   chrome and the closing band-gradient CTA keep their standard
   styling. The [class*="page-industr"] selector catches both the
   /industries/ hub (.page-industries) and each individual industry
   page (.page-industry-healthcare, .page-industry-construction, etc.). */
/* Prose link treatment (Pattern A — highlight): dark navy bold underlined,
   gold highlight on hover. Preserves dark navy text on both states for
   WCAG AA contrast (9.5:1 at rest on white; 4.66:1 with dark navy on gold
   background on hover). Applied to industry hubs and to the solutions
   index — both pages use gold as their theming accent. See the internal
   style guide at docs/hover-treatment-style-guide.html for the full
   palette of accessible hover treatments. */
body[class*="page-industr"] .section a:not(.btn),
.page-solutions .section a:not(.btn) {
  color: var(--dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;   /* solid line under descenders, avoids the chunky gaps around g/p/y/j */
  text-underline-offset: 3px;
  transition: background-color 0.15s ease;
}
body[class*="page-industr"] .section a:not(.btn):hover,
.page-solutions .section a:not(.btn):hover {
  background-color: var(--gold);
}

body[class*="page-industr"] .section .btn-primary {
  background: var(--gold);
  background-image: none;
  color: var(--dark);   /* dark navy on gold for WCAG AA contrast (4.66:1) */
  box-shadow: 0 4px 14px rgba(250,169,40,0.30);   /* gold-tinted; overrides the inherited blue-tinted --shadow-cta */
}
body[class*="page-industr"] .section .btn-primary:hover {
  background: #e39620;
  color: var(--dark);
  box-shadow: 0 6px 18px rgba(250,169,40,0.38);   /* gold-tinted, stronger on hover */
}

/* Ghost button on gold-themed pages: dark navy text + border at rest,
   gold-fill on hover with dark navy text preserved (same 4.66:1 AA
   as the prose-link hover). */
body[class*="page-industr"] .section .btn-ghost {
  color: var(--dark);
  border-color: var(--dark);
  font-weight: 700;
}
body[class*="page-industr"] .section .btn-ghost:hover {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--dark);
}

/* Case-study callout child spans keep their own explicit colours
   (title stays dark, eyebrow and arrow stay gold), so no override
   needed there. */


/* ---- 18. Standard vs Premium comparison ------------------ */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  align-items: stretch;
}

/* Three-column support layout: editorial column on the left
   (heading, video, brochure CTA) + the two pricing cards. The
   left is slightly wider so the video stays watchable. */
.support-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}
.support-content h2 { margin-top: 0; }
@media (max-width: 1099px) {
  .support-layout { grid-template-columns: 1fr 1fr; }
  .support-content { grid-column: 1 / -1; }
}
@media (max-width: 690px) {
  .support-layout { grid-template-columns: 1fr; gap: var(--s-3); }
  .support-content { grid-column: auto; }
}
.compare-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.compare-card.is-featured {
  background: var(--primary-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-cta);
}
.compare-card.is-featured h3,
.compare-card.is-featured .compare-price,
.compare-card.is-featured ul li { color: #fff; }
.compare-card.is-featured .compare-note { color: rgba(255,255,255,0.85); }

/* Centre the header trio (tier name, price, note) so the card has a
   clearly framed top before the bullet list. The list itself stays
   left-aligned for readability. */
.compare-card h3,
.compare-card .compare-price,
.compare-card .compare-note { text-align: center; }

.compare-card h3 { margin: 0 0 var(--s-1); }
.compare-card .compare-price {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.compare-card .compare-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.compare-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.compare-card ul li {
  padding: 0.45rem 0 0.45rem 1.6rem;
  position: relative;
  border-top: 1px solid var(--line-soft);
  line-height: 1.4;
}
.compare-card ul li:first-child { border-top: 0; }
.compare-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85rem;
  width: 14px; height: 8px;
  border-left: 2px solid var(--light-blue);
  border-bottom: 2px solid var(--light-blue);
  transform: rotate(-45deg);
}
.compare-card.is-featured ul li { border-top-color: rgba(255,255,255,0.18); }
.compare-card.is-featured ul li::before {
  border-color: #fff;
}

@media (max-width: 999px) {
  .compare-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}


/* ---- 19. Pricing calculator (lifted from calculator.html) - */

.calc {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.calc-head {
  background: var(--primary-gradient);
  color: #fff;
  padding: 1.6rem 1.3rem;
}
.calc-head h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.calc-head p {
  font-size: 0.9rem;
  opacity: 0.92;
  margin: 0.15rem 0 0;
  color: #fff;
}

.calc-body { padding: 1.75rem 1.3rem; }

.calc .field { margin-bottom: 1.4rem; }
.calc .field label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 0.45rem;
}
.calc .field label .req { color: var(--light-blue); }

.calc select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 2.5rem 0.7rem 0.85rem;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7785' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.calc select:hover { border-color: #b9c1c9; }
.calc select:focus {
  outline: none;
  border-color: var(--light-blue);
  box-shadow: 0 0 0 3px rgba(0,167,223,0.15);
}

.calc .result {
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--section-bg);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.calc .result .result-label {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark);
}
.calc .result .result-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.calc .result .result-value .cur {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 0.15rem;
}
.calc .result.is-contact .result-value {
  font-size: 1.15rem;
  font-weight: 600;
}
.calc .note {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.75rem 0 0;
}


/* ---- 20. Editorial / magazine patterns ------------------- */
/* Used on long-form article pages (Industries, Solutions) to give
   visual rhythm and let key claims, figures and customer proof
   stand out from the prose flow. Every pattern is progressive:
   pages without them still render fine; pages with them just read
   as more editorial.

   Component palette:
     .benefit          — wraps a numeral + heading + prose block
     .section-numeral  — big gold display numeral above a benefit's H2
     .stat-callout     — big number + small label
     .stat-grid        — grid of stat-callouts (typically 3-across)
     .pull-quote       — high-weight display quote (customer or editorial)
     .attributed-quote — medium-weight quote block with attribution
     .case-study-link  — end-of-benefit "read the case study" callout
     .article-figure   — image + optional caption
     .hero-page.hero-image — compact hero with dimmed background image */

/* ── Benefit wrapper — the reusable unit inside an industry/solution
      article. Groups numeral + heading + prose so they can share
      spacing and read as one block. Successive benefits within a
      single section get a generous gap between them. */
.benefit + .benefit { margin-top: var(--s-8); }

/* ── Prose block — pins a comfortable reading column inside a wide
      container, so text-heavy passages read naturally alongside
      wider elements (splits, figures, full-width quotes) in the
      same section. Slightly wider than --container-narrow so the
      width gap to .benefit-split feels like a moderate breakout
      rather than a jarring jump. */
.prose {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.prose + .benefit-split,
.benefit-split + .prose { margin-top: var(--s-8); }

/* ── Split benefit — two-column layout with prose on one side and
      an image on the other. Alternate sides across the article for
      visual rhythm. Capped at 1040px so it reads as a moderate
      breakout from .prose (800px), not a full container-width
      breakout. Collapses to single column below 900px viewport. */
.benefit-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
  margin: var(--s-8) auto;
  max-width: 1040px;
}
.benefit-split.image-left .benefit-split-media { order: -1; }
.benefit-split-copy > .section-numeral { margin-top: 0; }
.benefit-split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--section-bg);
}
.benefit-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 899px) {
  .benefit-split { grid-template-columns: 1fr; gap: var(--s-4); }
  .benefit-split.image-left .benefit-split-media { order: 0; }
  .benefit-split-media { aspect-ratio: 16 / 9; }
}

/* ── Section numeral — large gold display numeral before an H2.
      Sits tight to its heading (H2 top margin is reset when it
      follows a numeral). */
.section-numeral {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-2);
  opacity: 0.9;
}
.section-numeral + h2 { margin-top: 0; }

/* ── Stat callout — big number with a small label underneath. */
.stat-callout {
  display: block;
  padding: var(--s-3) 0;
  border-top: 3px solid var(--gold);
}
.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--dark);
  letter-spacing: -0.03em;
}
.stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: var(--s-1);
}

/* Stat grid — several callouts laid out in a row. Wraps on narrow
   viewports. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
.stat-grid .stat-callout { padding-top: var(--s-2); }

/* ── Pull quote — high-weight display treatment. Use sparingly (say
      one per article body, two at most). Works for editorial pull
      quotes drawn from the copy itself AND for customer quotes when
      those arrive; the <cite> line handles the attribution difference. */
.pull-quote {
  margin: var(--s-5) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 4px solid var(--gold);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--dark);
  font-weight: 600;
  font-style: normal;
}
.pull-quote p { margin: 0; }
.pull-quote cite {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── Inline quote — the lightest-touch variant. No card, no border,
      just an indented italic passage with an attribution line. For
      supporting a claim quietly. */
.quote-inline {
  margin: var(--s-4) 0;
  padding-left: var(--s-4);
  font-style: italic;
  color: var(--dark);
}
.quote-inline p { margin: 0 0 var(--s-2); }
.quote-inline p:last-of-type { margin-bottom: var(--s-2); }
.quote-inline cite {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── Attributed quote block — smaller than a pull quote, for
      supporting a claim without dominating the section. Wraps a real
      customer quote in a tinted card with attribution. */
.attributed-quote {
  margin: var(--s-4) 0;
  padding: var(--s-3);
  background: var(--section-bg);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--gold);
}
.attributed-quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--dark);
  font-style: italic;
}
.attributed-quote cite {
  display: block;
  margin-top: var(--s-2);
  font-size: 0.9rem;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0.02em;
}
/* On tint backgrounds an attributed-quote needs a different backing
   so it stays visually distinct from the section around it. */
.section-tint .attributed-quote { background: #fff; }

/* ── Case-study callout — end-of-benefit link that points at a
      customer story. Meant to sit at the end of a benefit's prose,
      as an outward-pointing next-step. */
.case-study-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  color: var(--dark);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.case-study-link:hover {
  background: var(--section-bg);
  color: var(--dark);
  text-decoration: none;
}
.case-study-link-eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  display: block;
}
.case-study-link-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dark);
  display: block;
  margin-top: 0.15rem;
}
.case-study-link-arrow {
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--gold);
  transition: transform 0.15s ease;
}
.case-study-link:hover .case-study-link-arrow { transform: translateX(4px); }

/* ── Article figure — image + optional caption. */
.article-figure {
  margin: var(--s-5) 0;
}
.article-figure img,
.article-figure picture img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}
.article-figure figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: var(--s-2);
  font-style: italic;
  padding: 0 var(--s-1);
}

/* ── Hero-image variant — compact hero with a dimmed background
      image, styled like the full-height hero but at hero-page height.
      Activate by adding class="hero-image" alongside hero-page and
      dropping a <picture class="hero-bg"> inside. */
.hero-page.hero-image {
  background: var(--dark);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-page.hero-image .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero-page.hero-image .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}
.hero-page.hero-image .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20,28,40,0.55), rgba(20,28,40,0.25));
}
.hero-page.hero-image .hero-inner {
  position: relative;
  z-index: 1;
}
.hero-page.hero-image h1 { color: #fff; }
.hero-page.hero-image .subheader { color: rgba(255,255,255,0.9); }


/* ---- 21. Utility ------------------------------------------ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- 22. Cookie consent banner ---------------------------- */
/* Governed by js/consent.js. Hidden by default via the `hidden`
   attribute on the banner element; consent.js unhides it when no
   prior consent decision is stored. */

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-dark, #36495E);
  color: #fff;
  padding: 1rem 1.25rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Open Sans', sans-serif;
}

.consent-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.consent-banner-text {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

.consent-banner-text a {
  color: var(--color-lightblue, #00A7DF);
  text-decoration: underline;
}

.consent-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.consent-banner button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s;
}

.consent-banner button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.consent-banner button.consent-btn-accept {
  background: var(--color-lightblue, #00A7DF);
  border-color: var(--color-lightblue, #00A7DF);
}

.consent-banner button.consent-btn-accept:hover {
  background: var(--color-blue, #007ABD);
  border-color: var(--color-blue, #007ABD);
}

@media (max-width: 600px) {
  .consent-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .consent-banner-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- 23. Landing pages ------------------------------------ */
/* Paid-search landing pages under /lp/. Structure: stripped
   header (logo only), focused hero with a single primary CTA
   above the fold, a small trust bar, a focused body, and a
   final closer. No main-site header/footer to minimise exit
   paths. `noindex` at the page level protects the SEO of the
   equivalent solutions article. */

.page-lp {
  background: #fff;
}

.page-lp .lp-header {
  padding: 1.25rem 0;
  border-bottom: 1px solid #E5E7EB;
  background: #fff;
}

.page-lp .lp-header .container {
  display: flex;
  align-items: center;
}

.page-lp .lp-header .site-logo img {
  height: 32px;
  width: auto;
}

.page-lp .lp-hero {
  padding: 4rem 0 2.5rem;
  text-align: center;
}

.page-lp .lp-hero h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1.15;
  max-width: 780px;
  margin: 0 auto 1.25rem;
  text-wrap: balance;
  color: var(--color-dark, #36495E);
}

.page-lp .lp-lede {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto 2rem;
  color: var(--color-dark, #36495E);
  opacity: 0.85;
}

.page-lp .lp-cta {
  margin: 1.75rem 0 0.5rem;
}

.page-lp .lp-cta .btn {
  font-size: 1.05rem;
  padding: 0.9rem 2rem;
}

.page-lp .lp-cta-sub {
  font-size: 0.9rem;
  color: #6B7280;
  margin: 0.5rem 0 0;
}

.page-lp .lp-trust {
  background: #F9FAFB;
  padding: 1.5rem 0;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

.page-lp .lp-trust-marks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-dark, #36495E);
  text-align: center;
}

.page-lp .lp-trust-marks li::before {
  content: "✓";
  color: var(--color-lightblue, #00A7DF);
  font-weight: 700;
  margin-right: 0.5rem;
}

.page-lp .lp-section {
  padding: 3.5rem 0;
}

.page-lp .lp-section h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: var(--color-dark, #36495E);
}

.page-lp .lp-section h2:not(:first-child) {
  margin-top: 2.5rem;
}

.page-lp .lp-section p {
  line-height: 1.65;
  font-size: 1.05rem;
  color: var(--color-dark, #36495E);
}

.page-lp .lp-list {
  padding-left: 1.25rem;
  line-height: 1.8;
  font-size: 1.05rem;
  color: var(--color-dark, #36495E);
}

.page-lp .lp-list li {
  margin-bottom: 0.35rem;
}

.page-lp .lp-list strong {
  font-weight: 700;
}

.page-lp .lp-mid-cta {
  text-align: center;
  margin: 2.5rem 0 0;
}

.page-lp .lp-footer {
  padding: 1.5rem 0;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  font-size: 0.85rem;
  color: #6B7280;
}

.page-lp .lp-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.page-lp .lp-footer a {
  color: #6B7280;
  text-decoration: none;
  border-bottom: 1px solid #D1D5DB;
}

.page-lp .lp-footer a:hover {
  color: var(--color-dark, #36495E);
  border-bottom-color: var(--color-dark, #36495E);
}

.page-lp .lp-footer-links {
  display: flex;
  gap: 1.5rem;
}

@media (max-width: 700px) {
  .page-lp .lp-hero {
    padding: 2.5rem 0 1.5rem;
  }
  .page-lp .lp-hero h1 {
    font-size: 2rem;
  }
  .page-lp .lp-lede {
    font-size: 1rem;
  }
  .page-lp .lp-section {
    padding: 2.5rem 0;
  }
  .page-lp .lp-section h2 {
    font-size: 1.4rem;
  }
}