:root {
  --c-header-bg: #0A2540;
  --c-body-bg: #F9FAFB;
  --c-section-alt: #E5E7EB;
  --c-text: #111827;
  --c-text-muted: #374151;
  --c-link: #0EA5E9;
  --c-link-hover: #0284C7;
  --c-white: #FFFFFF;
  --radius: 14px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.08);

  --font-main: 'Lora', serif;   /* 👈 New global font */
}

*{box-sizing:border-box} html,body{margin:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  color:var(--c-text);
  background:var(--c-body-bg);
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* Header */
.header{position:sticky;top:0;z-index:1000;background:var(--c-header-bg);color:var(--c-white);box-shadow:var(--shadow-sm)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:72px}

.logo{font-weight:800;font-size:20px;color:#fff;text-decoration:none}

.nav{display:flex;gap:24px;align-items:center}
.nav a{color:#fff;text-decoration:none;font-weight:600}
.nav a:hover{text-decoration:underline}

/* Hero */
.hero{position:relative;background:var(--c-header-bg);color:#fff}
.hero__bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,37,64,.7),rgba(10,37,64,.9)),
    url('assets/hero.jpg') center/cover no-repeat;
  filter:saturate(.9) contrast(.95);
}
.hero__content{position:relative;padding:96px 0;text-align:center}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 16px}
.hero .lead{font-size:20px;color:#E5E7EB;margin:0 0 28px}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.hero-badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;list-style:none;padding:0}
.hero-badges li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:6px 10px;border-radius:999px;font-size:14px}

/* Sections */
.section{padding:80px 0}
.section-light{background:var(--c-body-bg)}
.section-alt{background:var(--c-section-alt)}
.section h2{font-size:32px;line-height:1.2;margin:0 0 24px;text-align:center}

/* Grid & Cards */
.grid{display:grid;gap:24px}
@media(min-width:1024px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:24px
}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.card h3{font-size:22px;margin:6px 0 10px}
.card p{color:var(--c-text-muted)}
.icon{width:28px;height:28px}
.icon--pmo,.icon--devsecops,.icon--reg{
  display:inline-block;width:28px;height:28px;border-radius:8px;background:#E5E7EB
}

/* About */
.about__grid{align-items:center}
.about__figure img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow-sm)}
.about__figure figcaption{text-align:center;color:var(--c-text-muted);margin-top:8px;font-size:14px}

/* Lists */
.list{margin:10px 0 0 18px;color:var(--c-text-muted)}
.list li{margin-bottom:8px}

/* Diagram (SVG) */
.diagram{margin:36px auto 8px;max-width:980px}
.diagram figcaption{text-align:center;color:var(--c-text-muted);margin-bottom:12px}
.svg-node{fill:#ffffff;stroke:#CBD5E1;stroke-width:1.5;rx:12;filter:drop-shadow(0 1px 2px rgba(0,0,0,.05))}
.svg-node-text{fill:#111827;font:600 14px Inter, sans-serif;text-anchor:middle;dominant-baseline:middle}
.svg-line{stroke:#64748B;stroke-width:2}
.svg-arrow{fill:#64748B}
.svg-label{fill:#374151;font:500 12px Inter, sans-serif}
.svg-axis{stroke:#CBD5E1;stroke-width:2}
.svg-axis-label{fill:#374151;font:600 12px Inter, sans-serif;text-anchor:middle}
.bar.before{fill:#94A3B8}
.bar.after{fill:#0EA5E9}

/* Chart */
.chart{margin:28px auto;max-width:700px}
.chart figcaption{text-align:center;color:var(--c-text-muted);margin-bottom:10px}

<figure class="chart">
  <figcaption>Program Impact — Before vs After (illustrative)</figcaption>

  <!-- Self-contained SVG (no external CSS needed) -->
  <svg role="img" aria-label="Bar chart showing risk, approvals time, and cost before and after"
       viewBox="0 0 680 260" width="100%" height="260" preserveAspectRatio="xMidYMid meet">
    <style>
      .axis { stroke:#CBD5E1; stroke-width:2; }
      .axis-label { fill:#374151; font:600 12px Inter, system-ui, sans-serif; text-anchor:middle; }
      .label { fill:#374151; font:500 12px Inter, system-ui, sans-serif; }
      .bar-before { fill:#94A3B8; }   /* muted gray */
      .bar-after  { fill:#0EA5E9; }   /* Cloudryption blue */
    </style>

    <!-- Axes -->
    <line x1="80" y1="220" x2="640" y2="220" class="axis"/>
    <line x1="80" y1="40"  x2="80"  y2="220" class="axis"/>

    <!-- X labels -->
    <text x="140" y="240" class="axis-label">Risk</text>
    <text x="340" y="240" class="axis-label">Time to Approval</text>
    <text x="560" y="240" class="axis-label">Run Cost</text>

    <!-- Legend -->
    <rect x="88" y="50" width="16" height="12" class="bar-before"/><text x="110" y="60" class="label">Before</text>
    <rect x="168" y="50" width="16" height="12" class="bar-after"/><text x="190" y="60" class="label">After</text>

    <!-- Group 1: Risk -->
    <rect x="120" y="80"  width="40" height="140" class="bar-before"/>
    <rect x="170" y="140" width="40" height="80"  class="bar-after"/>

    <!-- Group 2: Time to Approval -->
    <rect x="320" y="60"  width="40" height="160" class="bar-before"/>
    <rect x="370" y="120" width="40" height="100" class="bar-after"/>

    <!-- Group 3: Run Cost -->
    <rect x="540" y="100" width="40" height="120" class="bar-before"/>
    <rect x="590" y="160" width="40" height="60"  class="bar-after"/>
  </svg>
</figure>


/* Gallery */
.gallery{display:grid;gap:16px;margin-top:16px}
@media(min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery__item img{width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow-sm)}
.gallery__item figcaption{text-align:center;color:var(--c-text-muted);font-size:14px;margin-top:6px}

/* Buttons & Links */
.btn{padding:10px 18px;border-radius:12px;font-weight:700;text-decoration:none;display:inline-block;transition:.2s ease}
.btn--primary{background:var(--c-link);color:#fff}
.btn--primary:hover{background:var(--c-link-hover)}
.btn--outline{border:2px solid #fff;color:#fff}
.btn--outline:hover{background:rgba(255,255,255,.1)}
.link{color:var(--c-link);text-decoration:none}
.link:hover{color:var(--c-link-hover);text-decoration:underline}

/* Contact */
.contact{text-align:center}
.footer{background:var(--c-header-bg);color:#E5E7EB;padding:40px 0;text-align:center}

/* Accessibility focus */
:focus-visible{outline:3px solid var(--c-link);outline-offset:3px}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

/* Responsive nav */
@media (max-width: 1023px) {
  .nav {
    display: none;
    flex-direction: column;
    gap: 16px;
    background: var(--c-header-bg);
    padding: 20px;
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    box-shadow: var(--shadow-sm);
  }
  .nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
}

.clients-logos {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: center;
  justify-items: center;
}

.client-logo img {
  max-width: 150px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: all 0.2s ease;
}

.client-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}