﻿/* ============================================================================
   AI-Powered Compliance & Governance (/services/ai-consulting/ai-compliance-governance/)
   + the featured-solution banner on /services/ai-consulting/ (bottom of this file)
   ----------------------------------------------------------------------------
   The client's own page design (built in ChatGPT), kept as designed. Converted
   mechanically from their styles.css: every class is prefixed "aicg-", element
   rules are scoped under .aicg, and their header/nav/footer rules are dropped
   (the site's master provides those). Loaded only on this page.
   ============================================================================ */

/* Neutralise itSources.css base element styles inside the page, so the client's
   design renders as it did standalone (their text inherits colour/size from its
   section, e.g. white copy on the dark panels). Their own rules below win. */
.aicg { font-size: 16px; letter-spacing: normal; -webkit-font-smoothing: auto; }   /* their page used the browser's 16px base; ours is 14px / 0.2px */
.aicg h1, .aicg h2, .aicg h3, .aicg p { color: inherit; font-weight: inherit; }
.aicg p { font-size: inherit; line-height: inherit; margin: 1em 0; }
.aicg a { transition: none; }
.aicg a:not([class]):hover { color: inherit; }

/* The site header is fixed (83px) and the breadcrumb bar ends at 108px, all widths.
   Their own header sat in the page flow above the hero, so reserve that space here,
   and keep in-page anchor targets clear of the fixed header. */
.aicg.aicg-page { padding-top: 108px; }
.aicg [id] { scroll-margin-top: 83px; }

.aicg {
  --blue: #00ace6;
  --blue-deep: #087da7;
  --midnight: #231f20;
  --orange: #f9a945;
  --cloud: #f5f7f8;
  --grey: #6f7377;
  --line: #dfe6e9;
  --white: #ffffff;
  --radius: 22px;
  --shadow: 0 22px 60px rgba(35, 31, 32, .10);
}
.aicg * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.aicg { margin: 0; color: var(--midnight); background: var(--white); font-family: "Poppins", Arial, sans-serif; font-weight: 300; line-height: 1.65; }
.aicg a { color: inherit; text-decoration: none; }
.aicg button, .aicg a { -webkit-tap-highlight-color: transparent; }
.aicg .aicg-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.aicg .aicg-hero { position: relative; overflow: hidden; padding: 98px 0 110px; background: linear-gradient(135deg, #f8fbfc 0%, #fff 52%, #eefaff 100%); }
.aicg .aicg-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; gap: 72px; align-items: center; }
.aicg .aicg-eyebrow { margin: 0 0 15px; color: var(--blue-deep); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.aicg h1, .aicg h2, .aicg h3 { margin-top: 0; line-height: 1.15; }
.aicg h1 { margin-bottom: 27px; font-size: clamp(43px, 5vw, 68px); font-weight: 500; letter-spacing: -.047em; }
.aicg h1 span { color: var(--blue-deep); }
.aicg .aicg-hero-intro { max-width: 650px; margin: 0; color: #52565a; font-size: 18px; }
.aicg .aicg-button-row { display: flex; align-items: center; gap: 27px; margin-top: 34px; }
.aicg .aicg-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.aicg .aicg-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,172,230,.2); }
.aicg .aicg-button-primary { color: #fff; background: var(--blue-deep); }
.aicg .aicg-button-dark { color: #fff; background: var(--midnight); }
.aicg .aicg-text-link { color: var(--midnight); font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(35,31,32,.25); }
.aicg .aicg-text-link.aicg-light { color: #fff; border-color: rgba(255,255,255,.4); }
.aicg .aicg-shape { position: absolute; pointer-events: none; }
.aicg .aicg-shape-one { width: 280px; height: 280px; right: -95px; top: 80px; border: 2px solid var(--orange); border-radius: 52px; transform: rotate(12deg); }
.aicg .aicg-shape-two { width: 170px; height: 170px; left: -85px; bottom: -60px; background: rgba(0,172,230,.09); border-radius: 35px; transform: rotate(-18deg); }
.aicg .aicg-hero-system { position: relative; padding: 30px; background: #fff; border: 1px solid #e3ecef; border-radius: 28px; box-shadow: var(--shadow); }
.aicg .aicg-hero-system::before { content: ""; position: absolute; inset: -13px 16px 15px -13px; z-index: -1; border: 2px solid var(--orange); border-radius: 30px; }
.aicg .aicg-system-topline { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 20px; color: #7a7e81; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.aicg .aicg-live-dot { color: #35724d; }
.aicg .aicg-live-dot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #52b778; box-shadow: 0 0 0 5px rgba(82,183,120,.12); }
.aicg .aicg-signal-card, .aicg .aicg-action-card { display: flex; align-items: center; gap: 15px; padding: 17px; background: #f5fbfd; border: 1px solid #dceef4; border-radius: 15px; }
.aicg .aicg-signal-icon { display: grid; flex: 0 0 41px; height: 41px; place-items: center; color: #fff; background: var(--blue); border-radius: 12px; font-size: 20px; font-weight: 600; }
.aicg .aicg-signal-card small, .aicg .aicg-action-card small, .aicg .aicg-impact-grid small { display: block; color: #8a8d8f; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.aicg .aicg-signal-card strong, .aicg .aicg-action-card strong { display: block; margin: 2px 0; font-size: 13px; font-weight: 500; }
.aicg .aicg-signal-card p { margin: 0; color: #777; font-size: 10px; }
.aicg .aicg-connector { display: grid; height: 39px; place-items: center; }
.aicg .aicg-connector span { width: 1px; height: 29px; background: linear-gradient(var(--blue), var(--orange)); }
.aicg .aicg-impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.aicg .aicg-impact-grid article { padding: 14px 12px; border: 1px solid #e7e7e7; border-radius: 13px; }
.aicg .aicg-impact-grid strong { display: block; margin: 5px 0 2px; font-size: 13px; font-weight: 500; }
.aicg .aicg-impact-grid span { color: #777; font-size: 8px; }
.aicg .aicg-action-card { justify-content: space-between; margin-top: 12px; background: #fffaf3; border-color: #f7dfbd; }
.aicg .aicg-status { padding: 6px 9px; color: #7d531e; background: #ffebcd; border-radius: 30px; font-size: 8px; font-weight: 500; text-transform: uppercase; }
.aicg .aicg-system-caption { margin: 18px 0 0; color: #717578; font-size: 10px; text-align: center; }
.aicg .aicg-section { padding: 104px 0; }
.aicg .aicg-strategic-section { padding-top: 92px; background: #fff; }
.aicg .aicg-strategic-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 80px; align-items: start; }
.aicg .aicg-strategic-copy > p:not(.aicg-eyebrow) { color: #5c6063; font-size: 15px; }
.aicg .aicg-strategic-panel { padding: 36px; color: #fff; background: var(--midnight); border-radius: 22px; box-shadow: var(--shadow); }
.aicg .aicg-panel-kicker { margin: 0 0 15px; color: var(--orange); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.aicg .aicg-strategic-panel h3 { margin-bottom: 28px; font-size: 25px; line-height: 1.32; }
.aicg .aicg-strategic-benefits { display: grid; gap: 0; }
.aicg .aicg-strategic-benefits article { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.aicg .aicg-strategic-benefits article > span { display: grid; width: 32px; height: 32px; place-items: center; color: var(--midnight); background: var(--orange); border-radius: 9px; font-size: 9px; font-weight: 600; }
.aicg .aicg-strategic-benefits strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 500; }
.aicg .aicg-strategic-benefits p { margin: 0; color: #c9c9c9; font-size: 12px; }
.aicg .aicg-strategic-questions { margin-top: 58px; padding: 29px 32px; background: #f3fafc; border: 1px solid #d7edf4; border-radius: 18px; }
.aicg .aicg-questions-label { margin: 0 0 18px; color: var(--blue-deep); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.aicg .aicg-question-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.aicg .aicg-question-grid p { margin: 0; padding: 0 25px; color: #4f5356; font-size: 13px; font-weight: 400; border-left: 1px solid #cfe1e7; }
.aicg .aicg-question-grid p:first-child { padding-left: 0; border-left: 0; }
.aicg .aicg-question-grid p:last-child { padding-right: 0; }
.aicg .aicg-split-heading { display: grid; grid-template-columns: 1fr .82fr; gap: 90px; align-items: start; }
.aicg h2 { margin-bottom: 22px; font-size: clamp(34px, 4vw, 50px); font-weight: 400; letter-spacing: -.035em; }
.aicg h3 { margin-bottom: 11px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.aicg .aicg-lead-copy { color: #5c6063; font-size: 16px; }
.aicg .aicg-lead-copy p:first-child { margin-top: 5px; }
.aicg .aicg-pain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 62px; }
.aicg .aicg-pain-card { padding: 27px 24px; background: var(--cloud); border-radius: 17px; border-top: 3px solid transparent; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.aicg .aicg-pain-card:hover { transform: translateY(-5px); border-color: var(--orange); background: #fff; box-shadow: 0 15px 42px rgba(35,31,32,.08); }
.aicg .aicg-pain-card > span { color: var(--blue-deep); font-size: 11px; font-weight: 600; }
.aicg .aicg-pain-card h3 { margin-top: 22px; }
.aicg .aicg-pain-card p { margin: 0; color: #676b6e; font-size: 13px; }
.aicg .aicg-process-section { background: #f7fafb; }
.aicg .aicg-section-heading { max-width: 760px; margin-bottom: 48px; }
.aicg .aicg-section-heading.aicg-centred { margin-right: auto; margin-left: auto; text-align: center; }
.aicg .aicg-section-heading > p:last-child { color: #676b6e; font-size: 16px; }
.aicg .aicg-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.aicg .aicg-process-card { position: relative; min-height: 270px; padding: 27px 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 18px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.aicg .aicg-process-card::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--orange)); transition: right .22s ease; }
.aicg .aicg-process-card:hover { transform: translateY(-4px); border-color: #a4dcef; box-shadow: 0 15px 38px rgba(35,31,32,.08); }
.aicg .aicg-process-card:hover::after { right: 0; }
.aicg .aicg-process-number { position: absolute; top: 18px; right: 20px; color: #a7aaac; font-size: 10px; font-weight: 500; }
.aicg .aicg-process-icon { width: 49px; height: 49px; margin-bottom: 42px; border-radius: 13px; background: #e8f8fd; position: relative; }
.aicg .aicg-discover-icon::before { content: ""; position: absolute; width: 16px; height: 16px; left: 13px; top: 11px; border: 2px solid var(--blue-deep); border-radius: 50%; }
.aicg .aicg-discover-icon::after { content: ""; position: absolute; width: 11px; height: 2px; left: 27px; top: 29px; background: var(--blue-deep); transform: rotate(45deg); }
.aicg .aicg-compare-icon::before, .aicg .aicg-compare-icon::after { content: ""; position: absolute; top: 13px; width: 12px; height: 21px; border: 2px solid var(--blue-deep); border-radius: 3px; }
.aicg .aicg-compare-icon::before { left: 10px; }
.aicg .aicg-compare-icon::after { right: 10px; border-color: var(--orange); }
.aicg .aicg-flag-icon::before { content: ""; position: absolute; left: 15px; top: 10px; width: 2px; height: 29px; background: var(--blue-deep); }
.aicg .aicg-flag-icon::after { content: ""; position: absolute; left: 17px; top: 11px; width: 20px; height: 14px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); }
.aicg .aicg-guide-icon::before { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--blue-deep); font-size: 27px; }
.aicg .aicg-process-card p { margin: 0; color: #6b6e71; font-size: 13px; }
.aicg .aicg-outcomes-section { color: #fff; background: var(--blue-deep); }
.aicg .aicg-outcomes-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: start; }
.aicg .aicg-outcomes-section .aicg-eyebrow { color: #b9efff; }
.aicg .aicg-outcomes-copy > p:not(.aicg-eyebrow) { max-width: 510px; color: #d6f2fb; }
.aicg .aicg-outcomes-copy .aicg-text-link { display: inline-block; margin-top: 18px; }
.aicg .aicg-outcome-list article { display: grid; grid-template-columns: 48px 1fr; gap: 17px; padding: 19px 0; border-top: 1px solid rgba(255,255,255,.2); }
.aicg .aicg-outcome-list article:first-child { border-top: 0; padding-top: 0; }
.aicg .aicg-outcome-list span { display: grid; width: 37px; height: 37px; place-items: center; color: var(--midnight); background: var(--orange); border-radius: 10px; font-size: 10px; font-weight: 600; }
.aicg .aicg-outcome-list h3 { margin: 2px 0 6px; }
.aicg .aicg-outcome-list p { margin: 0; color: #d4f0f8; font-size: 13px; }
.aicg .aicg-use-cases-section { background: #fff; }
.aicg .aicg-use-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.aicg .aicg-use-case-card { position: relative; padding: 35px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; }
.aicg .aicg-use-case-card::after { content: ""; position: absolute; right: -38px; bottom: -47px; width: 110px; height: 110px; border: 2px solid var(--orange); border-radius: 25px; transform: rotate(16deg); opacity: .6; }
.aicg .aicg-use-case-card.aicg-feature { background: #f0faff; border-color: #ccecf7; }
.aicg .aicg-tag { display: inline-block; margin-bottom: 25px; padding: 6px 10px; color: var(--blue-deep); background: #e6f8fe; border-radius: 7px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.aicg .aicg-use-case-card p { max-width: 90%; color: #666a6d; font-size: 13px; }
.aicg .aicg-use-case-card strong { display: block; margin-top: 23px; color: var(--blue-deep); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.aicg .aicg-sectors-section { padding-top: 34px; }
.aicg .aicg-sectors-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; padding: 58px; background: var(--cloud); border-radius: 24px; }
.aicg .aicg-sectors-grid h2 { margin-bottom: 0; font-size: 38px; }
.aicg .aicg-sector-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.aicg .aicg-sector-cloud span { padding: 10px 14px; background: #fff; border: 1px solid #e0e6e8; border-radius: 30px; font-size: 12px; }
.aicg .aicg-sector-cloud span:nth-child(2), .aicg .aicg-sector-cloud span:nth-child(5), .aicg .aicg-sector-cloud span:nth-child(8) { border-color: #ffd9a8; }
.aicg .aicg-ibm-section { position: relative; overflow: hidden; background: #f7fafb; }
.aicg .aicg-ibm-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.aicg .aicg-ibm-grid > div:first-child > p:not(.aicg-eyebrow) { color: #63676a; }
.aicg .aicg-human-note { margin-top: 30px; padding: 20px 22px; background: #fff; border-left: 3px solid var(--orange); border-radius: 0 12px 12px 0; }
.aicg .aicg-human-note strong { color: var(--midnight); }
.aicg .aicg-tech-list { display: grid; gap: 10px; }
.aicg .aicg-tech-list article { display: grid; grid-template-columns: 165px 1fr; gap: 18px; padding: 20px; background: #fff; border: 1px solid #e5e9ea; border-radius: 13px; }
.aicg .aicg-tech-list strong { color: var(--blue-deep); font-size: 13px; font-weight: 600; }
.aicg .aicg-tech-list span { color: #696d70; font-size: 12px; }
.aicg .aicg-shape-three { width: 220px; height: 220px; right: -80px; bottom: -70px; background: rgba(0,172,230,.09); border-radius: 45px; transform: rotate(18deg); }
.aicg .aicg-final-cta { padding: 85px 0; }
.aicg .aicg-cta-panel { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: center; padding: 55px 60px; background: linear-gradient(120deg, #f1fbfe 0%, #fff8ee 100%); border: 1px solid #dcebee; border-radius: 25px; box-shadow: 0 18px 50px rgba(35,31,32,.07); }
.aicg .aicg-cta-panel h2 { font-size: 39px; }
.aicg .aicg-cta-panel p:not(.aicg-eyebrow) { max-width: 720px; margin-bottom: 0; color: #626669; }
.aicg .aicg-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.aicg .aicg-cta-actions span { color: #7a7d7f; font-size: 10px; }
.aicg .aicg-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.aicg .aicg-reveal.aicg-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aicg .aicg-reveal { opacity: 1; transform: none; transition: none; }
  .aicg .aicg-button, .aicg .aicg-pain-card, .aicg .aicg-process-card { transition: none; }
}

@media (max-width: 920px) {
  .aicg .aicg-hero { padding: 74px 0 88px; }
  .aicg .aicg-hero-grid, .aicg .aicg-strategic-grid, .aicg .aicg-split-heading, .aicg .aicg-outcomes-grid, .aicg .aicg-ibm-grid, .aicg .aicg-cta-panel { grid-template-columns: 1fr; gap: 45px; }
  .aicg .aicg-pain-grid, .aicg .aicg-process-grid { grid-template-columns: repeat(2, 1fr); }
  .aicg .aicg-question-grid { grid-template-columns: 1fr; }
  .aicg .aicg-question-grid p { padding: 16px 0; border-top: 1px solid #cfe1e7; border-left: 0; }
  .aicg .aicg-question-grid p:first-child { padding-top: 0; border-top: 0; }
  .aicg .aicg-question-grid p:last-child { padding-bottom: 0; }
  .aicg .aicg-sectors-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 620px) {
  .aicg .aicg-shell { width: min(100% - 30px, 1180px); }
  .aicg .aicg-hero { padding-top: 58px; }
  .aicg h1 { font-size: 42px; }
  .aicg .aicg-hero-intro { font-size: 16px; }
  .aicg .aicg-button-row { align-items: flex-start; flex-direction: column; gap: 18px; }
  .aicg .aicg-hero-system { padding: 18px; border-radius: 21px; }
  .aicg .aicg-system-topline { align-items: flex-start; flex-direction: column; }
  .aicg .aicg-impact-grid { grid-template-columns: 1fr; }
  .aicg .aicg-section { padding: 76px 0; }
  .aicg .aicg-strategic-section { padding-top: 70px; }
  .aicg .aicg-strategic-panel { padding: 29px 23px; }
  .aicg .aicg-strategic-panel h3 { font-size: 22px; }
  .aicg .aicg-strategic-questions { margin-top: 38px; padding: 25px 22px; }
  .aicg .aicg-pain-grid, .aicg .aicg-process-grid, .aicg .aicg-use-case-grid { grid-template-columns: 1fr; }
  .aicg .aicg-sectors-section { padding-top: 20px; }
  .aicg .aicg-sectors-grid { padding: 34px 25px; }
  .aicg .aicg-sectors-grid h2 { font-size: 32px; }
  .aicg .aicg-tech-list article { grid-template-columns: 1fr; gap: 5px; }
  .aicg .aicg-cta-panel { padding: 35px 25px; }
  .aicg .aicg-cta-panel h2 { font-size: 32px; }
}


/* ---- Featured-solution banner on the AI Consulting & Advisory page
   (services/pages/ai-consulting.banner.ascx). Ported from the client's
   "Parent-page CTA Concept"; the concept page's wrapper, label and back link are
   not used. The heading is an h2 there (that page has its own h1), styled as their h1. ---- */
.aicg.aicg-banner-band { padding: 60px 0; background: #f5f7f8; }
.aicg .aicg-parent-banner { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 55px; align-items: center; overflow: hidden; padding: 55px 60px; background: #fff; border-radius: 24px; box-shadow: 0 22px 60px rgba(35,31,32,.10); }
.aicg .aicg-parent-banner h2 { max-width: 700px; margin: 0 0 18px; font-size: 43px; font-weight: 500; line-height: 1.15; letter-spacing: -.047em; }
.aicg .aicg-parent-banner p { max-width: 710px; color: #606467; }
.aicg .aicg-parent-banner .aicg-eyebrow { margin-bottom: 18px; }
.aicg .aicg-banner-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; z-index: 2; }
.aicg .aicg-banner-steps span { display: grid; min-height: 86px; place-items: center; padding: 12px; border: 1px solid #dce8eb; border-radius: 14px; background: #f8fbfc; color: #087da7; font-size: 13px; font-weight: 500; }
.aicg .aicg-banner-steps span:nth-child(2), .aicg .aicg-banner-steps span:nth-child(3) { border-color: #f7d6a8; }
.aicg .aicg-orange-frame { position: absolute; right: -55px; top: -75px; width: 230px; height: 230px; border: 2px solid #f9a945; border-radius: 45px; transform: rotate(16deg); }
.aicg .aicg-parent-banner .aicg-button { margin-top: 10px; }
@media (max-width: 760px) {
  .aicg .aicg-parent-banner { grid-template-columns: 1fr; padding: 36px 26px; }
  .aicg .aicg-parent-banner h2 { font-size: 35px; }
}
