:root {
  --navy: #03162a;
  --navy-2: #062640;
  --navy-3: #0b3552;
  --teal: #0cb8b3;
  --teal-2: #3ed8d0;
  --cyan: #72e7e1;
  --ice: #eaf8f8;
  --paper: #f5f9fa;
  --white: #ffffff;
  --text: #10283a;
  --muted: #5e7382;
  --line: #d7e4e9;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 16px/1.6 "DM Sans", sans-serif; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin-top: 0; font-family: "Manrope", sans-serif; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 100; background: #fff; padding: 10px 14px; }
.skip:focus { left: 10px; }
.section-index, .eyebrow { margin: 0 0 16px; color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-heading { max-width: var(--max); margin: 0 auto 54px; }
.section-heading h2 { max-width: 850px; margin-bottom: 0; font-size: clamp(2.25rem, 4.8vw, 4.75rem); line-height: 1.04; letter-spacing: -.052em; }
.section-heading > p:last-child, .split-heading > p { max-width: 560px; color: var(--muted); font-size: 1.05rem; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 70px; align-items: end; }
.split-heading > p { margin: 0; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; text-decoration: none; font-size: .9rem; font-weight: 800; }
.button.primary { background: var(--teal); color: var(--navy); box-shadow: 0 15px 35px rgba(12, 184, 179, .18); }
.button.primary:hover { background: var(--teal-2); }
.button.secondary { border-color: rgba(255,255,255,.38); color: #fff; }
.button.secondary:hover { border-color: var(--teal-2); color: var(--teal-2); }

.site-header { position: sticky; top: 0; z-index: 30; min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 9px max(3vw, 20px); background: rgba(255,255,255,.98); border-bottom: 1px solid rgba(3,22,42,.12); box-shadow: 0 8px 28px rgba(3,22,42,.07); backdrop-filter: blur(16px); }
.ciicam-brand { min-width: 0; display: flex; align-items: center; gap: 15px; padding: 5px 14px 5px 7px; border: 1px solid rgba(10,173,178,.2); border-radius: 10px; background: linear-gradient(135deg,#fff 55%,rgba(62,216,208,.08)); box-shadow: 0 8px 24px rgba(3,22,42,.08); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ciicam-brand:hover { border-color: rgba(10,173,178,.48); box-shadow: 0 11px 30px rgba(3,22,42,.12); transform: translateY(-1px); }
.ciicam-brand img { width: 292px; height: 68px; object-fit: contain; object-position: left center; }
.ciicam-brand span { max-width: 165px; padding-left: 15px; border-left: 2px solid var(--teal); color: #29495a; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .055em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 23px; }
nav a { text-decoration: none; color: #20394a; font-size: .86rem; font-weight: 700; }
nav a:hover { color: var(--teal); }
.nav-cta { padding: 10px 17px; background: var(--teal); color: var(--navy) !important; }
.menu-toggle { display: none; padding: 8px 12px; background: transparent; border: 1px solid var(--navy); color: var(--navy); font: 700 .85rem "DM Sans", sans-serif; }

@media (max-width: 1510px) {
  .ciicam-brand span { display: none; }
  .ciicam-brand img { width: 260px; height: 62px; }
  nav { gap: 16px; }
}

@media (max-width: 1260px) {
  .site-header { min-height: 80px; }
  .ciicam-brand { padding: 4px 10px 4px 5px; }
  .ciicam-brand img { width: 245px; height: 58px; }
  .menu-toggle { display: block; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 80px; max-height: calc(100vh - 80px); overflow: auto; flex-direction: column; align-items: stretch; padding: 24px; background: #fff; border-bottom: 1px solid var(--line); }
  nav.open { display: flex; }
  nav a { padding: 9px 0; }
  .nav-cta { text-align: center; }
  .split-heading { grid-template-columns: 1fr; gap: 22px; align-items: start; }
}

@media (max-width: 540px) {
  body { font-size: 16px; }
  .site-header { gap: 10px; padding-inline: 12px; }
  .ciicam-brand { padding-right: 7px; }
  .ciicam-brand img { width: min(62vw, 220px); height: 54px; }
  .section-heading h2 { font-size: 2.45rem; }
  .hero-actions .button, .epi-actions .button, .contact-actions .button { width: 100%; }
}