:root {
	--wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: var(--wd-text-font);
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: var(--wd-title-font);
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: var(--wd-title-font);
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: var(--wd-text-font);
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: #83b735;
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #83b735;
	--btn-accented-bgcolor-hover: #74a32f;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}



.wd-page-title {
background-color: #0a0a0a;
}

/* ============================================================
   Fonts: self-hosted (Poppins + Lato).

   2026-08-09: switched back OFF the Google Fonts @import. Confirmed live
   (via direct DOM/network inspection) that it never actually worked:
   WoodMart's Custom CSS box always PREPENDS its own generated `:root{...}`
   theme-settings block before whatever gets pasted into the box, and
   `@import` is only valid as the literal first rule in a stylesheet
   (nothing before it, not even `:root`) - so the browser silently dropped
   our @import every single time, no matter how carefully/recently it was
   re-pasted. `@font-face` has no such positional requirement, so it works
   regardless of what WoodMart puts ahead of it.
   These 6 files already exist on the server from an earlier self-hosting
   attempt and are confirmed loading (200, font/woff2) - reused as-is,
   no new uploads needed. Root-relative paths (not https://xsaasolutions.com/...)
   so these don't need updating when the site moves off the staging domain.
   Note: a leftover Elementor-generated @font-face block (likely from an old
   Custom Fonts / Kit typography entry) also references these same files,
   but registers weights 500/600/800 under mismatched family names
   ("Poppins Medium"/"Poppins SemiBold"/"Poppins ExtraBold" instead of
   "Poppins") - harmless to leave, since our correctly-named declarations
   below are what every `font-family: 'Poppins'` reference in this file
   actually resolves to, but worth cleaning up in Elementor's settings
   eventually to avoid confusion.
   ============================================================ */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/lato-400.woff2') format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/lato-700.woff2') format('woff2'); }

/* ============================================================
   Swift eLearning Services, Design System
   One shared stylesheet for every page (add once in WordPress).
   Fonts: Poppins (headings) + Lato (body), loaded in <head>.
   ============================================================ */

:root {
  /* Brand tokens (from logo) */
  --c-blue: #3070B0;
  --c-blue-dark: #245C88;
  --c-navy: #0E3A66;
  --c-navy-deep: #0A2C50;
  --c-orange: #F0982F;
  --c-orange-dark: #D97F14;
  --c-ink: #16283C;
  --c-slate: #405060;
  --c-muted: #64748B;
  --c-tint: #F2F7FC;
  --c-tint-2: #E7F0F9;
  --c-line: #DCE7F2;
  --c-white: #FFFFFF;

  --font-head: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Lato', 'Segoe UI', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(14, 58, 102, .08);
  --shadow-md: 0 8px 28px rgba(14, 58, 102, .12);
  --shadow-lg: 0 18px 50px rgba(14, 58, 102, .18);
  --container: 1180px;
  --header-h: 76px;

  /* Vertical rhythm, change these, not individual sections.
     Section padding applies top AND bottom, so it doubles between two
     sections; keep it modest or pages feel empty. */
  --space-section: clamp(36px, 4.4vw, 56px); /* section padding-block */
  --space-head: clamp(20px, 2.4vw, 32px);    /* gap under a section heading */
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-slate);
  background: var(--c-white);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-dark); }
ul { padding-left: 1.2em; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--c-ink);
  line-height: 1.22;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }

/* ---------- WordPress theme overrides ----------
   Targets WoodMart's own wrapper classes/elements directly, so these intentionally do
   NOT carry the swift-swel- prefix (that prefix is for our classes; this is neutralizing theirs).
   .wd-content-layout was boxing the page content in padding, fighting the full-bleed
   hero/navy/CTA-band sections that are meant to reach edge to edge. */
.wd-content-layout { padding: 0px; }
/* WoodMart's theme settings set html{font-size} from --wd-text-font-size, currently 14px
   (Appearance/Theme Settings, not 16px default). Every size in this file is in rem, built
   and screenshot-verified against a 16px root - at 14px everything (headings, body text,
   spacing) silently renders ~12.5% smaller than designed. Force it back. */
html { font-size: 16px; }
/* WoodMart's base.css sets :is(ul,ol) li{margin-bottom:var(--li-mb)} sitewide, zeroed only on
   :last-child. Every swift-swel- list already spaces its own items with `gap` (grid/flex), so
   this is pure unwanted extra space stacking on top - and in flex-wrap grids (.swift-swel-logo-strip,
   .swift-swel-audience-grid) align-items:stretch equalizes each row's outer (margin) box, so the
   last item - the only one WoodMart zeroes - grows taller than its siblings to compensate. Kill it
   at the source for every list we author. */
ul[class*="swift-swel-"] li, ol[class*="swift-swel-"] li { margin-bottom: 0; }

/* ---------- Layout helpers ---------- */
.swift-swel-container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.swift-swel-section { padding-block: var(--space-section); }
.swift-swel-section--tint { background: var(--c-tint); }
.swift-swel-section--navy { background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%); }
.swift-swel-section--navy h2, .swift-swel-section--navy h3 { color: var(--c-white); }
.swift-swel-section--navy p { color: #C9DCF0; }
/* White cards keep dark text even inside navy sections */
.swift-swel-section--navy .swift-swel-card h3 { color: var(--c-ink); }
.swift-swel-section--navy .swift-swel-card p { color: var(--c-slate); }
.swift-swel-section--navy .swift-swel-catalog-promo h3 { color: var(--c-ink); }
.swift-swel-section--navy .swift-swel-catalog-promo p { color: var(--c-slate); }
.swift-swel-section--navy .swift-swel-catalog-promo .swift-swel-eyebrow { color: var(--c-blue); }

.swift-swel-section-head { max-width: 780px; margin: 0 auto var(--space-head); text-align: center; }
.swift-swel-section-head p:last-child { margin-bottom: 0; }
.swift-swel-section-head--left { margin-inline: 0; text-align: left; }
.swift-swel-section-head--wide { max-width: 960px; }
.swift-swel-section-head p { font-size: 1.1rem; }

/* Centred single-paragraph explainer ("why this matters") - a bare heading +
   paragraph on a tint background reads as empty next to the icon/card-heavy
   sections around it. Wraps the same content in a bordered card with a large
   icon badge instead of forcing the copy into bullets or fabricating an
   image it doesn't need. */
.swift-swel-highlight-panel {
  max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 44px 40px; text-align: center;
}
.swift-swel-highlight-panel-ic {
  width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); color: var(--c-blue);
}
.swift-swel-highlight-panel-ic svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-highlight-panel h2 { margin-bottom: .5em; }
.swift-swel-highlight-panel p { margin: 0; color: var(--c-slate); }
.swift-swel-highlight-panel--text-left p { text-align: left; }
@media (max-width: 600px) { .swift-swel-highlight-panel { padding: 32px 24px; } }

.swift-swel-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head);
  font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 14px;
}
.swift-swel-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--c-orange); }
.swift-swel-section--navy .swift-swel-eyebrow { color: #C9DCF0; }

/* Visually matches h2 but is not a heading element - used where the real
   (keyword) topic name already carries the h2 tag via .swift-swel-eyebrow, and this
   text is decorative/marketing copy that shouldn't also compete for an h2. */
.swift-swel-section-title {
  font-family: var(--font-head); color: var(--c-ink); line-height: 1.22;
  margin: 0 0 .6em; font-weight: 700;
  font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -0.015em;
}
.swift-swel-section--navy .swift-swel-section-title { color: var(--c-white); }
.swift-swel-cta-band .swift-swel-section-title { color: #fff; text-wrap: balance; }

.swift-swel-grid { display: grid; gap: 24px; }
.swift-swel-grid--2 { grid-template-columns: repeat(2, 1fr); }
.swift-swel-grid--3 { grid-template-columns: repeat(3, 1fr); }
.swift-swel-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .swift-swel-grid--3, .swift-swel-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .swift-swel-grid--2, .swift-swel-grid--3, .swift-swel-grid--4 { grid-template-columns: 1fr; } }

/* Auto-fitting card grid: wraps to as many columns as fit and CENTRES a
   partial last row, so a group of 5 doesn't leave one card stranded left. */
.swift-swel-grid--fit { display: flex; flex-wrap: wrap; justify-content: center; }
.swift-swel-grid--fit > * { flex: 1 1 235px; max-width: 278px; }
/* Wider variant: caps rows at 3 cards instead of grid--fit's default ~4, so a
   partial last row (e.g. 5 items -> 3+2) still centres like grid--fit. */
.swift-swel-grid--fit3 > * { flex: 1 1 330px; max-width: 380px; }
/* Widest variant: caps rows at 2 cards, for small groups (e.g. 4 items) that
   should read as larger feature-style cards rather than a dense grid. */
.swift-swel-grid--fit2 > * { flex: 1 1 380px; max-width: 460px; }
@media (max-width: 640px) { .swift-swel-grid--fit > * { flex: 1 1 100%; max-width: none; } }

/* ---------- Buttons ---------- */
.swift-swel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-transform: none;
  padding: 14px 28px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  line-height: 1.2; text-align: center;
}
.swift-swel-btn:hover { transform: translateY(-2px); }
.swift-swel-btn--primary { background: var(--c-orange); color: var(--c-ink); box-shadow: 0 6px 20px rgba(240, 152, 47, .35); }
.swift-swel-btn--primary:hover { background: var(--c-orange-dark); color: var(--c-ink); box-shadow: 0 10px 26px rgba(240, 152, 47, .45); }
.swift-swel-btn--outline { border-color: var(--c-blue); color: var(--c-blue); background: transparent; }
.swift-swel-btn--outline:hover { background: var(--c-blue); color: #fff; }
/* "Preview Course" CTA: inverse of .swift-swel-btn--outline (solid by default, outline on hover). Scoped so it doesn't touch .swift-swel-btn--outline's other users. */
.swift-swel-btn--preview-course { border-color: var(--c-blue); color: #fff; background: var(--c-blue); }
.swift-swel-btn--preview-course:hover { background: transparent; color: var(--c-blue); }
.swift-swel-btn--ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.swift-swel-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.swift-swel-btn--sm { padding: 10px 20px; font-size: .92rem; }
.swift-swel-btn .swift-swel-arr { transition: transform .18s ease; }
.swift-swel-btn:hover .swift-swel-arr { transform: translateX(4px); }

/* ---------- Header / Nav ---------- */
/* position:fixed, not sticky - on the live WordPress/WoodMart/Elementor site, <html> and
   <body> carry WoodMart's own overflow-x:hidden/clip (to suppress horizontal scrollbars from
   full-width sections). Any non-visible overflow on an ancestor breaks position:sticky's ability
   to stick to the real viewport - confirmed live (2026-08-25): the header has position:sticky
   applied correctly but still scrolls fully off-screen. fixed is immune to that ancestor-overflow
   issue (only transform/filter/perspective/will-change on an ancestor would trap it, and none of
   the live page's ancestors set those), so it works regardless of WoodMart's overflow rules.
   `body` below carries the compensating padding-top since fixed removes the header from the
   document flow entirely (sticky used to reserve its own space automatically) - targeting `body`
   rather than `.swift-swel-main` deliberately: `<main>` is confirmed EMPTY on the live site (a
   pre-existing Elementor HTML-parsing quirk, see §9 in PROJECT-CONTEXT.md - the browser's
   adoption-agency algorithm closes our `<main>` tag immediately after it opens, so the real page
   content ends up as `<main>`'s siblings, not its children); `body` reliably wraps everything on
   both the live site and the local dist/ preview regardless of that quirk. */
.swift-swel-site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
/* Glass effect on desktop only: backdrop-filter creates a containing block that
   would trap the fixed-position mobile nav inside the header. */
@media (min-width: 1081px) {
  .swift-swel-site-header { background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); }
}
.swift-swel-site-header.swift-swel-is-scrolled { box-shadow: var(--shadow-sm); }
body { padding-top: var(--header-h); }
.swift-swel-nav-wrap {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
  max-width: var(--container); margin-inline: auto; padding-inline: 24px;
  position: relative; /* anchor for the full-width mega menu */
}
.swift-swel-brand { display: flex; align-items: center; flex-shrink: 0; }
.swift-swel-brand img { height: 58px; width: auto; }

.swift-swel-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.swift-swel-nav > .swift-swel-nav-item { position: relative; }
.swift-swel-nav a.swift-swel-nav-link, .swift-swel-nav button.swift-swel-nav-link {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: .95rem; font-weight: 500; text-transform: none;
  color: var(--c-ink); padding: 10px 14px; border-radius: var(--radius-sm);
  background: none; border: 0; cursor: pointer;
}
.swift-swel-nav a.swift-swel-nav-link:hover.swift-swel-nav button.swift-swel-nav-link:hover { color: var(--c-blue); background: var(--c-tint); }
.swift-swel-nav-link .swift-swel-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.swift-swel-nav-item.swift-swel-is-open > .swift-swel-nav-link .swift-swel-caret { transform: rotate(225deg) translateY(-1px); }

.swift-swel-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 300px; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; display: none; z-index: 1001;
}
.swift-swel-nav-item.swift-swel-is-open > .swift-swel-dropdown { display: block; }
/* Invisible bridge across the 8px gap so moving the mouse from the nav item
   into the dropdown doesn't fire mouseleave and close it. */
.swift-swel-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.swift-swel-dropdown a {
  display: block; padding: 9px 14px; border-radius: var(--radius-sm);
  color: var(--c-slate); font-size: .95rem; line-height: 1.4;
}
.swift-swel-dropdown a:hover { background: var(--c-tint); color: var(--c-blue); }
.swift-swel-dropdown .swift-swel-dropdown-label {
  font-family: var(--font-head); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted);
  padding: 10px 14px 4px;
}

/* Mega menu (Our Solutions), full header width.
   Must out-specify `.swift-swel-nav > .swift-swel-nav-item { position: relative }` so the mega
   dropdown anchors to .swift-swel-nav-wrap (full width), not the small nav item. */
.swift-swel-nav > .swift-swel-nav-item--mega { position: static; }
.swift-swel-dropdown--mega {
  left: 24px; right: 24px; top: calc(100% + 8px);
  min-width: 0; padding: 26px 28px;
}
/* Taller bridge: the full-width mega panel sits ~25px below the button, so its
   connector must span the whole gap (no timer, pure cursor position). */
.swift-swel-dropdown--mega::before { top: -27px; height: 27px; }
.swift-swel-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 28px; }
.swift-swel-mega-col .swift-swel-dropdown-label { padding: 0 0 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
/* Column headings double as links to their hub page */
.swift-swel-dropdown-label--link { display: block; color: var(--c-muted); transition: color .18s ease; }
.swift-swel-dropdown-label--link:hover { color: var(--c-blue); background: none; }
.swift-swel-dropdown-label--link span { opacity: 0; transition: opacity .18s ease, transform .18s ease; display: inline-block; }
.swift-swel-dropdown-label--link:hover span { opacity: 1; transform: translateX(3px); }
.swift-swel-mega-col a { padding: 7px 10px; }
.swift-swel-mega-links--2 { columns: 2; column-gap: 22px; }
.swift-swel-mega-links--2 a { break-inside: avoid; }
.swift-swel-mega-feature {
  grid-column: 1 / -1; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.swift-swel-mega-feature span { font-size: .95rem; color: var(--c-muted); }
.swift-swel-mega-feature--end { justify-content: flex-end; }
/* .swift-swel-dropdown a / a:hover (generic link styling for plain dropdown
   links) outrank .swift-swel-btn--primary on specificity, so a primary button
   dropped inside a dropdown (Get a Quote, About Us) silently lost its white
   text and orange hover state to the grey/blue link colors. Restore both. */
.swift-swel-dropdown a.swift-swel-btn--primary { color: var(--c-ink); }
.swift-swel-dropdown a.swift-swel-btn--primary:hover { background: var(--c-orange-dark); color: var(--c-ink); }

.swift-swel-nav-cta { margin-left: 10px; }
.swift-swel-nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; position: relative;
}
.swift-swel-nav-toggle span, .swift-swel-nav-toggle span::before, .swift-swel-nav-toggle span::after {
  content: ""; position: absolute; height: 2px;
  background: var(--c-ink); border-radius: 2px; transition: all .2s ease;
}
.swift-swel-nav-toggle span { top: 21px; left: 11px; right: 11px; }
.swift-swel-nav-toggle span::before.swift-swel-nav-toggle span::after { left: 0; right: 0; }
.swift-swel-nav-toggle span::before { top: -7px; }
.swift-swel-nav-toggle span::after { top: 7px; }
.swift-swel-nav-toggle[aria-expanded="true"] span { background: transparent; }
.swift-swel-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.swift-swel-nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .swift-swel-nav-toggle { display: block; }
  .swift-swel-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 999;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 18px 22px 40px; overflow-y: auto; display: none; margin: 0;
  }
  .swift-swel-nav.swift-swel-is-open { display: flex; }
  .swift-swel-nav a.swift-swel-nav-link, .swift-swel-nav button.swift-swel-nav-link { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: 1.05rem; border-bottom: 1px solid var(--c-tint-2); border-radius: 0; }
  .swift-swel-dropdown { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 6px 10px; border-radius: 0; }
  .swift-swel-dropdown--mega { left: 0; right: 0; padding: 0 0 6px 10px; }
  .swift-swel-mega-grid { grid-template-columns: 1fr; gap: 0; }
  .swift-swel-mega-links--2 { columns: 1; }
  .swift-swel-mega-col .swift-swel-dropdown-label { border-bottom: 0; padding-top: 12px; }
  .swift-swel-mega-feature { display: none; }
  /* Unlike the eLearning Services CTA (redundant with the always-visible
     nav Get a Quote button), the About Us button is the only path to
     /about-us/ inside this dropdown - must stay visible on mobile. */
  .swift-swel-mega-feature--end { display: flex; margin-top: 12px; padding-top: 12px; }
  .swift-swel-mega-feature--end .swift-swel-btn { width: 100%; justify-content: center; }
  .swift-swel-nav-cta { margin: 18px 0 0; }
  .swift-swel-nav-cta .swift-swel-btn { width: 100%; }
}

/* ---------- Hero ---------- */
.swift-swel-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(48, 112, 176, .14), transparent 60%),
    radial-gradient(720px 380px at -8% 115%, rgba(240, 152, 47, .12), transparent 55%),
    linear-gradient(160deg, #FFFFFF 0%, #EAF1F9 100%);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.swift-swel-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14, 58, 102, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, .5), transparent 55%);
  -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .5), transparent 55%);
}
.swift-swel-hero-inner {
  position: relative; display: grid; grid-template-columns: 60fr 40fr; gap: 48px;
  align-items: center; padding-block: clamp(24px, 3.5vw, 48px);
}
.swift-swel-hero h1 { color: var(--c-ink); margin-bottom: .5em; }
.swift-swel-hero h1 .swift-swel-accent, .swift-swel-page-hero h1 .swift-swel-accent { color: var(--c-orange); }
.swift-swel-hero .swift-swel-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--c-slate); max-width: 560px; }
.swift-swel-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Light hero: secondary button needs a dark outline (the light-ghost variant is invisible here) */
.swift-swel-hero .swift-swel-btn--ghost-light { border: 1.5px solid var(--c-navy); color: var(--c-navy); background: transparent; }
.swift-swel-hero .swift-swel-btn--ghost-light:hover { background: var(--c-navy); color: #fff; }
.swift-swel-hero-trust { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #9FBFDE; font-size: .95rem; }
.swift-swel-hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.swift-swel-hero-trust .swift-swel-tick { color: var(--c-orange); font-weight: 700; }

.swift-swel-hero-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.swift-swel-hero-points li { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-weight: 600; font-size: .98rem; }
.swift-swel-hero-points .swift-swel-hp-tick {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-tint-2); color: var(--c-orange);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem;
}
/* Key:value bullet variant - for lists like "Label: description" where the description needs to
   start at the same x-position on every line instead of trailing raggedly after labels of different
   lengths. Opt-in modifier (`--kv` on the <ul>, `.swift-swel-hp-kv` wrapping the label+desc pair inside
   each <li>) so plain single-sentence .swift-swel-hero-points lists elsewhere are unaffected. */
.swift-swel-hero-points--kv li { align-items: flex-start; }
.swift-swel-hero-points--kv .swift-swel-hp-tick { margin-top: 2px; }
.swift-swel-hero-points--kv .swift-swel-hp-kv {
  display: grid; grid-template-columns: 195px 1fr; column-gap: 12px; flex: 1;
}
.swift-swel-hero-points--kv .swift-swel-hp-kv > span:last-child { font-weight: 400; }
@media (max-width: 900px) {
  /* Covers both true mobile AND tablet/narrow-desktop widths where this list still sits inside a
     2-up .swift-swel-grid--2 card (that grid itself doesn't stack to 1 column until 640px, so a
     side-by-side kv layout stays cramped well past typical phone widths - verified via shoot.mjs
     tablet (768px) overflow before this breakpoint was widened from 560px). */
  .swift-swel-hero-points--kv .swift-swel-hp-kv { grid-template-columns: 1fr; row-gap: 2px; }
}

.swift-swel-hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius); backdrop-filter: blur(8px);
  padding: 30px 28px; box-shadow: var(--shadow-lg);
}
.swift-swel-hero-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 14px; }
.swift-swel-hero-card ul { list-style: none; padding: 0; margin: 0 0 20px; }
.swift-swel-hero-card li { display: flex; gap: 10px; padding: 7px 0; color: #DAE8F6; font-size: .98rem; }
.swift-swel-hero-card li::before { content: "✓"; color: var(--c-orange); font-weight: 700; flex-shrink: 0; }
/* Hero contact form: crisp white lead-capture card */
.swift-swel-hero-form { background: #fff; border: 1.5px solid var(--c-navy); backdrop-filter: none; padding: 28px 28px 22px;
  box-shadow: 0 24px 54px rgba(14, 58, 102, .16); }
.swift-swel-hero-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.swift-swel-hero-form-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(240, 152, 47, .14); color: var(--c-orange); }
.swift-swel-hero-form-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-hero-form h2 { color: var(--c-ink); font-size: 1.18rem; margin: 0; line-height: 1.25; }
.swift-swel-hero-form-sub { color: var(--c-muted); font-size: .9rem; line-height: 1.45; margin: 3px 0 0; }
.swift-swel-hero-form .swift-swel-form-grid { gap: 14px; }
.swift-swel-hero-form label { color: var(--c-ink); font-size: .82rem; margin-bottom: 6px; }
.swift-swel-hero-form input, .swift-swel-hero-form textarea {
  background: var(--c-tint); border: 1px solid var(--c-line); color: var(--c-ink); padding: 12px 14px;
}
.swift-swel-hero-form input::placeholder, .swift-swel-hero-form textarea::placeholder { color: var(--c-muted); }
.swift-swel-hero-form input:focus, .swift-swel-hero-form textarea:focus { background: #fff; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(240, 152, 47, .18); }
@media (max-width: 900px) {
  .swift-swel-hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .swift-swel-hero-card { max-width: 520px; }
}

/* ---------- Stats band ---------- */
.swift-swel-stats { border-block: 1px solid var(--c-line); background: #fff; }
/* When a .swift-swel-stats band sits directly under a .swift-swel-page-hero, the hero's own
   border-bottom and this band's border-top stack into a doubled, overly
   prominent line that no other hero->section transition shows. Drop both
   in that specific adjacency only - every other .swift-swel-page-hero keeps its
   border-bottom unchanged. */
.swift-swel-page-hero:has(+ .swift-swel-stats) { border-bottom: 0; }
.swift-swel-page-hero + .swift-swel-stats { border-top: 0; }
.swift-swel-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-block: 26px; }
.swift-swel-stat { text-align: center; }
.swift-swel-stat .swift-swel-num { font-family: var(--font-head); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; color: var(--c-blue); line-height: 1.1; }
.swift-swel-stat .swift-swel-num em { color: var(--c-orange); font-style: normal; }
.swift-swel-stat .swift-swel-lbl { font-size: .92rem; color: var(--c-muted); margin-top: 4px; }
@media (max-width: 900px) { .swift-swel-stats-row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } }
@media (max-width: 560px) { .swift-swel-stats-row { grid-template-columns: repeat(2, 1fr); } }
/* Modifier for stat bands that don't have exactly 5 items (the default grid
   is a fixed 5-column track, so 4 items leave an empty trailing column and
   read as off-centre). Add stats-row--N for any other count as needed. */
.swift-swel-stats-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .swift-swel-stats-row--4 { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }
.swift-swel-stats-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .swift-swel-stats-row--3 { grid-template-columns: 1fr; row-gap: 26px; } }
.swift-swel-stats-row--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .swift-swel-stats-row--6 { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } }
@media (max-width: 560px) { .swift-swel-stats-row--6 { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }

/* ---------- Cards ---------- */
.swift-swel-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.swift-swel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
/* .swift-swel-card as a real <button> (best-elearning-examples.html's Level 1/2/3 sample cards) -
   the whole card is one click target that opens a course-preview modal, matching the sitewide
   .risk-panel-btn pattern used elsewhere for "click anywhere to preview" cards. Everything else
   (background/border/padding/shadow/flex/hover) is already covered by the class rules above; this
   just resets native <button> chrome that would otherwise fight them (UA button width/font/align).
   `color: inherit` fixes a real bug found 2026-08-31: unlike a plain <div>, a <button>'s UA
   stylesheet gives it its own default `color` that does NOT automatically inherit from ancestors,
   so this card's paragraph text was rendering near-black instead of the site's intended --c-slate
   body color (confirmed via computed-style check, not just visually) - every other, non-button
   .swift-swel-card elsewhere on the site was already correct, since a <div> inherits color by
   default. */
button.swift-swel-card { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.swift-swel-card h3 { margin-bottom: .4em; }
.swift-swel-card p { font-size: .98rem; margin-bottom: 1em; }
/* FORMALIZED 2026-09-28 (Anwar pasted this exact block from the live site's sitewide "Additional CSS" box and asked to "Include this in CSS
   ... make sure provided code is not miss whenever new CSS updated" - i.e. track it here for good so a future style.css re-paste can never
   drop it). This was previously documented ONLY as a live-only rule this file patched around (see the .swift-swel-results-card note below);
   it is now a real, intentional, sitewide rule in this file too, matching what's already been running in production. Confirmed no regression:
   #405060 is the exact value of --c-slate (used unprefixed by .swift-swel-section--navy .swift-swel-card p and .swift-swel-card--case p, both
   non-!important, so they still resolve to the same colour), and no other .swift-swel-card p usage on the site relies on centered/bold/uppercase
   text that this would override. His pasted text repeated this exact rule a second time immediately after (a duplicate in his source) - not
   re-added here since a stylesheet can only ever apply it once regardless. */
.swift-swel-card h3 { text-transform: none !important; }
.swift-swel-card p {
  text-transform: none !important; font-weight: 400 !important;
  text-align: left !important; color: #405060 !important;
}
.swift-swel-card p b, .swift-swel-card p strong { font-weight: 700 !important; }
/* Bold mini-header paragraphs inside a dense multi-part card (e.g. careers.html's job cards -
   "Key Responsibilities" / "Qualifications & Skills" / "Tools & Technologies Worked With") - the
   default .swift-swel-card p margin only adds space below, so a subhead sitting right after a list
   (.proc-points / .pill-list, neither of which has its own bottom margin) had no visual gap above it.
   Adds real breathing room above each subhead without touching the shared list/paragraph components
   used elsewhere on the site. */
.swift-swel-card-subhead { margin-top: 20px; margin-bottom: 6px; }
.swift-swel-card .swift-swel-card-link { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; }
.swift-swel-card .swift-swel-card-link::after { content: "→"; transition: transform .18s ease; }
.swift-swel-card:hover .swift-swel-card-link::after { transform: translateX(4px); }

/* Dark "Results" stat panel - drops inside a .swift-swel-card (e.g. a case-study card) below its
   existing text content. Reuses the sitewide navy gradient (same as .swift-swel-section--navy) and the
   eyebrow's established navy-context color rather than inventing new tokens, so it reads as part of the
   same design system. Each .swift-swel-results-row is a big number (white) + <em> suffix (orange,
   matching .swift-swel-stat's own number/suffix split) with a short description below; a thin divider
   separates rows after the first. */
.swift-swel-results-card {
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  margin: 20px 0;
}
.swift-swel-results-card .swift-swel-eyebrow { color: #C9DCF0; margin-bottom: 4px; }
.swift-swel-results-card .swift-swel-eyebrow::before { background: var(--c-orange); }
.swift-swel-results-row { padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.swift-swel-results-row:first-of-type { border-top: 0; padding-top: 6px; }
.swift-swel-results-num { font-family: var(--font-head); font-size: clamp(1.7rem, 2.6vw, 2.2rem); font-weight: 800; color: #fff; line-height: 1.1; }
.swift-swel-results-num em { color: var(--c-orange); font-style: normal; }
.swift-swel-results-row p { margin: 4px 0 0; color: #C9DCF0; font-size: .92rem; }
/* Hardened re-declaration, 2026-09-15 (STILL NEEDED after the 2026-09-28 formalization above): the sitewide
   `.swift-swel-card p { color: #405060 !important; ... }` rule - originally mis-scoped live (meant only for one
   page's own Custom CSS, best-elearning-examples.html - see PROJECT-CONTEXT.md), now ALSO a deliberate rule in
   this file - overrides the rule above wherever a .swift-swel-results-card sits inside a .swift-swel-card, making
   this text unreadable against the dark navy background. This compound selector + !important guarantees a win
   over it (higher specificity within the !important tier beats source order) regardless of source. */
.swift-swel-results-card .swift-swel-results-row p { color: #C9DCF0 !important; }
/* Temporarily-disabled card link: the target page isn't built yet. Original
   href/label are kept in data-href/data-label so re-enabling later is a
   straight swap back to a real <a>, not a rewrite from scratch. */
.swift-swel-card-link.swift-swel-card-link--disabled { color: var(--c-muted); cursor: default; }
.swift-swel-card-link.swift-swel-card-link--disabled::after { content: ""; }
.swift-swel-card:hover .swift-swel-card-link.swift-swel-card-link--disabled::after { transform: none; }

.swift-swel-card-icon {
  width: 52px; height: 52px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2));
  color: var(--c-blue); font-size: 1.45rem; flex-shrink: 0;
}
.swift-swel-card-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-card:nth-child(3n+2) .swift-swel-card-icon { color: var(--c-orange); }

/* Solid navy variant - used where a .card grid sits directly below another .card grid
   on the same page (e.g. "Who Needs a Learning Management System?" below "Key System
   Objectives & Core Capabilities") so the two sections read as visually distinct despite
   sharing the same card component, without introducing an off-brand colour. */
.swift-swel-card-icon--navy { background: linear-gradient(135deg, var(--c-navy), var(--c-navy-deep)); color: #fff; }
.swift-swel-card:nth-child(3n+2) .swift-swel-card-icon--navy { color: #fff; }

/* Course card with a full-bleed photo - variant of .swift-swel-card used in the
   free-course catalog grid. The image fills the entire card; only the
   title shows at rest inside a translucent overlay bar pinned to the
   bottom. On hover/focus the overlay grows to reveal the description +
   Read More link (grid-template-rows 0fr->1fr, animatable unlike height:
   auto, and copes with the 14 cards' differing text lengths without a
   guessed max-height). The card's own box size never changes so the grid
   doesn't reflow when a card expands - the overlay just grows upward,
   covering more of the image underneath it. */
.swift-swel-course-card { position: relative; padding: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.swift-swel-course-card-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.swift-swel-course-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.swift-swel-course-card:hover .swift-swel-course-card-img img,
.swift-swel-course-card:focus-within .swift-swel-course-card-img img { transform: scale(1.06); }
.swift-swel-course-card-img .swift-swel-img-ph { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; border: none; border-radius: 0; background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); padding: 16px; gap: 8px; }
.swift-swel-course-card-img .swift-swel-img-ph svg { width: 32px; height: 32px; }
.swift-swel-course-card-img .swift-swel-img-ph-title { font-size: .88rem; }
.swift-swel-course-card-img .swift-swel-img-ph small { font-size: .74rem; max-width: 200px; }

.swift-swel-course-card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: rgba(10, 37, 66, .6);
  color: #fff; padding: 18px 20px;
  transition: padding .35s ease;
}
.swift-swel-course-card-overlay h3 {
  color: #fff; margin: 0; font-size: 1.05rem; line-height: 1.25; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.5em;
}
.swift-swel-course-card-desc { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .4s ease, margin-top .4s ease; }
.swift-swel-course-card-desc-inner { overflow: hidden; opacity: 0; transition: opacity .25s ease; }
.swift-swel-course-card-desc p {
  color: #EDF3F9; font-size: .9rem; margin: 0 0 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.swift-swel-course-card-desc .swift-swel-card-link { color: #fff; margin-top: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.swift-swel-course-card:hover .swift-swel-course-card-overlay,
.swift-swel-course-card:focus-within .swift-swel-course-card-overlay { padding-top: 20px; padding-bottom: 22px; }
.swift-swel-course-card:hover .swift-swel-course-card-desc,
.swift-swel-course-card:focus-within .swift-swel-course-card-desc { grid-template-rows: 1fr; margin-top: 10px; }
.swift-swel-course-card:hover .swift-swel-course-card-desc-inner,
.swift-swel-course-card:focus-within .swift-swel-course-card-desc-inner { opacity: 1; transition: opacity .35s ease .1s; }
/* Touch devices have no real :hover - keep the description permanently
   expanded there instead of hiding it behind an unreachable gesture. */
@media (hover: none) {
  .swift-swel-course-card-desc { grid-template-rows: 1fr; margin-top: 10px; }
  .swift-swel-course-card-desc-inner { opacity: 1; }
}

/* ---------- More-services link chips ---------- */
.swift-swel-more-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; }
.swift-swel-more-links .swift-swel-more-label {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--c-muted);
  display: inline-flex; align-items: center; padding: 11px 4px;
}
.swift-swel-more-links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: #fff; background: var(--c-blue);
  border: 1px solid var(--c-blue); border-radius: 999px;
  padding: 10px 20px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.swift-swel-more-links a:hover {
  background: var(--c-tint); border-color: var(--c-line); color: var(--c-blue);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* Global "Get in Touch" section (pre-footer, dark navy so it stands apart from
   the light footer below). Restyle the intro for a dark background; the form
   card stays white with dark text. */
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points b { color: #fff; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points p { color: #C9DCF0; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points a { color: #fff; text-decoration: underline; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-ic { background: rgba(255, 255, 255, .12); color: #fff; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-note { color: #C9DCF0; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-note a { color: #fff; text-decoration: underline; }
.swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-card h3 { color: var(--c-ink); }
/* Contact section (home), split intro + elevated form card */
.swift-swel-contact-wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 54px); align-items: stretch; }
@media (max-width: 860px) { .swift-swel-contact-wrap { grid-template-columns: 1fr; } }
.swift-swel-contact-intro { align-self: center; }
.swift-swel-contact-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.swift-swel-contact-points li { display: flex; align-items: flex-start; gap: 14px; }
.swift-swel-contact-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: var(--c-tint-2); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
}
.swift-swel-contact-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-contact-points b { display: block; color: var(--c-ink); font-family: var(--font-head); font-size: .98rem; }
.swift-swel-contact-points p { margin: 2px 0 0; font-size: .92rem; color: var(--c-slate); }
.swift-swel-contact-points a { color: var(--c-blue); font-weight: 600; }

/* Numbered "boxed" variant of .swift-swel-contact-points: each item becomes its own bordered card
   with a 01/02/03... badge instead of a checkmark icon, per Anwar's reference request. Reuses
   .swift-swel-contact-ic's exact badge dimensions so it still lines up cleanly with the text - just
   swaps the SVG for plain number text and recolors it orange. */
.swift-swel-contact-points--boxed li {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.swift-swel-contact-points--boxed .swift-swel-contact-ic {
  background: var(--c-tint-2); color: var(--c-orange);
  font-family: var(--font-head); font-weight: 800; font-size: .82rem; letter-spacing: .01em;
}
/* 2-up grid at desktop (01+02, 03+04, then 05 alone on its own row) so the 5-box stack is shorter
   and reads as balanced next to the hero form beside it, instead of towering over it in one long
   column. Single column again below 901px - two narrow card columns get cramped once the page's own
   2-column hero grid (this column vs. the form) has also collapsed to full width. */
@media (min-width: 901px) {
  .swift-swel-contact-points--boxed { grid-template-columns: 1fr 1fr; }
}
/* Box 05 spans the full row (both columns) at desktop, matching the combined width of the 03+04 row
   above it, instead of sitting alone in just the left column with an empty cell beside it. */
@media (min-width: 901px) {
  .swift-swel-contact-points--boxed li.swift-swel-contact-points-wide { grid-column: 1 / -1; }
}
.swift-swel-contact-note { margin: 18px 0 0; font-size: .92rem; color: var(--c-slate); }
.swift-swel-contact-note a { color: var(--c-blue); font-weight: 600; }
.swift-swel-contact-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: clamp(24px, 3.2vw, 36px);
}
.swift-swel-contact-card h3 { font-size: 1.15rem; margin: 0 0 4px; }
.swift-swel-contact-card .swift-swel-card-sub { font-size: .92rem; color: var(--c-muted); margin: 0 0 20px; }

/* ---------- Pills / tools strip ---------- */
.swift-swel-pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.swift-swel-pill {
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--c-navy); background: #fff; border: 1px solid var(--c-line);
  padding: 10px 20px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.swift-swel-section--navy .swift-swel-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #DAE8F6; }
a.swift-swel-pill { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
a.swift-swel-pill:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; transform: translateY(-2px); }
.swift-swel-section--navy a.swift-swel-pill:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; }

/* ---------- Industries grid (rich cross-link section on navy) ---------- */
.swift-swel-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: var(--space-head); }
.swift-swel-ind-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 26px 22px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.swift-swel-ind-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); box-shadow: var(--shadow-lg); }
.swift-swel-ind-ic { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(240, 152, 47, .16); color: var(--c-orange); }
.swift-swel-ind-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-ind-card h3 { color: #fff; font-size: 1.08rem; margin: 0; }
.swift-swel-ind-card p { color: #C9DCF0; font-size: .9rem; line-height: 1.55; margin: 0; }
@media (max-width: 1000px) { .swift-swel-ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .swift-swel-ind-grid { grid-template-columns: 1fr; } }

/* ---------- Tool logo strip ---------- */
.swift-swel-logo-group-label {
  font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
  text-align: center; margin: 0 0 16px;
  /* Inert unless this element is also an in-page anchor target (e.g. a tutorial
     sub-heading jumped to from a quick-nav button) - keeps it clear of the sticky header. */
  scroll-margin-top: calc(var(--header-h) + 20px);
}
/* Bigger/bluer variant - bigger than the default label but still smaller
   than .swift-swel-section-title above it, so the reading hierarchy stays intact */
.swift-swel-logo-group-label--lg { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; color: var(--c-blue); }
/* Flex + centred wrapping so a partial last row sits centred, not left-ragged */
.swift-swel-logo-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  list-style: none; padding: 0; margin: 0;
}
.swift-swel-logo-tile {
  flex: 0 1 172px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  min-height: 92px; padding: 16px 12px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (max-width: 560px) { .swift-swel-logo-tile { flex: 1 1 42%; min-height: 80px; } }
.swift-swel-logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
/* Real logos: drop an <img> in and it renders greyscale, colouring on hover */
.swift-swel-logo-tile img {
  max-height: 46px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .8; transition: filter .18s ease, opacity .18s ease;
}
.swift-swel-logo-tile:hover img { filter: none; opacity: 1; }
/* Wordmark fallback used until real logo files are supplied */
.swift-swel-logo-tile .swift-swel-logo-name { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--c-navy); line-height: 1.3; }
.swift-swel-section--navy .swift-swel-logo-tile, .swift-swel-section--tint .swift-swel-logo-tile { background: #fff; }
.swift-swel-section--navy .swift-swel-logo-tile { border-color: rgba(255, 255, 255, .16); }

/* ---------- Process steps ---------- */
/* Process steps: connected, numbered timeline with filled gradient badges */
.swift-swel-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: step; }
.swift-swel-step {
  position: relative; counter-increment: step;
  padding: 30px 22px 24px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 16px; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.swift-swel-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #C7DAEE; }
.swift-swel-step::before {
  content: "0" counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 13px;
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff;
  background: linear-gradient(140deg, var(--c-navy), var(--c-blue));
  box-shadow: 0 8px 18px rgba(14, 58, 102, .28);
}
/* connector between badges (desktop only) */
.swift-swel-step:not(:last-child)::after {
  content: ""; position: absolute; top: 54px; left: 70px; right: -22px; height: 2px;
  background: linear-gradient(90deg, var(--c-line), transparent);
}
.swift-swel-steps--3 { grid-template-columns: repeat(3, 1fr); }
.swift-swel-steps--4 { grid-template-columns: repeat(4, 1fr); }  /* 4-step flow (healthcare case study "Prototype-First Development"); the <=1024px / <=560px rules below still collapse it to 2 / 1 columns */
.swift-swel-step h3 { font-size: 1.14rem; margin: 0 0 .45em; color: var(--c-ink); }
.swift-swel-step p { font-size: .93rem; margin: 0; color: var(--c-slate); line-height: 1.6; }
@media (max-width: 1024px) {
  .swift-swel-steps { grid-template-columns: repeat(2, 1fr); }
  .swift-swel-step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) { .swift-swel-steps { grid-template-columns: 1fr; } }

/* ---------- Process timeline (detailed, homepage) ---------- */
.swift-swel-process { list-style: none; margin: var(--space-head) auto 0; padding: 0; position: relative; max-width: 920px; }
.swift-swel-process::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--c-blue), var(--c-tint-2)); }
.swift-swel-proc-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding-bottom: 24px; }
.swift-swel-proc-step:last-child { padding-bottom: 0; }
.swift-swel-proc-num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; font-family: var(--font-head); font-weight: 800;
  font-size: 1.1rem; color: #fff; background: linear-gradient(140deg, var(--c-navy), var(--c-blue));
  box-shadow: 0 10px 22px rgba(14, 58, 102, .30); }
.swift-swel-proc-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 24px 28px;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-width: 0; }
.swift-swel-proc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #C7DAEE; }
.swift-swel-proc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.swift-swel-proc-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-tint-2); color: var(--c-blue); }
.swift-swel-proc-ic svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-proc-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); }
.swift-swel-proc-card h3 { margin: 3px 0 0; font-size: 1.22rem; color: var(--c-ink); }
.swift-swel-proc-card > p { margin: 0 0 16px; color: var(--c-slate); line-height: 1.65; }
.swift-swel-proc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.swift-swel-proc-points li { position: relative; padding-left: 28px; font-size: .92rem; color: var(--c-slate); line-height: 1.5; }
.swift-swel-proc-points li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--c-tint-2); color: var(--c-blue); font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; }
/* A nested list inside a proc-points item (e.g. a variable's Name/Type/Default sub-values under one
   instruction) renders as a plain disc sub-list, not a second level of check-circles. */
.swift-swel-proc-points li ul { list-style: disc; margin: 6px 0 0; padding-left: 18px; display: block; }
.swift-swel-proc-points li ul li { position: static; padding-left: 0; font-size: .9rem; }
.swift-swel-proc-points li ul li::before { display: none; }
@media (max-width: 640px) {
  .swift-swel-proc-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .swift-swel-proc-num { width: 44px; height: 44px; font-size: .95rem; border-radius: 13px; }
  .swift-swel-process::before { left: 21px; }
  .swift-swel-proc-card { padding: 20px 20px; }
}

/* Screenshot(s) inside a .proc-card (tutorial/how-to steps) - one image full width,
   or several side by side when a step has more than one ("...one after another" in source docs). */
.swift-swel-proc-media { display: flex; gap: 12px; margin-top: 4px; }
.swift-swel-proc-media img { flex: 1 1 0; width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm); display: block; }
@media (max-width: 560px) { .swift-swel-proc-media { flex-direction: column; } }
/* Modifier: stack vertically instead of side by side ("...one below the other" in some source docs). */
.swift-swel-proc-media--stack { flex-direction: column; }

/* ---------- Feature / why-us list ---------- */
.swift-swel-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.swift-swel-feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.swift-swel-feature-list .swift-swel-fi {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c-tint-2); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem;
  margin-top: 3px;
}
.swift-swel-feature-list b { color: var(--c-ink); font-family: var(--font-head); font-weight: 600; }
.swift-swel-feature-list p { margin: 2px 0 0; font-size: .95rem; }

/* ---------- Split section ---------- */
.swift-swel-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .swift-swel-split { grid-template-columns: 1fr; } }
.swift-swel-split-media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md);
  background: linear-gradient(145deg, var(--c-tint), var(--c-tint-2));
  min-height: 300px; display: flex; align-items: center; justify-content: center;
}
.swift-swel-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- FAQ ---------- */
.swift-swel-faq { max-width: 820px; margin-inline: auto; }
.swift-swel-faq details {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  margin-bottom: 12px; overflow: hidden;
}
.swift-swel-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-family: var(--font-head); font-weight: 600; color: var(--c-ink); font-size: 1.02rem;
}
.swift-swel-faq summary::-webkit-details-marker { display: none; }
.swift-swel-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--c-blue); transition: transform .2s ease; flex-shrink: 0; }
.swift-swel-faq details[open] summary::after { transform: rotate(45deg); }
.swift-swel-faq details[open] summary { color: var(--c-blue); }
.swift-swel-faq .swift-swel-faq-a { padding: 0 22px 20px; font-size: .98rem; }
.swift-swel-faq .swift-swel-faq-a p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.swift-swel-cta-band {
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(240, 152, 47, .28), transparent 60%),
    linear-gradient(140deg, var(--c-blue) 0%, var(--c-navy) 80%);
  border-radius: var(--radius);
  padding: clamp(40px, 6vw, 64px);
  text-align: center; color: #fff; box-shadow: var(--shadow-lg);
}
.swift-swel-cta-band h2 { color: #fff; text-wrap: balance; }
.swift-swel-cta-band .swift-swel-section-head { max-width: 900px; }
.swift-swel-cta-band p { color: #D5E5F5; max-width: 640px; margin-inline: auto; }
.swift-swel-cta-band .swift-swel-hero-ctas { justify-content: center; }
/* Full-bleed variant: cta-band applied directly to the <section> (no inset
   box) - same gradient as the whole section background, edge to edge, like
   .swift-swel-section--navy. Horizontal inset comes from .swift-swel-container as usual. */
.swift-swel-section.swift-swel-cta-band { border-radius: 0; box-shadow: none; padding-block: var(--space-section); padding-inline: 0; }
.swift-swel-cta-band .swift-swel-eyebrow { color: #FFC98A; }
.swift-swel-cta-band .swift-swel-eyebrow::before { background: #fff; }

/* ---------- Breadcrumbs ---------- */
.swift-swel-breadcrumbs { font-size: .88rem; color: var(--c-muted); margin-bottom: 18px; }
.swift-swel-breadcrumbs a { color: var(--c-blue); }
.swift-swel-breadcrumbs a:hover { color: var(--c-navy); }
.swift-swel-breadcrumbs .swift-swel-sep { margin-inline: 8px; opacity: .6; }

/* ---------- Page hero (inner pages) ---------- */
.swift-swel-page-hero {
  position: relative; overflow: hidden; color: var(--c-ink);
  background:
    radial-gradient(820px 380px at 90% -20%, rgba(48, 112, 176, .14), transparent 60%),
    radial-gradient(700px 360px at -8% 120%, rgba(240, 152, 47, .10), transparent 55%),
    linear-gradient(160deg, #FFFFFF 0%, #EAF1F9 100%);
  padding-block: clamp(40px, 4.6vw, 64px);
  border-bottom: 1px solid var(--c-line);
}
.swift-swel-page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(14, 58, 102, .06) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, .45), transparent 55%);
  -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .45), transparent 55%);
}
.swift-swel-page-hero .swift-swel-container { position: relative; }
.swift-swel-page-hero h1 { color: var(--c-ink); max-width: 800px; }
.swift-swel-page-hero .swift-swel-lead { color: var(--c-slate); font-size: 1.12rem; max-width: 680px; }
.swift-swel-page-hero .swift-swel-btn--ghost-light { border: 1.5px solid var(--c-navy); color: var(--c-navy); background: transparent; }
.swift-swel-page-hero .swift-swel-btn--ghost-light:hover { background: var(--c-navy); color: #fff; }
.swift-swel-page-hero .swift-swel-hero-trust { color: var(--c-slate); }

/* Solution-page hero with an image slot on the right */
.swift-swel-page-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.swift-swel-page-hero-grid .swift-swel-page-hero-content { min-width: 0; }
.swift-swel-page-hero-grid h1, .swift-swel-page-hero-grid .swift-swel-lead { max-width: none; }
.swift-swel-page-hero-media { min-width: 0; }
.swift-swel-page-hero-media > img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; }

/* Modifier for the Australia page's text-only 2-column hero (lead left, checklist right - no image):
   an even 1fr/1fr split instead of the shared 1.4fr:1fr default (which was tuned for image-right
   heroes). Scoped to min-width:901px, the same breakpoint the shared collapse-to-1-column rule below
   uses, so it only ever applies alongside the 2-column layout and never fights the mobile collapse. */
@media (min-width: 901px) {
  .swift-swel-page-hero-grid.swift-swel-page-hero-grid--even { grid-template-columns: 1fr 1fr; }
}

/* Full-width hero variant: no side media/form, so the heading and lead
   should span the whole container instead of the capped line-length used
   on the standard single-column hero. */
.swift-swel-page-hero--full h1, .swift-swel-page-hero--full .swift-swel-lead { max-width: none; }

/* Opt-in modifier: forces a specific long H1 onto one line at desktop widths (>900px, where the
   hero grid is two-column) by scaling the font down from the sitewide clamp and removing the
   800px max-width cap, so it can use the hero's full container width instead of just the left
   grid column. Page-specific - doesn't touch the sitewide h1/.page-hero-grid rules other heroes
   rely on. Shared by all OHS course pages using this class, each with a different H1 length, so
   the cap has to hold for the longest ones, not just be tuned to one page's text.

   FIXED 2026-08-18: the previous cap (2.3125rem) fit Accident Investigation's title (the longest
   one this was originally tuned against) with 0px of margin - text width measured exactly equal
   to the available container width in testing. That's a knife-edge fit: any small difference in
   font rendering (a fallback font if Poppins fails to load, a different browser's hinting/kerning
   for this bold 800-weight, negative-letter-spacing text) tips it into wrapping, which is what
   Anwar saw live. Reduced the cap to 2.15rem, which measured ~80px of real margin for the same
   title - same tuning method (measure actual rendered text width against the container, not
   estimate), just with slack this time instead of an exact match. */
.swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop { margin-bottom: 22px; }
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop {
    max-width: none;
    font-size: clamp(1.7rem, calc(-0.05rem + 3.1vw), 2.15rem);
  }
}

/* Extra nudge for the Australia page's H1 specifically: at 73 characters it's a little longer than
   Accident Investigation (66 chars, the title --fit-desktop's 2.15rem cap is tuned against) and still
   wrapped to 2 lines at that cap. Measured in-browser against the H1's own available box width
   (1132px at a 1280px viewport, not the outer container's 1180px, which also counts padding this H1
   doesn't have) - needs <=32.43px; 1.95rem/31.2px gives a safe margin. Scoped to its own extra class
   rather than lowering the shared cap, for the same reason documented above it (other pages sharing
   --fit-desktop have longer titles that were never asked to be single-line). */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--au-tight {
    font-size: 1.95rem;
  }
}

/* Same knife-edge problem, different page: motion-path-animations-storyline-360.html's H1 (73
   characters) measured scrollWidth 1132px against a 1132px available box at the shared 2.15rem
   cap - an exact 0px-margin fit, guaranteed to wrap on the first font-rendering difference. This
   page's H1 renders ~1.6% wider than the Australia page's own 73-char title at the same font-size
   (different letters, different metrics) so --au-tight's 1.95rem still isn't quite enough margin -
   measured in-browser: needs <=31.89px to exactly fit; 1.85rem/29.6px gives ~80px of real margin,
   same slack target as --au-tight was tuned to. */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--motion-path-tight {
    font-size: 1.85rem;
  }
}

/* Same knife-edge problem, different page again: how-to-utilize-the-sidebar-and-modern-player-
   controls-in-articulate-storyline-360.html's H1 (77 characters, moved into the full-width row above
   the 2-column hero grid for the first time here) measured natural (unconstrained) scrollWidth 1264px
   against a 1132px available box at the shared 2.15rem cap - 132px over, well past what a small nudge
   fixes. Measured in-browser (temporary inline-block + nowrap on the live element, not a detached
   clone, since a clone loses the `.swift-swel-page-hero` ancestor the selector depends on): 1.8rem/
   28.8px gives a natural width of 1058px, ~74px of real margin - same slack target the other two tight
   modifiers were tuned to. */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--sidebar-tight {
    font-size: 1.8rem;
  }
}

/* Same knife-edge problem, different page again: elearning-company-denmark.html's H1 ("Custom
   eLearning Development and Enterprise L&D Solutions in Denmark", 69 characters - the same
   "Enterprise L&D Solutions in <Country>" template shared with the Japan/Italy/Ireland/Finland
   country pages, which all fit one line at the shared --au-tight 1.95rem) measured natural
   (unconstrained) width 1188px against the 1132px available box at 1.95rem - this string's own
   letter mix renders ~5% wider than the others at the same size, enough to wrap. Measured in-browser:
   1.8rem/28.8px gives a natural width of 1085px, ~47px of real margin - reusing the exact size
   already tuned for the sidebar-controls page above, not a new arbitrary value. */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--denmark-tight {
    font-size: 1.8rem;
  }
}

/* Same story again: elearning-company-malaysia.html's H1 ("Custom eLearning Development and Enterprise
   L&D Solutions in Malaysia", 66 characters - same "Enterprise L&D Solutions in <Country>" template as
   the Japan/Italy/Ireland/Finland/Denmark pages). "Malaysia" is one letter longer than "Denmark" and
   made of a wider letter mix, so it wraps at the shared --au-tight 1.95rem just as Denmark did.
   Reusing Denmark's own 1.8rem/28.8px - measured in-browser at a 1281px viewport, natural (nowrap)
   width 1055px against the ~1132px available box, one line (`.swift-swel-accent` getClientRects()
   returns exactly 1 rect). */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--malaysia-tight {
    font-size: 1.8rem;
  }
}

/* Same story again: elearning-company-germany.html's H1 ("Custom eLearning Development and Enterprise
   L&D Solutions in Germany", 65 chars). "Germany" (7 chars, wide 'm') renders like "Denmark" - wraps
   at the shared --au-tight 1.95rem where the Japan/Italy/Ireland/Finland strings fit. Reusing the
   Denmark/Malaysia 1.8rem/28.8px. Verified in-browser at 1281px: one line. */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--germany-tight {
    font-size: 1.8rem;
  }
}

/* elearning-company-saudi-arabia.html's H1 ("Custom eLearning Development and Enterprise L&D Solutions
   in Saudi Arabia", 70 chars). "Saudi Arabia" (12 chars) is by far the longest country name in the
   family - it needs to go smaller than the 1.8rem the one-word wide names (Denmark, Malaysia,
   Germany) use. Reusing 1.7rem/27.2px, the size already tuned for the rtl-caption tutorial page's own
   tight modifier (not a new arbitrary value). Verified in-browser at 1281px: one line
   (`.swift-swel-accent` getClientRects() returns exactly 1 rect). */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--saudi-arabia-tight {
    font-size: 1.7rem;
  }
}

/* Same knife-edge problem, another page: articulate-storyline-360-how-to-implement-right-to-left-rtl-
   alignment-issue-in-closed-caption-cc.html's H1 was already in its own full-width row (unlike the
   sidebar page above), but its plain `<h1>` never had `--fit-desktop` applied at all - it was still
   governed only by the base `.swift-swel-page-hero h1 { max-width: 800px; }` rule, rendering at the
   default (non-clamped) hero font-size and wrapping to 3 lines inside that 800px box even though its
   own row had the full ~1132px container available. At 82 characters, even the shared 2.15rem
   `--fit-desktop` cap measured a natural width of 1348px against 1132px available (216px over) once
   `--fit-desktop` was added - measured in-browser (same inline-block+nowrap technique): 1.7rem/27.2px
   gives a natural width of 1066px, ~66px of real margin. */
@media (min-width: 901px) {
  .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop.swift-swel-hero-h1--rtl-caption-tight {
    font-size: 1.7rem;
  }
}

/* Reusable image placeholder box (light hero) */
.swift-swel-img-ph {
  aspect-ratio: 4 / 3; width: 100%;
  border: 2px dashed var(--c-line); border-radius: var(--radius);
  background: rgba(255, 255, 255, .55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 24px; color: var(--c-muted);
}
.swift-swel-img-ph svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.swift-swel-img-ph .swift-swel-img-ph-title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--c-navy); }
.swift-swel-img-ph small { font-size: .82rem; color: var(--c-muted); max-width: 240px; }
@media (max-width: 900px) {
  .swift-swel-page-hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer (light panel, so the full-colour logo reads) ---------- */
.swift-swel-site-footer { background: #E9EFF7; color: var(--c-slate); font-size: .95rem; border-top: 1px solid var(--c-line); }
.swift-swel-footer-top { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr; gap: 28px; padding-block: 44px 32px; }
.swift-swel-site-footer h4 { color: var(--c-navy); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.swift-swel-site-footer ul { list-style: none; padding: 0; margin: 0; }
.swift-swel-site-footer li { margin-bottom: 9px; }
.swift-swel-site-footer a { color: var(--c-slate); }
.swift-swel-site-footer a:hover { color: var(--c-blue); }
/* A second heading stacked in the same column (Software Solutions under eLearning Services): the same
   h4, just kept clear of the list above it. */
.swift-swel-site-footer ul + h4 { margin-top: 28px; }
/* A linked heading (Technologies -> /authoring-tools/) looks exactly like the plain ones; only hover shows it's a link. */
.swift-swel-site-footer h4 a { color: inherit; }
.swift-swel-site-footer h4 a:hover { color: var(--c-blue); }
.swift-swel-footer-social { display: flex; gap: 10px; margin-top: 18px; }
/* Social buttons: white circle + navy icon, filling blue on hover (the original look, and what any link
   without .swift-swel-social--brand still gets). The footer's four links carry .swift-swel-social--brand and
   their own colour in --brand (set inline in footer.html): filled with that colour and a white icon at rest,
   inverting to a white circle with the brand-coloured icon on hover. */
.swift-swel-footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--c-navy);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.swift-swel-footer-social a:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(14, 58, 102, .18); }
.swift-swel-footer-social a.swift-swel-social--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.swift-swel-footer-social a.swift-swel-social--brand:hover { background: #fff; border-color: var(--brand); color: var(--brand); }
.swift-swel-footer-social svg { display: block; width: 17px; height: 17px; fill: currentColor; }
.swift-swel-footer-social svg.swift-swel-social-fb { width: 19px; height: 19px; }
.swift-swel-footer-offices li { display: flex; gap: 10px; margin-bottom: 12px; line-height: 1.5; }
.swift-swel-footer-offices .swift-swel-flag { flex-shrink: 0; }
.swift-swel-footer-offices .swift-swel-flag svg {
  width: 18px; height: 18px; margin-top: 2px;
  stroke: var(--c-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.swift-swel-footer-bottom {
  border-top: 1px solid var(--c-line);
  padding-block: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; font-size: .88rem; color: var(--c-slate);
}
@media (max-width: 980px) { .swift-swel-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .swift-swel-footer-top { grid-template-columns: 1fr; } }

/* ---------- Forms (contact page) ---------- */
.swift-swel-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.swift-swel-form-grid .swift-swel-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .swift-swel-form-grid { grid-template-columns: 1fr; } }
.swift-swel-form-grid label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--c-ink); display: block; margin-bottom: 6px; }
.swift-swel-form-grid label .swift-swel-opt { font-weight: 400; color: var(--c-muted); }
/* Scoped under .swift-swel-form-grid (every form field sitewide lives inside one) rather than a
   bare input/textarea/select selector: WoodMart's base.css targets input[type="text"],
   input[type="email"], etc. directly, which is MORE specific than a bare element selector
   (attribute selector beats plain element regardless of cascade order) and was winning on
   padding/height - fields were rendering at a flat 42px with 0 vertical padding instead of
   ours. The class-scoped version matches WoodMart's specificity, and our Custom CSS box
   loading after the theme's own CSS settles the tie in our favor. */
.swift-swel-form-grid input, .swift-swel-form-grid textarea, .swift-swel-form-grid select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--c-ink);
  padding: 13px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.swift-swel-form-grid input:focus, .swift-swel-form-grid textarea:focus, .swift-swel-form-grid select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(48, 112, 176, .15); }

/* Contact Form 7 support: CF7 renders each field inside its own <span class="wpcf7-form-control-wrap">
   and appends its own validation tips / response banner, none of which exist in the plain markup
   the rest of this file targets. Restyle those CF7-specific elements to match rather than leaving
   the plugin's bare-bones defaults. */
.swift-swel-form-grid .wpcf7-form-control-wrap { display: block; width: 100%; }
.swift-swel-form-grid .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: .82rem; color: #C0392B; }
.swift-swel-form-grid input.wpcf7-not-valid, .swift-swel-form-grid textarea.wpcf7-not-valid { border-color: #C0392B; }
.swift-swel-form-grid .wpcf7-response-output {
  grid-column: 1 / -1; margin: 10px 0 0; padding: 12px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .92rem; border: 1px solid var(--c-line);
}
.swift-swel-form-grid form.sent .wpcf7-response-output { border-color: #2E7D4F; background: #EAF7EF; color: #205C39; }
.swift-swel-form-grid form.failed .wpcf7-response-output,
.swift-swel-form-grid form.aborted .wpcf7-response-output,
.swift-swel-form-grid form.spam .wpcf7-response-output { border-color: #C0392B; background: #FCEBEA; color: #8E2A20; }
.swift-swel-form-grid form.invalid .wpcf7-response-output { border-color: var(--c-orange); background: #FDF3E7; color: var(--c-orange-dark); }
/* CF7's submit is a bare <input type="submit"> - it can't hold the <span class="swift-swel-arr">
   hover-slide markup a <button>/<a> .swift-swel-btn normally would, so drop the arrow into the
   value text itself ("Get a Quote \2192") instead of expecting a nested element. */
.swift-swel-form-grid .wpcf7-spinner { margin-left: 10px; }

/* ---------- Reveal animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Kept short and snappy: a slow reveal makes scrolling feel laggy.
     Worst case (6th card) = .28s + .15s delay = .43s, was .95s. */
  .swift-swel-reveal { opacity: 0; transform: translateY(14px); transition: opacity .28s ease-out, transform .28s ease-out; }
  .swift-swel-reveal.swift-swel-is-visible { opacity: 1; transform: none; }
  .swift-swel-reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .28s ease-out, transform .28s ease-out; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > * { opacity: 1; transform: none; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > *:nth-child(2) { transition-delay: .03s; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > *:nth-child(3) { transition-delay: .06s; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > *:nth-child(4) { transition-delay: .09s; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > *:nth-child(5) { transition-delay: .12s; }
  .swift-swel-reveal-stagger.swift-swel-is-visible > *:nth-child(6) { transition-delay: .15s; }
}

/* ---------- Outcome cards (numbered benefit) ---------- */
.swift-swel-outcome {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.swift-swel-outcome::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--c-blue), var(--c-orange));
}
.swift-swel-outcome .swift-swel-metric { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--c-blue); line-height: 1.15; margin-bottom: 8px; white-space: nowrap; }
.swift-swel-outcome h3 { font-size: 1.08rem; margin-bottom: .35em; }
.swift-swel-outcome p { font-size: .95rem; margin: 0; color: var(--c-muted); }

/* ---------- Deliverables checklist (two columns) ---------- */
.swift-swel-deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 34px; }
.swift-swel-deliverables li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; list-style: none; }
.swift-swel-deliverables { padding-left: 0; }
.swift-swel-deliverables .swift-swel-dv {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  background: var(--c-tint-2); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
}
.swift-swel-section--navy .swift-swel-deliverables li { color: #DAE8F6; }
.swift-swel-section--navy .swift-swel-deliverables .swift-swel-dv { background: rgba(255, 255, 255, .12); color: #fff; }
@media (max-width: 640px) { .swift-swel-deliverables { grid-template-columns: 1fr; } }

/* ---------- Standards badges ---------- */
.swift-swel-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.swift-swel-badge {
  font-family: var(--font-head); font-weight: 600; font-size: .85rem;
  color: var(--c-navy); background: #fff; border: 1px solid var(--c-line);
  padding: 8px 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px;
}
.swift-swel-badge::before { content: "✓"; color: var(--c-orange); font-weight: 800; }

/* ---------- Comparison table ---------- */
.swift-swel-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--c-line); background: #fff; }
.swift-swel-cmp-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .95rem; }
.swift-swel-cmp-table th, .swift-swel-cmp-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.swift-swel-cmp-table thead th {
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted);
  background: var(--c-tint); white-space: nowrap;
}
.swift-swel-cmp-table tbody tr:last-child td { border-bottom: 0; }
.swift-swel-cmp-table tbody tr:hover { background: var(--c-tint); }
.swift-swel-cmp-table td:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-ink); }
.swift-swel-cmp-table td:first-child a { color: var(--c-blue); }
.swift-swel-tag {
  display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  padding: 3px 10px; border-radius: 999px; background: var(--c-tint-2); color: var(--c-navy); white-space: nowrap;
}
/* Generic flex-wrap container for a list of .swift-swel-tag pills - used wherever a flat
   audience/topic list (no per-item description) reads better as chips than
   as cards, e.g. the paid OHS course pages' "Who Needs This Training?" list. */
.swift-swel-pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.swift-swel-pill-list .swift-swel-tag { white-space: normal; }
/* Icon + label chip-card, for the same "flat audience/topic list" use case as
   .swift-swel-pill-list above but with more visual weight - an icon per item instead of
   plain text pills. Reuses the .swift-swel-card-icon gradient-tint/blue-orange-alternation
   language so it reads as a sibling of .swift-swel-card rather than a new visual system. */
.swift-swel-audience-grid { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 20px 0 0; padding: 0; }
.swift-swel-audience-card {
  display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 12px 20px 12px 12px; box-shadow: var(--shadow-sm); flex: 1 1 auto;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-swel-audience-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
.swift-swel-audience-card-ic {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); color: var(--c-blue);
}
.swift-swel-audience-card-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-audience-card:nth-child(3n+2) .swift-swel-audience-card-ic { color: var(--c-orange); }
.swift-swel-audience-card span { font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--c-ink); }
/* Long (10+) feature checklist as a 2-col card grid instead of one long flat
   .swift-swel-feature-list column - same icon+heading+paragraph content, but boxed,
   shadowed and alternating blue/orange so a big list reads as organized
   scannable groups rather than a monotonous wall of checkmarks. */
.swift-swel-checklist-grid { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 720px) { .swift-swel-checklist-grid { grid-template-columns: 1fr 1fr; } }
.swift-swel-checklist-card {
  display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-swel-checklist-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
.swift-swel-checklist-ic {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; margin-top: 2px;
  background: var(--c-tint-2); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
}
.swift-swel-checklist-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-checklist-grid .swift-swel-checklist-card:nth-child(3n+2) .swift-swel-checklist-ic { background: #FCE9DD; color: var(--c-orange); }
.swift-swel-checklist-card b { display: block; color: var(--c-ink); font-family: var(--font-head); font-weight: 700; font-size: .98rem; margin-bottom: 3px; }
.swift-swel-checklist-card p { margin: 0; font-size: .92rem; color: var(--c-slate); line-height: 1.45; }
/* Category divider inside a card-grid catalog section (e.g. the free-course
   catalog, grouped by category) - icon + title + course-count pill on a
   bottom rule, reads as a proper section divider instead of plain bold
   text. First one sits right under the .swift-swel-section-head with no extra gap,
   later ones get breathing room from the grid above them. Replaces a
   per-card .swift-swel-tag repeating the same category name on every card, which was
   redundant once the cards are already grouped under this heading. */
/* Category group panel - wraps a .swift-swel-catalog-cat heading + its card grid in a
   bordered/shadowed white panel so the 3 catalog groups read as clearly
   separate zones on the tinted section background, instead of relying on
   just the thin rule under each heading. */
.swift-swel-catalog-group { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px clamp(20px, 4vw, 34px) 34px; }
.swift-swel-catalog-group:not(:first-of-type) { margin-top: 36px; }

.swift-swel-catalog-cat { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--c-line); }
.swift-swel-catalog-cat-ic {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-catalog-cat-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-catalog-cat h3 { flex: 1; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--c-ink); margin: 0; }
.swift-swel-catalog-cat-count { flex-shrink: 0; font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--c-muted); background: #fff; border: 1px solid var(--c-line); padding: 4px 12px; border-radius: 999px; }
.swift-swel-table-note { font-size: .86rem; color: var(--c-muted); margin-top: 12px; text-align: center; }

/* ---------- Timestamp link (jump to a specific moment in a tutorial video) ---------- */
.swift-swel-timestamp-link {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .85rem;
  color: var(--c-blue); white-space: nowrap;
}
.swift-swel-timestamp-link:hover { color: var(--c-blue-dark); }
/* Same class on a <button> instead of an <a> - used when the timestamp jumps into the sitewide
   video modal (data-modal-open/data-modal-src) rather than navigating to YouTube directly. Resets
   native button chrome so it reads identically to the <a> variant. */
button.swift-swel-timestamp-link { appearance: none; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; }

/* ---------- Code block (inline CSS/code snippets inside article content) ---------- */
.swift-swel-code-block {
  background: var(--c-navy); color: #E8F0FA; font-family: 'Courier New', Consolas, monospace;
  font-size: .88rem; line-height: 1.6; padding: 14px 18px; border-radius: var(--radius-sm);
  overflow-x: auto; white-space: pre; margin: 12px 0 0;
}

/* ---------- VS Compare (2-item side-by-side comparison) ---------- */
.swift-swel-vs-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.swift-swel-vs-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.swift-swel-vs-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.swift-swel-vs-card-head .swift-swel-card-icon { margin-bottom: 0; }
.swift-swel-vs-card-head h3 { margin: 0; }
.swift-swel-vs-card > p { font-size: .95rem; color: var(--c-slate); margin-bottom: 0; }
.swift-swel-vs-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.swift-swel-vs-group-label { font-family: var(--font-head); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--c-muted); margin-bottom: 12px; }
.swift-swel-vs-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.swift-swel-vs-divider { display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.swift-swel-vs-divider span {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-navy); color: #fff; font-family: var(--font-head);
  font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 780px) {
  .swift-swel-vs-compare { grid-template-columns: 1fr; }
  .swift-swel-vs-divider { padding: 14px 0; }
}

/* ---------- Testimonial ---------- */
.swift-swel-testimonial {
  max-width: 1000px; margin-inline: auto; text-align: center;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: clamp(24px, 3.2vw, 34px);
  /* Tighter shadow than --shadow-md so the slide needs less padding to
     contain it (see .swift-swel-testi-slide). */
  box-shadow: 0 5px 16px rgba(14, 58, 102, .10);
  position: relative;
}
.swift-swel-testimonial .swift-swel-qm { font-family: var(--font-head); font-size: 3.4rem; font-weight: 800; color: var(--c-orange); line-height: .5; height: 24px; }
/* text-align: inherit, not a hardcoded center - WoodMart's base.css sets a bare
   `blockquote { text-align: start }` sitewide, which otherwise silently breaks the
   center alignment this element would normally inherit from .swift-swel-testimonial
   (and would just as silently break the left alignment .swift-swel-testimonial--static
   sets for its own variant, so `inherit` here has to do double duty for both). */
.swift-swel-testimonial blockquote { margin: 0 0 14px; border: 0; padding: 0; font-family: var(--font-head); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--c-ink); line-height: 1.5; text-align: inherit; }
.swift-swel-testimonial cite { font-style: normal; color: var(--c-muted); font-size: .95rem; }
.swift-swel-testimonial cite b { color: var(--c-ink); font-family: var(--font-head); display: block; }
/* Static testimonials (2-up grid on tool/industry pages, no carousel), left-aligned, fill the grid cell, smaller quote than the hero carousel. */
.swift-swel-testimonial--static { max-width: none; margin-inline: 0; text-align: left; height: 100%; }
.swift-swel-testimonial--static blockquote { font-size: clamp(1.02rem, 1.4vw, 1.12rem); font-weight: 500; }

/* Testimonial carousel */
.swift-swel-testi-carousel { max-width: 1100px; margin-inline: auto; }
.swift-swel-testi-viewport { overflow: hidden; }
.swift-swel-testi-track { display: flex; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
/* Inset padding on each 100%-wide slide keeps the neighbouring card AND its
   shadow fully outside the viewport, so only the active testimonial is visible
   while the active card's own shadow still renders inside. */
/* Horizontal padding keeps the neighbouring card + shadow out of view;
   vertical padding only needs to clear the card's own (now tighter) shadow. */
.swift-swel-testi-slide { flex: 0 0 100%; min-width: 0; padding: 8px 44px 14px; display: flex; }
@media (max-width: 560px) { .swift-swel-testi-slide { padding: 6px 14px 12px; } }
/* Slides are equal height (so the carousel doesn't jump); stretching the card
   to fill and centring its content stops short quotes leaving a dead gap. */
.swift-swel-testi-slide .swift-swel-testimonial {
  width: 100%; max-width: none;
  display: flex; flex-direction: column; justify-content: center;
}
.swift-swel-testi-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.swift-swel-testi-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--c-line);
  background: #fff; color: var(--c-blue); font-size: 1.2rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.swift-swel-testi-btn:hover { background: var(--c-blue); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.swift-swel-testi-btn:focus-visible { outline: 3px solid rgba(48, 112, 176, .4); outline-offset: 2px; }
.swift-swel-testi-dots { display: flex; gap: 9px; }
.swift-swel-testi-dot {
  width: 9px; height: 9px; min-width: 0; min-height: 0; border-radius: 50%; border: 0; padding: 0;
  background: var(--c-line); cursor: pointer; transition: background .18s ease, transform .18s ease;
}
.swift-swel-testi-dot.swift-swel-is-active { background: var(--c-orange); transform: scale(1.3); }

/* Card carousel (data-cards-carousel in main.js): one card in focus, centred, with a slice of the previous
   and next cards peeking in (dimmed) at the sides; prev/next + dots (reuses the testimonial carousel's
   .swift-swel-testi-controls/-btn/-dots/-dot above), keyboard arrows, touch swipe, click-a-neighbour and
   autoplay (main.js: seamless loop, pauses on hover / keyboard focus / touch / hidden tab / off-screen,
   never runs for prefers-reduced-motion). The markup is the plain 3-up card grid (.swift-swel-grid on the
   track); the sliding layout below only applies once main.js adds .swift-swel-is-ready, so without JS (or
   with a stale main.js) the cards simply show as the grid. main.js in turn looks for the
   --swel-cards-carousel flag declared here, so a stale Custom CSS box can't leave it half-working.
   Geometry is all percentages of the viewport, so it needs no resize handling: a slide is --cc-slide wide,
   and main.js sets --cc-pos (which track child is centred) and --cc-drag (live finger offset). */
.swift-swel-cards-carousel { --swel-cards-carousel: 1; }
.swift-swel-cards-carousel-slide { display: flex; min-width: 0; }
.swift-swel-cards-carousel-slide > .swift-swel-card { flex: 1 1 auto; min-width: 0; }
.swift-swel-cards-carousel.swift-swel-is-ready { --cc-slide: 56%; }
/* The mask fades the outer edge of each peeking neighbour so the clipped edge doesn't read as a hard cut. */
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-viewport {
  overflow: hidden; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-track {
  display: flex; gap: 0;
  transform: translateX(calc((100% - var(--cc-slide)) / 2 - var(--cc-pos, 1) * var(--cc-slide) + var(--cc-drag, 0px)));
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
/* Slides are equal height (track is a stretch flex row, the card fills its slide), so the controls never
   jump between slides. The padding leaves room for the card's hover lift + shadow inside the clipped
   viewport (and makes the gap between cards); the negative margin pulls the controls back up under the
   card. Neighbours are scaled down and faded; the focused slide (.swift-swel-is-active) is full size. */
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-slide {
  flex: 0 0 var(--cc-slide); padding: 14px 12px 40px;
  transform: scale(.92); opacity: .6; cursor: pointer;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1), opacity .55s ease;
}
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-slide.swift-swel-is-active { transform: none; opacity: 1; cursor: auto; }
/* A neighbour is a preview, not a target: its own hover lift and link are switched off (a click on it
   is handled by main.js, which brings it to the centre). */
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-slide:not(.swift-swel-is-active) > .swift-swel-card { pointer-events: none; }
.swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-testi-controls { margin-top: -14px; }
/* main.js adds .swift-swel-snapping for the instant clone-to-real swap of the seamless loop. */
.swift-swel-cards-carousel.swift-swel-is-ready.swift-swel-snapping .swift-swel-cards-carousel-track,
.swift-swel-cards-carousel.swift-swel-is-ready.swift-swel-snapping .swift-swel-cards-carousel-slide { transition: none; }
@media (max-width: 980px) { .swift-swel-cards-carousel.swift-swel-is-ready { --cc-slide: 66%; } }
@media (max-width: 640px) {
  /* Full-bleed on phones (the container's 24px side padding is given back) so the neighbours get a
     real peek instead of a sliver. */
  .swift-swel-cards-carousel.swift-swel-is-ready { --cc-slide: 76%; margin-inline: -24px; }
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-slide { padding: 12px 8px 30px; }
  /* Tighter shadows on phones: the slide padding is small there, and a wide blur would show a hard edge where the clipped viewport cuts it. */
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case,
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case:hover { box-shadow: 0 1px 3px rgba(14, 58, 102, .07), 0 5px 12px rgba(14, 58, 102, .08); }
}
@media (prefers-reduced-motion: reduce) {
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-track,
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-cards-carousel-slide { transition: none; }
}

/* Case-study card (used inside the card carousel): icon tile, then eyebrow / title / description, then
   the "Learn more" link as a footer row with a circular arrow, under a blue-to-orange accent bar and a
   soft corner glow (both pure CSS). Stacked by default; side-by-side (icon left) only once the carousel is
   live and the focused card is wide enough (761px+ viewports), so the no-JS 3-up grid fallback keeps the stacked layout. The grid pins the link
   row to the bottom while the card stretches to the tallest slide, so a card with no link (there is no
   case-study page for it) is still the same size as the others. */
.swift-swel-card.swift-swel-card--case {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; row-gap: 18px;
  padding: 36px 26px 24px; border-radius: 18px;
  box-shadow: 0 2px 6px rgba(14, 58, 102, .06), 0 10px 24px rgba(14, 58, 102, .08);
}
.swift-swel-card.swift-swel-card--case:hover { box-shadow: 0 4px 10px rgba(14, 58, 102, .08), 0 16px 32px rgba(14, 58, 102, .13); }
.swift-swel-card--case::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--c-blue) 0, var(--c-blue) 55%, var(--c-orange) 100%);
}
.swift-swel-card--case::after {
  content: ""; position: absolute; top: -46px; right: -46px; width: 130px; height: 130px; border-radius: 50%;
  background: rgba(48, 112, 176, .07);
  box-shadow: 0 0 0 26px rgba(48, 112, 176, .045), 0 0 0 54px rgba(48, 112, 176, .028);
  z-index: -1; pointer-events: none; transition: transform .5s ease;
}
.swift-swel-card--case:hover::after { transform: scale(1.12); }
.swift-swel-card--case .swift-swel-case-icon {
  width: 60px; height: 60px; margin: 0; border-radius: 18px; color: var(--c-blue);
  background: linear-gradient(135deg, #fff, var(--c-tint-2));
  box-shadow: inset 0 0 0 1px var(--c-line), 0 8px 18px rgba(48, 112, 176, .14);
}
.swift-swel-card--case .swift-swel-case-icon svg { width: 29px; height: 29px; }
.swift-swel-card--case .swift-swel-case-body { min-width: 0; }
.swift-swel-card--case .swift-swel-eyebrow { font-size: .72rem; margin-bottom: 8px; }
.swift-swel-card--case .swift-swel-eyebrow::before { width: 22px; }
.swift-swel-card--case h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.25; margin: 0 0 .45em; }
.swift-swel-card--case p { font-size: 1.02rem; line-height: 1.65; color: var(--c-slate); margin: 0; }
.swift-swel-card.swift-swel-card--case .swift-swel-card-link {
  margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--c-line);
  justify-content: space-between; font-size: 1rem; color: var(--c-blue);
}
.swift-swel-card.swift-swel-card--case .swift-swel-card-link::after {
  width: 36px; height: 36px; border-radius: 50%; background: var(--c-tint-2); color: var(--c-blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.swift-swel-card.swift-swel-card--case:hover .swift-swel-card-link::after { background: var(--c-blue); color: #fff; }
@media (min-width: 761px) {
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case {
    grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 26px; row-gap: 0; padding: 38px 34px 26px;
  }
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case .swift-swel-case-icon { grid-row: 1; grid-column: 1; width: 64px; height: 64px; }
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case .swift-swel-case-icon svg { width: 30px; height: 30px; }
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card--case .swift-swel-case-body { grid-row: 1; grid-column: 2; }
  .swift-swel-cards-carousel.swift-swel-is-ready .swift-swel-card.swift-swel-card--case .swift-swel-card-link { grid-row: 2; grid-column: 1 / -1; margin-top: 26px; }
}

/* Image showcase "peek" carousel: the active image renders large and fully opaque, centred, with
   neighbouring images visibly peeking in at reduced size/opacity on both sides - auto-enlarging as an
   image becomes centred and shrinking again as it moves to the side. Same mechanics as a testimonial
   peek carousel would use (viewport padding does the centring, each slide is narrower than 100% with
   a scale/opacity swap on .swift-is-active), built as its own component since the content is images,
   not quote cards. Reuses .swift-swel-testi-btn/-dots/-dot for nav controls so it matches the
   sitewide carousel look without duplicating that CSS. */
.swift-swel-showcase-carousel { max-width: 900px; margin-inline: auto; text-align: center; }
.swift-swel-showcase-viewport { overflow: hidden; }
.swift-swel-showcase-track { display: flex; align-items: center; transition: transform .45s cubic-bezier(.4, 0, .2, 1); }
.swift-swel-showcase-slide {
  flex: 0 0 58%; min-width: 0; padding: 10px;
  transform: scale(.65); opacity: .4;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
}
.swift-swel-showcase-slide.swift-swel-is-active { transform: scale(1.1); opacity: 1; }
.swift-swel-showcase-slide img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block;
}
.swift-swel-showcase-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) {
  .swift-swel-showcase-slide { flex: 0 0 84%; }
}

/* ---------- Case studies ---------- */
.swift-swel-case-list { display: grid; gap: clamp(26px, 4vw, 44px); }
.swift-swel-case-feature {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 52px);
  align-items: center; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.swift-swel-case-feature:hover { box-shadow: var(--shadow-md); border-color: #BFD6EC; }
/* Alternate which side the results panel sits on for visual rhythm. */
.swift-swel-case-feature:nth-child(even) .swift-swel-case-visual { order: -1; }

.swift-swel-case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.swift-swel-case-tag {
  font-family: var(--font-head); font-weight: 600; font-size: .75rem;
  letter-spacing: .01em; padding: 4px 11px; border-radius: 999px;
  background: var(--c-tint-2); color: var(--c-blue-dark);
}
.swift-swel-case-tag--sector { background: #FCEBD6; color: var(--c-orange-dark); }

.swift-swel-case-body h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .7em; line-height: 1.25; }
.swift-swel-case-cr { display: grid; gap: 13px; margin-bottom: 22px; }
.swift-swel-case-cr > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: baseline; }
.swift-swel-case-cr .swift-swel-cr-label {
  font-family: var(--font-head); font-weight: 700; font-size: .7rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-blue);
}
.swift-swel-case-cr p { margin: 0; font-size: .98rem; }
.swift-swel-case-cr p b { color: var(--c-ink); }

.swift-swel-case-quote {
  border-left: 3px solid var(--c-orange); padding: 3px 0 3px 16px;
  margin: 0 0 22px; font-style: italic; color: var(--c-ink); font-size: 1.02rem;
}
.swift-swel-case-quote cite { display: block; margin-top: 9px; font-style: normal; font-size: .85rem; color: var(--c-muted); }
.swift-swel-case-quote cite b { color: var(--c-ink); font-weight: 700; font-style: normal; }

.swift-swel-case-visual {
  align-self: stretch; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  padding: clamp(24px, 3vw, 36px); color: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.swift-swel-case-visual .swift-swel-cv-eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .09em; text-transform: uppercase; color: #8FB8E0;
}
.swift-swel-case-metric .swift-swel-cm-num {
  font-family: var(--font-head); font-weight: 800; line-height: 1.02;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem); color: #fff;
}
.swift-swel-case-metric .swift-swel-cm-num em { color: var(--c-orange); font-style: normal; }
.swift-swel-case-metric .swift-swel-cm-lbl { color: #C9DCF0; font-size: .92rem; margin-top: 6px; }
.swift-swel-case-metric + .swift-swel-case-metric { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 18px; }

/* Metric highlight line inside a compact case card */
.swift-swel-card-metric { font-family: var(--font-head); font-weight: 800; color: var(--c-blue); font-size: 1.02rem; margin: .1em 0 .7em; }
.swift-swel-card-metric em { color: var(--c-orange); font-style: normal; }

/* Read-more / service link row under a featured case */
.swift-swel-case-links { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }

/* Key takeaways summary, the primary skim/AI-retrievable chunk near the top */
.swift-swel-key-takeaways { background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-orange); border-radius: var(--radius); padding: clamp(22px, 3vw, 30px); box-shadow: var(--shadow-sm); }
.swift-swel-key-takeaways h2 { font-size: 1.15rem; margin-bottom: 14px; }
.swift-swel-key-takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.swift-swel-key-takeaways li { position: relative; padding-left: 24px; font-size: 1rem; color: var(--c-slate); }
.swift-swel-key-takeaways li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--c-orange); font-weight: 800; font-family: var(--font-head); }
.swift-swel-key-takeaways li b { color: var(--c-ink); }

/* Results data table, machine-readable metrics for AI search / rich results */
.swift-swel-results-wrap { overflow-x: auto; }
.swift-swel-results-table { width: 100%; border-collapse: collapse; font-size: .98rem; table-layout: fixed; }
.swift-swel-results-table th, .swift-swel-results-table td { overflow-wrap: break-word; }
.swift-swel-results-table caption { text-align: left; font-family: var(--font-head); font-weight: 700; color: var(--c-blue); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.swift-swel-results-table th, .swift-swel-results-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.swift-swel-results-table thead th { font-family: var(--font-head); font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; color: var(--c-muted); font-weight: 700; }
.swift-swel-results-table tbody th { font-weight: 700; color: var(--c-ink); font-family: var(--font-body); }
.swift-swel-results-table tbody tr:last-child td, .swift-swel-results-table tbody tr:last-child th { border-bottom: 0; }
.swift-swel-results-table .swift-swel-rt-after { color: var(--c-blue); font-weight: 700; }

/* Article byline (author + dates). Every case-study page actually uses the light
   .swift-swel-page-hero, not a navy variant, so this needs readable-on-light colors, not the
   near-invisible light-blue-on-light-gradient this had before. */
.swift-swel-case-byline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .88rem; margin: 14px 0 2px; color: var(--c-slate); }
.swift-swel-case-byline a { color: var(--c-blue); text-decoration: underline; }
.swift-swel-case-byline .swift-swel-sep { opacity: .5; }

/* Photo + attribution on a case-study pull quote */
.swift-swel-cq-person { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.swift-swel-cq-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--c-tint-2); border: 1px dashed #AEBECF; display: flex; align-items: center; justify-content: center; color: #8B9BAB; }
.swift-swel-cq-avatar svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-cq-person cite { display: block; margin: 0; font-style: normal; font-size: .9rem; color: var(--c-muted); }
.swift-swel-cq-person cite b { display: block; color: var(--c-ink); font-weight: 700; }

/* "At a glance" facts box on a case-study write-up */
.swift-swel-case-facts { background: var(--c-tint); border: 1px solid var(--c-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); }
.swift-swel-case-facts h3 { font-size: 1.05rem; margin-bottom: 16px; }
.swift-swel-case-facts dl { display: grid; gap: 15px; margin: 0; }
.swift-swel-case-facts dt { font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 3px; }
.swift-swel-case-facts dd { margin: 0; font-size: .98rem; color: var(--c-ink); }

@media (max-width: 860px) {
  .swift-swel-case-feature { grid-template-columns: 1fr; }
  .swift-swel-case-feature:nth-child(even) .swift-swel-case-visual { order: 0; }
}
@media (max-width: 400px) {
  .swift-swel-case-cr > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   Free-course landing page components
   Built for /free-anti-bribery-and-corruption-online-training-course/ but
   generic enough to reuse on future free-course lead-magnet pages. Extends
   the existing token system (colors, radius, shadow, fonts) - no new
   typefaces or off-brand colors introduced.
   ============================================================ */

/* Small "free" badge above an H1 */
.swift-swel-badge-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: var(--c-navy); background: linear-gradient(135deg, #FFF4E5, #FFE7C2);
  border: 1px solid #F2D6A0; border-radius: 999px; padding: 7px 16px 7px 8px;
  margin-bottom: 20px;
}
.swift-swel-badge-pill .swift-swel-badge-dot {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800;
}

/* Horizontal row of quick-fact pills under a hero lead paragraph */
.swift-swel-stat-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.swift-swel-stat-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 7px 16px 7px 7px; box-shadow: var(--shadow-sm);
  font-family: var(--font-head); font-weight: 600; font-size: .87rem; color: var(--c-ink);
}
.swift-swel-stat-chip .swift-swel-chip-ic {
  flex-shrink: 0; width: 27px; height: 27px; border-radius: 50%;
  background: var(--c-tint-2); color: var(--c-blue);
  display: flex; align-items: center; justify-content: center;
}
.swift-swel-stat-chip .swift-swel-chip-ic svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-stat-chip:nth-child(3n+2) .swift-swel-chip-ic { color: var(--c-orange); }

/* Hero-side "enroll" card - light-theme sibling of .swift-swel-hero-form, for pages
   whose primary action is "start now" rather than "request a quote" */
.swift-swel-enroll-card {
  background: #fff; border: 1.5px solid var(--c-navy); border-radius: var(--radius);
  box-shadow: 0 24px 54px rgba(14, 58, 102, .16); padding: 30px 28px; position: relative; overflow: hidden;
}
.swift-swel-enroll-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--c-orange), var(--c-blue));
}
.swift-swel-enroll-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.swift-swel-enroll-card-ic {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(240, 152, 47, .14); color: var(--c-orange);
}
.swift-swel-enroll-card-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-enroll-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.25; }
.swift-swel-enroll-card .swift-swel-enroll-sub { color: var(--c-muted); font-size: .9rem; margin: 3px 0 0; }
.swift-swel-enroll-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.swift-swel-enroll-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--c-slate); }
.swift-swel-enroll-list li::before {
  content: "\2713"; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--c-tint-2); color: var(--c-blue); font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.swift-swel-enroll-card .swift-swel-btn { width: 100%; justify-content: center; }
.swift-swel-enroll-foot { text-align: center; font-size: .82rem; color: var(--c-muted); margin: 12px 0 0; }

/* Course Features "feature list" - a single divided panel (not a grid of
   repeated cards) so 7 facts read as one cohesive fact-sheet. Kept to a
   grey/black/blue/white palette (no orange or teal accents) per Anwar's
   feedback: black heading, grey value line, a single blue icon accent. */
.swift-swel-feature-panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.swift-swel-feature-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .swift-swel-feature-list { grid-template-columns: 1fr 1fr; } }
.swift-swel-feature-row { display: flex; gap: 16px; align-items: flex-start; padding: 22px 28px; transition: background .2s ease; }
.swift-swel-feature-row:hover { background: var(--c-tint); }
.swift-swel-feature-row:not(:last-child) { border-bottom: 1px solid var(--c-line); }
@media (min-width: 720px) {
  /* Tighten the two inner-facing sides so the divider sits in a slim
     gutter instead of a wide dead gap - the two 1fr columns are equal
     width, but content is left-aligned and often shorter than the column,
     so a big shared padding on both sides doubled the visible gap. */
  .swift-swel-feature-row:nth-child(2n+1) { padding-right: 16px; }
  .swift-swel-feature-row:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--c-line); }
  /* An ODD total item count leaves the last row alone in column 1 with a
     dangling empty column 2 - span it full width and centre the icon+text
     group instead, so the row's own top border runs edge-to-edge like every
     row above it. Only the group is centred - the text inside it stays
     left-aligned, matching every other row. :nth-child(odd) gates this to
     only fire when :last-child is ALSO at an odd position (i.e. the count
     really is odd) - an even count's last row pairs normally in column 2
     and must not be pulled out and centred (bug: this used to apply
     unconditionally, breaking the 8-item OHS course pages' last row). */
  .swift-swel-feature-row:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
}
.swift-swel-feature-row-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-feature-row-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-feature-row-heading { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--c-ink); margin-bottom: 4px; }
.swift-swel-feature-row-value { font-size: .92rem; color: var(--c-slate); line-height: 1.4; }

/* Photo panel - a real image (course preview thumbnail) with a bottom
   play-bar overlay, wrapped in .swift-swel-risk-panel-btn to open the course modal.
   aspect-ratio 4:3 matches the source photo, object-fit:cover crops any
   other aspect ratio dropped in later without distorting it. */
.swift-swel-risk-panel {
  aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius); position: relative; overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--c-navy);
}
.swift-swel-risk-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Benefit card - .swift-swel-card sibling with a top gradient accent bar, used for
   "why choose us" style bullet groups that want a bit more visual weight */
.swift-swel-benefit-grid { display: grid; gap: 20px; }
.swift-swel-benefit-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 26px 24px 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.swift-swel-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.swift-swel-benefit-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--c-blue), var(--c-orange)); }
.swift-swel-benefit-ic {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-benefit-ic svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-benefit-card h3 { font-size: 1.08rem; margin-bottom: .4em; }
.swift-swel-benefit-card p { font-size: .94rem; margin: 0; color: var(--c-slate); }

/* Learning Objectives - bordered cards with an icon plus a large watermark
   numeral layered behind it, more visual weight than a flush list */
.swift-swel-objective-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.swift-swel-objective-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 980px) { .swift-swel-objective-grid--3col { grid-template-columns: 1fr 1fr; } }
.swift-swel-objective-card {
  position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-swel-objective-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
.swift-swel-objective-card .swift-swel-objective-num {
  position: absolute; top: 2px; right: 18px; z-index: 0; pointer-events: none;
  font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--c-tint-2);
}
.swift-swel-objective-card-ic {
  position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-objective-card-ic svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-objective-card:nth-child(3n+2) .swift-swel-objective-card-ic { color: var(--c-orange); }
.swift-swel-objective-card h3 { position: relative; z-index: 1; font-size: 1.05rem; margin-bottom: .35em; }
.swift-swel-objective-card p { position: relative; z-index: 1; font-size: .93rem; margin: 0; color: var(--c-slate); }
@media (max-width: 760px) { .swift-swel-objective-grid { grid-template-columns: 1fr; } }
/* An ODD total card count leaves the last card alone in column 1 with a
   dangling empty column 2 - span it full width and centre the card itself
   (not stretch it) at one column's width, matching every other card's size.
   :nth-child(odd) gates this to only fire when :last-child is ALSO at an
   odd position (i.e. the count really is odd), same technique as
   .swift-swel-feature-row above. */
@media (min-width: 761px) {
  .swift-swel-objective-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}

/* Curriculum accordion - Course Outline as collapsible syllabus items
   instead of the always-open .swift-swel-process timeline (which elsewhere means
   "our internal build workflow", a different concept from "what you'll
   learn"). Reuses the FAQ's +/rotate toggle language for a familiar
   interaction, with a numbered badge instead of a bullet. */
.swift-swel-curriculum { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; padding: 0; list-style: none; }
.swift-swel-curriculum-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); overflow: hidden; }
.swift-swel-curriculum-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: 16px 22px;
}
.swift-swel-curriculum-item summary::-webkit-details-marker { display: none; }
.swift-swel-curriculum-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: #fff;
  background: linear-gradient(140deg, var(--c-navy), var(--c-blue));
}
.swift-swel-curriculum-item .swift-swel-curriculum-title { flex: 1; font-family: var(--font-head); font-weight: 600; color: var(--c-ink); font-size: 1rem; }
.swift-swel-curriculum-item .swift-swel-curriculum-toggle { flex-shrink: 0; color: var(--c-blue); font-size: 1.3rem; line-height: 1; transition: transform .2s ease; }
.swift-swel-curriculum-item[open] summary .swift-swel-curriculum-toggle { transform: rotate(45deg); }
.swift-swel-curriculum-item[open] summary .swift-swel-curriculum-title { color: var(--c-blue); }
.swift-swel-curriculum-body { margin: 0; padding: 0 22px 20px 72px; color: var(--c-slate); font-size: .95rem; }
/* Final, non-expandable row (e.g. "Final Assessment" with no description) */
.swift-swel-curriculum-item--final { display: flex; align-items: center; gap: 16px; padding: 16px 22px; }
.swift-swel-curriculum-item--final .swift-swel-curriculum-num { background: linear-gradient(140deg, var(--c-orange-dark), var(--c-orange)); }
.swift-swel-curriculum-item--final .swift-swel-curriculum-title { font-family: var(--font-head); font-weight: 600; color: var(--c-ink); font-size: 1rem; }

/* Comparison table - a real <table> matching the source doc's row/column
   layout (Feature / Capability in the left header column, one column per
   tier), instead of the earlier pricing-card pattern. Wrapped in a
   horizontal-scroll container since 4 columns of tabular data don't
   reflow to mobile the way cards do. */
.swift-swel-compare-table-wrap { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.swift-swel-compare-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.swift-swel-compare-table th, .swift-swel-compare-table td { padding: 16px 22px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--c-line); font-size: .92rem; color: var(--c-ink); }
.swift-swel-compare-table thead th {
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; padding-block: 22px;
  background: var(--c-blue-dark); color: #fff; border-bottom: none;
}
.swift-swel-compare-table thead th:first-child { text-align: left; border-top-left-radius: var(--radius); }
.swift-swel-compare-table thead th:last-child { border-top-right-radius: var(--radius); }
.swift-swel-compare-table tbody th { text-align: left; font-family: var(--font-head); font-weight: 500; color: var(--c-ink); font-size: .92rem; }
.swift-swel-compare-table tbody tr:hover { background: var(--c-tint); }
.swift-swel-compare-table tfoot td { border-bottom: none; padding-block: 22px 26px; }
.swift-swel-compare-table .swift-swel-ct-price { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.swift-swel-compare-table .swift-swel-ct-yes {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: .7rem; font-weight: 800;
  background: var(--c-tint-2); color: var(--c-blue);
}
/* "N/A" is 3 characters, not a single glyph like the checkmark - forcing it into the same 22px
   circle wrapped it onto two lines ("N/" / "A"). Plain nowrap text instead of a badge. */
.swift-swel-compare-table .swift-swel-ct-no {
  display: inline-block; font-size: .85rem; font-weight: 600; color: var(--c-muted); white-space: nowrap;
}
.swift-swel-compare-table tfoot .swift-swel-btn { white-space: normal; }

/* Catalog promo panels - a 2-up cross-sell to the off-the-shelf course
   library, distinct from .swift-swel-benefit-card (which lists reasons to choose THIS
   course) since these two panels are each pointing the visitor elsewhere. */
.swift-swel-catalog-promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.swift-swel-catalog-promo {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-sm);
}
.swift-swel-catalog-promo-ic {
  width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-catalog-promo-ic svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-catalog-promo .swift-swel-eyebrow { margin-bottom: 10px; font-weight: 700; }
.swift-swel-catalog-promo h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--c-ink); margin: 0 0 10px; }
.swift-swel-catalog-promo p { color: var(--c-slate); font-size: .95rem; margin: 0 0 12px; }
.swift-swel-catalog-promo-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 20px; padding: 0; }
.swift-swel-catalog-promo .swift-swel-btn { margin-top: auto; align-self: center; }
@media (max-width: 760px) { .swift-swel-catalog-promo-grid { grid-template-columns: 1fr; } }

/* Promo banner - full-bleed single cross-sell row directly on a coloured
   section (no white card), for when there's only ONE thing to promote and
   a narrow centred .swift-swel-catalog-promo card would leave awkward empty space on
   either side. Icon + copy + CTA in one horizontal band that fills the
   section width. */
.swift-swel-promo-banner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 36px 40px; border-radius: var(--radius); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.swift-swel-promo-banner-ic {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: #fff;
}
.swift-swel-promo-banner-ic svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-promo-banner-body { flex: 1 1 380px; min-width: 0; }
.swift-swel-promo-banner-body .swift-swel-eyebrow { color: #C9DCF0; margin-bottom: 8px; }
.swift-swel-promo-banner-body h3 { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; margin: 0 0 10px; }
.swift-swel-promo-banner-body p { color: #C9DCF0; font-size: .95rem; margin: 0 0 8px; }
.swift-swel-promo-banner-body p:last-child { margin-bottom: 0; }
.swift-swel-promo-banner-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .swift-swel-promo-banner { flex-direction: column; align-items: flex-start; padding: 28px; }
  .swift-swel-promo-banner-btn { width: 100%; justify-content: center; }
}

/* Vertical promo-banner variant - two of these sit side by side in a 2-column grid
   (motion-path-animations-storyline-360.html's "Off-the-Shelf Workforce Modules"), each only
   ~570px wide, so the icon-left/text-right/button-right single-row layout the full-width banner
   uses doesn't have room to read well. Forces the same visual language (translucent navy panel,
   icon tile, eyebrow/h3/p, orange primary button) into a top-down card at any viewport width,
   rather than only collapsing to a column past the 760px breakpoint above. */
.swift-swel-promo-banner--card { flex-direction: column; align-items: flex-start; }
.swift-swel-promo-banner--card .swift-swel-promo-banner-body { width: 100%; }
/* .swift-swel-hero-points defaults to --c-ink text (tuned for white backgrounds elsewhere on the
   site) - unreadable low-contrast dark-on-navy inside a promo-banner card. White matches the
   heading's own weight/contrast; the tick circle's light background + orange check already read
   fine against navy as-is. */
.swift-swel-promo-banner-body .swift-swel-hero-points li { color: #fff; }

/* Cross-sell list - bullet-with-icon list upgraded to individual bordered/
   shadowed rows with a hover-lift, so a "need something else?" section
   doesn't look identical to the plain sitewide .swift-swel-contact-points list used
   in the hero form / global contact section right next to it. */
.swift-swel-crosssell-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.swift-swel-crosssell-list li {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.swift-swel-crosssell-list li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.swift-swel-crosssell-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-tint-2); color: var(--c-blue);
}
.swift-swel-crosssell-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-crosssell-list h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; margin: 0 0 4px; }
.swift-swel-crosssell-list h3 a { color: var(--c-ink); text-decoration: none; }
.swift-swel-crosssell-list h3 a:hover { color: var(--c-blue); }
.swift-swel-crosssell-list p { margin: 0; font-size: .92rem; color: var(--c-slate); }

/* Persona cards - circular avatar variant of .swift-swel-card, for "who this is for"
   audience call-outs */
.swift-swel-persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.swift-swel-persona-card {
  text-align: center; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 28px 22px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.swift-swel-persona-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #BFD6EC; }
.swift-swel-persona-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); color: var(--c-blue);
  box-shadow: var(--shadow-sm);
}
.swift-swel-persona-avatar svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-persona-card:nth-child(3n+2) .swift-swel-persona-avatar { color: var(--c-orange); }
.swift-swel-persona-card h3 { font-size: 1rem; margin-bottom: .4em; }
.swift-swel-persona-card p { font-size: .88rem; color: var(--c-slate); margin: 0; }
@media (max-width: 900px) { .swift-swel-persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .swift-swel-persona-grid { grid-template-columns: 1fr; } }

/* Technical spec panel - dark, dot-textured panel (echoes .swift-swel-risk-panel and
   .swift-swel-cta-band) so the "developer/technical" section reads as a deliberately
   different register from the light content sections around it. LMS
   standards render as discrete pill badges rather than a comma sentence. */
.swift-swel-tech-panel {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);
  box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 40px);
}
.swift-swel-tech-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.swift-swel-tech-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.swift-swel-tech-grid > div { position: relative; }
.swift-swel-tech-grid > div:not(:first-child) { padding-left: 30px; }
.swift-swel-tech-grid > div:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .16);
}
.swift-swel-tech-col-ic {
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #FFC98A;
}
.swift-swel-tech-col-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-tech-col-label {
  font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: #FFC98A; margin-bottom: 14px;
}
.swift-swel-tech-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.swift-swel-tech-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  padding: 6px 13px 6px 11px; border-radius: 999px;
}
.swift-swel-tech-badge::before { content: "\2713"; color: var(--c-orange); font-weight: 800; font-size: .72rem; }
.swift-swel-tech-value-text { color: #C9DCF0; font-size: .92rem; line-height: 1.65; margin: 0; }
@media (max-width: 760px) {
  .swift-swel-tech-grid { grid-template-columns: 1fr; gap: 26px; }
  .swift-swel-tech-grid > div:not(:first-child) { padding-left: 0; }
  .swift-swel-tech-grid > div:not(:first-child)::before { display: none; }
}

/* Clickable variant of .swift-swel-risk-panel: turns the decorative panel into a
   "video thumbnail" style trigger for the course preview modal - a
   centred play button with the caption stacked underneath, both sitting
   on a translucent black backdrop so they stay legible over any part of
   the photo. No hover lift on this instance (Anwar's call - static, just
   a colour/shadow change on the button itself). */
.swift-swel-risk-panel-btn { all: unset; display: block; width: 100%; cursor: pointer; border-radius: var(--radius); }
.swift-swel-risk-panel-btn:focus-visible .swift-swel-risk-panel { outline: 3px solid var(--c-orange); outline-offset: 3px; }
.swift-swel-risk-panel-play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 30px 40px;
  background: rgba(10, 20, 35, .48);
}
.swift-swel-risk-play-ic {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
  background: var(--c-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  transition: transform .2s ease, background .2s ease;
}
.swift-swel-risk-play-ic svg { width: 30px; height: 30px; margin-left: 4px; }
.swift-swel-risk-panel-btn:hover .swift-swel-risk-play-ic { transform: scale(1.08); background: var(--c-orange-dark); }
.swift-swel-risk-panel-play-label {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #fff; text-align: center;
  text-wrap: balance;
}
/* Opt-in modifier: a subtle blue-tinted pill (near-opaque, so the black text stays readable) behind
   the label for extra contrast against busy thumbnails - not applied to every .risk-panel-play-label
   sitewide, add the modifier class per use. */
.swift-swel-risk-panel-play-label--highlight {
  background: rgba(231, 240, 249, .95);
  color: var(--c-ink);
  border: 1px solid rgba(48, 112, 176, .35);
  padding: 9px 22px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

/* Course preview modal (lightbox) - loads the client's real hosted course
   in an iframe on demand, never eagerly. Generic: any [data-modal-open]
   button can target any [data-modal] element by id, so this is reusable
   for future "preview the course" CTAs elsewhere. */
.swift-swel-course-modal {
  position: fixed; inset: 0; top: var(--header-h); z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.swift-swel-course-modal.swift-swel-is-open { display: flex; }
.swift-swel-course-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 25, 45, .75); }
.swift-swel-course-modal-panel {
  position: relative; z-index: 1; width: 90%; height: 90%; max-width: none;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: none; overflow: hidden;
}
.swift-swel-course-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--c-line); flex-shrink: 0;
}
.swift-swel-course-modal-head h3 { margin: 0; font-size: 1.02rem; }
.swift-swel-course-modal-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--c-line);
  background: #fff; color: var(--c-muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease;
}
.swift-swel-course-modal-close:hover { background: var(--c-tint); color: var(--c-ink); }
.swift-swel-course-modal-body { position: relative; flex: 1; background: var(--c-ink); min-height: 320px; }
.swift-swel-course-modal-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.swift-swel-course-modal-foot {
  padding: 12px 20px; border-top: 1px solid var(--c-line); text-align: right; flex-shrink: 0;
}
.swift-swel-course-modal-foot a { font-family: var(--font-head); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .swift-swel-course-modal { padding: 0; }
  .swift-swel-course-modal-panel { max-height: 100vh; height: 100%; border-radius: 0; }
}

/* ---------- Long-form article / guide layout ----------
   For pillar/informational content pages (distinct from the standard
   service-page template of alternating tint/white full-width sections):
   a narrow reading column, a sticky table-of-contents + CTA sidebar, and a
   continuous canvas with divider rules between topics instead of colour
   bands. Reuses .swift-swel-page-hero--full as the hero base (just adds a badge + meta
   row) so it still reads as the same site, not a bolted-on microsite. */
.swift-swel-article-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--c-tint-2); color: var(--c-blue);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 16px;
}
.swift-swel-article-badge svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-article-meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 20px; }
.swift-swel-article-meta-item { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--c-slate); }
.swift-swel-article-meta-item svg { width: 16px; height: 16px; stroke: var(--c-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.swift-swel-article-shell { padding-block: clamp(44px, 6vw, 68px); }
/* align-items stays default (stretch) so .swift-swel-article-aside's grid cell spans the
   full height of the (much taller) .swift-swel-article-main column - otherwise the cell
   shrinks to fit just the TOC+CTA box and the sticky sidebar runs out of room
   to stick partway down the page instead of tracking the whole article. */
.swift-swel-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 64px); }
.swift-swel-article-main { min-width: 0; }
.swift-swel-article-block {
  padding-top: clamp(36px, 5vw, 52px); margin-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--header-h) + 20px);
}
.swift-swel-article-block:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.swift-swel-article-block h2 { margin-bottom: 14px; }
.swift-swel-article-block .swift-swel-logo-group-label { margin-top: 30px; }
/* Sub-group headings that sit directly in a block (e.g. VR / AR / 360 under one h2) - the
   block only spaces its h2, so a bare h3 after a list otherwise reads cramped. Scoped to
   direct children so card/proc/faq h3s (nested deeper) are untouched. */
.swift-swel-article-block > h3 { margin-top: 32px; margin-bottom: 10px; }
.swift-swel-article-block > .swift-swel-section-head + h3 { margin-top: 8px; }

@media (min-width: 981px) {
  .swift-swel-article-aside-sticky { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
}
.swift-swel-article-toc {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 20px 22px; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto;
}
.swift-swel-article-toc-title { font-family: var(--font-head); font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 12px; }
.swift-swel-article-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.swift-swel-article-toc li { counter-increment: toc; }
.swift-swel-article-toc a {
  display: flex; gap: 9px; align-items: baseline; padding: 7px 8px; border-radius: 8px;
  font-size: .87rem; line-height: 1.35; color: var(--c-slate); font-weight: 600;
  border-left: 2px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.swift-swel-article-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-head); font-weight: 700; color: var(--c-line); font-size: .78rem; flex-shrink: 0; }
.swift-swel-article-toc a:hover { background: var(--c-tint); color: var(--c-ink); }
.swift-swel-article-toc a.swift-swel-is-active { color: var(--c-blue); border-left-color: var(--c-blue); background: var(--c-tint-2); }
.swift-swel-article-toc a.swift-swel-is-active::before { color: var(--c-blue); }

.swift-swel-article-cta-box { background: linear-gradient(155deg, var(--c-navy), #124a80); color: #fff; border-radius: var(--radius); padding: 24px 22px; box-shadow: var(--shadow-md); }
.swift-swel-article-cta-box h3 { color: #fff; font-size: 1.05rem; margin: 0 0 8px; }
.swift-swel-article-cta-box p { color: rgba(255, 255, 255, .82); font-size: .9rem; margin: 0 0 16px; line-height: 1.5; }
.swift-swel-article-cta-box .swift-swel-btn { width: 100%; justify-content: center; }
.swift-swel-article-cta-box .swift-swel-article-cta-link { display: block; text-align: center; margin-top: 12px; font-size: .85rem; font-weight: 700; color: #fff; }
.swift-swel-article-cta-box .swift-swel-article-cta-link:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .swift-swel-article-layout { grid-template-columns: 1fr; }
  .swift-swel-article-aside { order: -1; margin-bottom: 8px; }
  .swift-swel-article-toc { max-height: 280px; }
}

/* .swift-swel-grid--fit2's native 380px flex-basis is sized for full-width
   sections; the narrower .article-main reading column (~768px, squeezed
   further by the sticky sidebar) isn't wide enough to fit 2 across, so pairs
   silently stack to 1 column. Force an even 2-up split scoped to the article
   context only - the base class stays untouched for other pages. */
.swift-swel-article-main .swift-swel-grid--fit2 > * { flex: 1 1 calc(50% - 12px); max-width: calc(50% - 12px); }
@media (max-width: 640px) {
  .swift-swel-article-main .swift-swel-grid--fit2 > * { flex: 1 1 100%; max-width: none; }
}

/* This page's feature-comparison table reads better fully left-aligned
   (long descriptive cell text, not short booleans) - scoped so the shared
   .compare-table's centered layout (pricing tables etc.) is unaffected. */
.swift-swel-article-main .swift-swel-compare-table td,
.swift-swel-article-main .swift-swel-compare-table thead th { text-align: left; }

/* Version-history timeline: reuses .swift-swel-process/.proc-* (the vertical
   numbered-circle-plus-connecting-line pattern already proven for
   step-by-step sequences) with the step number swapped for a release year,
   since a product's version history is the same "ordered sequence" shape. */
.swift-swel-version-timeline .swift-swel-proc-kicker { font-size: .82rem; }

/* ---------- Team member cards (About Us "Meet Our Leadership Team") ----------
   No real photos supplied, so the avatar reuses .swift-swel-cq-avatar's dashed-circle
   "no photo yet" language (same honest placeholder treatment as a case-study
   quote's avatar) rather than a solid icon that could read as a real photo. */
.swift-swel-team-group { margin-top: 32px; }
.swift-swel-team-group:first-child { margin-top: 0; }
.swift-swel-team-group-title { font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-blue); margin: 0 0 14px; }
.swift-swel-team-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .swift-swel-team-grid { grid-template-columns: 1fr 1fr; } }
.swift-swel-team-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; transition: transform .2s ease, box-shadow .2s ease; }
.swift-swel-team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.swift-swel-team-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.swift-swel-team-avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--c-tint-2); border: 1px dashed #AEBECF; display: flex; align-items: center; justify-content: center; color: #8B9BAB; }
.swift-swel-team-avatar svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-team-card h4 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--c-ink); }
.swift-swel-team-role { display: block; font-size: .86rem; color: var(--c-blue); font-weight: 600; margin-top: 2px; }
.swift-swel-team-exp {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-orange-dark, var(--c-orange));
  background: #FCE9DD; padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.swift-swel-team-card p { margin: 0; font-size: .92rem; color: var(--c-slate); line-height: 1.55; }

/* ---------- Utilities ---------- */
.swift-swel-text-center { text-align: center; }
.swift-swel-mt-0 { margin-top: 0; } .swift-swel-mb-0 { margin-bottom: 0; }
.swift-swel-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   Case study - editorial layout (added 2026-09-24 for
   code-of-conduct-elearning-energy-industrial-doha-qatar.html)
   Navy hero -> overlapping "Our Experience" stats bar -> two-column story
   (numbered chapters + sticky project-scope sidebar). Built only from brand
   tokens; the rest of the page reuses existing components. If this block is
   missing on the live site the page still reads correctly (plain unstyled
   hero/chapters), it just loses the dark hero, overlap and sidebar.
   ============================================================ */
.swift-swel-cs-hero {
  position: relative; overflow: hidden; color: #fff;
  padding-block: clamp(40px, 4.6vw, 64px) calc(clamp(40px, 4.6vw, 64px) + 72px);
  background:
    radial-gradient(760px 340px at 90% -12%, rgba(240, 152, 47, .24), transparent 60%),
    radial-gradient(720px 420px at -10% 115%, rgba(48, 112, 176, .5), transparent 60%),
    linear-gradient(150deg, var(--c-navy-deep) 0%, var(--c-navy) 55%, #16497F 100%);
}
.swift-swel-cs-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(115deg, rgba(0, 0, 0, .6), transparent 60%);
  -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .6), transparent 60%);
}
.swift-swel-cs-hero .swift-swel-container { position: relative; }
.swift-swel-cs-hero h1 { color: #fff; max-width: 940px; }
.swift-swel-cs-hero .swift-swel-lead { color: #D5E5F5; font-size: 1.15rem; max-width: 780px; }
.swift-swel-cs-hero .swift-swel-breadcrumbs { color: #9FBFDE; }
.swift-swel-cs-hero .swift-swel-breadcrumbs a { color: #CFE2F5; }
.swift-swel-cs-hero .swift-swel-breadcrumbs a:hover { color: #fff; }
.swift-swel-cs-hero .swift-swel-case-tag { background: rgba(255, 255, 255, .12); color: #E4EEF8; }
.swift-swel-cs-hero .swift-swel-case-tag--sector { background: rgba(240, 152, 47, .22); color: #FFC98A; }
.swift-swel-cs-hero .swift-swel-case-byline { color: #9FBFDE; }
.swift-swel-cs-hero .swift-swel-case-byline a { color: #fff; }

/* Stats bar that overlaps the bottom edge of the hero */
.swift-swel-cs-statswrap { position: relative; z-index: 2; margin-top: -72px; }
.swift-swel-cs-statsbar {
  background: #fff; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 22px clamp(20px, 3vw, 34px) 6px;
}
.swift-swel-cs-statsbar > .swift-swel-eyebrow { margin: 0; }
.swift-swel-cs-statsbar .swift-swel-stats-row { padding-block: 14px 20px; }
.swift-swel-cs-statsbar .swift-swel-stat + .swift-swel-stat { border-left: 1px solid var(--c-line); }
@media (max-width: 700px) { .swift-swel-cs-statsbar .swift-swel-stat + .swift-swel-stat { border-left: 0; } }

/* Story: main column + sticky sidebar */
.swift-swel-cs-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 4.5vw, 64px); align-items: start;
}
.swift-swel-cs-aside { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; }
/* The Project Scope card is ~840px tall (every fact on its own line), so it only pins on viewports tall enough to show it whole
   (header 76 + 24 offset + ~840 = ~940px); on shorter screens it scrolls with the page so its last rows are never cut off. */
@media (max-height: 940px) { .swift-swel-cs-aside { position: static; } }
.swift-swel-cs-aside .swift-swel-case-facts { background: #fff; box-shadow: var(--shadow-md); }
.swift-swel-cs-aside .swift-swel-case-facts h2 { font-size: 1.15rem; margin-bottom: 14px; }
/* Two-column facts grid: long rows span both columns, short ones (.swift-swel-cs-half) pair up, which keeps the
   sticky card shorter than a laptop viewport so its bottom rows are never cut off. */
.swift-swel-cs-aside .swift-swel-case-facts dl { grid-template-columns: 1fr 1fr; gap: 0 18px; }
.swift-swel-cs-aside .swift-swel-case-facts dl > div { grid-column: 1 / -1; padding-block: 10px; border-top: 1px solid var(--c-line); min-width: 0; }
.swift-swel-cs-aside .swift-swel-case-facts dl > div.swift-swel-cs-half { grid-column: auto; }
.swift-swel-cs-aside .swift-swel-case-facts dl > div:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 960px) {
  .swift-swel-cs-layout { grid-template-columns: 1fr; }
  .swift-swel-cs-aside { position: static; order: -1; }
}

/* Numbered chapters */
.swift-swel-cs-chapter { padding-block: clamp(28px, 3.4vw, 44px); scroll-margin-top: calc(var(--header-h) + 16px); }
.swift-swel-cs-chapter:first-child { padding-top: 0; }
.swift-swel-cs-chapter:last-child { padding-bottom: 0; }
.swift-swel-cs-chead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.swift-swel-cs-chead h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.swift-swel-cs-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(140deg, var(--c-navy), var(--c-blue)); box-shadow: 0 8px 18px rgba(14, 58, 102, .22);
}
.swift-swel-cs-num svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.swift-swel-cs-lead-in { margin: 26px 0 16px; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--c-ink); }
.swift-swel-cs-chapter .swift-swel-process { max-width: none; margin-top: 8px; }

/* Sample-course cards ("E-learning Course Samples" on the Code of Conduct case study): two equal cards, each with the course's own
   image on top (16:9 crop, gentle zoom on hover), a play badge, then the title and the link. The whole card is clickable through the
   link's stretched ::after. 2 columns above 760px, 1 column below. */
.swift-swel-cs-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.swift-swel-cs-sample {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.swift-swel-cs-sample:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #C7DAEE; }
.swift-swel-cs-sample-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, var(--c-tint), var(--c-tint-2)); }
.swift-swel-cs-sample-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.swift-swel-cs-sample:hover .swift-swel-cs-sample-media img { transform: scale(1.04); }
.swift-swel-cs-sample-play {
  position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--c-navy); box-shadow: var(--shadow-md);
}
.swift-swel-cs-sample-play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; stroke: none; }
.swift-swel-cs-sample-body { padding: clamp(20px, 2.6vw, 28px); }
.swift-swel-cs-sample h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.3; text-wrap: balance; }
.swift-swel-cs-sample a, .swift-swel-cs-sample-open { font-family: var(--font-head); font-weight: 600; font-size: .98rem; color: var(--c-blue); }
/* the card link is a <button> that opens the course-preview popup (data-modal-open) - reset it to look like the link.
   position:static !important overrides a live-only WoodMart/Elementor theme rule that gives <button> elements
   position:relative - without this, that rule becomes the ::after's containing block instead of .swift-swel-cs-sample
   (the card), shrinking the "whole card clickable" hit area down to just the button's own small box (Anwar screenshot:
   "Make both card should be clickable" - only the text link opened the popup on the live site, not the image). */
.swift-swel-cs-sample-open { position: static !important; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; }
.swift-swel-cs-sample a::after, .swift-swel-cs-sample-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.swift-swel-cs-sample:hover a, .swift-swel-cs-sample:hover .swift-swel-cs-sample-open { color: var(--c-navy); }
.swift-swel-cs-sample-open:focus-visible { outline: none; }
.swift-swel-cs-sample-open:focus-visible::after { outline: 3px solid var(--c-orange); outline-offset: -3px; }
@media (max-width: 760px) { .swift-swel-cs-samples { grid-template-columns: 1fr; gap: 22px; } }

/* Variant of .swift-swel-tech-grid for 4 items (used by "Tools and Technology" on the PowerPoint-to-eLearning healthcare case study): a 2 x 2 grid above 760px
   (each item is an icon beside a label + description, which needs more width than 4 narrow columns give), 1 column on phones (the base rule at <=760px). The base
   grid draws a divider to the left of every item except the first, so the first item of each ROW (the odd ones) resets it here. */
.swift-swel-tech-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
.swift-swel-tech-grid--4 > div:nth-child(odd) { padding-left: 0; }
.swift-swel-tech-grid--4 > div:nth-child(odd)::before { display: none; }
.swift-swel-tech-grid--4 > div:nth-child(even) { padding-left: 30px; }
.swift-swel-tech-grid--4 > div:nth-child(even)::before { display: block; }
@media (max-width: 760px) {
  .swift-swel-tech-grid--4 { grid-template-columns: 1fr; }
  .swift-swel-tech-grid--4 > div:not(:first-child) { padding-left: 0; }
  .swift-swel-tech-grid--4 > div:not(:first-child)::before { display: none; }
}

/* ---------- Utilities ---------- */
.swift-swel-text-center { text-align: center; }
.swift-swel-mt-0 { margin-top: 0; } .swift-swel-mb-0 { margin-bottom: 0; }
.swift-swel-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }