/* ============================================================
   3KEYSOFTWARE® — Page Styles
   Extracted & consolidated from C:\temp\3keysoft\Pages\*.html
   Scoped to .cw-page wrapper; not duplicated from cw-theme.css.
   ============================================================ */

/* --- PAGE DESIGN SYSTEM VARIABLES --------------------------
   These extend cw-theme.css with the gold-accent palette used
   across all embedded page fragments.                        */
.cw-page {
  --cw-navy:      #0B1F3A;
  --cw-blue:      #1A4A8A;
  --cw-accent:    #C8922A;
  --cw-light:     #F4F6F9;
  --cw-white:     #FFFFFF;
  --cw-text:      #1C2B3A;
  --cw-muted:     #5A6E83;
  --cw-border:    #D6DEE8;
  --transition:   0.25s ease;
}

/* --- .cw-page BASE ---------------------------------------- */
.cw-page {
  font-family: var(--font-body);
  color: var(--cw-text);
  background: var(--cw-white);
  font-size: 15px;
  line-height: 1.65;
}

/* --- PAGE NAVBAR (56 px, gold-accent variant) ------------- */
.cw-page .navbar {
  background: var(--cw-navy);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  
  top: 0;
  
  transition: box-shadow var(--transition);
}
.cw-page .navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.cw-page .navbar__logo-mark {
  width: 32px;
  height: 32px;
  background: var(--cw-accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.03em;
  overflow: hidden;
}
.cw-page .navbar__logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cw-page .navbar__brand-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cw-page .navbar__nav {
  display: flex;
  gap: 0;
  list-style: none;
  height: 56px;
}
.cw-page .navbar__nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.cw-page .navbar__link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0 14px;
  height: 56px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.cw-page .navbar__link:hover,
.cw-page .navbar__link--active {
  color: #fff;
  border-bottom-color: var(--cw-accent);
}

/* --- HERO ------------------------------------------------- */
.cw-page .hero {
  background: var(--cw-navy);
  color: #fff;
  padding: 3.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}
.cw-page .hero::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(200,146,42,0.08);
  pointer-events: none;
}
.cw-page .hero__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cw-accent);
  margin-bottom: 0.75rem;
}
.cw-page .hero__title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 1rem;
  max-width: 620px;
}
.cw-page .hero__title strong { color: var(--cw-accent); font-style: italic; }
.cw-page .hero__body {
  color: rgba(255,255,255,0.72);
  max-width: 580px;
  font-size: 14px;
  line-height: 1.8;
}

/* Hero inline stat strip */
.cw-page .hero__stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.cw-page .hero__stat {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 0.75rem 1.1rem;
  min-width: 110px;
}
.cw-page .hero__stat-num {
  font-family: var(--font-heading);
  font-size: 24px;
  font-style: italic;
  color: var(--cw-accent);
  line-height: 1;
  margin-bottom: 3px;
}
.cw-page .hero__stat-label { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.4; }

/* --- SECTIONS --------------------------------------------- */
.cw-page .section { padding: 2.5rem 2rem; }
.cw-page .section--alt { background: var(--cw-light); }
.cw-page .section__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-accent);
  margin-bottom: 0.4rem;
}
.cw-page .section__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: normal;
  color: var(--cw-navy);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--cw-border);
}

/* --- LEAD BLOCK ------------------------------------------- */
.cw-page .lead-block {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy);
  border-radius: 0 4px 4px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.cw-page .lead-block p { font-size: 14px; color: var(--cw-muted); line-height: 1.8; }
.cw-page .lead-block p + p { margin-top: 0.85rem; }
.cw-page .lead-block strong { color: var(--cw-navy); font-weight: 600; }

/* --- COMMITMENT / CTA BLOCK ------------------------------- */
.cw-page .commitment {
  background: var(--cw-navy);
  color: #fff;
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
}
.cw-page .commitment::after {
  content: '';
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(200,146,42,0.07);
  pointer-events: none;
}
.cw-page .commitment__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-accent);
  margin-bottom: 0.5rem;
}
.cw-page .commitment__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 1rem;
}
.cw-page .commitment__body {
  font-size: 14px;
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  max-width: 560px;
  margin-bottom: 1.25rem;
}
.cw-page .cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.cw-page .cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cw-accent);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
  transition: background var(--transition);
}
.cw-page .cta-link:hover { background: #b07d20; }
.cw-page .cta-link--secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}
.cw-page .cta-link--secondary:hover { background: rgba(255,255,255,0.08); }
.cw-page .cta-arrow { font-size: 15px; }

/* --- FOOTER STRIP ----------------------------------------- */
.cw-page .footer-strip {
  background: rgba(0,0,0,0.3);
  color: #0B1F3A;
  font-size: 11px;
  padding: 0.65rem 2rem;
  letter-spacing: 0.02em;
}
/* Variant with accent line (Page-3) */
.cw-page .footer-strip--accent {
  background: var(--cw-navy);
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cw-page .footer-strip--accent::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--cw-accent);
  flex-shrink: 0;
}

/* --- REVEAL ANIMATION (page variant: 18px lift) ----------- */
/* .cw-page [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cw-page [data-reveal].is-visible {
  opacity: 1;
  transform: none;
} */

/* ============================================================
   COMPONENT LIBRARY
   ============================================================ */

/* --- FLAGSHIP CARD ---------------------------------------- */
.cw-page .flagship {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.cw-page .flagship__name {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--cw-navy);
  margin-bottom: 6px;
}
.cw-page .flagship__body { font-size: 13.5px; color: var(--cw-muted); line-height: 1.7; }

/* --- PRODUCT BANNER --------------------------------------- */
.cw-page .product-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cw-navy);
  border-radius: 4px;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.cw-page .product-banner::after {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(200,146,42,0.1);
  pointer-events: none;
}
.cw-page .product-banner__badge {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--cw-accent);
  background: rgba(200,146,42,0.12);
  border: 1px solid rgba(200,146,42,0.3);
  border-radius: 4px;
  padding: 5px 14px;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cw-page .product-banner__title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  position: relative;
  z-index: 1;
}
.cw-page .product-banner__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

/* --- CONTENT GRID / CARDS --------------------------------- */
.cw-page .content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 0.25rem;
}
.cw-page .content-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .content-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .content-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: 6px;
}
.cw-page .content-card__title {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--cw-navy);
  margin-bottom: 7px;
  font-style: italic;
}
.cw-page .content-card__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.65; }

/* --- CODE GRID / CARDS (simple) --------------------------- */
.cw-page .code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .code-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--code-color, var(--cw-accent));
  border-radius: 0 4px 4px 0;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .code-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); }
.cw-page .code-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.25rem;
  background: var(--cw-white);
}
.cw-page .code-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--code-bg, #FAEEDA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.cw-page .code-card__meta { flex: 1; }
.cw-page .code-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: 5px;
}
.cw-page .code-card__origin {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--code-color, var(--cw-accent));
  margin-bottom: 2px;
}
.cw-page .code-card__name {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--cw-navy);
  margin-bottom: 5px;
  font-style: italic;
}
.cw-page .code-card__desc {
  font-size: 13px;
  color: var(--cw-muted);
  line-height: 1.75;
}
.cw-page .code-card__body { padding: 0 1.25rem 1.1rem 1.25rem; font-size: 13px; color: var(--cw-muted); line-height: 1.75; }
.cw-page .code-card__caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.75rem; }
.cw-page .code-cap {
  font-size: 11px;
  background: var(--cw-light);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 3px 9px;
  color: var(--cw-text);
}

/* --- EXPERTISE GRID / CARDS ------------------------------- */
.cw-page .expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.cw-page .expertise-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .expertise-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .expertise-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .expertise-card__title { font-size: 14px; font-weight: 600; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .expertise-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- PRODUCT GRID / CARDS (page version) ------------------ */
.cw-page .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cw-page .product-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .product-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .product-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 6px; }
.cw-page .product-card__name { font-family: var(--font-heading); font-size: 15px; color: var(--cw-navy); margin-bottom: 6px; font-style: italic; }
.cw-page .product-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- TOOL GRID / CARDS ------------------------------------ */
.cw-page .tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .tool-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .tool-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .tool-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .tool-card__name { font-family: var(--font-heading); font-size: 14px; color: var(--cw-navy); margin-bottom: 5px; font-style: italic; }
.cw-page .tool-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* Tool card with color accent border (--tool-color variant) */
.cw-page .tool-card--colored {
  border-left: 4px solid var(--tool-color, var(--cw-accent));
  border-radius: 0 4px 4px 0;
}

/* --- SOLUTION GRID / CARDS -------------------------------- */
.cw-page .solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .solution-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-top: 3px solid var(--sol-color, var(--cw-accent));
  border-radius: 0 0 4px 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition);
}
.cw-page .solution-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); }
.cw-page .solution-card__icon { font-size: 20px; margin-bottom: 6px; }
.cw-page .solution-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .solution-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- MODE GRID / CARDS ------------------------------------ */
.cw-page .mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .mode-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-top: 3px solid var(--mode-color, var(--cw-accent));
  border-radius: 0 0 4px 4px;
  padding: 1rem 1.1rem;
  transition: box-shadow var(--transition);
}
.cw-page .mode-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.1); }
.cw-page .mode-card__icon { font-size: 20px; margin-bottom: 6px; }
.cw-page .mode-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .mode-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- CAPABILITY GRID / CARDS ------------------------------ */
.cw-page .cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .cap-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .cap-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .cap-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .cap-card__name { font-family: var(--font-heading); font-size: 14px; color: var(--cw-navy); margin-bottom: 5px; font-style: italic; }
.cw-page .cap-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- INFO CARD GRID --------------------------------------- */
.cw-page .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .info-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .info-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .info-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .info-card__name { font-family: var(--font-heading); font-size: 14px; color: var(--cw-navy); margin-bottom: 5px; font-style: italic; }
.cw-page .info-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- SYSTEMS GRID / CARDS --------------------------------- */
.cw-page .systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .system-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .system-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .system-card__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .system-card__name { font-family: var(--font-heading); font-size: 14px; color: var(--cw-navy); margin-bottom: 5px; font-style: italic; }
.cw-page .system-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- DEPLOY GRID / CARDS ---------------------------------- */
.cw-page .deploy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .deploy-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 0.85rem 1rem;
  text-align: center;
  transition: box-shadow var(--transition);
}
.cw-page .deploy-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .deploy-card__icon { font-size: 20px; margin-bottom: 6px; }
.cw-page .deploy-card__label { font-size: 12px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .deploy-card__desc { font-size: 11.5px; color: var(--cw-muted); line-height: 1.5; }

/* --- BENEFIT GRID / CARDS --------------------------------- */
.cw-page .benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .benefit-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-top: 3px solid var(--ben-color, var(--cw-accent));
  border-radius: 0 0 4px 4px;
  padding: 0.9rem 1rem;
  text-align: center;
  transition: box-shadow var(--transition);
}
.cw-page .benefit-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .benefit-card__icon { font-size: 20px; margin-bottom: 5px; }
.cw-page .benefit-card__label { font-size: 12px; font-weight: 700; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .benefit-card__desc { font-size: 11.5px; color: var(--cw-muted); line-height: 1.5; }
/* Numbered variant */
.cw-page .benefit-card--numbered {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  border-top: none;
  border-radius: 4px;
}
.cw-page .benefit-card__num {
  font-family: var(--font-heading);
  font-size: 24px;
  font-style: italic;
  color: var(--cw-accent);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.cw-page .benefit-card__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 4px; }

/* --- RISK GRID / CARDS ------------------------------------ */
.cw-page .risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .risk-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-top: 3px solid #C8392B;
  border-radius: 0 0 4px 4px;
  padding: 0.85rem 1rem;
  text-align: center;
}
.cw-page .risk-card__label { font-size: 12px; font-weight: 600; color: #8B2318; margin-bottom: 3px; }
.cw-page .risk-card__desc { font-size: 11.5px; color: var(--cw-muted); line-height: 1.5; }

/* --- STAT ROW / CARDS ------------------------------------- */
.cw-page .stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .stat-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  text-align: center;
}
.cw-page .stat-card__number {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--cw-navy);
  font-style: italic;
  line-height: 1;
  margin-bottom: 5px;
}
.cw-page .stat-card__number span { color: var(--cw-accent); }
.cw-page .stat-card__label { font-size: 11px; color: var(--cw-muted); line-height: 1.45; }

/* --- DELIVERABLE GRID / CARDS ----------------------------- */
.cw-page .deliverable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cw-page .deliverable-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .deliverable-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .deliverable-card__num { font-family: var(--font-heading); font-size: 22px; font-style: italic; color: var(--cw-accent); margin-bottom: 5px; }
.cw-page .deliverable-card__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .deliverable-card__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- SIM CARD (product spec card) ------------------------- */
.cw-page .sim-card {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.cw-page .sim-card__header {
  background: var(--cw-navy);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.cw-page .sim-card__header::before {
  content: '';
  position: absolute;
  right: -20px;
  top: -20px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(200,146,42,0.1);
  pointer-events: none;
}
.cw-page .sim-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(200,146,42,0.2);
  border: 1px solid rgba(200,146,42,0.4);
  color: var(--cw-accent);
  border-radius: 3px;
  padding: 3px 10px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.cw-page .sim-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: normal;
  color: #fff;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}
.cw-page .spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--cw-border);
}
.cw-page .spec-item {
  padding: 0.85rem 1.1rem;
  border-right: 1px solid var(--cw-border);
}
.cw-page .spec-item:last-child { border-right: none; }
.cw-page .spec-item__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-muted); margin-bottom: 3px; }
.cw-page .spec-item__value { font-family: var(--font-heading); font-size: 16px; font-style: italic; color: var(--cw-navy); }
.cw-page .spec-item__unit { font-size: 11px; color: var(--cw-muted); margin-left: 2px; }
.cw-page .sim-card__desc { padding: 1rem 1.25rem; font-size: 13.5px; color: var(--cw-muted); line-height: 1.8; border-bottom: 1px solid var(--cw-border); }
.cw-page .sim-features { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 7px; }
.cw-page .sim-feature {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--cw-muted);
  line-height: 1.6;
}
.cw-page .sim-feature__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-accent);
  flex-shrink: 0;
  margin-top: 6px;
}
.cw-page .sim-card__footer {
  padding: 0.85rem 1.25rem;
  background: var(--cw-light);
  border-top: 1px solid var(--cw-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================================
   LISTS & ITEM PATTERNS
   ============================================================ */

/* --- FEATURE LIST / ITEMS --------------------------------- */
.cw-page .feature-list { display: flex; flex-direction: column; gap: 8px; }
.cw-page .feature-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.65rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
}
.cw-page .feature-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .feature-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- USE-CASE LIST / ITEMS -------------------------------- */
.cw-page .usecase-list { display: flex; flex-direction: column; gap: 8px; }
.cw-page .usecase-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.6rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
}
.cw-page .usecase-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .usecase-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- SERVICES LIST / ITEMS -------------------------------- */
.cw-page .services-list { display: flex; flex-direction: column; gap: 8px; }
.cw-page .service-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.75rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
  transition: box-shadow var(--transition);
  display: flex;
    align-items: baseline;
    gap: 8px;
}
.cw-page .service-item:hover { box-shadow: 0 2px 10px rgba(11,31,58,0.07); }
.cw-page .service-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .service-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- ADVANTAGES LIST / ITEMS ------------------------------ */
.cw-page .adv-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .adv-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.7rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
}
.cw-page .adv-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .adv-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- ADVANTAGES GRID -------------------------------------- */
.cw-page .adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

/* --- DCS GRID / ITEMS ------------------------------------- */
.cw-page .dcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.cw-page .dcs-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.65rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
}
.cw-page .dcs-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .dcs-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.55; }

/* --- OPS LIST / ITEMS ------------------------------------- */
.cw-page .ops-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .ops-item {
  border-left: 3px solid var(--cw-accent);
  padding: 0.65rem 1rem;
  background: var(--cw-white);
  border-radius: 0 4px 4px 0;
}
.cw-page .ops-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .ops-item__body { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- COMPONENT LIST / ITEMS ------------------------------- */
.cw-page .component-list { display: flex; flex-direction: column; gap: 7px; margin: 0.85rem 0 0; }
.cw-page .comp-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--cw-light);
  border-radius: 3px;
  padding: 0.6rem 0.85rem;
}
.cw-page .comp-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cw-accent);
  flex-shrink: 0;
  margin-top: 6px;
}
.cw-page .comp-item__text { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }
.cw-page .comp-item__text strong { color: var(--cw-navy); font-weight: 600; }

/* ============================================================
   HIGHLIGHT / DARK BLOCKS
   ============================================================ */

/* --- SEVERE-ACCIDENT HIGHLIGHT (dark red) ----------------- */
.cw-page .severe-highlight {
  background: #1A0808;
  color: #fff;
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  border: 1px solid #3D1515;
}
.cw-page .severe-highlight::before {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(200,146,42,0.07);
  pointer-events: none;
}
.cw-page .severe-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #E07070; margin-bottom: 0.5rem; }
.cw-page .severe-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; color: #fff; }
.cw-page .severe-highlight__body { font-size: 13px; color: rgba(255,255,255,0.68); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .severe-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .severe-cap {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 4px 11px;
  color: rgba(255,255,255,0.78);
}

/* --- GENERIC NAVY HIGHLIGHT BLOCK (shared structure) ------- */
.cw-page .sae-highlight,
.cw-page .sim-highlight,
.cw-page .igcc-highlight,
.cw-page .stations-highlight,
.cw-page .navy-highlight,
.cw-page .ert-highlight {
  background: var(--cw-navy);
  color: #fff;
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.cw-page .sae-highlight::before,
.cw-page .sim-highlight::before,
.cw-page .igcc-highlight::before,
.cw-page .stations-highlight::before,
.cw-page .navy-highlight::before,
.cw-page .ert-highlight::before {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(200,146,42,0.1);
  pointer-events: none;
}
.cw-page .ert-highlight::before { right: auto; bottom: -30px; top: auto; }

/* Shared label/title/body for all navy highlight blocks */
.cw-page .sae-highlight__label,
.cw-page .sim-highlight__label,
.cw-page .igcc-highlight__label,
.cw-page .stations-highlight__label,
.cw-page .navy-highlight__label,
.cw-page .ert-highlight__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-accent);
  margin-bottom: 0.5rem;
}
.cw-page .sae-highlight__title,
.cw-page .sim-highlight__title,
.cw-page .igcc-highlight__title,
.cw-page .stations-highlight__title,
.cw-page .navy-highlight__title,
.cw-page .ert-highlight__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: normal;
  margin-bottom: 0.85rem;
  line-height: 1.35;
}
.cw-page .sae-highlight__body,
.cw-page .sim-highlight__body,
.cw-page .igcc-highlight__body,
.cw-page .navy-highlight__body {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Capability tag strips inside navy highlight blocks */
.cw-page .sae-caps,
.cw-page .sim-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 1.1rem;
  position: relative;
  z-index: 1;
}
.cw-page .sae-cap,
.cw-page .sim-cap {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 4px 11px;
  color: rgba(255,255,255,0.82);
}

/* Stations grid inside stations-highlight */
.cw-page .stations-highlight__title { margin-bottom: 1rem; }
.cw-page .stations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  position: relative;
  z-index: 1;
}
.cw-page .station-item {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 0.85rem 1rem;
}
.cw-page .station-item__name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.cw-page .station-item__desc { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.55; }

/* ERT component grid inside ert-highlight */
.cw-page .ert-comp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
  position: relative;
  z-index: 1;
}
.cw-page .ert-comp {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 0.8rem 0.95rem;
}
.cw-page .ert-comp__name { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.cw-page .ert-comp__desc { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.55; }

/* IGCC systems inside igcc-highlight */
.cw-page .igcc-systems { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1.1rem; }
.cw-page .igcc-sys {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 4px 11px;
  color: rgba(255,255,255,0.82);
}

/* Customer tags inside navy-highlight */
.cw-page .customer-tags { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .customer-tag {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 4px 11px;
  color: rgba(255,255,255,0.82);
}

/* --- TAGLINE BLOCK ---------------------------------------- */
.cw-page .tagline-block {
  background: var(--cw-navy);
  color: #fff;
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-top: 1.25rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cw-page .tagline-block::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(200,146,42,0.08);
  pointer-events: none;
}
.cw-page .tagline-block__quote {
  font-family: var(--font-heading);
  font-size: 18px;
  font-style: italic;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.cw-page .tagline-block__quote span { color: var(--cw-accent); }
.cw-page .tagline-block__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  position: relative;
  z-index: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   CALLOUT / INLINE CTA PATTERNS
   ============================================================ */

/* --- BLINDSPOT / CALLOUT BOX ------------------------------ */
.cw-page .blindspot-block {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cw-page .blindspot-block__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .blindspot-block__text { font-size: 14px; color: var(--cw-text); line-height: 1.75; }
.cw-page .blindspot-block__text strong { color: var(--cw-navy); }

/* --- CALLOUT (CTA inline box) ----------------------------- */
.cw-page .callout {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.25rem;
}
.cw-page .callout__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.6; max-width: 440px; }
.cw-page .callout__text strong { color: var(--cw-navy); }
.cw-page .callout__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cw-accent);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background var(--transition);
}
.cw-page .callout__btn:hover { background: #b07d20; }

/* --- INTEGRATION CALLOUT ---------------------------------- */
.cw-page .integration-callout {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cw-page .integration-callout__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.6; max-width: 440px; }
.cw-page .integration-callout__text strong { color: var(--cw-navy); }
.cw-page .integration-callout__badge {
  font-size: 12px;
  font-weight: 600;
  background: var(--cw-navy);
  color: #fff;
  border-radius: 3px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* --- BROCHURE LINK ---------------------------------------- */
.cw-page .brochure-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }
.cw-page .brochure-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--cw-light);
  border: 1px solid var(--cw-border);
  color: var(--cw-navy);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cw-page .brochure-link:hover {
  border-color: var(--cw-accent);
  box-shadow: 0 2px 8px rgba(11,31,58,0.08);
}

/* ============================================================
   TAG CLOUDS & STRIPS
   ============================================================ */

/* --- INDUSTRIES / IND-TAG --------------------------------- */
.cw-page .industries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
.cw-page .ind-tag {
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  padding: 4px 12px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.02em;
}

/* --- REACTOR TAGS ----------------------------------------- */
.cw-page .reactor-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.cw-page .reactor-tag {
  font-size: 12px;
  font-weight: 600;
  background: var(--cw-navy);
  color: rgba(255,255,255,0.9);
  border-radius: 3px;
  padding: 5px 13px;
  letter-spacing: 0.04em;
}
.cw-page .reactor-tag--accent { background: var(--cw-accent); color: #fff; }

/* --- SIM TAGS --------------------------------------------- */
.cw-page .sim-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.cw-page .sim-tag {
  font-size: 12px;
  font-weight: 600;
  background: var(--cw-navy);
  color: rgba(255,255,255,0.9);
  border-radius: 3px;
  padding: 5px 13px;
  letter-spacing: 0.04em;
}
.cw-page .sim-tag--accent { background: var(--cw-accent); color: #fff; }

/* --- INTEGRATION / INT TAGS ------------------------------- */
.cw-page .int-block {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.25rem;
}
.cw-page .int-block__label { font-size: 12px; color: var(--cw-muted); margin-bottom: 10px; }
.cw-page .int-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-page .int-tag {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-light);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 4px 12px;
  color: var(--cw-text);
  letter-spacing: 0.02em;
}

/* --- UNIT CLOUD ------------------------------------------- */
.cw-page .unit-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-page .unit-tag {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 5px 12px;
  color: var(--cw-text);
  letter-spacing: 0.01em;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cw-page .unit-tag:hover { border-color: var(--cw-accent); box-shadow: 0 2px 8px rgba(11,31,58,0.08); }

/* --- OPS CLOUD -------------------------------------------- */
.cw-page .ops-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .ops-tag {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 5px 12px;
  color: var(--cw-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cw-page .ops-tag:hover { border-color: var(--cw-accent); box-shadow: 0 2px 8px rgba(11,31,58,0.08); }

/* --- CONTROL SYSTEM TAGS ---------------------------------- */
.cw-page .cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.cw-page .cs-tag {
  font-size: 12px;
  font-weight: 600;
  background: var(--cw-navy);
  color: rgba(255,255,255,0.9);
  border-radius: 3px;
  padding: 5px 13px;
  letter-spacing: 0.04em;
}
.cw-page .cs-tag--accent { background: var(--cw-accent); color: #fff; }

/* --- AUDIENCE STRIP --------------------------------------- */
.cw-page .audience-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .audience-tag {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 5px 12px;
  color: var(--cw-text);
  transition: border-color var(--transition);
}
.cw-page .audience-tag:hover { border-color: var(--cw-accent); }

/* --- SIMULATOR AVAILABLE TAGS ----------------------------- */
.cw-page .sim-avail { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .sim-avail-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cw-navy);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cw-page .sim-avail-tag:hover { border-color: var(--cw-accent); box-shadow: 0 2px 8px rgba(11,31,58,0.08); }
.cw-page .sim-avail-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cw-accent);
  flex-shrink: 0;
}

/* --- CONTENT TAGS ----------------------------------------- */
.cw-page .content-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 0.75rem; }
.cw-page .content-tag {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-light);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 4px 11px;
  color: var(--cw-text);
}

/* --- GENERIC TAG BLOCK / CLOUD / ITEMS -------------------- */
.cw-page .twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1.25rem;
}
@media (max-width: 480px) { .cw-page .twocol { grid-template-columns: 1fr; } }

.cw-page .tag-block {
  background: var(--cw-white);
  border: 1px solid var(--cw-border);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}
.cw-page .tag-block__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cw-blue);
  margin-bottom: 8px;
}
.cw-page .tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-page .tag-item {
  font-size: 12px;
  font-weight: 500;
  background: var(--cw-light);
  border: 1px solid var(--cw-border);
  border-radius: 3px;
  padding: 4px 10px;
  color: var(--cw-text);
  transition: border-color var(--transition);
}
.cw-page .tag-item:hover { border-color: var(--cw-accent); }

/* ============================================================
   ADDITIONAL COMPONENTS (Pages 15–87, capabilities)
   ============================================================ */

/* --- MODE CARD: alternate element names (Page-37) ---------- */
.cw-page .mode-card__title { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .mode-card__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- BENEFIT CARD: tag/name/desc variant (Page-17) --------- */
.cw-page .benefit-card__tag  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .benefit-card__name { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .benefit-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- KEYCLASS BLOCK --------------------------------------- */
.cw-page .keyclass-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-top: 1.25rem;
}
.cw-page .keyclass-block__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .keyclass-block__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; }
.cw-page .keyclass-block__text strong { color: var(--cw-navy); }

/* --- PART-TASK HIGHLIGHT ---------------------------------- */
.cw-page .parttask-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .parttask-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .parttask-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .parttask-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .parttask-highlight__body { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }

/* --- SIM TIER GRID ---------------------------------------- */
.cw-page .sim-tier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .sim-tier {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem;
  transition: box-shadow var(--transition);
}
.cw-page .sim-tier--featured {
  border-top: 3px solid var(--cw-accent); border-radius: 0 0 4px 4px;
}
.cw-page .sim-tier__tag  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 5px; }
.cw-page .sim-tier__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .sim-tier__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- PLANT TAGS ------------------------------------------- */
.cw-page .plant-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-page .plant-tag {
  font-size: 12px; font-weight: 500; background: var(--cw-white);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 4px 12px; color: var(--cw-text);
}
.cw-page .plant-tag--accent { background: var(--cw-navy); color: #fff; border-color: var(--cw-navy); font-weight: 600; }

/* --- INTEGRATION HIGHLIGHT -------------------------------- */
.cw-page .integration-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .integration-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .integration-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .integration-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .integration-highlight__body { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .int-caps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1rem; position: relative; z-index: 1; }
.cw-page .int-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- CATALOG STEPS ---------------------------------------- */
.cw-page .catalog-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0; border: 1px solid var(--cw-border); border-radius: 4px;
  overflow: hidden; margin-bottom: 1.25rem;
}
.cw-page .cat-step {
  padding: 1rem 1.1rem; border-right: 1px solid var(--cw-border);
  background: var(--cw-white);
}
.cw-page .cat-step:last-child { border-right: none; }
.cw-page .cat-step__num  { font-family: var(--font-heading); font-size: 20px; font-style: italic; color: var(--cw-accent); line-height: 1; margin-bottom: 4px; }
.cw-page .cat-step__label { font-size: 12px; font-weight: 700; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .cat-step__desc  { font-size: 11.5px; color: var(--cw-muted); line-height: 1.55; }

/* --- COMP TAGS -------------------------------------------- */
.cw-page .comp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cw-page .comp-tag {
  font-size: 12px; font-weight: 500; background: var(--cw-light);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 4px 11px; color: var(--cw-text);
}

/* --- LIFECYCLE -------------------------------------------- */
.cw-page .lifecycle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1.25rem; }
.cw-page .lifecycle-step {
  display: flex; align-items: center; gap: 12px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 0.65rem 1rem;
  transition: box-shadow var(--transition);
}
.cw-page .lifecycle-step:hover { box-shadow: 0 2px 8px rgba(11,31,58,0.07); }
.cw-page .lifecycle-step__dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--cw-navy); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cw-page .lifecycle-step__content { flex: 1; }
.cw-page .lifecycle-step__label { font-size: 13px; font-weight: 500; color: var(--cw-text); }

/* --- INDUSTRY TAGS ---------------------------------------- */
.cw-page .industry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-page .industry-tag {
  font-size: 12px; font-weight: 500; background: var(--cw-white);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 4px 12px; color: var(--cw-text);
}
.cw-page .industry-tag--accent { background: var(--cw-navy); color: #fff; border-color: var(--cw-navy); font-weight: 600; }

/* --- PERSONNEL LIST --------------------------------------- */
.cw-page .personnel-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .personnel-item {
  border-left: 3px solid var(--cw-accent); padding: 0.7rem 1rem;
  background: var(--cw-white); border-radius: 0 4px 4px 0;
}
.cw-page .personnel-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .personnel-item__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- ROI HIGHLIGHT ---------------------------------------- */
.cw-page .roi-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .roi-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .roi-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .roi-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .roi-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .roi-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .roi-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- OUTCOME CARDS ---------------------------------------- */
.cw-page .outcome-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .outcome-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.1rem; text-align: center;
  transition: box-shadow var(--transition);
}
.cw-page .outcome-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .outcome-card__icon  { font-size: 20px; margin-bottom: 7px; }
.cw-page .outcome-card__label { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .outcome-card__sub   { font-size: 12px; color: var(--cw-muted); line-height: 1.55; }

/* --- PHILOSOPHY BLOCK ------------------------------------- */
.cw-page .philosophy-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
}
.cw-page .philosophy-block__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .philosophy-block__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; }
.cw-page .philosophy-block__text strong { color: var(--cw-navy); }

/* --- SPLIT GRID ------------------------------------------- */
.cw-page .split-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.25rem;
}
@media (max-width: 480px) { .cw-page .split-grid { grid-template-columns: 1fr; } }
.cw-page .split-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem;
  transition: box-shadow var(--transition);
}
.cw-page .split-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .split-card--with    { border-top: 3px solid var(--cw-blue); border-radius: 0 0 4px 4px; }
.cw-page .split-card--without { border-top: 3px solid var(--cw-accent); border-radius: 0 0 4px 4px; }
.cw-page .split-card__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .split-card__title { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .split-card__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- ITS HIGHLIGHT ---------------------------------------- */
.cw-page .its-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .its-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .its-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .its-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .its-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .its-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .its-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- VIDEO BLOCK ------------------------------------------ */
.cw-page .video-block {
  background: var(--cw-navy); border-radius: 4px;
  padding: 2.5rem 2rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  margin-bottom: 1.25rem; cursor: pointer;
  transition: opacity var(--transition);
}
.cw-page .video-block:hover { opacity: 0.9; }
.cw-page .video-block__play {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--cw-accent); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.cw-page .video-block__title { font-family: var(--font-heading); font-size: 17px; color: #fff; margin-bottom: 4px; }
.cw-page .video-block__sub   { font-size: 12px; color: rgba(255,255,255,0.55); }

/* --- TOOL LIST / TOOL CARD EXTENDED ----------------------- */
.cw-page .tool-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.25rem; }
.cw-page .tool-card__header { display: flex; align-items: center; gap: 14px; padding: 1rem 1.25rem; background: var(--cw-white); }
.cw-page .tool-card__meta   { flex: 1; }
.cw-page .tool-card__body   { padding: 0 1.25rem 1.1rem; font-size: 13px; color: var(--cw-muted); line-height: 1.75; }
.cw-page .tool-card__caps   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0.75rem; }
.cw-page .tool-cap {
  font-size: 11px; background: var(--cw-light); border: 1px solid var(--cw-border);
  border-radius: 3px; padding: 3px 9px; color: var(--cw-text);
}

/* --- MACRO BLOCK ------------------------------------------ */
.cw-page .macro-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-top: 1.25rem;
}
.cw-page .macro-block__icon    { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .macro-block__content { flex: 1; }
.cw-page .macro-block__label   { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 4px; }
.cw-page .macro-block__title   { font-size: 14px; font-weight: 600; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .macro-block__body    { font-size: 13px; color: var(--cw-muted); line-height: 1.7; }

/* --- PILL STRIP ------------------------------------------- */
.cw-page .pill-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .pill {
  font-size: 12px; font-weight: 500; background: var(--cw-white);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 5px 12px; color: var(--cw-text);
}

/* --- FEAT GRID / FEAT CARD -------------------------------- */
.cw-page .feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .feat-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .feat-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .feat-card__tag  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .feat-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .feat-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- TOOL HIGHLIGHT --------------------------------------- */
.cw-page .tool-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .tool-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .tool-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .tool-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .tool-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .tool-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }

/* --- SCENARIO GRID ---------------------------------------- */
.cw-page .scenario-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .scenario-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem;
  transition: box-shadow var(--transition);
}
.cw-page .scenario-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .scenario-card__title { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .scenario-card__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- DCS SPECTRUM ----------------------------------------- */
.cw-page .spectrum-wrap { margin-bottom: 1.25rem; }
.cw-page .spectrum-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--cw-muted); margin-bottom: 6px;
}
.cw-page .spectrum-bar {
  height: 4px; background: linear-gradient(to right, var(--cw-blue), var(--cw-accent));
  border-radius: 2px; margin-bottom: 10px;
}
.cw-page .spectrum-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
}
.cw-page .approach-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-top: 3px solid var(--ap-color, var(--cw-accent));
  border-radius: 0 0 4px 4px; padding: 1rem 1.1rem;
  transition: box-shadow var(--transition);
}
.cw-page .approach-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .approach-card__num  { font-family: var(--font-heading); font-size: 20px; font-style: italic; color: var(--ap-color, var(--cw-accent)); margin-bottom: 4px; }
.cw-page .approach-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .approach-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- PLATFORM HIGHLIGHT ----------------------------------- */
.cw-page .platform-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .platform-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .platform-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .platform-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .platform-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .platform-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .platform-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- NRC BLOCK / REACH BLOCK (info + icon) ---------------- */
.cw-page .nrc-block,
.cw-page .reach-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
}
.cw-page .nrc-block__icon,   .cw-page .reach-block__icon    { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .nrc-block__content,.cw-page .reach-block__content  { flex: 1; }
.cw-page .nrc-block__label,  .cw-page .reach-block__label   { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .nrc-block__text,   .cw-page .reach-block__text    { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; }

/* --- PROCESS GRID (assessments) --------------------------- */
.cw-page .process-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .process-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem;
  transition: box-shadow var(--transition);
}
.cw-page .process-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .process-card__num   { font-family: var(--font-heading); font-size: 22px; font-style: italic; color: var(--cw-accent); margin-bottom: 4px; }
.cw-page .process-card__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .process-card__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- UPGRADE LIST ----------------------------------------- */
.cw-page .upgrade-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .upgrade-item {
  border-left: 3px solid var(--cw-accent); padding: 0.7rem 1rem;
  background: var(--cw-white); border-radius: 0 4px 4px 0;
}
.cw-page .upgrade-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .upgrade-item__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- STANDARDS STRIP -------------------------------------- */
.cw-page .standards-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1rem; }
.cw-page .standard-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 8px 14px;
  font-size: 13px; font-weight: 600; color: var(--cw-navy);
}
.cw-page .standard-badge__icon { font-size: 16px; }

/* --- AUDIENCE GRID ---------------------------------------- */
.cw-page .audience-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .audience-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem; text-align: center;
  transition: box-shadow var(--transition);
}
.cw-page .audience-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .audience-card__icon  { font-size: 22px; margin-bottom: 7px; }
.cw-page .audience-card__label { font-size: 12px; font-weight: 600; color: var(--cw-navy); }
.cw-page .audience-card__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .audience-card__desc  { font-size: 12px; color: var(--cw-muted); line-height: 1.55; }

/* --- CURRICULUM BLOCK ------------------------------------- */
.cw-page .curriculum-header {
  background: var(--cw-navy); border-radius: 4px 4px 0 0;
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.cw-page .curriculum-header::before {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .curriculum-header__badge {
  font-size: 12px; font-weight: 600;
  background: rgba(200,146,42,0.15); border: 1px solid rgba(200,146,42,0.3);
  color: var(--cw-accent); border-radius: 3px; padding: 4px 12px;
  white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1;
}
.cw-page .curriculum-header__title { font-size: 14px; font-weight: 600; color: #fff; position: relative; z-index: 1; }
.cw-page .curriculum-body {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-top: none; border-radius: 0 0 4px 4px;
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.cw-page .module-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px;
}
.cw-page .module-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--cw-light); border-radius: 3px; padding: 0.55rem 0.85rem;
}
.cw-page .module-item__num  { font-size: 11px; font-weight: 700; color: var(--cw-accent); flex-shrink: 0; min-width: 20px; }
.cw-page .module-item__text { font-size: 12.5px; color: var(--cw-text); line-height: 1.4; }

/* --- SPECIALIZED HIGHLIGHT -------------------------------- */
.cw-page .specialized-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .specialized-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .specialized-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .specialized-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .specialized-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .duration-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px; position: relative; z-index: 1;
}
.cw-page .duration-item {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px; padding: 0.75rem 1rem;
}
.cw-page .duration-item__value { font-family: var(--font-heading); font-size: 16px; font-style: italic; color: var(--cw-accent); margin-bottom: 3px; }
.cw-page .duration-item__label { font-size: 11px; color: rgba(255,255,255,0.6); }

/* --- ROLE STRIP / ROLE TAGS / ROLE BADGES ----------------- */
.cw-page .role-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .role-tag {
  font-size: 12px; font-weight: 500; background: var(--cw-white);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 5px 12px; color: var(--cw-text);
}
.cw-page .role-badge { font-size: 12px; font-weight: 600; border-radius: 3px; padding: 4px 12px; background: var(--cw-light); border: 1px solid var(--cw-border); color: var(--cw-text); }
.cw-page .role-badge--eng  { background: #E6F1FB; border-color: #b0ccee; color: #1A4A8A; }
.cw-page .role-badge--inst { background: #FAEEDA; border-color: #e5c882; color: #8a5a10; }
.cw-page .role-badge--op   { background: #EAF3DE; border-color: #a8d080; color: #1A6B3A; }
.cw-page .role-badge--tr   { background: #EEEDFE; border-color: #b0aae5; color: #534AB7; }

/* --- EXPERTISE HIGHLIGHT ---------------------------------- */
.cw-page .expertise-highlight {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-top: 1.25rem;
}
.cw-page .expertise-highlight__icon    { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .expertise-highlight__content { flex: 1; }
.cw-page .expertise-highlight__label   { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .expertise-highlight__text    { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; }

/* --- SERVICE GROUP ---------------------------------------- */
.cw-page .service-group { margin-bottom: 1rem; }
.cw-page .service-group__header {
  background: var(--cw-navy); color: #fff; font-size: 12px; font-weight: 600;
  padding: 0.6rem 1rem; border-radius: 4px 4px 0 0;
  display: flex; align-items: center; gap: 8px;
}
.cw-page .service-group__header-icon { font-size: 14px; }
.cw-page .service-group__body {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-top: none; border-radius: 0 0 4px 4px;
  padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 6px;
}
.cw-page .service-item--sub             { padding-left: 1.5rem; padding-left: 18px;}
.cw-page .service-item__dot             { width: 6px; height: 6px; border-radius: 50%; background: var(--cw-accent); flex-shrink: 0; margin-top: 7px; }
.cw-page .service-item--sub .service-item__dot { background: var(--cw-muted); }
.cw-page .service-item__text            { font-size: 13px; color: var(--cw-text); line-height: 1.55; }

/* --- HERO ACCENT / SECTION--WHITE ------------------------- */
.cw-page .hero__accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cw-accent); }
.cw-page .section--white { background: var(--cw-white); }

/* --- FEATURED CARD (newsletter) --------------------------- */
.cw-page .featured-card {
  background: var(--cw-navy); border-radius: 4px; padding: 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  cursor: pointer; margin-bottom: 1.25rem;
  transition: opacity var(--transition);
}
.cw-page .featured-card:hover { opacity: 0.88; }
.cw-page .featured-card__badge { font-family: var(--font-heading); font-size: 32px; font-style: italic; color: var(--cw-accent); flex-shrink: 0; }
.cw-page .featured-card__meta  { flex: 1; }
.cw-page .featured-card__label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 4px; }
.cw-page .featured-card__name  { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.cw-page .featured-card__sub   { font-size: 12px; color: rgba(255,255,255,0.5); }
.cw-page .featured-card__btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--cw-accent); color: #fff; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 4px;
  white-space: nowrap; flex-shrink: 0; transition: background var(--transition);
}
.cw-page .featured-card__btn svg { width: 16px; height: 16px; fill: #fff; }
.cw-page .featured-card__btn:hover { background: #b07d20; }

/* --- ARCHIVE GRID / NL CARD ------------------------------- */
.cw-page .archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.cw-page .nl-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem; text-align: center; cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .nl-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.1); border-color: var(--cw-accent); }
.cw-page .nl-card__icon { margin-bottom: 6px; }
.cw-page .nl-card__icon svg { width: 24px; height: 24px; fill: var(--cw-muted); }
.cw-page .nl-card__year { font-family: var(--font-heading); font-size: 16px; font-style: italic; color: var(--cw-navy); margin-bottom: 8px; }
.cw-page .nl-card__btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--cw-light); border: 1px solid var(--cw-border);
  color: var(--cw-navy); cursor: pointer; font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 3px; width: 100%; transition: background var(--transition);
}
.cw-page .nl-card__btn svg { width: 14px; height: 14px; fill: var(--cw-navy); }
.cw-page .nl-card__btn:hover { background: var(--cw-border); }

/* --- DOC GRID / DOC CARD ---------------------------------- */
.cw-page .doc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .doc-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1.25rem 1.25rem 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .doc-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: #b0bfcf; }
.cw-page .doc-card__icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cw-page .doc-card__icon svg { width: 28px; height: 28px; fill: var(--cw-navy); }
.cw-page .doc-card__name { font-size: 13px; font-weight: 600; color: var(--cw-navy); line-height: 1.4; margin-bottom: 12px; flex: 1; }
.cw-page .doc-card__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--cw-accent); color: #fff; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 4px; width: 100%;
  transition: background var(--transition);
}
.cw-page .doc-card__btn svg { width: 16px; height: 16px; fill: #fff; }
.cw-page .doc-card__btn:hover { background: #b07d20; }

/* --- VIDEO GRID / MODAL ----------------------------------- */
.cw-page .video-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; transition: opacity 0.25s, visibility 0.25s;
}
.cw-page .modal-overlay.is-open { visibility: visible; opacity: 1; }
.cw-page .modal-box {
  background: var(--cw-white); border-radius: 4px;
  width: min(90vw, 800px); max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.cw-page .modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: rgba(255,255,255,0.7); transition: color var(--transition);
}
.cw-page .modal-close:hover { color: #fff; }
.cw-page .modal-title { background: var(--cw-navy); color: #fff; font-size: 14px; font-weight: 600; padding: 1rem 1.25rem; position: relative; }
.cw-page .modal-frame { flex: 1; }
.cw-page .modal-frame iframe { width: 100%; height: 100%; min-height: 400px; border: none; display: block; }

/* --- BANNER (photo + overlay) ----------------------------- */
.cw-page .banner { position: relative; height: 260px; overflow: hidden; display: flex; align-items: flex-end; }
.cw-page .banner__img     { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cw-page .banner__overlay { position: absolute; inset: 0; background: rgba(11,31,58,0.65); }
.cw-page .banner__accent  { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--cw-accent); }
.cw-page .banner__content { position: relative; z-index: 1; padding: 1.5rem 2rem 0; flex: 1; }
.cw-page .banner__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .banner__title   { font-family: var(--font-heading); font-size: 26px; font-weight: normal; color: #fff; }
.cw-page .banner__title strong { color: var(--cw-accent); font-style: italic; }
.cw-page .banner__bar     { position: relative; z-index: 1; background: rgba(0,0,0,0.35); padding: 0.55rem 2rem; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; }
.cw-page .banner__bar-text { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* --- CW BADGE --------------------------------------------- */
.cw-page .cw-badge {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-navy); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
}
.cw-page .cw-badge__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .cw-badge__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; }
.cw-page .cw-badge__text strong { color: var(--cw-navy); }

/* --- PILLARS GRID / PILLAR GRID / PILLAR CARD ------------- */
.cw-page .pillars-grid,
.cw-page .pillar-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .pillar-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.1rem;
  transition: box-shadow var(--transition);
}
.cw-page .pillar-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .pillar-card__icon  { font-size: 20px; margin-bottom: 6px; }
.cw-page .pillar-card__title { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 4px; }
.cw-page .pillar-card__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- RENAISSANCE BLOCK ------------------------------------ */
.cw-page .renaissance-block {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .renaissance-block::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .renaissance-block__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .renaissance-block__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .renaissance-block__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; }

/* --- GROWTH GRID ------------------------------------------ */
.cw-page .growth-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .growth-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.15rem; transition: box-shadow var(--transition);
}
.cw-page .growth-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .growth-card__num     { font-family: var(--font-heading); font-size: 24px; font-style: italic; color: var(--cw-accent); flex-shrink: 0; min-width: 48px; line-height: 1; }
.cw-page .growth-card__content { flex: 1; }
.cw-page .growth-card__title   { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .growth-card__body    { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- MISSION WRAP ----------------------------------------- */
.cw-page .mission-wrap { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; overflow: hidden; margin-bottom: 1.25rem; }
.cw-page .mission-header {
  background: var(--cw-navy); padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden;
}
.cw-page .mission-header::before {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .mission-header__badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(200,146,42,0.15); border: 1px solid rgba(200,146,42,0.3);
  color: var(--cw-accent); border-radius: 3px; padding: 4px 10px;
  flex-shrink: 0; position: relative; z-index: 1;
}
.cw-page .mission-header__title { font-size: 14px; font-weight: 600; color: #fff; position: relative; z-index: 1; }
.cw-page .mission-items { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 10px; }
.cw-page .mission-item  { display: flex; align-items: flex-start; gap: 14px; }
.cw-page .mission-item__num  { font-family: var(--font-heading); font-size: 20px; font-style: italic; color: var(--cw-accent); flex-shrink: 0; min-width: 32px; line-height: 1; }
.cw-page .mission-item__text { font-size: 13px; color: var(--cw-text); line-height: 1.7; }

/* --- PARTNER CARD ----------------------------------------- */
.cw-page .partner-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; overflow: hidden; margin-bottom: 1rem;
  transition: box-shadow var(--transition);
}
.cw-page .partner-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); }
.cw-page .partner-card__header {
  background: var(--cw-light); border-bottom: 1px solid var(--cw-border);
  padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cw-page .partner-card__initials {
  width: 42px; height: 42px; border-radius: 4px;
  background: var(--cw-navy); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cw-page .partner-card__meta   { flex: 1; }
.cw-page .partner-card__name   { font-size: 14px; font-weight: 600; color: var(--cw-navy); }
.cw-page .partner-card__region { font-size: 11.5px; color: var(--cw-muted); }
.cw-page .partner-card__link   { font-size: 12px; color: var(--cw-blue); text-decoration: none; margin-left: auto; transition: color var(--transition); }
.cw-page .partner-card__link:hover { color: var(--cw-accent); }
.cw-page .partner-card__body   { padding: 1rem 1.25rem; font-size: 13.5px; color: var(--cw-muted); line-height: 1.8; }
.cw-page .partner-collab { background: var(--cw-light); border-radius: 3px; padding: 0.65rem 0.85rem; margin-top: 0.85rem; font-size: 12.5px; color: var(--cw-muted); line-height: 1.65; }
.cw-page .partner-projects { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 0.75rem; }
.cw-page .partner-project {
  font-size: 11px; font-weight: 500; background: var(--cw-light);
  border: 1px solid var(--cw-border); border-radius: 3px; padding: 3px 10px; color: var(--cw-text);
}

/* --- INL HIGHLIGHT ---------------------------------------- */
.cw-page .inl-highlight {
  background: rgba(11,31,58,0.85); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px; padding: 1rem 1.25rem; margin-top: 0.85rem;
}
.cw-page .inl-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .inl-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.75; margin-bottom: 0.75rem; }
.cw-page .inl-projects { display: flex; flex-wrap: wrap; gap: 6px; }
.cw-page .inl-proj {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 3px 10px; color: rgba(255,255,255,0.8);
}

/* --- STAT STRIP / STAT MINI ------------------------------- */
.cw-page .stat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 0.85rem 0; }
.cw-page .stat-mini { background: var(--cw-light); border: 1px solid var(--cw-border); border-radius: 4px; padding: 0.65rem 1rem; text-align: center; }
.cw-page .stat-mini__num   { font-family: var(--font-heading); font-size: 18px; font-style: italic; color: var(--cw-accent); line-height: 1; margin-bottom: 2px; }
.cw-page .stat-mini__label { font-size: 11px; color: var(--cw-muted); }

/* --- ISO BADGE -------------------------------------------- */
.cw-page .iso-badge-wrap { display: flex; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cw-page .iso-badge { background: var(--cw-navy); color: #fff; border-radius: 4px; padding: 1rem 1.5rem; text-align: center; flex-shrink: 0; min-width: 120px; }
.cw-page .iso-badge__std   { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 4px; }
.cw-page .iso-badge__num   { font-family: var(--font-heading); font-size: 24px; font-style: italic; color: #fff; line-height: 1; }
.cw-page .iso-badge__year  { font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.cw-page .iso-badge__label { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.03em; }
.cw-page .iso-description  { flex: 1; font-size: 13.5px; color: var(--cw-muted); line-height: 1.8; }

/* --- AGILE HIGHLIGHT -------------------------------------- */
.cw-page .agile-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .agile-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .agile-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .agile-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .agile-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .agile-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .agile-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- PROCESS CYCLE ---------------------------------------- */
.cw-page .process-cycle { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem; }
.cw-page .process-step {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 0.65rem 1rem;
  display: flex; align-items: center; gap: 8px; min-width: 100px; flex: 1;
  transition: box-shadow var(--transition);
}
.cw-page .process-step:hover { box-shadow: 0 2px 8px rgba(11,31,58,0.07); }
.cw-page .process-step__num   { font-family: var(--font-heading); font-size: 16px; font-style: italic; color: var(--cw-accent); flex-shrink: 0; }
.cw-page .process-step__label { font-size: 12.5px; font-weight: 500; color: var(--cw-navy); }

/* --- ENGAGE LIST ------------------------------------------ */
.cw-page .engage-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .engage-item {
  border-left: 3px solid var(--cw-accent); padding: 0.7rem 1rem;
  background: var(--cw-white); border-radius: 0 4px 4px 0;
}
.cw-page .engage-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .engage-item__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- PLEDGE BLOCK ----------------------------------------- */
.cw-page .pledge-block {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-left: 4px solid var(--cw-accent); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem; margin-top: 1.25rem;
}
.cw-page .pledge-block__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.cw-page .pledge-block__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.75; font-style: italic; }
.cw-page .pledge-block__text strong { font-style: normal; color: var(--cw-navy); }

/* --- CONTACT LAYOUT --------------------------------------- */
.cw-page .contact-layout {
  display: grid; grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 1.5rem; margin-bottom: 1.25rem;
}
@media (max-width: 600px) { .cw-page .contact-layout { grid-template-columns: 1fr; } }
.cw-page .contact-card { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; padding: 1.25rem; }
.cw-page .contact-card__label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 8px; }
.cw-page .contact-card__name  { font-size: 14px; font-weight: 600; color: var(--cw-navy); margin-bottom: 1rem; line-height: 1.5; }
.cw-page .contact-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; font-size: 13.5px; color: var(--cw-text); }
.cw-page .contact-row__icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.cw-page .contact-row__text a { color: var(--cw-blue); text-decoration: none; }
.cw-page .contact-row__text a:hover { color: var(--cw-accent); }
.cw-page .map-frame { border-radius: 4px; overflow: hidden; border: 1px solid var(--cw-border); min-height: 220px; }
.cw-page .map-frame iframe { width: 100%; height: 100%; min-height: 220px; display: block; border: none; }

/* --- ACTION ROW / BUTTONS --------------------------------- */
.cw-page .action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.25rem; }
.cw-page .action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cw-light); border: 1px solid var(--cw-border);
  color: var(--cw-navy); text-decoration: none; font-size: 12px; font-weight: 600;
  padding: 8px 16px; border-radius: 4px; transition: border-color var(--transition), box-shadow var(--transition);
}
.cw-page .action-btn:hover { border-color: var(--cw-accent); box-shadow: 0 2px 8px rgba(11,31,58,0.08); }
.cw-page .action-btn--primary { background: var(--cw-accent); color: #fff; border-color: var(--cw-accent); }
.cw-page .action-btn--primary:hover { background: #b07d20; border-color: #b07d20; }

/* --- AIRPORT GRID / CARDS --------------------------------- */
.cw-page .airport-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 1.25rem;
}
.cw-page .airport-card {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 1rem 1.25rem;
  display: flex; align-items: flex-start; gap: 12px; text-decoration: none;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.cw-page .airport-card:hover { box-shadow: 0 4px 16px rgba(11,31,58,0.1); border-color: var(--cw-accent); }
.cw-page .airport-card__icon    { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.cw-page .airport-card__content { flex: 1; }
.cw-page .airport-card__code    { font-size: 16px; font-weight: 700; color: var(--cw-navy); margin-bottom: 2px; }
.cw-page .airport-card__name    { font-size: 13px; font-weight: 500; color: var(--cw-text); margin-bottom: 4px; }
.cw-page .airport-card__sub     { font-size: 11.5px; color: var(--cw-muted); }

/* --- TOURISM BLOCK ---------------------------------------- */
.cw-page .tourism-block { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; overflow: hidden; margin-bottom: 1.25rem; }
.cw-page .tourism-block__header { background: var(--cw-navy); padding: 1rem 1.25rem; display: flex; align-items: center; gap: 10px; }
.cw-page .tourism-block__icon   { font-size: 20px; }
.cw-page .tourism-block__title  { font-size: 14px; font-weight: 600; color: #fff; }
.cw-page .tourism-block__body   { padding: 1.1rem 1.25rem; font-size: 13.5px; color: var(--cw-muted); line-height: 1.8; }
.cw-page .tourism-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 0.85rem 0; }
.cw-page .tourism-tag {
  font-size: 12px; font-weight: 500; background: var(--cw-light);
  border: 1px solid var(--cw-border); border-radius: 3px; padding: 4px 10px; color: var(--cw-text);
}
.cw-page .tourism-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cw-blue); text-decoration: none; font-size: 13px; font-weight: 600; transition: color var(--transition); }
.cw-page .tourism-link:hover { color: var(--cw-accent); }
.cw-page .feedback-block {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  background: var(--cw-light); border: 1px solid var(--cw-border); border-radius: 4px;
  padding: 1rem 1.25rem; margin-top: 1.25rem;
}
.cw-page .feedback-block__text { font-size: 13.5px; color: var(--cw-text); line-height: 1.6; }

/* --- SOURCE CARDS (renewable) ----------------------------- */
.cw-page .source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.cw-page .source-card { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; padding: 1rem 1.15rem; transition: box-shadow var(--transition); }
.cw-page .source-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); }
.cw-page .source-card--solar { border-top: 3px solid #C8922A; border-radius: 0 0 4px 4px; }
.cw-page .source-card--wind  { border-top: 3px solid #1A6B3A; border-radius: 0 0 4px 4px; }
.cw-page .source-card--grid  { border-top: 3px solid #1A4A8A; border-radius: 0 0 4px 4px; }
.cw-page .source-card__tag  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .source-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .source-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- TOPIC LIST ------------------------------------------- */
.cw-page .topic-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.25rem; }
.cw-page .topic-item { border-left: 3px solid var(--cw-accent); padding: 0.7rem 1rem; background: var(--cw-white); border-radius: 0 4px 4px 0; }
.cw-page .topic-item__title { font-size: 13px; font-weight: 600; color: var(--cw-navy); margin-bottom: 3px; }
.cw-page .topic-item__body  { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- SMARTGRID HIGHLIGHT ---------------------------------- */
.cw-page .smartgrid-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .smartgrid-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .smartgrid-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .smartgrid-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .smartgrid-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
.cw-page .grid-caps { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .grid-cap {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- WORKFLOW --------------------------------------------- */
.cw-page .workflow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem; }
.cw-page .workflow-step {
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 4px; padding: 0.65rem 1rem;
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 90px;
  transition: box-shadow var(--transition);
}
.cw-page .workflow-step:hover { box-shadow: 0 2px 8px rgba(11,31,58,0.07); }
.cw-page .workflow-step__num   { font-family: var(--font-heading); font-size: 16px; font-style: italic; color: var(--cw-accent); flex-shrink: 0; }
.cw-page .workflow-step__label { font-size: 12.5px; font-weight: 500; color: var(--cw-navy); }

/* --- ARCH HIGHLIGHT --------------------------------------- */
.cw-page .arch-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .arch-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .arch-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .arch-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 1rem; line-height: 1.35; }
.cw-page .arch-tags { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }
.cw-page .arch-tag {
  font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 3px; padding: 4px 11px; color: rgba(255,255,255,0.82);
}

/* --- USES GRID / USE CARD --------------------------------- */
.cw-page .uses-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.cw-page .use-card { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; padding: 1rem 1.15rem; transition: box-shadow var(--transition), border-color var(--transition); }
.cw-page .use-card:hover { box-shadow: 0 4px 12px rgba(11,31,58,0.08); border-color: #b0bfcf; }
.cw-page .use-card__tag  { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cw-blue); margin-bottom: 5px; }
.cw-page .use-card__name { font-size: 13px; font-weight: 700; color: var(--cw-navy); margin-bottom: 5px; }
.cw-page .use-card__desc { font-size: 12.5px; color: var(--cw-muted); line-height: 1.6; }

/* --- GES HIGHLIGHT ---------------------------------------- */
.cw-page .ges-highlight {
  background: var(--cw-navy); color: #fff; border-radius: 4px;
  padding: 1.5rem 1.75rem; margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.cw-page .ges-highlight::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(200,146,42,0.1); pointer-events: none;
}
.cw-page .ges-highlight__label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-accent); margin-bottom: 0.5rem; }
.cw-page .ges-highlight__title { font-family: var(--font-heading); font-size: 17px; font-weight: normal; margin-bottom: 0.85rem; line-height: 1.35; }
.cw-page .ges-highlight__body  { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1.25rem; }
.cw-page .ges-feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px; position: relative; z-index: 1;
}
.cw-page .ges-feat { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); border-radius: 4px; padding: 0.85rem 1rem; }
.cw-page .ges-feat__title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.cw-page .ges-feat__desc  { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.55; }

/* --- REACH STRIP / REACH CARDS (customers) ---------------- */
.cw-page .reach-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin-bottom: 1.25rem;
}
.cw-page .reach-card { background: var(--cw-white); border: 1px solid var(--cw-border); border-radius: 4px; padding: 0.75rem 1rem; display: flex; align-items: center; gap: 8px; transition: box-shadow var(--transition); }
.cw-page .reach-card:hover { box-shadow: 0 2px 8px rgba(11,31,58,0.07); }
.cw-page .reach-card__flag    { font-size: 18px; flex-shrink: 0; }
.cw-page .reach-card__country { font-size: 12.5px; font-weight: 500; color: var(--cw-navy); }

/* --- FILTER TABS ------------------------------------------ */
.cw-page .filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem; }
.cw-page .filter-tab {
  font-size: 12px; font-weight: 500; background: var(--cw-white);
  border: 1px solid var(--cw-border); border-radius: 3px;
  padding: 5px 12px; color: var(--cw-text); cursor: pointer;
  transition: all var(--transition);
}
.cw-page .filter-tab.active,
.cw-page .filter-tab:hover { background: var(--cw-navy); color: #fff; border-color: var(--cw-navy); }

/* --- SECTOR GROUP / CUSTOMER TILES ------------------------ */
.cw-page .sector-group { margin-bottom: 1.25rem; }
.cw-page .sector-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cw-page .sector-label__bar  { width: 4px; height: 16px; background: var(--cw-accent); border-radius: 2px; flex-shrink: 0; }
.cw-page .sector-label__text { font-size: 12px; font-weight: 600; color: var(--cw-navy); }
.cw-page .customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.cw-page .customer-tile {
  display: flex; align-items: center; gap: 8px;
  background: var(--cw-white); border: 1px solid var(--cw-border);
  border-radius: 3px; padding: 0.5rem 0.85rem; transition: box-shadow var(--transition);
}
.cw-page .customer-tile:hover { box-shadow: 0 2px 8px rgba(11,31,58,0.07); }
.cw-page .customer-tile__dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-color, var(--cw-accent)); flex-shrink: 0; }
.cw-page .customer-tile__name { font-size: 12.5px; color: var(--cw-text); }

/* --- STAT GRID / STAT CARD__NUM (capabilities) ------------ */
.cw-page .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 1.25rem 0; }
.cw-page .stat-card__num { font-family: var(--font-heading); font-size: 26px; font-style: italic; color: var(--cw-accent); line-height: 1; margin-bottom: 4px; }
.cw-page .stat-card__label { font-size: 11px; color: var(--cw-muted); line-height: 1.45; }

/* --- FEATURE ROW / OFFICE PHOTO (capabilities) ------------ */
.cw-page .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 600px) { .cw-page .feature-row { grid-template-columns: 1fr; } }
.cw-page .office-photo { width: 100%; border-radius: 4px; display: block; margin-bottom: 1.25rem; border: 1px solid var(--cw-border); }


 .yt-block *,
  .yt-block *::before,
  .yt-block *::after { box-sizing: border-box; }

  /* Card */
  .yt-block {
    display: inline-block;
    width: 100%;
    max-width: 480px;
    font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  }
  .yt-card {
    background: #fff;
    border: 1px solid #D6DEE8;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
  .yt-card:hover {
    box-shadow: 0 6px 24px rgba(11,31,58,0.14);
    transform: translateY(-2px);
  }
  .yt-card:hover .yt-play-btn { background: #C8922A; transform: translate(-50%,-50%) scale(1.1); }
  .yt-card:hover .yt-thumb-img { opacity: 0.75; }

  /* Thumbnail */
  .yt-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%;   /* 16:9 */
    background: #0a0a0a;
    overflow: hidden;
  }
  .yt-thumb-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
    display: block;
  }
  .yt-play-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(11,31,58,0.82);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  .yt-play-btn svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
  .yt-tag {
    position: absolute; top: 10px; left: 10px;
    background: #C8922A; color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px;
  }

  /* Card footer */
  .yt-card-body {
    padding: 12px 16px 14px;
    border-top: 3px solid #C8922A;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .yt-card-title {
    font-family: Georgia, serif; font-style: italic;
    font-size: 13px; color: #0B1F3A; line-height: 1.4; flex: 1;
  }
  .yt-watch-label {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #C8922A;
  }
  .yt-watch-label svg { width: 11px; height: 11px; fill: #C8922A; }

  /* ── Modal overlay ── */
  .yt-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.88); z-index: 9999;
    align-items: center; justify-content: center; padding: 16px;
  }
  .yt-overlay.active { display: flex; }

  .yt-modal {
    background: #0B1F3A;
    border: 2px solid #C8922A;
    border-radius: 8px; overflow: hidden;
    width: min(760px, 100%);
    animation: ytModalIn 0.18s ease;
  }
  @keyframes ytModalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

  .yt-modal-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px 12px 18px;
    border-bottom: 1px solid rgba(200,146,42,0.3);
  }
  .yt-modal-tag {
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    background: #C8922A; color: #fff; padding: 3px 8px; border-radius: 3px; flex-shrink: 0;
  }
  .yt-modal-title {
    font-family: Georgia, serif; font-style: italic;
    font-size: 14px; color: rgba(255,255,255,0.88);
    flex: 1; line-height: 1.4;
  }
  .yt-modal-close {
    background: none; border: none; color: rgba(255,255,255,0.55);
    font-size: 22px; cursor: pointer; line-height: 1; flex-shrink: 0;
    transition: color 0.25s ease; padding: 0 2px;
  }
  .yt-modal-close:hover { color: #fff; }

  /*
    Player area: shows poster until user clicks.
    Click → iframe injected by real user gesture → YouTube plays without bot wall.
  */
  .yt-player {
    position: relative; padding-top: 56.25%;
    background: #000; cursor: pointer;
  }
  .yt-player-poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .yt-player-overlay {
    position: absolute; inset: 0;
    background: rgba(11,31,58,0.45);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease;
  }
  .yt-player:hover .yt-player-overlay { background: rgba(11,31,58,0.2); }
  .yt-player-btn {
    width: 76px; height: 76px; border-radius: 50%;
    background: rgba(200,146,42,0.92);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 28px rgba(0,0,0,0.55);
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .yt-player:hover .yt-player-btn { transform: scale(1.08); background: #C8922A; }
  .yt-player-btn svg { width: 32px; height: 32px; fill: #fff; margin-left: 5px; }

  .yt-iframe-wrap { display: none; position: absolute; inset: 0; }
  .yt-iframe-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

  .yt-player.playing .yt-player-poster,
  .yt-player.playing .yt-player-overlay { display: none; }
  .yt-player.playing .yt-iframe-wrap { display: block; }

  .yt-modal-footer {
    padding: 10px 18px;
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .yt-modal-footer-label { font-size: 11px; color: rgba(255,255,255,0.38); letter-spacing: 0.04em; }
  .yt-yt-link {
    font-size: 11px; font-weight: 700; color: #C8922A;
    text-decoration: none; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .yt-yt-link:hover { text-decoration: underline; }