/* ============================================================
   Web Education Services — shared stylesheet
   Brand system: BRAND-STANDARDS.md, styled to match
   my.webeducationservices.com (WES Learning).
   Blue #064273/#0381CC + Yellow #FDD618 · Plus Jakarta Sans + Inter
   ============================================================ */

:root {
  --blue-900: #064273;
  --blue-700: #0570b0;
  --blue-600: #0381cc;
  --blue-500: #1a9fe0;
  --blue-100: #cce9f9;
  --blue-50: #ebf5fc;
  --yellow-600: #c9a800;
  --yellow-500: #fdd618;
  --yellow-400: #fde04a;
  --yellow-100: #fef6cc;
  --yellow-50: #fffbe5;
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;
  --font-heading: 'Plus Jakarta Sans', 'Jakarta Fallback', Arial, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', Arial, sans-serif;
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.1);
  --shadow-xl: 0 8px 24px rgba(0,0,0,.12);
  --container: 1200px;
  --content: 720px;
  --nav-h: 72px;
}

/* ---------- fonts (self-hosted) ---------- */
/* CLS-safe fallbacks */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-var.woff2') format('woff2'); }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 23%; line-gap-override: 0%; }
@font-face { font-family: 'Jakarta Fallback'; src: local('Arial'); size-adjust: 104%; ascent-override: 98%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--gray-700); background: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--gray-900); line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: 2.5rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-600); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--blue-500); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.4rem; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

/* ---------- layout ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-tight { padding: 64px 0; }
@media (max-width: 768px) { .section, .section-tight { padding: 48px 0; } }
.bg-white { background: var(--white); }
.bg-gray { background: var(--gray-50); }
.bg-blue-tint { background: var(--blue-50); }
.bg-navy { background: linear-gradient(160deg, #064273 0%, #043056 100%); color: rgba(255,255,255,.88); }
.bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-navy a:not(.btn) { color: var(--yellow-400); }
.eyebrow { display: block; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 8px; }
.bg-navy .eyebrow { color: var(--yellow-500); }
.section-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }
.section-head p { margin-top: 14px; }
.content-max { max-width: var(--content); }
.center { text-align: center; }
.muted { color: var(--gray-500); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1; padding: 14px 28px; border-radius: var(--r-md); border: 2px solid transparent; cursor: pointer; transition: all .15s ease; text-align: center; }
.btn-primary { background: var(--yellow-500); color: var(--blue-900); box-shadow: 0 2px 8px rgba(253,214,24,.3); }
.btn-primary:hover { background: var(--yellow-400); color: var(--blue-900); transform: translateY(-1px); }
.btn-secondary { background: var(--blue-600); color: #fff; }
.btn-secondary:hover { background: var(--blue-500); color: #fff; }
.btn-outline { background: transparent; border-color: var(--blue-600); color: var(--blue-600); }
.btn-outline:hover { background: var(--blue-600); color: #fff; }
.btn-outline-light { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 17px; }
@media (max-width: 640px) { .btn { width: 100%; } }

/* ---------- header / jumbo nav ---------- */
.site-header { background: var(--blue-900); position: sticky; min-height: var(--nav-h); top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: var(--nav-h); display: flex; align-items: center; gap: 8px; }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: 8px; }
.nav-logo img { height: 44px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: relative; }
.nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: rgba(255,255,255,.85); padding: 10px 13px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; transition: background .15s, color .15s; }
.nav-link:hover, .nav-trigger:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-link.active, .nav-trigger.active { color: var(--yellow-400); }
.nav-caret { transition: transform .2s ease; }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { padding: 11px 22px; font-size: 15px; }

/* mega panel */
.mega { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-xl); border: 1px solid var(--gray-100); padding: 26px; display: flex; gap: 34px; opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
/* hover bridge so the pointer can travel into the panel */
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.mega-col { min-width: 210px; }
.mega-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.mega a.mega-link { display: block; padding: .55rem .6rem; margin: 0 -.6rem; border-radius: var(--r-sm); color: var(--gray-700); font-weight: 500; font-size: 15px; line-height: 1.35; }
.mega a.mega-link:hover { background: var(--blue-50); color: var(--blue-900); }
.mega a.mega-link span { display: block; font-size: 12.5px; font-weight: 400; color: var(--gray-500); margin-top: 1px; }
.mega-card { background: var(--yellow-100); border-radius: var(--r-md); padding: 20px; max-width: 230px; display: flex; flex-direction: column; gap: 10px; }
.mega-card h4 { font-size: 16px; color: var(--blue-900); }
.mega-card p { font-size: 13.5px; line-height: 1.5; color: var(--gray-700); margin: 0; }
.mega-card .btn { padding: 10px 16px; font-size: 14px; }

/* mobile nav */
.nav-burger { display: none; margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; border-radius: var(--r-sm); }
.nav-burger:hover { background: rgba(255,255,255,.1); }
@media (max-width: 1024px) {
  .nav-item:hover .mega, .nav-item:focus-within .mega { transform: none; }
  .nav-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--blue-900); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 12px 20px 40px; overflow-y: auto; }
  .nav-menu.open { display: flex; }
  .nav-burger { display: inline-flex; }
  .nav-item { width: 100%; }
  .nav-item::after { display: none; }
  .nav-link, .nav-trigger { width: 100%; justify-content: space-between; font-size: 17px; padding: 15px 8px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; }
  .mega { position: static; transform: none; opacity: 1; visibility: hidden; display: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 4px 8px 12px; flex-direction: column; gap: 14px; }
  .nav-item.open .mega { display: flex; visibility: visible; }
  .nav-item.open .nav-caret { transform: rotate(180deg); }
  .mega-col { min-width: 0; }
  .mega-label { color: rgba(255,255,255,.66); }
  .mega a.mega-link { color: rgba(255,255,255,.85); margin: 0; }
  .mega a.mega-link:hover { background: rgba(255,255,255,.08); color: #fff; }
  .mega a.mega-link span { color: rgba(255,255,255,.66); }
  .mega-card { display: none; }
  .nav-cta { margin: 16px 0 0; width: 100%; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: linear-gradient(160deg, #064273 0%, #043056 100%); color: #fff; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-image: image-set(url('/images/hero-collage-828.webp') 1x); background-size: cover; background-position: center; opacity: 1; }
@media (min-width: 769px) { .hero-bg { background-image: image-set(url('/images/hero-collage-1920.webp') 1x); } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1100px 560px at 50% -10%, rgba(10,90,158,.42) 0%, rgba(6,66,115,.72) 45%, rgba(4,41,74,.9) 100%); }
.hero-inner { position: relative; max-width: 920px; margin: 0 auto; padding: 96px 24px 84px; }
.hero h1 { color: #fff; margin: 0 0 20px; min-height: 2.2em; }
.hero .lead { font-size: 1.25rem; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 760px; margin: 0 auto 16px; }
.hero .sub { font-size: 1rem; color: rgba(255,255,255,.78); max-width: 720px; margin: 0 auto 12px; }
.hero-eyebrow { display: inline-block; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow-400); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 30px 0 14px; }
.hero-support { font-size: 13.5px; letter-spacing: .04em; color: rgba(255,255,255,.62); margin: 16px 0 0; }
.hero-stats { display: flex; justify-content: center; gap: 48px; margin-top: 44px; flex-wrap: wrap; }
.hero-stat { min-width: 130px; }
.hero-stat .num { font-family: var(--font-heading); font-weight: 800; font-size: 2.1rem; color: var(--yellow-500); line-height: 1.1; }
.hero-stat .lbl { font-size: 14px; color: rgba(255,255,255,.75); margin-top: 4px; }
@media (max-width: 768px) {
  .hero-inner { padding: 64px 20px 56px; }
  .hero .lead { font-size: 1.05rem; }
  .hero-stats { gap: 22px; margin-top: 34px; }
  .hero-stat { min-width: 100px; }
  .hero-stat .num { font-size: 1.6rem; }
}

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid > * { min-width: 0; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 32px; }
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.icon-chip { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--blue-50); color: var(--blue-600); display: grid; place-items: center; margin-bottom: 18px; }
.card h3 { margin-bottom: 10px; font-size: 1.35rem; }
.card .card-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-top: 14px; }
.pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); background: var(--yellow-500); color: var(--blue-900); }
.pill-blue { background: var(--blue-100); color: var(--blue-900); }

/* split layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.split-img img { border-radius: var(--r-xl); box-shadow: var(--shadow-xl); width: 100%; }
.split h2 { margin-bottom: 16px; }

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow-500); color: var(--blue-900); display: grid; place-items: center; margin-top: 3px; }
.checklist .tick svg { width: 13px; height: 13px; }
.bg-navy .checklist .tick { background: var(--yellow-500); }
.checklist-2col { grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 700px) { .checklist-2col { grid-template-columns: 1fr; } }

/* ---------- steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--yellow-500); color: var(--blue-900); font-family: var(--font-heading); font-weight: 800; font-size: 19px; display: grid; place-items: center; margin-bottom: 16px; }
.step h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step p { font-size: 15.5px; margin: 0; }

/* ---------- reviews ---------- */
.review-card { display: flex; flex-direction: column; }
.stars { display: inline-flex; gap: 3px; color: var(--yellow-500); margin-bottom: 14px; }
.review-card blockquote { font-size: 15.5px; line-height: 1.65; color: var(--gray-700); flex: 1; }
.review-card cite { display: block; margin-top: 16px; font-style: normal; font-weight: 600; color: var(--gray-900); font-size: 14.5px; }
.review-card cite span { display: block; font-weight: 400; color: var(--gray-500); font-size: 13px; margin-top: 2px; }
.rating-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 34px; font-weight: 600; color: var(--gray-900); flex-wrap: wrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 800px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-family: var(--font-heading); font-weight: 700; font-size: 1.06rem; color: var(--gray-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { flex-shrink: 0; transition: transform .2s ease; color: var(--blue-600); }
.faq details[open] summary .faq-icon { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 20px; font-size: 15.5px; }

/* ---------- topic chips (resources) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chips span { background: var(--blue-50); color: var(--blue-900); border: 1px solid var(--blue-100); font-weight: 500; font-size: 14.5px; padding: 9px 18px; border-radius: var(--r-pill); }

/* ---------- stat tiles (proof) ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: 1fr; } }
.stat-tile { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 28px; text-align: center; }
.stat-tile .num { font-family: var(--font-heading); font-weight: 800; font-size: 2.4rem; color: var(--blue-600); line-height: 1.1; }
.stat-tile .lbl { font-size: 15px; color: var(--gray-500); margin-top: 6px; }

/* ---------- footer ---------- */
.site-footer { background: var(--blue-900); color: rgba(255,255,255,.85); font-size: 15px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 48px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand img { height: 48px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: rgba(255,255,255,.6); max-width: 260px; }
.footer-col h4 { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.8); }
.footer-col a:hover { color: var(--yellow-400); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.62); }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-bottom a:hover { color: var(--yellow-400); }
.footer-legal { display: flex; gap: 20px; }

/* ---------- scroll fade-ins ---------- */
.fade-in { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.fade-in.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .btn, .card-hover { transition: none; }
}
/* no-JS safety: never hide content if components.js fails */
.no-js .fade-in { opacity: 1; transform: none; }

/* ---------- internal page hero (all non-home pages) ---------- */
.page-hero { background: linear-gradient(160deg, #064273 0%, #043056 100%); color: rgba(255,255,255,.88); text-align: center; }
.page-hero .wrap { max-width: 880px; padding-top: 76px; padding-bottom: 64px; }
.page-hero h1 { color: #fff; font-size: 2.9rem; margin: 0 0 18px; }
.page-hero .eyebrow { color: var(--yellow-400); }
.page-hero .lead { font-size: 1.2rem; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 760px; margin: 0 auto; }
.page-hero .hero-ctas { margin: 28px 0 0; }
@media (max-width: 768px) {
  .page-hero .wrap { padding-top: 52px; padding-bottom: 46px; }
  .page-hero h1 { font-size: 2.1rem; }
  .page-hero .lead { font-size: 1.05rem; }
}

/* ---------- forms (contact) ---------- */
.form-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 36px; max-width: 640px; margin: 0 auto; text-align: left; }
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.form-group label { display: block; font-weight: 600; font-size: 14.5px; color: var(--gray-900); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; font-family: var(--font-body); font-size: 15.5px; color: var(--gray-900); background: #fff; border: 1px solid var(--gray-200, #d7dde3); border-radius: var(--r-md); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(3,129,204,.15); }
.form-success { display: none; text-align: center; padding: 24px 8px; }
.form-success.show { display: block; }
.form-success h3 { color: var(--blue-900); margin-bottom: 8px; }

/* ---------- blog index ---------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 36px; }
.filter-btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--gray-700); background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer; transition: all .15s; }
.filter-btn:hover { border-color: var(--blue-600); color: var(--blue-600); }
.filter-btn.active { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.post-card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-50); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-cat { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-600); background: var(--blue-50); border-radius: var(--r-pill); padding: 3px 11px; }
.post-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; line-height: 1.35; color: var(--gray-900); }
.post-card-meta { font-size: 13px; color: var(--gray-500); margin-top: auto; }

/* ---------- blog post ---------- */
.blog-post-hero { background: linear-gradient(160deg, #064273 0%, #043056 100%); color: rgba(255,255,255,.88); }
.blog-post-hero .wrap { max-width: 900px; padding-top: 64px; padding-bottom: 56px; text-align: center; }
.blog-post-hero img { width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-xl); margin-top: 36px; }
.blog-post-cat { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-900); background: var(--yellow-500); border-radius: var(--r-pill); padding: 4px 14px; margin-bottom: 16px; }
.blog-post-hero h1 { color: #fff; font-size: 2.5rem; margin: 0 0 16px; }
.post-meta { font-size: 14.5px; color: rgba(255,255,255,.75); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.post-meta-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; }
@media (max-width: 768px) { .blog-post-hero h1 { font-size: 1.75rem; } .blog-post-hero .wrap { padding-top: 44px; padding-bottom: 40px; } }

.blog-post-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; max-width: var(--container); margin: 0 auto; padding: 56px 24px 72px; }
@media (max-width: 900px) { .blog-post-wrap { grid-template-columns: 1fr; padding-top: 40px; } }
.blog-article { font-size: 1.06rem; line-height: 1.75; color: var(--gray-700); min-width: 0; }
.blog-article h2 { font-size: 1.65rem; margin: 2.4rem 0 1rem; }
.blog-article h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.blog-article h2:first-child { margin-top: 0; }
.blog-article p { margin: 0 0 1.2rem; }
.blog-article ul, .blog-article ol { margin: 0 0 1.2rem 1.4rem; }
.blog-article li { margin-bottom: .4rem; }
.blog-article img { max-width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-md); margin: 1.4rem 0; }
.blog-article a { font-weight: 600; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.blog-article th, .blog-article td { border: 1px solid var(--gray-100); padding: 10px 12px; text-align: left; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.4rem 0; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-md); }

.blog-sidebar { display: flex; flex-direction: column; gap: 22px; }
.sidebar-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.sidebar-head { font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: var(--gray-900); margin-bottom: 10px; }
.sidebar-body { display: flex; flex-direction: column; }
.sidebar-link { display: block; padding: 9px 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; border-bottom: 1px solid var(--gray-50); }
.sidebar-link:last-child { border-bottom: 0; }
.sidebar-cta { background: var(--yellow-100); border-radius: var(--r-lg); padding: 24px; }
.sidebar-cta-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--blue-900); margin-bottom: 8px; }
.sidebar-cta p { font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
@media (max-width: 900px) { .blog-sidebar { max-width: 480px; } }

/* tablet: odd last card spans the row instead of orphaning (grid-3/grid-4 collapse to 2 cols) */
@media (max-width: 1024px) and (min-width: 641px) {
  .grid-3 > :last-child:nth-child(odd), .grid-4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.form-error { color: #b3261e; font-size: 14.5px; margin: 12px 0 0; }

/* contrast: eyebrows on gray tint */
.bg-gray .eyebrow { color: var(--blue-700); }
.footer-head { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 14px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--yellow-500); color: var(--blue-900); font-weight: 700; padding: 10px 18px; border-radius: 0 0 var(--r-md) 0; z-index: 200; }
.skip-link:focus { left: 0; }
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-md); object-fit: cover; background: #000; }

/* ---------- blog search ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.blog-search { position: relative; max-width: 520px; margin: 0 auto 20px; display: flex; align-items: center; }
.blog-search-icon { position: absolute; left: 16px; color: var(--gray-500); pointer-events: none; }
.blog-search input { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--gray-900); background: #fff; border: 1px solid var(--gray-200, #d7dde3); border-radius: var(--r-pill); padding: 13px 44px 13px 46px; transition: border-color .15s, box-shadow .15s; }
.blog-search input::placeholder { color: var(--gray-500); }
.blog-search input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(3,129,204,.15); }
.blog-search input::-webkit-search-cancel-button { display: none; }
.blog-search-clear { position: absolute; right: 12px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); cursor: pointer; }
.blog-search-clear:hover { background: var(--blue-50); color: var(--blue-900); }
.blog-count { text-align: center; font-size: 14px; color: var(--gray-500); margin: 0 0 24px; }
.blog-empty { text-align: center; padding: 56px 24px; }
.blog-empty h3 { margin-bottom: 8px; }
.blog-empty p { color: var(--gray-700); margin-bottom: 20px; }
/* the display rules above beat the hidden attribute, so restate it */
.blog-search-clear[hidden], .blog-grid[hidden], .blog-empty[hidden] { display: none; }

/* ---------- pillar cards (the three WES service pillars) ---------- */
.pillar { display: flex; flex-direction: column; border-top: 4px solid var(--yellow-500); }
.pillar h3 { font-size: 1.45rem; }
.pillar .pillar-lead { color: var(--gray-700); font-weight: 500; }
.pillar ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; font-size: 15px; color: var(--gray-700); }
.pillar ul li { position: relative; padding-left: 16px; }
.pillar ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-600); }
.pillar .card-link { margin-top: auto; padding-top: 20px; }

/* ---------- ask/answer cards (what these services actually solve) ---------- */
.qa-card { display: flex; flex-direction: column; gap: 10px; }
.qa-card .qa-q { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; line-height: 1.4; color: var(--blue-900); margin: 0; }
.qa-card p { margin: 0; font-size: 15.5px; }

/* ---------- process flow (knowledge to launched training) ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 10px; }
.flow-step { flex: 1 1 150px; min-width: 0; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 18px 16px; text-align: center; }
.flow-step .flow-num { font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: .08em; color: var(--blue-600); display: block; margin-bottom: 6px; }
.flow-step .flow-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--gray-900); }
.flow-arrow { display: grid; place-items: center; color: var(--blue-600); flex: 0 0 auto; }
@media (max-width: 900px) { .flow-arrow { transform: rotate(90deg); } .flow { flex-direction: column; } .flow-step { flex: 1 1 auto; } }

/* ---------- engagement ways (learn it / build it with us / build it for me) ---------- */
.way { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 26px; }
.way .way-num { font-family: var(--font-heading); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow-500); margin-bottom: 8px; display: block; }
.way h3 { font-size: 1.25rem; margin-bottom: 8px; }
.way p { font-size: 15.5px; margin: 0 0 12px; color: rgba(255,255,255,.85); }
.way .way-eg { font-size: 14px; color: rgba(255,255,255,.65); margin: 0; }

/* ---------- team (the people behind WES) ---------- */
.person { text-align: center; }
.person-photo { width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-600); font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; overflow: hidden; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { font-size: 1.2rem; margin-bottom: 2px; }
.person-role { font-size: 15px; font-weight: 600; color: var(--blue-600); margin: 0 0 10px; }
.person p { font-size: 15px; margin: 0; }

/* Flip a .split on desktop while keeping the text first in the source, so the
   mobile stack still reads text before image or quote card. */
@media (min-width: 901px) { .split-reverse > :first-child { order: 2; } }

/* Mega promo card: hold its width instead of absorbing all the flex shrink
   (the service columns have a min-width, so the card was collapsing), and
   restore a readable heading. `.footer-head` is white for the navy footer,
   and the older `.mega-card h4` override never matched because components.js
   renders a div, not an h4. */
.mega-card { flex: 0 0 230px; }
.mega-card h4, .mega-card .footer-head { color: var(--blue-900); }

/* ---------- site assistant (chat widget, injected by components.js) ---------- */
.chat-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; border: 0; border-radius: var(--r-pill); background: var(--blue-900); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .15s ease, background .15s ease; }
.chat-launcher:hover { background: var(--blue-700); transform: translateY(-1px); }
.chat-launcher[hidden] { display: none; }
.chat-panel { position: fixed; right: 20px; bottom: 20px; z-index: 121; width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 40px); background: #fff; border: 1px solid var(--gray-100); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { background: var(--blue-900); color: #fff; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.chat-head-title { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; }
.chat-head-sub { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 2px; }
.chat-close { background: none; border: 0; color: rgba(255,255,255,.85); cursor: pointer; padding: 6px; border-radius: var(--r-sm); display: grid; place-items: center; }
.chat-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--gray-50); }
.chat-msg { max-width: 88%; padding: 11px 14px; border-radius: var(--r-md); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg-bot { background: #fff; border: 1px solid var(--gray-100); color: var(--gray-700); align-self: flex-start; }
.chat-msg-user { background: var(--blue-600); color: #fff; align-self: flex-end; }
.chat-msg-error { background: #fdecea; border: 1px solid #f5c6c2; color: #8c1d18; align-self: flex-start; }
.chat-msg a { font-weight: 600; text-decoration: underline; }
.chat-msg-user a { color: #fff; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--gray-50); }
.chat-chip { background: #fff; border: 1px solid var(--blue-100); color: var(--blue-900); font-family: var(--font-body); font-size: 13.5px; padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; text-align: left; }
.chat-chip:hover { background: var(--blue-50); border-color: var(--blue-600); }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--gray-100); background: #fff; flex-shrink: 0; }
.chat-input { flex: 1; font-family: var(--font-body); font-size: 15px; color: var(--gray-900); border: 1px solid var(--gray-200, #d7dde3); border-radius: var(--r-md); padding: 10px 12px; resize: none; max-height: 96px; }
.chat-input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(3,129,204,.15); }
.chat-send { flex-shrink: 0; background: var(--yellow-500); color: var(--blue-900); border: 0; border-radius: var(--r-md); padding: 0 16px; font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; cursor: pointer; }
.chat-send:hover:not(:disabled) { background: var(--yellow-400); }
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-note { font-size: 11.5px; color: var(--gray-500); text-align: center; padding: 0 12px 10px; background: #fff; }
.chat-dots { display: inline-flex; gap: 4px; align-items: center; }
.chat-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-500); animation: chatdot 1.1s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: .16s; }
.chat-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes chatdot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-dots i { animation: none; } .chat-launcher:hover { transform: none; } }
@media (max-width: 640px) {
  .chat-launcher { right: 14px; bottom: 14px; padding: 12px 17px; font-size: 14.5px; }
  .chat-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
}

/* Five-step process row (the training page). Declared after the .steps media
   queries above so it wins at equal specificity. */
.steps-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .steps-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .steps-5 { grid-template-columns: 1fr; } }

/* members menu: a login list, so it reads apart from the marketing nav */
.nav-item-members .nav-trigger { border: 1px solid rgba(255,255,255,.28); border-radius: var(--r-pill); padding: 8px 14px; margin-left: 6px; }
.nav-item-members .nav-trigger:hover { border-color: var(--yellow-500); background: rgba(255,255,255,.08); }
.mega-members { right: 0; left: auto; transform: translateY(6px); }
.nav-item-members:hover .mega, .nav-item-members:focus-within .mega { transform: translateY(0); }
@media (max-width: 1024px) {
  .nav-item-members .nav-trigger { border: 0; border-radius: 0; margin-left: 0; padding: 15px 8px; }
  .mega-members { right: auto; }
}

/* ---------- split media: one square that travels with the scroll ----------
   The square starts at the top of its column and sticks there while the taller
   text column scrolls past, so it reads as moving down the row. Sticky is
   bounded by its grid area, which is what keeps it inside the row. */
.split-media { align-self: start; position: sticky; top: 96px; }
.split-media figure { margin: 0; }
.split-media img { display: block; width: 100%; max-width: 440px; aspect-ratio: 1 / 1;
                   height: auto; object-fit: cover; border-radius: var(--r-lg);
                   box-shadow: var(--shadow-lg); }
.split .split-media.media-right img { margin-left: auto; }

@media (max-width: 900px) {
  .split-media { position: static; top: auto; }
  .split-media img { max-width: 100%; }
  /* The rows alternate which side the image sits on, which is right on desktop.
     Stacked, that DOM order puts the image last in one row and first in the
     next, so two images land together and two blocks of text land together.
     Pulling the image first in every row makes every page read image, text,
     image, text the whole way down. Applies to the home page pairs and to the
     service pages, which stagger the same way. */
  .split .split-media,
  .split .split-img { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .split-media { position: static; top: auto; }
}

/* ---------- launch notice, first two weeks only ---------- */
.wes-news { width: min(520px, 94vw); margin: auto; padding: 0; border: 0;
            border-radius: var(--r-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.wes-news::backdrop { background: rgba(4, 41, 74, .62); }
.wes-news-head { padding: 22px 26px 18px; background: var(--blue-900); color: #fff; }
.wes-news-head .eyebrow { display: block; margin-bottom: 6px; color: var(--yellow-500); }
.wes-news-head h2 { margin: 0; font-size: 1.4rem; color: #fff; line-height: 1.25; }
.wes-news-body { padding: 22px 26px 6px; background: #fff; }
.wes-news-body p { margin: 0 0 12px; font-size: 15.5px; color: var(--gray-700, #3d4a57); line-height: 1.6; }
.wes-news-body ul { margin: 0 0 14px; padding-left: 20px; }
.wes-news-body li { font-size: 15px; color: var(--gray-600, #55606c); margin-bottom: 6px; }
.wes-news-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                 padding: 6px 26px 22px; background: #fff; }
.wes-news-dismiss { margin-left: auto; border: 0; background: none; padding: 8px 4px;
                    font-size: 14px; color: var(--gray-500); text-decoration: underline; cursor: pointer; }
.wes-news-dismiss:hover { color: var(--blue-600); }
@media (max-width: 520px) {
  .wes-news-foot { flex-direction: column; align-items: stretch; }
  .wes-news-foot .btn { width: 100%; text-align: center; }
  .wes-news-dismiss { margin-left: 0; }
}