/* =========================================================
   CCO — Client Care Operations Consulting
   Brand-book aesthetic · Navy #13294B / Gold #C8A14A
   Editorial · Photographic · Confident
   ========================================================= */

:root {
  --navy: #13294B;
  --navy-deep: #0A1628;
  --navy-90: #1B3461;
  --navy-700: #20406F;
  --gold: #C8A14A;
  --gold-light: #E2C788;
  --gold-soft: #F1E7CC;
  --gold-deep: #9B7424;
  --teal: #C8A14A;
  --charcoal: #202833;
  --ink: #1F2937;
  --body: #374151;
  --muted: #6B7280;
  --rule: #E5E7EB;
  --rule-soft: #E8ECEF;
  --paper: #FFFFFF;
  --parchment: #D8DEE8;
  --cream: #F7F5F0;
  --cream-deep: #EFE8D8;

  --serif: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 48px);
  --site-max: 1200px;
  --content-max: 980px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-soft: 0 1px 2px rgba(19,41,75,.04), 0 6px 18px rgba(19,41,75,.06);
  --shadow-card: 0 4px 6px rgba(19,41,75,.04), 0 18px 40px rgba(19,41,75,.10);
  --shadow-deep: 0 20px 60px rgba(14,31,58,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--body);
  background: #FBFCFC;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
/* <picture> is only a format-negotiation wrapper. Making it a block keeps the
   box tree identical to a bare <img>, so wrapping an image changes nothing. */
picture { display: block; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); margin: 0 0 0.4em 0; line-height: 1.12; letter-spacing: -0.01em; font-weight: 600; }
h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 600; }
h2 { font-size: clamp(28px, 3.6vw, 36px); }
h3 { font-size: clamp(22px, 2.4vw, 24px); }
h4 { font-size: 20px; }

p  { margin: 0 0 1em 0; }
a  { color: var(--navy); text-decoration: none; transition: color .15s, border-color .15s; }
a:hover { color: var(--gold); }

.italic-gold { color: var(--gold); font-style: italic; font-family: var(--serif); }
.gold-emph { color: var(--gold); font-weight: 700; font-style: italic; }
.serif { font-family: var(--serif); }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 18px;
  display: inline-block;
}
.eyebrow.muted { color: var(--muted); }
.eyebrow.navy  { color: var(--navy); }
.eyebrow.white { color: rgba(255,255,255,.8); }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px; background: currentColor;
  vertical-align: middle; margin-right: 12px; opacity: .8;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  color: var(--body);
  font-style: italic;
  line-height: 1.5;
  font-weight: 400;
}

.kicker { font-family: var(--sans); font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }

.platform-hero-line {
  max-width: 58ch;
  margin: 20px 0 0;
  padding: 18px 20px 18px 22px;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .94);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- Two-quote positioning block ---------- */
.positioning {
  border-left: 3px solid var(--gold);
  padding: 8px 0 8px 28px;
}
.positioning blockquote {
  margin: 0 0 22px 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--navy);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.55;
  font-weight: 400;
}
.positioning blockquote:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: min(var(--site-max), 100% - var(--gutter) * 2); margin: 0 auto; padding-left: 4px; padding-right: 4px; }
.narrow    { width: min(var(--content-max), 100% - var(--gutter) * 2); margin: 0 auto; }

section { padding: clamp(72px, 11vw, 130px) 0; position: relative; }
section + section { border-top: 0; }
section.tight { padding: clamp(40px, 6vw, 80px) 0; }
section.alt   { background: var(--cream); }
section.deep  {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,.92);
}
section.deep h1, section.deep h2, section.deep h3 { color: #fff; }
section.deep .eyebrow { color: var(--gold); }
section.deep p { color: rgba(255,255,255,.78); }
section.deep .lede { color: rgba(255,255,255,.85); }
section.deep .positioning blockquote { color: #fff; }
section.deep .positioning { border-left-color: var(--gold); }

/* ---------- Sticky nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  gap: 24px;
}
.site-header .nav-row {
  width: min(1380px, calc(100% - clamp(40px, 5vw, 72px)));
  max-width: none;
}
.brand {
  display: flex; align-items: center; gap: 12px;
  border: none;
  overflow: visible;
  flex: 0 1 clamp(214px, 23vw, 314px);
  padding-left: 8px;
  min-width: 0;
}
.brand img {
  height: 32px;
  width: auto;
  flex-shrink: 0;
  padding-right: 18px;
}
.brand-text { font-family: var(--sans); font-size: 11px; line-height: 1.2; color: var(--navy); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; min-width: 0; }
.brand-text .small { display: block; color: var(--gold); margin-top: 2px; }

.nav-links { display: flex; gap: clamp(14px, 1.7vw, 28px); align-items: center; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.nav-links a {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  border: none;
  padding: 6px 0;
  position: relative;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: var(--gold);
}
.nav-links .btn { padding: 10px 18px; }

/* Eye-catching primary CTA in the nav (gold, with subtle pulse halo) */
.nav-links .nav-cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(200, 161, 74, .28);
  transition: background .2s, color .2s, box-shadow .2s, transform .08s;
  min-width: max-content;
  flex-shrink: 0;
}
.nav-links .nav-cta:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 6px 20px rgba(19, 41, 75, .35);
  transform: translateY(-1px);
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  z-index: 60;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}
.nav-toggle:active { background: rgba(19, 41, 75, 0.06); }
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s, background-color .3s;
  border-radius: 1px;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scroll lock when mobile menu is open */
body.menu-open { overflow: hidden; touch-action: none; }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; bottom: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(180%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    z-index: 55;
    padding: 104px 32px 48px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overscroll-behavior: contain;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .nav-links::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, var(--cream) 0%, rgba(255, 255, 255, 0.97) 60%);
    pointer-events: none;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Staggered item entrance */
  .nav-links a {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s,
                background-color 0.2s;
  }
  .nav-links.open a { opacity: 1; transform: translateY(0); }
  .nav-links.open a:nth-child(1) { transition-delay: 0.03s; }
  .nav-links.open a:nth-child(2) { transition-delay: 0.06s; }
  .nav-links.open a:nth-child(3) { transition-delay: 0.08s; }
  .nav-links.open a:nth-child(4) { transition-delay: 0.10s; }
  .nav-links.open a:nth-child(5) { transition-delay: 0.13s; }
  .nav-links.open a:nth-child(6) { transition-delay: 0.15s; }
  .nav-links.open a:nth-child(7) { transition-delay: 0.18s; }
  .nav-links.open a:nth-child(8) { transition-delay: 0.21s; }
  .nav-links.open a:nth-child(9) { transition-delay: 0.24s; }

  .nav-links a:not(.btn) {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--navy);
    padding: 16px 16px;
    border-bottom: 1px solid rgba(19, 41, 75, 0.07);
    width: 100%;
    max-width: 400px;
    text-align: center;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):active {
    color: var(--gold-deep);
    background: rgba(19, 41, 75, 0.03);
  }

  .nav-links a:not(.btn).active { color: var(--gold-deep); }
  .nav-links a:not(.btn).active::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
  }

  .nav-links a.active::after { display: none; }

  .nav-links .nav-cta {
    margin-top: 28px;
    padding: 16px 36px;
    font-size: 13px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-sm);
    letter-spacing: 0.08em;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 720px) {
  .site-header .nav-row {
    width: min(100%, calc(100% - 24px));
    padding-left: 0;
    padding-right: 0;
  }
  .nav-row { height: 64px; gap: 10px; flex-wrap: nowrap; }
  .brand {
    flex: 1 1 auto;
    gap: 8px;
    min-width: 0;
    max-width: calc(100% - 50px);
    padding-left: 0;
  }
  .brand img {
    height: 26px;
    padding-right: 12px;
  }
  .brand-text {
    flex: 1 1 auto;
    font-size: clamp(8.3px, 2.42vw, 10px);
    letter-spacing: clamp(0.075em, 0.38vw, 0.13em);
    line-height: 1.12;
    overflow: visible;
    white-space: nowrap;
  }
  .brand-text .small {
    font-size: .9em;
    letter-spacing: clamp(0.065em, 0.34vw, 0.12em);
    margin-top: 2px;
  }
  .nav-toggle {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-left: 0;
  }
  .nav-links { padding: 80px 24px 40px; }
  .nav-links a:not(.btn) { font-size: 17px; padding: 15px 14px; max-width: 100%; }
  .nav-links .nav-cta { max-width: 100%; padding: 15px 28px; }
}

@media (max-width: 420px) {
  .site-header .nav-row { width: min(100%, calc(100% - 20px)); }
  .brand { gap: 7px; max-width: calc(100% - 46px); padding-left: 0; }
  .brand img {
    height: 24px;
    padding-right: 10px;
  }
  .brand-text {
    display: block;
    font-size: clamp(7.45px, 2.04vw, 8.55px);
    letter-spacing: clamp(0.035em, 0.24vw, 0.08em);
    line-height: 1.1;
  }
  .brand-text .small {
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
  }
  .brand-text .small::after {
    content: "Intelligence Platform";
    display: block;
    color: var(--gold);
    font-size: clamp(7.15px, 1.95vw, 8.2px);
    letter-spacing: clamp(0.03em, 0.22vw, 0.07em);
    line-height: 1.12;
    margin-top: 2px;
  }
  .nav-row { height: 58px; gap: 8px; }
  .nav-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
  .nav-toggle span { width: 22px; }
  .nav-links { padding: 72px 20px 32px; }
  .nav-links a:not(.btn) { font-size: 16px; padding: 14px 12px; }
  .nav-links .nav-cta { padding: 14px 24px; font-size: 12px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 26px;
  border-radius: 2px;
  border: 1.5px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  transition: background .2s, color .2s, border-color .2s, transform .08s, box-shadow .2s;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(200,161,74,.32); }
.btn:active { transform: translateY(0); }
.btn.secondary {
  background: transparent; color: var(--navy); border-color: var(--navy);
}
.btn.secondary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn.gold:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.5);
}
.btn.ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn.lg { padding: 14px 26px; font-size: 12.5px; }
.btn.compact {
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.07em;
}

/* ---------- Hero (deep navy with photography option) ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(80px, 11vw, 160px) 0 clamp(64px, 9vw, 120px);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 20%, rgba(200,161,74,.18) 0, transparent 50%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
}

.hero-eyebrow { color: var(--gold); }
.hero h1 {
  color: #fff;
  font-family: var(--serif);
  max-width: 16ch;
  margin-bottom: 0.2em;
  font-weight: 600;
}
.hero h1 .gold { color: var(--gold); font-style: italic; }
.hero .tagline {
  font-family: var(--sans);
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 56ch;
  margin: 22px 0 32px 0;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .stamp-img { max-width: 280px; opacity: 1; filter: drop-shadow(0 12px 40px rgba(0,0,0,.35)); }

.hero-photo {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background: linear-gradient(135deg, var(--navy-90), var(--navy-deep));
}
.hero-photo img {
  width: 100%; height: auto; display: block;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.04) saturate(0.9);
  transition: transform 0.4s ease-out;
}
.hero-photo:hover img {
  transform: scale(1.01);
}
/* Subtle navy gradient overlay so the photo blends into the dark hero */
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,41,75,0) 30%, rgba(14,31,58,.55) 100%),
    linear-gradient(135deg, rgba(19,41,75,.10) 0%, rgba(200,161,74,.04) 100%);
}
/* Gold corner accents */
.hero-photo::before {
  content: "";
  position: absolute; right: 18px; top: 18px;
  width: 40px; height: 2px;
  background: var(--gold);
  z-index: 2;
}

/* Horizontal tagline accent at bottom of hero left column (replaces the old vertical accent) */
.hero-tagline-accent {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.36em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(200, 161, 74, .35);
  display: inline-block;
  padding-right: 28px;
}

/* Smaller page-hero (used on About, Services, package, contact) */
.page-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--rule);
  padding: clamp(72px, 9vw, 130px) 0 clamp(48px, 7vw, 90px);
}
.page-hero .hero-grid { grid-template-columns: 1.5fr 1fr; align-items: end; }
@media (max-width: 880px) { .page-hero .hero-grid { grid-template-columns: 1fr; } }
.page-hero h1 { color: var(--navy); }
.page-hero .tagline { color: var(--muted); font-style: italic; }
.page-hero .hero-meta { text-align: right; font-family: var(--sans); }
.page-hero .hero-meta .label { color: var(--navy); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }
.page-hero .hero-meta .sub { color: var(--muted); font-size: 11px; margin-top: 6px; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 880px) { .page-hero .hero-meta { text-align: left; } }

/* ---------- Photo / image cards ---------- */
.photo-frame {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  background: var(--navy-deep);
}
.photo-frame img {
  width: 100%; height: auto; display: block;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.05) saturate(0.92);   /* subtle editorial polish */
  transition: transform 0.4s ease-out;
}
.photo-frame:hover img {
  transform: scale(1.01);
}
/* Subtle navy gradient overlay so photos feel on-brand and don't compete with text */
.photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(19,41,75,.06) 0%, rgba(19,41,75,.16) 100%);
  pointer-events: none;
}
/* Soft gold corner accent on the photo */
.photo-frame::before {
  content: "";
  position: absolute; left: 16px; bottom: 16px;
  width: 36px; height: 2px;
  background: var(--gold);
  z-index: 2;
  opacity: .9;
}

.photo-frame.tall,
.photo-frame.wide,
.photo-frame.square { aspect-ratio: auto; }

/* ---------- Founder card (photo + signature overlay) ---------- */
.founder-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow-card);
  background: var(--navy-deep);
}
.founder-image, .founder-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.founder-image img {
  filter: none;
  background: #f1ece2;
}
.founder-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(19,41,75,0) 0%, rgba(19,41,75,0) 60%, rgba(14,31,58,.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.founder-card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(20px, 3vw, 32px);
  color: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.founder-card-mark {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 6px;
  line-height: 1;
}
.founder-card-line {
  display: block;
  width: 44px; height: 1px;
  background: var(--gold);
  margin: 4px 0 10px 0;
}
.founder-card-name {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: #fff;
  font-style: italic;
}
.founder-card-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  margin-top: 4px;
  max-width: 100%;
}

/* ---------- Pillar grid (4 brand pillars) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3.5vw, 40px);
}
@media (max-width: 1000px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .pillars { grid-template-columns: 1fr; } }

.pillar {
  text-align: left;
}
.pillar img { width: 44px; height: 44px; margin-bottom: 16px; }
.pillar h3 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}
section.deep .pillar h3 { color: #fff; }
.pillar p { font-size: 14.5px; color: var(--body); line-height: 1.6; max-width: 32ch; }
section.deep .pillar p { color: rgba(255,255,255,.74); }

/* ---------- Process diagram (Review → Plan → Implement → Sustain) ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  margin-top: 36px;
}
.process::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%);
  z-index: 0;
}
@media (max-width: 880px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .process::before { display: none; }
}
@media (max-width: 480px) { .process { grid-template-columns: 1fr; } }

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.step-icon {
  width: 76px; height: 76px;
  background: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 20px;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 14px rgba(19,41,75,.06);
}
.step-icon img { width: 44px; height: 44px; }
.step-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.step h4 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin: 0 0 10px 0;
}
.step p { font-size: 14px; color: var(--body); max-width: 26ch; margin: 0 auto; }

/* ---------- Testimonial card ---------- */
.testimonial {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 48px);
  position: relative;
  box-shadow: var(--shadow-soft);
}
.testimonial::before {
  content: "“";
  position: absolute;
  top: -12px; left: 28px;
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  color: var(--gold);
  font-weight: 700;
}
.testimonial .quote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.45;
  color: var(--navy);
  margin: 0 0 24px 0;
  font-weight: 400;
}
.testimonial .attribution {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.testimonial .attribution .name {
  font-family: var(--sans); font-weight: 700; color: var(--navy); font-size: 14px;
}
.testimonial .attribution .title {
  font-family: var(--sans); color: var(--muted); font-size: 13px; font-style: italic; margin-top: 2px;
}

/* ---------- Lead-magnet band (gold horizontal stripe — "The Operations Advantage") ---------- */
.lead-band {
  background: var(--gold);
  color: var(--navy);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.lead-band .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(48px, 7vw, 88px) 0;
}
@media (max-width: 880px) { .lead-band .container { grid-template-columns: 1fr; } }
.lead-band .eyebrow { color: var(--navy); opacity: .8; }
.lead-band h2 { color: var(--navy); margin-bottom: 12px; max-width: 14ch; }
.lead-band p { color: rgba(19,41,75,.85); font-size: 17px; max-width: 50ch; }
.lead-band .btn {
  background: var(--navy); border-color: var(--navy); color: #fff;
  margin-top: 10px;
}
.lead-band .btn:hover { background: #fff; color: var(--navy); border-color: #fff; }

.lead-band .book-photo {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.lead-band .book-photo img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px rgba(19,41,75,.35); }

/* ---------- Two/Three column blocks ---------- */
.cols {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}
.cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .cols.cols-2,
  .cols.cols-3,
  .cols.cols-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) and (min-width: 881px) {
  .cols.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Icon-paired feature lists ---------- */
.icon-list { list-style: none; padding: 0; margin: 0; }
.icon-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--body);
  line-height: 1.5;
}
.icon-list li img { width: 28px; height: 28px; margin-top: 2px; }

/* Round gold dot bullets */
ul.dots { list-style: none; padding: 0; margin: 0; }
ul.dots li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.55;
  font-size: 15px;
  color: var(--body);
}
ul.dots li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold);
}

/* ---------- Cards (package preview) ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--gold-soft); }

.card .card-eye {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em;
  color: var(--gold); text-transform: uppercase; font-weight: 700;
  margin-bottom: 14px;
}
.card h3 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.card .card-tag { font-size: 12px; color: var(--muted); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 16px; }
.card .card-desc { font-size: 14.5px; color: var(--body); margin-bottom: 22px; flex: 1; line-height: 1.6; }
.card .card-price { font-family: var(--serif); color: var(--navy); font-weight: 600; font-size: 22px; margin-bottom: 18px; }
.card .card-price .from { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); margin-right: 6px; font-style: italic; }
.card .card-link {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--navy);
  border: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.card .card-link::after { content: "→"; color: var(--gold); transition: transform .2s; }
.card:hover .card-link::after { transform: translateX(4px); }

/* ---------- Cream offer panel (with circle-icon column titles) ---------- */
.offer-panel {
  background: var(--cream);
  border-top: 4px solid var(--navy);
  padding: clamp(32px, 5vw, 56px);
  border-radius: 4px;
}
.offer-panel .offer-meta {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.offer-panel .offer-meta .left  { font-family: var(--sans); font-size: 12px; letter-spacing: 0.28em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
.offer-panel .offer-meta .right { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }

.offer-panel .offer-title { font-family: var(--serif); color: var(--navy); font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 8px; line-height: 1.15; }
.offer-panel .offer-sub { font-family: var(--serif); font-style: italic; color: var(--body); margin-bottom: 28px; font-size: clamp(16px, 1.6vw, 19px); }

.offer-cols .col-title {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.offer-cols .col-title img { width: 34px; height: 34px; }
.offer-cols .col-title h3 {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy); font-weight: 700; margin: 0;
}

/* Engagement-fee strip */
.fee-strip {
  background: var(--cream);
  margin-top: 20px;
  padding: 28px clamp(28px, 5vw, 56px);
  border-radius: 4px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 720px) {
  .fee-strip { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .fee-strip .terms { grid-column: 1 / -1; text-align: left; }
}
.fee-strip .dollar { width: 52px; height: 52px; }
.fee-strip .price-block { text-align: center; }
.fee-strip .label {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em;
  color: var(--navy); font-weight: 700; text-transform: uppercase; margin-bottom: 6px;
}
.fee-strip .value {
  font-family: var(--serif); color: var(--navy); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600;
}
.fee-strip .value .from {
  font-family: var(--sans); font-style: italic; font-weight: 400; color: var(--muted);
  font-size: 14px; margin-right: 8px;
}
.fee-strip .terms {
  font-family: var(--sans); color: var(--muted); font-size: 13px; font-style: italic;
  text-align: right; line-height: 1.55;
}

/* ---------- Pricing-tier table ---------- */
.tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  margin-top: 14px;
}
.tier-table th {
  text-align: left; padding: 14px 16px;
  border-bottom: 2px solid var(--navy);
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy);
}
.tier-table td { padding: 16px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tier-table td:last-child { white-space: nowrap; font-family: var(--serif); color: var(--navy); font-weight: 600; }

/* ---------- CTA band (deep navy) ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,.94);
  padding: clamp(64px, 9vw, 120px) 0;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,161,74,.18) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band .lede { color: rgba(255,255,255,.78); font-style: italic; max-width: 56ch; margin-bottom: 32px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy); font-weight: 700;
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 14px 16px;
  border-radius: 2px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(19,41,75,.08); }
.field .hint { font-size: 12px; color: var(--muted); margin-top: 6px; font-style: italic; }

/* ---------- Footer with logo ---------- */
.site-footer {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: rgba(255,255,255,.78);
  padding: clamp(64px, 8vw, 100px) 0 28px;
}
.site-footer .row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 40px;
}
.site-footer .row img { height: 60px; width: auto; }
.site-footer .row .tagline { color: rgba(255,255,255,.62); font-style: italic; font-size: 16px; max-width: 60ch; line-height: 1.6; }

.site-footer .grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 880px) { .site-footer .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer .grid { grid-template-columns: 1fr; } }

.site-footer h2 {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 0 0 16px 0;
  /* Footer column labels are semantic h2s inside the contentinfo landmark.
     These two declarations neutralise the global h2 typography so the mark
     renders exactly as it did when it was an h5. */
  line-height: inherit; text-wrap: wrap;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; font-size: 14px; }
.site-footer a { color: rgba(255,255,255,.78); border: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer p { color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; margin: 0; }

.site-footer .meta {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: 0.04em;
}
.site-footer .meta .mark { color: var(--gold); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }

/* ---------- Section helpers ---------- */
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .lede { max-width: 62ch; margin-top: 18px; }
.section-title { max-width: 24ch; }
.flex-between { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.divider { height: 1px; background: var(--rule); border: 0; margin: clamp(32px, 4vw, 56px) 0; }
.gold-rule { height: 2px; background: var(--gold); border: 0; width: 64px; margin: 18px 0; }

:target { scroll-margin-top: 100px; }

/* ---------- Problem-identification grid (home page) ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 36px) clamp(32px, 5vw, 64px);
}
@media (max-width: 720px) { .problem-grid { grid-template-columns: 1fr; } }

.problem-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.problem-item h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0 0 6px 0;
  line-height: 1.35;
}
.problem-item p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}
.problem-mark {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(200, 161, 74, .14);
  color: var(--gold-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

/* ---------- "What we do" three-column blocks ---------- */
.do-block {
  border-top: 2px solid var(--navy);
  padding-top: 22px;
}
.do-block .do-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.do-block h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--navy);
  margin: 0 0 12px 0;
  line-height: 1.2;
}
.do-block p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Outcomes grid ---------- */
.outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px) clamp(28px, 4vw, 56px);
}
@media (max-width: 720px) { .outcomes { grid-template-columns: 1fr; } }

.outcome {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "mark heading"
    "mark body";
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.outcome h4 {
  grid-area: heading;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin: 0 0 6px 0;
  line-height: 1.35;
}
.outcome p {
  grid-area: body;
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.outcome-mark {
  grid-area: mark;
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  margin-top: 2px;
}

/* ---------- Scenario block (credibility section) ---------- */
.scenario {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: clamp(32px, 3.8vw, 44px);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.scenario:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(19,41,75,.09), 0 4px 10px rgba(19,41,75,.05);
}
.scenario .scenario-eye {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.scenario h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--navy);
  margin: 0 0 18px 0;
}
.scenario p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  margin: 0 0 14px 0;
}
.scenario p:last-child { margin-bottom: 0; }
.scenario p strong {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- Image-text alternating block ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.split.reverse > *:first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > *:first-child { order: 0; }
}

/* ---------- Proof / example breakdown card ---------- */
.proof-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-md);
  padding: clamp(28px, 3.6vw, 44px) clamp(28px, 4vw, 52px);
  box-shadow: var(--shadow-soft);
  max-width: var(--content-max);
  margin: 0 auto;
}
.proof-card p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 19px);
  color: var(--body);
  line-height: 1.7;
  margin: 0 0 16px 0;
}
.proof-card p:last-child { margin-bottom: 0; }
.proof-card p strong {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
  display: inline-block;
  margin-right: 8px;
}

/* ---------- Deliverables grid (cards) ---------- */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
  max-width: var(--site-max);
  margin: 0 auto;
}
@media (max-width: 720px) {
  .deliverables-grid { grid-template-columns: 1fr; }
}

.deliverable {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.deliverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.deliverable .deliverable-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}
.deliverable h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.25;
  text-wrap: balance;
}
.deliverable .deliverable-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}
.deliverable .deliverable-impact {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.005em;
  line-height: 1.5;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ---------- Authority band ---------- */
.authority-band {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-md);
  padding: clamp(36px, 4.4vw, 60px) clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-deep);
  position: relative;
  overflow: hidden;
}
.authority-band::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--gold);
}
.authority-band .eyebrow {
  color: var(--gold);
}
.authority-band .authority-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  margin: 8px 0 18px 0;
  max-width: 32ch;
}
.authority-band .authority-lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 20px);
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin: 0 0 28px 0;
  max-width: 70ch;
}
.authority-band .authority-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 820px) {
  .authority-band .authority-points { grid-template-columns: 1fr; }
}
.authority-band .authority-points li {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  padding-top: 16px;
  border-top: 1px solid rgba(200,161,74,.4);
}
.authority-band .authority-points li strong {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

/* ===========================================================
   Conversion-focused homepage v2 — additions
   =========================================================== */

/* ---------- Hero (full-bleed scale fix) ---------- */
.hero.hero-full {
  padding: clamp(72px, 10vw, 140px) 0 clamp(64px, 9vw, 120px);
}
.hero.hero-full .hero-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero.hero-full .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero.hero-full .hero-copy { min-width: 0; }
.hero.hero-full .hero-visual { min-width: 0; width: 100%; }
.hero.hero-full .hero-photo {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background: linear-gradient(135deg, var(--navy-90), var(--navy-deep));
}
.hero.hero-full .hero-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: contrast(1.04) saturate(0.92);
}

.hero.hero-full .btn.lg { padding: 13px 24px; font-size: 12.5px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 18px 32px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(200, 161, 74, .35);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.78);
}
.hero-trust strong { color: var(--gold); font-weight: 700; }

/* ---------- Cost section ---------- */
.cost-band {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
}
.cost-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 40px);
}
@media (max-width: 1000px) { .cost-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .cost-grid { grid-template-columns: 1fr; } }
.cost-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-soft);
}
.cost-card .cost-icon {
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 14px;
  line-height: 1;
}
.cost-card h4 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.35;
}
.cost-card p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Solution grid ---------- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
@media (max-width: 1000px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .solution-grid { grid-template-columns: 1fr; } }
.solution-item { padding-top: 18px; border-top: 2px solid var(--navy); }
.solution-item .solution-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.solution-item h4 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 24px);
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.25;
  font-weight: 600;
}
.solution-item p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Service grid (5 services + CTA card) ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 32px);
  margin-top: clamp(20px, 3vw, 32px);
}
@media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-soft);
}
.service-icon { width: 44px; height: 44px; margin-bottom: 18px; }
.service-card h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.2;
}
.service-card p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.service-card.service-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  border-color: var(--navy);
  justify-content: center;
}
.service-card.service-cta .eyebrow { color: var(--gold); margin-bottom: 12px; }
.service-card.service-cta h3 { color: #fff; }
.service-card.service-cta p { color: rgba(255,255,255,.78); margin-bottom: 22px; }
.service-card.service-cta .btn { align-self: flex-start; }

/* ---------- Free Guides section ---------- */
.executive-resource-section {
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(28px, 4vw, 44px);
  background:
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
}
.executive-resource-shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-soft);
}
.executive-resource-copy h2 {
  max-width: 12ch;
  margin-bottom: 18px;
}
.executive-resource-copy p {
  max-width: 46ch;
  color: var(--body);
  line-height: 1.72;
  margin: 0;
}
.executive-resource-card {
  display: grid;
  grid-template-columns: minmax(210px, .78fr) minmax(0, 1fr);
  min-height: 420px;
}
.executive-resource-card .guide-cover {
  aspect-ratio: auto;
  min-height: 100%;
}
.guide-cover-executive img {
  width: min(210px, 76%);
  height: auto;
  position: relative;
  z-index: 1;
}
.resource-library-head {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, .9fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: end;
}
.resource-library-head h2 {
  margin-bottom: 0;
}
.resource-library-head .lede {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 21px);
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .guide-grid { grid-template-columns: 1fr; } }
.guide-grid-detailed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .guide-grid-detailed { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .guide-grid-detailed { grid-template-columns: 1fr; } }

.guide-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.guide-cover {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: clamp(22px, 2.6vw, 30px);
  color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.guide-cover::before {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,161,74,.25) 0%, transparent 70%);
  pointer-events: none;
}
.guide-cover::after {
  content: "";
  position: absolute; left: clamp(22px, 2.6vw, 30px);
  bottom: clamp(22px, 2.6vw, 30px);
  width: 36px; height: 2px;
  background: var(--gold);
}
.guide-cover-2 { background: linear-gradient(160deg, var(--navy-90) 0%, var(--navy) 100%); }
.guide-cover-3 {
  background: linear-gradient(160deg, var(--gold-deep) 0%, var(--navy) 90%);
}
.guide-cover .guide-tag {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  position: relative; z-index: 1;
}
.guide-cover-3 .guide-tag { color: #fff; }
.guide-cover h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 26px);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  position: relative; z-index: 1;
  text-wrap: balance;
}
.guide-cover .guide-pages {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  font-weight: 600;
  position: relative; z-index: 1;
  padding-top: 18px;
}

.guide-body {
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column;
  flex: 1;
}
.guide-body h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.7vw, 22px);
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.25;
  text-wrap: balance;
}
.guide-body > p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0 0 20px 0;
}
.guide-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.guide-actions .btn {
  padding: 11px 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.guide-note {
  margin: 14px 0 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* ---------- Templates section ---------- */
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) { .template-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .template-grid { grid-template-columns: 1fr; } }

.template-grid-detailed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .template-grid-detailed { grid-template-columns: 1fr; } }
@media (min-width: 981px) {
  .template-grid-detailed .template-card { display: grid; grid-template-rows: auto 1fr; }
}

.template-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.template-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.template-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--cream);
  padding: clamp(24px, 3vw, 36px);
  display: flex; align-items: stretch; justify-content: center;
  border-bottom: 1px solid var(--rule);
}
.template-preview::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 4px;
  background: var(--gold);
}
.template-lines {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(16px, 2vw, 22px);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 24px rgba(19,41,75,.08);
}
.template-lines .line {
  height: 6px;
  background: var(--rule);
  border-radius: 3px;
}
.template-lines .line.short { width: 55%; }
.template-lines .line.line-head {
  height: 10px;
  background: var(--navy);
  width: 40%;
  margin-bottom: 6px;
}
.template-preview-2 .template-lines .line.line-head { background: var(--gold); }
.template-preview-3 .template-lines .line.line-head {
  background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 100%);
}

.template-body {
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; flex: 1;
}
.template-eye {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 10px;
}
.template-body h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.25;
}
.template-body > p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0 0 18px 0;
}
.template-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: auto;
}
.template-actions .btn {
  padding: 11px 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ---------- Final CTA additions ---------- */
.cta-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.cta-band .lede { margin-bottom: 24px; }
.cta-email-note {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 6px 0 0 0;
}
.cta-email-note a {
  color: var(--gold);
  border-bottom: 1px solid rgba(200,161,74,.4);
}
.cta-email-note a:hover { color: #fff; border-bottom-color: #fff; }
.cta-contact-row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 14px; color: rgba(255,255,255,.78);
}
.cta-contact-row strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.cta-contact-row a { color: rgba(255,255,255,.92); }
.cta-contact-row a:hover { color: var(--gold); }

/* ===========================================================
   Homepage v3 — Upgrade sections
   =========================================================== */

/* ---------- Hero secondary link ---------- */
.hero-secondary-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
  display: inline-block;
  margin-top: 4px;
}
.hero-secondary-link:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ---------- Hero philosophy pull-quote ---------- */
.hero-philosophy {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(200, 161, 74, .3);
  padding-left: 20px;
  border-left: 3px solid var(--gold);
  max-width: 48ch;
}
.hero-philosophy p {
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 18px);
  font-style: italic;
  color: rgba(255,255,255,.8);
  line-height: 1.55;
  margin: 0;
}

/* ---------- Hero h1 max-width override ---------- */
.hero.hero-full .hero-copy h1 {
  max-width: 22ch;
}

/* ---------- Founder section ---------- */
.founder-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 768px) {
  .founder-section {
    grid-template-columns: 1fr;
  }
}
.founder-section-image {
  position: sticky;
  top: 100px;
}
@media (max-width: 768px) {
  .founder-section-image {
    position: static;
    max-width: 360px;
  }
}
.founder-section-copy h2 {
  margin-bottom: 8px;
}
.founder-subheading {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 28px;
}
.founder-section-copy p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  max-width: 680px;
}
.founder-section-copy p em {
  font-style: italic;
}

/* ---------- Before vs After ---------- */
.before-after-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
}
@media (max-width: 768px) {
  .before-after-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.before-after-header {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 24px 0;
  padding-bottom: 16px;
}
.before-header {
  color: var(--body);
  border-bottom: 2px solid var(--rule);
}
.after-header {
  color: var(--navy);
  border-bottom: 2px solid var(--gold);
}
.before-after-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.before-after-list li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.before-after-list li:last-child {
  border-bottom: none;
}
.before-after-closing {
  text-align: center;
  margin-top: clamp(28px, 4vw, 48px);
  font-family: var(--serif);
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Philosophy pull-quotes ---------- */
.philosophy-statement {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--cream);
}
.philosophy-quote {
  border-left: 3px solid var(--gold);
  padding-left: clamp(24px, 3.5vw, 40px);
  max-width: 700px;
  margin: 0 auto;
}
.philosophy-quote p {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 28px);
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
  font-weight: 400;
}

/* ---------- Engagement subheading ---------- */
.engagement-subhead {
  font-family: var(--sans);
  font-size: 17px;
  color: var(--body);
  margin-top: 10px;
  line-height: 1.6;
}

/* ---------- How engagement works — 5 steps ---------- */
.engagement-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  position: relative;
  margin-top: clamp(36px, 5vw, 56px);
}
.engagement-steps::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--gold);
  z-index: 0;
}
.engagement-step {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.engagement-num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  background: var(--paper);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--gold);
  margin-bottom: 20px;
  flex-shrink: 0;
}
.engagement-step h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.engagement-step p {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
  max-width: 24ch;
}

/* ---------- Executive overview download ---------- */
.executive-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(40px, 5.5vw, 64px);
  background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow:
    0 2px 8px rgba(19,41,75,.04),
    0 10px 28px rgba(19,41,75,.07);
}
.executive-overview-copy h3 {
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.15;
  margin-bottom: 16px;
  text-wrap: balance;
}
.executive-overview-copy p {
  max-width: 64ch;
  color: var(--body);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 28px;
}
.executive-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.overview-preview {
  display: flex;
  justify-content: center;
}
.overview-preview-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease;
}
.overview-preview-link:hover {
  color: inherit;
}
.overview-preview-link:hover .overview-preview-page {
  transform: translateY(-4px);
  box-shadow:
    0 8px 20px rgba(19,41,75,.10),
    0 24px 60px rgba(19,41,75,.16);
}
.overview-preview-page {
  width: min(100%, 340px);
  aspect-ratio: 8.5 / 11;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--navy);
  border-radius: 6px;
  box-shadow:
    0 4px 12px rgba(19,41,75,.06),
    0 16px 44px rgba(19,41,75,.10);
  padding: 30px 26px 34px;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.overview-preview-page:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px rgba(19,41,75,.08),
    0 22px 56px rgba(19,41,75,.14);
}
.overview-preview-page::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 3px;
  background: var(--gold);
}
.overview-preview-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.overview-preview-brand img {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
}
.overview-preview-rule {
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin: 26px 0 20px;
}
.overview-preview-page h4 {
  font-size: 24px;
  line-height: 1.12;
  margin-bottom: 10px;
  text-wrap: balance;
}
.overview-preview-page p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 24px;
}
.overview-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.overview-preview-grid span {
  min-height: 48px;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 7.5px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
}
.overview-preview-loop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 18px;
}
.overview-preview-loop span {
  height: 8px;
  background: var(--navy);
  border-radius: 10px;
  opacity: .9;
}
.overview-preview-loop span:nth-child(2),
.overview-preview-loop span:nth-child(4) {
  background: var(--gold);
}

@media (max-width: 768px) {
  .executive-overview {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .overview-preview-page {
    width: min(100%, 300px);
    margin: 0 auto;
    /* Below the desktop card width the 8.5/11 page ratio is shorter than the
       stacked content, which clipped the outcome grid and loop row. Let the
       card grow to fit; the desktop page proportion is untouched. */
    aspect-ratio: auto;
  }
}

.resource-card-featured {
  border-color: rgba(200, 161, 74, .45);
}
.resource-card-featured .guide-body > p,
.resource-card-featured .dots li {
  line-height: 1.68;
}
.resource-card-featured .guide-actions {
  gap: 12px;
}
.guide-cover-executive {
  background:
    linear-gradient(135deg, rgba(19,41,75,.96), rgba(10,22,40,.94)),
    radial-gradient(circle at 82% 16%, rgba(200,161,74,.24), transparent 34%);
  color: #fff;
}
.guide-cover-executive h4 {
  color: #fff;
  max-width: 11ch;
  line-height: 1.15;
}
.guide-cover-executive .guide-tag,
.guide-cover-executive .guide-pages {
  color: rgba(255,255,255,.78);
}
.guide-cover-executive::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 34px;
  height: 3px;
  background: var(--gold);
}
@media (max-width: 980px) {
  .executive-resource-shell {
    grid-template-columns: 1fr;
  }
  .executive-resource-copy h2 {
    max-width: 18ch;
  }
  .executive-resource-card {
    grid-template-columns: minmax(210px, .7fr) minmax(0, 1fr);
  }
  .resource-library-head {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .executive-resource-shell {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .executive-resource-copy {
    padding: 0 2px;
  }
  .executive-resource-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .executive-resource-card .guide-cover {
    aspect-ratio: 4 / 5;
  }
}
@media (max-width: 980px) {
  .engagement-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 40px;
  }
  .engagement-steps::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .engagement-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .engagement-step {
    flex-direction: row;
    text-align: left;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 0 20px 0;
    border-left: 2px solid var(--gold);
    padding-left: 28px;
    position: relative;
  }
  .engagement-step:last-child {
    border-left-color: transparent;
  }
  .engagement-num {
    margin-bottom: 0;
    position: absolute;
    left: -19px;
  }
  .engagement-step h3 {
    margin-top: 0;
  }
  .engagement-step p {
    max-width: none;
  }
  .engagement-step > div {
    display: flex;
    flex-direction: column;
  }
  .executive-overview {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .overview-preview {
    justify-content: center;
  }
  .overview-preview-page {
    width: min(100%, 280px);
  }
}
@media (max-width: 520px) {
  .executive-overview-actions .btn {
    width: 100%;
    text-align: center;
  }
  .overview-preview-page {
    width: 100%;
    max-width: 280px;
  }
  .overview-preview-brand span {
    max-width: 15ch;
  }
}

/* ---------- CCO Operational Loop ---------- */
.loop-diagram {
  margin-top: clamp(20px, 3vw, 32px);
  overflow-x: auto;
}
.loop-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1060px;
  margin: 0 auto;
}
.mobile-loop {
  display: none;
}
.loop-caption {
  text-align: center;
  margin-top: clamp(24px, 3vw, 36px);
  font-family: var(--serif);
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--muted);
  line-height: 1.6;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .loop-svg {
    display: none;
  }
  .mobile-loop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .loop-node {
    background: var(--navy);
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    max-width: 280px;
  }
  .loop-arrow {
    width: 2px;
    height: 20px;
    background: var(--gold);
    position: relative;
  }
  .loop-arrow::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--gold);
  }
}

/* ---------- Tangible deliverables v2 ---------- */
.deliverables-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) {
  .deliverables-grid-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .deliverables-grid-v2 {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}
.deliverable-v2 {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(30px, 3.4vw, 40px);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.deliverable-v2::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  border-radius: 4px 0 0 4px;
}
.deliverable-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(19,41,75,.10), 0 4px 12px rgba(19,41,75,.06);
  border-color: var(--gold-soft);
}
.deliverable-v2 h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 12px 0;
  line-height: 1.25;
}
.deliverable-v2 p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Proprietary platform section ---------- */
.platform-section {
  background:
    linear-gradient(135deg, rgba(19,41,75,.98) 0%, rgba(10,22,40,.97) 100%),
    linear-gradient(90deg, rgba(200,161,74,.12), transparent);
  color: rgba(255,255,255,.86);
  overflow: hidden;
}
.platform-section::before {
  content: none;
}
.platform-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 6vw, 78px);
  align-items: start;
}
.platform-intro h2 {
  color: #fff;
  max-width: 14ch;
  margin-bottom: 22px;
}
.platform-intro p {
  color: rgba(255,255,255,.78);
  max-width: 62ch;
}
.platform-principle {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(200,161,74,.42);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.35;
  color: #fff !important;
}
.platform-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.platform-card {
  min-height: 230px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.055);
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
}
.platform-card span {
  display: inline-block;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 26px;
  font-style: italic;
  margin-bottom: 18px;
}
.platform-card h3 {
  color: #fff;
  font-size: clamp(20px, 2vw, 24px);
  margin-bottom: 12px;
}
.platform-card p {
  color: rgba(255,255,255,.72);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 980px) {
  .platform-shell { grid-template-columns: 1fr; }
  .platform-intro h2 { max-width: 20ch; }
}
@media (max-width: 640px) {
  .platform-grid { grid-template-columns: 1fr; }
  .platform-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Scenarios grid ---------- */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) {
  .scenarios-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
}

/* ---------- 404 page ---------- */
.page-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.page-404 h1 {
  margin-bottom: 16px;
}
.page-404 p {
  font-size: 17px;
  color: var(--body);
  max-width: 48ch;
  margin: 0 auto 28px;
  line-height: 1.6;
}

/* =========================================================
   Polish pass — cropping, spacing, overflow fixes
   ========================================================= */

/* -- Guide cards: ensure content doesn't touch clip edges -- */
.guide-cover {
  padding: clamp(24px, 3vw, 32px);
}
.guide-cover::after {
  left: clamp(24px, 3vw, 32px);
  bottom: clamp(24px, 3vw, 32px);
}
.guide-body {
  padding: clamp(24px, 3vw, 32px);
}
.guide-body h3 {
  margin: 0 0 12px 0;
}
.guide-body > p {
  margin: 0 0 18px 0;
}
.guide-cover h2 {
  padding-right: 8px;
}
.guide-cover .guide-pages {
  padding-bottom: 6px;
}
.guide-note {
  margin: 16px 0 0 0;
}

/* -- Executive resource card (on resources page if present) -- */
.executive-resource-card .guide-cover {
  border-radius: 0;
}

/* -- Guide grid: ensure 3-up with breathing room -- */
.guide-grid-detailed {
  gap: clamp(24px, 3vw, 32px);
}

/* -- Button: prevent text clipping inside compact buttons -- */
.guide-actions .btn {
  padding: 12px 20px;
  white-space: nowrap;
}

/* -- Resource library head: safe wrapping -- */
.resource-library-head .lede {
  max-width: 56ch;
}

/* =========================================================
   Executive Overview — standalone page
   ========================================================= */
.executive-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: clamp(88px, 11vw, 150px) 0 clamp(60px, 8vw, 110px);
}
.executive-hero .tagline {
  max-width: 56ch;
  line-height: 1.6;
}

.executive-standalone-section {
  padding: clamp(72px, 10vw, 130px) 0;
  background: var(--paper);
}
.executive-standalone-shell {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 100px);
  align-items: center;
}
.executive-standalone-preview {
  display: flex;
  justify-content: center;
}
.executive-pdf-preview {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 8.5 / 11;
  background:
    linear-gradient(135deg, rgba(19,41,75,.97), rgba(10,22,40,.95)),
    radial-gradient(circle at 80% 15%, rgba(200,161,74,.2), transparent 40%);
  border-radius: 6px;
  box-shadow:
    0 2px 8px rgba(14,31,58,.08),
    0 12px 36px rgba(14,31,58,.14),
    0 36px 80px rgba(14,31,58,.18);
  border: 1px solid rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 5vw, 60px);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.executive-pdf-preview:hover {
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px rgba(14,31,58,.10),
    0 18px 48px rgba(14,31,58,.16),
    0 44px 96px rgba(14,31,58,.20);
}
.executive-pdf-preview::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,161,74,.2) 0%, transparent 70%);
  pointer-events: none;
}
.executive-pdf-preview::after {
  content: "";
  position: absolute;
  left: clamp(24px, 4vw, 40px);
  right: clamp(24px, 4vw, 40px);
  bottom: clamp(24px, 4vw, 40px);
  height: 3px;
  background: var(--gold);
}
.executive-pdf-page {
  text-align: center;
  position: relative;
  z-index: 1;
}
.executive-pdf-logo {
  width: min(140px, 50%);
  height: auto;
  margin: 0 auto 32px;
  opacity: .9;
}
.executive-pdf-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}
.executive-pdf-subtitle {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.executive-pdf-bar {
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin: 28px auto 0;
  opacity: .8;
}
.executive-standalone-content {
  max-width: 540px;
}
.executive-standalone-content h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  margin-bottom: 24px;
  max-width: 20ch;
  line-height: 1.15;
}
.executive-dots {
  margin: 28px 0 40px 0;
}
.executive-dots li {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
}
.executive-standalone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.executive-standalone-actions .btn {
  min-width: 190px;
  text-align: center;
}
.executive-standalone-note {
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Executive Overview page — responsive */
@media (max-width: 880px) {
  .executive-standalone-shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .executive-standalone-preview {
    order: -1;
  }
  .executive-pdf-preview {
    max-width: 380px;
  }
  .executive-standalone-content {
    max-width: none;
  }
  .executive-standalone-content h2 {
    max-width: none;
  }
}
@media (max-width: 520px) {
  .executive-standalone-actions {
    flex-direction: column;
  }
  .executive-standalone-actions .btn {
    width: 100%;
    text-align: center;
  }
  .executive-pdf-preview {
    max-width: 320px;
  }
}

/* -- Mobile responsive: executive resource card on resources page -- */
@media (max-width: 720px) {
  .executive-resource-card {
    border-radius: var(--radius-md);
  }
  .executive-resource-card .guide-cover {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .executive-resource-card .guide-body {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
}

/* -- Nav: accommodate extra link on smaller desktops -- */
@media (min-width: 1081px) and (max-width: 1280px) {
  .site-header .nav-row {
    width: min(1232px, calc(100% - 32px));
    gap: 18px;
  }
  .brand {
    flex-basis: 238px;
    gap: 10px;
  }
  .brand img {
    height: 30px;
  }
  .brand-text {
    font-size: 10px;
    letter-spacing: .11em;
  }
  .brand-text .small {
    font-size: 9px;
    letter-spacing: .13em;
  }
  .nav-links {
    gap: clamp(9px, 1.05vw, 14px);
  }
  .nav-links a {
    font-size: 12px;
    letter-spacing: .01em;
  }
  .nav-links .nav-cta {
    padding: 8px 11px;
    font-size: 10.5px;
    letter-spacing: .045em;
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .site-header .nav-row {
    width: min(1348px, calc(100% - 48px));
  }
  .brand {
    flex-basis: 274px;
  }
  .brand-text {
    font-size: 10.5px;
    letter-spacing: .15em;
  }
  .nav-links {
    gap: clamp(13px, 1.3vw, 19px);
  }
  .nav-links a {
    font-size: 12.75px;
  }
  .nav-links .nav-cta {
    padding: 9px 14px;
    font-size: 10.75px;
  }
}

@media (min-width: 1441px) {
  .nav-links {
    gap: clamp(18px, 1.5vw, 28px);
  }
}

/* =========================================================
   Core Service Areas — executive cards
   ========================================================= */
.core-services-section {
  padding: clamp(72px, 10vw, 130px) 0;
}
.core-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) { .core-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .core-services-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.core-service-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: clamp(32px, 3.8vw, 44px) clamp(28px, 3.4vw, 40px);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.core-service-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
  border-radius: 4px 0 0 4px;
}
.core-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(19,41,75,.10), 0 4px 12px rgba(19,41,75,.06);
  border-color: var(--gold-soft);
}
.core-service-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.core-service-card h3 {
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 14px 0;
  line-height: 1.2;
}
.core-service-card p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
  margin: 0;
}

/* =========================================================
   PDF Resource Card — Executive Overview premium download card
   ========================================================= */
.pdf-resource-section {
  padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 8vw, 100px);
  background: var(--cream);
}
.pdf-resource-card {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 60px);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.pdf-resource-preview {
  display: flex;
  justify-content: center;
}
.pdf-preview-page {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 8.5 / 11;
  background: #fff;
  border: 1px solid var(--rule);
  border-top: 5px solid var(--navy);
  border-radius: 6px;
  box-shadow:
    0 4px 12px rgba(19,41,75,.06),
    0 16px 44px rgba(19,41,75,.10);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2.5vw, 28px) clamp(26px, 3vw, 36px);
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pdf-resource-card:hover .pdf-preview-page {
  transform: translateY(-3px);
  box-shadow:
    0 6px 16px rgba(19,41,75,.08),
    0 22px 56px rgba(19,41,75,.14);
}
.pdf-preview-page::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 3px;
  background: var(--gold);
}
.pdf-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pdf-preview-logo {
  width: 24px;
  height: auto;
  flex: 0 0 auto;
}
.pdf-preview-brand-text {
  font-family: var(--sans);
  font-size: 7.5px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 700;
}
.pdf-preview-accent {
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin: 16px 0 14px;
}
.pdf-preview-title {
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 6px;
}
.pdf-preview-subtitle {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 2vw, 22px);
}
.pdf-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pdf-preview-grid span {
  min-height: 36px;
  border: 1px solid var(--rule-soft, var(--rule));
  border-radius: 4px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 8px 10px;
  display: flex;
  align-items: center;
}
.pdf-preview-loop {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 14px;
}
.pdf-preview-loop span {
  height: 6px;
  background: var(--navy);
  border-radius: 10px;
  opacity: .85;
}
.pdf-preview-loop span:nth-child(2n) {
  background: var(--gold);
}
.pdf-preview-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(247,245,240,.9);
  padding: 4px 12px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.pdf-resource-body {
  display: flex;
  flex-direction: column;
}
.pdf-resource-eye {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 14px;
}
.pdf-resource-body h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 16px 0;
}
.pdf-resource-body p {
  font-size: 15px;
  color: var(--body);
  line-height: 1.7;
  margin: 0 0 20px 0;
  max-width: 56ch;
}
.pdf-resource-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
}
.pdf-resource-highlights li {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--body);
  line-height: 1.65;
  margin-bottom: 6px;
}
.pdf-resource-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--gold);
}
.pdf-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.pdf-resource-note {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 880px) {
  .pdf-resource-card {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
    text-align: center;
  }
  .pdf-resource-preview {
    order: -1;
  }
  .pdf-preview-page {
    max-width: 280px;
    margin: 0 auto;
  }
  .pdf-resource-body {
    align-items: center;
  }
  .pdf-resource-body p {
    text-align: center;
  }
  .pdf-resource-highlights {
    text-align: left;
    display: inline-block;
  }
  .pdf-resource-actions {
    justify-content: center;
  }
}

/* ===========================================================
   Pre-Launch QA — Mobile UX, Accessibility & Polish
   =========================================================== */

/* --- P0-2: Navy full-screen mobile menu --- */
@media (max-width: 1180px) {
  .nav-links {
    background: linear-gradient(135deg, #0a1f3a 0%, var(--navy-deep) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links::before {
    background: none;
  }
  .nav-links a:not(.btn) {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 18px 20px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }
  .nav-links a:not(.btn):hover,
  .nav-links a:not(.btn):active {
    color: var(--gold);
    background: rgba(255,255,255,.06);
  }
  .nav-links a:not(.btn).active {
    color: var(--gold);
  }
  .nav-links a:not(.btn).active::before {
    background: var(--gold);
  }
  .nav-toggle.open span {
    background: #fff;
  }
  .nav-links .nav-cta {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- P2-10: Tap targets minimum 44x44px --- */
.site-footer li {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-footer a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- P2-11: Hero CTA stacking on mobile --- */
@media (max-width: 540px) {
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .hero-cta .hero-secondary-link {
    text-align: center;
    margin-top: 0;
  }
}


/* --- P2-13: Pricing table responsive cards --- */
@media (max-width: 640px) {
  .tier-table { display: block; }
  .tier-table thead { display: none; }
  .tier-table tbody { display: flex; flex-direction: column; gap: 16px; }
  .tier-table tr {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    padding: 20px;
  }
  .tier-table td {
    border-bottom: none;
    padding: 4px 0;
  }
  .tier-table td:first-child {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 700;
  }
  .tier-table td:last-child {
    font-size: 20px;
    margin-top: 4px;
  }
}

/* --- P2-14: Image CLS prevention --- */
.hero-photo img {
  aspect-ratio: 3/2;
}
.founder-image img {
  aspect-ratio: 4/3;
}
.founder-card .founder-image img {
  aspect-ratio: 1/1;
}

/* --- P3: Warning triangle markers --- */
.problem-mark {
  font-size: 18px;
  color: var(--gold);
  background: rgba(200, 161, 74, .14);
}

/* --- P4: Accessibility --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

/* Engagement steps responsive */
@media (max-width: 880px) {
  .engagement-steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .engagement-steps::before {
    display: none;
  }
}
@media (max-width: 540px) {
  .engagement-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .engagement-step {
    flex-direction: row;
    text-align: left;
    gap: 16px;
  }
  .engagement-step p {
    max-width: none;
  }
}

/* Scenarios grid responsive */
.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) {
  .scenarios-grid { grid-template-columns: 1fr; }
}

/* Executive overview responsive */
@media (max-width: 880px) {
  .executive-overview {
    grid-template-columns: 1fr;
  }
}

/* Deliverables v2 grid */
.deliverables-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 880px) {
  .deliverables-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .deliverables-grid-v2 { grid-template-columns: 1fr; }
}
.deliverable-v2 {
  padding-top: 20px;
  border-top: 2px solid var(--navy);
}
.deliverable-v2 h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.2;
}
.deliverable-v2 p {
  font-size: 14.5px;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* Operational loop diagram */
.loop-diagram {
  max-width: 100%;
  overflow: hidden;
}
.loop-svg {
  width: 100%;
  height: auto;
}
.mobile-loop {
  display: none;
}
@media (max-width: 768px) {
  .loop-svg { display: none; }
  .mobile-loop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .loop-node {
    background: var(--navy);
    color: #fff;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 4px;
    text-align: center;
    width: 100%;
    max-width: 280px;
  }
  .loop-arrow {
    width: 2px;
    height: 24px;
    background: var(--gold);
    position: relative;
  }
  .loop-arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--gold);
  }
}
.loop-caption {
  text-align: center;
  margin-top: clamp(20px, 3vw, 36px);
  font-family: var(--serif);
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--muted);
}


/* ---------- Footer App Link ---------- */
.footer-app-link {
  color: var(--gold) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.footer-app-link:hover {
  opacity: 0.8;
}

/* ---------- Dedicated CCO Platform Page ---------- */
.platform-hero-premium {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(200, 161, 74, .18), transparent 32%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 54%, #10233f 100%);
  padding: clamp(92px, 12vw, 168px) 0 clamp(76px, 10vw, 132px);
}
.platform-hero-premium::before {
  content: none;
}
.platform-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, 1fr);
  gap: clamp(44px, 7vw, 96px);
  align-items: center;
}
.platform-hero-copy h1 {
  color: #fff;
  max-width: 13.5ch;
  font-size: clamp(42px, 5.7vw, 72px);
}
.platform-hero-copy .tagline {
  max-width: 59ch;
  color: rgba(255,255,255,.82);
  font-size: clamp(17px, 1.45vw, 20px);
}
.platform-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.btn.platform-outline {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.05);
}
.btn.platform-outline:hover {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.platform-dashboard-wrap {
  position: relative;
  min-height: 440px;
}
.dashboard-orbit {
  position: absolute;
  inset: 22px 0 0 38px;
  border: 1px solid rgba(200,161,74,.22);
  transform: rotate(-5deg);
}
.ops-dashboard {
  position: relative;
  margin-top: 36px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.065));
  box-shadow: 0 34px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  border-radius: var(--radius-md);
}
.dash-topline,
.dash-score-row,
.dash-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.dash-topline {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.68);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.dash-topline strong { color: #fff; font-size: 12px; }
.dash-score-row {
  align-items: stretch;
  margin: 24px 0;
}
.score-tile {
  flex: 1;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(10,22,40,.38);
  border-radius: var(--radius-sm);
}
.score-tile span,
.score-tile em {
  display: block;
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-style: normal;
}
.score-tile strong {
  display: block;
  color: var(--gold-soft);
  font-family: var(--serif);
  font-size: 52px;
  line-height: .95;
  margin: 10px 0;
}
.dash-list {
  display: grid;
  gap: 10px;
}
.dash-list div {
  justify-content: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.dash-list span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  flex: 0 0 auto;
}
.dash-list p {
  flex: 1;
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: 14px;
}
.dash-list strong {
  color: rgba(255,255,255,.92);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dash-bars {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.dash-bars span {
  height: 8px;
  width: var(--w);
  background: linear-gradient(90deg, var(--gold), rgba(255,255,255,.3));
  border-radius: 99px;
}
.platform-two-col,
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 86px);
  align-items: center;
}
.platform-two-col.align-start { align-items: start; }
.platform-copy-block {
  max-width: 67ch;
  font-size: 17px;
}
.platform-pillar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(44px, 7vw, 82px);
}
.platform-pillar,
.capability-card,
.comparison-card,
.workflow-stage {
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.platform-pillar {
  padding: clamp(26px, 3vw, 36px);
}
.platform-pillar span,
.workflow-stage span,
.cap-icon {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 26px;
  font-style: italic;
}
.platform-pillar p,
.capability-card li {
  font-size: 14.5px;
  line-height: 1.65;
}
.platform-preview {
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 18%, rgba(200, 161, 74, .18), transparent 30%),
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 58%, #0f223d 100%);
}
.platform-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.0385) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.033) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .75;
  pointer-events: none;
}
.platform-preview-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 520px);
  gap: clamp(38px, 7vw, 94px);
  align-items: center;
}
.platform-preview-copy {
  max-width: 620px;
}
.platform-preview-copy .section-title {
  color: #fff;
  font-size: clamp(38px, 5vw, 58px);
}
.platform-preview-copy .lede {
  color: rgba(255,255,255,.9);
}
.platform-preview-copy p:not(.lede) {
  color: rgba(255,255,255,.76);
  max-width: 58ch;
}
.platform-preview-frame {
  position: relative;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
    rgba(10,22,40,.58);
  box-shadow: 0 32px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.platform-preview-frame::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  border: 1px solid rgba(200,161,74,.24);
  border-radius: 26px;
  transform: rotate(2deg);
  z-index: -1;
}
.preview-frame-top {
  display: flex;
  gap: 7px;
  padding: 6px 8px 14px;
}
.preview-frame-top span {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255,255,255,.34);
}
.preview-frame-top span:first-child { background: var(--gold); }
.preview-image-shell {
  max-height: min(920px, 72vh);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: var(--navy-deep);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.42);
}
.preview-image-shell::-webkit-scrollbar {
  display: none;
}
.preview-image-shell img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 13px;
}
.platform-preview-frame figcaption {
  margin: 14px 4px 2px;
  color: rgba(255,255,255,.64);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.capability-card {
  padding: 26px;
  min-height: 330px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.capability-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-soft);
}
.capability-card h3 {
  margin-top: 18px;
  font-size: 22px;
}
.capability-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
}
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.comparison-card {
  padding: clamp(28px, 4vw, 44px);
}
.comparison-card h3 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.comparison-card p {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 600;
}
.comparison-card.with {
  background: linear-gradient(135deg, #fff, #fbf8ef);
  border-color: rgba(200,161,74,.42);
}
.workflow-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}
.workflow-stage {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  padding: clamp(24px, 3vw, 34px);
}
.workflow-stage h3 { color: #fff; margin-top: 18px; }
.workflow-stage p { color: rgba(255,255,255,.72); font-size: 14.5px; margin: 0; }
.workflow-principle {
  margin: clamp(34px, 5vw, 58px) auto 0;
  max-width: 760px;
  text-align: center;
  color: #fff !important;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  font-style: italic;
}
.platform-philosophy {
  background:
    linear-gradient(90deg, rgba(19,41,75,.04), transparent),
    #fff;
}
.platform-philosophy .narrow {
  border-left: 3px solid var(--gold);
  padding-left: clamp(26px, 4vw, 46px);
}
.platform-philosophy h2 {
  font-size: clamp(36px, 5vw, 58px);
  max-width: 13ch;
}
.platform-philosophy p {
  max-width: 64ch;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.6;
  color: var(--ink);
}
.field-console {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 22px;
  align-items: center;
}
.field-device {
  padding: 28px;
  min-height: 340px;
  border-radius: 28px;
  border: 10px solid var(--navy);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.field-device span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.field-device strong {
  display: block;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  margin: 18px 0 14px;
}
.field-device p { font-size: 14px; }
.device-line {
  height: 10px;
  width: 100%;
  border-radius: 99px;
  background: var(--cream-deep);
  margin-top: 26px;
}
.device-line.short { width: 68%; margin-top: 12px; background: var(--gold-soft); }
.field-list {
  display: grid;
  gap: 12px;
}
.field-list p {
  margin: 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-soft);
  color: var(--navy);
  font-weight: 700;
}
.platform-final-cta {
  padding-top: 0;
  background: var(--cream);
}
.cta-panel {
  padding: clamp(42px, 7vw, 78px);
  background:
    linear-gradient(135deg, rgba(19,41,75,.98), rgba(10,22,40,.98)),
    var(--navy);
  color: rgba(255,255,255,.84);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
}
.cta-panel h2 {
  color: #fff;
  max-width: 18ch;
  font-size: clamp(34px, 4.4vw, 54px);
}
.cta-panel p {
  max-width: 68ch;
  color: rgba(255,255,255,.78);
}
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media (max-width: 1080px) {
  .platform-hero-grid,
  .platform-two-col,
  .platform-preview-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }
  .platform-preview-grid {
    justify-items: center;
  }
  .platform-preview-copy {
    justify-self: stretch;
  }
  .platform-preview-frame {
    width: min(100%, 560px);
  }
  .platform-hero-copy h1 { max-width: 16ch; }
  .platform-dashboard-wrap { min-height: 0; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-track,
  .platform-pillar-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .platform-hero-actions,
  .platform-final-cta .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-hero-actions .btn,
  .platform-final-cta .btn {
    width: 100%;
    text-align: center;
  }
  .dash-score-row,
  .comparison-grid,
  .field-console,
  .capability-grid,
  .workflow-track,
  .platform-pillar-row {
    grid-template-columns: 1fr;
  }
  .dash-score-row {
    display: grid;
  }
  .platform-dashboard-wrap {
    display: none;
  }
  .platform-preview-frame {
    padding: 9px;
    border-radius: 18px;
  }
  .platform-preview-frame::before {
    display: none;
  }
  .preview-image-shell {
    max-height: 78vh;
    border-radius: 12px;
  }
  .preview-image-shell img {
    border-radius: 11px;
  }
  .platform-philosophy .narrow {
    padding-left: 24px;
  }
}

/* =========================================================
   Executive-grade refinement pass — global premium polish
   ========================================================= */
:root {
  --site-max: 1240px;
  --content-max: 1000px;
  --gutter: clamp(22px, 4.4vw, 56px);
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-soft: 0 1px 2px rgba(14,31,58,.035), 0 12px 34px rgba(14,31,58,.065);
  --shadow-card: 0 2px 4px rgba(14,31,58,.04), 0 18px 52px rgba(14,31,58,.115);
  --shadow-deep: 0 24px 76px rgba(7,18,34,.42);
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

body {
  background:
    linear-gradient(180deg, rgba(247,245,240,.38) 0, rgba(255,255,255,0) 340px),
    var(--paper);
  font-size: clamp(16px, 1.04vw, 17px);
  line-height: 1.72;
}

h1,
h2,
h3,
h4,
.section-title {
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(42px, 5.55vw, 70px);
  line-height: 1.02;
}

h2,
.section-title {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.08;
}

h3 {
  font-size: clamp(22px, 2.2vw, 28px);
}

p,
li {
  text-wrap: pretty;
}

section {
  padding: clamp(84px, 11.5vw, 148px) 0;
}

section.tight {
  padding: clamp(56px, 7vw, 92px) 0;
}

section.alt {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(247,245,240,.92) 100%),
    var(--cream);
}

.container,
.narrow {
  padding-left: 0;
  padding-right: 0;
}

.section-head {
  margin-bottom: clamp(46px, 6.4vw, 84px);
}

.section-head .lede,
.lede {
  line-height: 1.58;
}

.section-head .lede {
  max-width: 66ch;
}

.eyebrow {
  margin-bottom: clamp(16px, 2vw, 24px);
  letter-spacing: .34em;
}

.site-header {
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(19,41,75,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 10px 34px rgba(14,31,58,.045);
}

.nav-row {
  height: 84px;
  gap: clamp(18px, 2.4vw, 34px);
}

.brand {
  gap: clamp(10px, 1.1vw, 16px);
}

.brand img {
  height: clamp(30px, 2.3vw, 35px);
  width: auto;
}

.brand-text {
  letter-spacing: clamp(.13em, .75vw, .2em);
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .32s var(--ease-premium);
}

.nav-links a:not(.btn):hover::after,
.nav-links a:not(.btn).active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn {
  border-radius: var(--radius-sm);
  padding: 15px 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
  transition:
    background .28s var(--ease-premium),
    color .28s var(--ease-premium),
    border-color .28s var(--ease-premium),
    transform .28s var(--ease-premium),
    box-shadow .28s var(--ease-premium);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(19,41,75,.16), 0 3px 12px rgba(200,161,74,.18);
}

.btn.gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  border-color: rgba(181,142,55,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 30px rgba(200,161,74,.18);
}

.btn.gold:hover,
.nav-links .nav-cta:hover {
  background: linear-gradient(180deg, var(--navy-90), var(--navy));
  border-color: var(--navy);
}

.btn.ghost,
.btn.platform-outline {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.btn.lg {
  padding: 16px 30px;
}

.hero,
.platform-hero-premium {
  isolation: isolate;
}

.hero.hero-full {
  min-height: calc(100svh - 84px);
  display: grid;
  align-items: center;
  padding: clamp(84px, 9vw, 132px) 0 clamp(72px, 8vw, 116px);
  background:
    radial-gradient(circle at 74% 22%, rgba(200,161,74,.16), transparent 34%),
    linear-gradient(135deg, #091525 0%, var(--navy-deep) 44%, #152947 100%);
}

.hero.hero-full::after,
.cta-band::before,
.platform-section::after,
.platform-hero-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.0352) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.0286) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.82), transparent 82%);
  z-index: 0;
}

.hero.hero-full .container,
.platform-hero-premium .container {
  position: relative;
  z-index: 1;
}

.hero.hero-full .hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(460px, 1.08fr);
  gap: clamp(44px, 5.8vw, 78px);
}

.hero.hero-full .hero-copy h1 {
  max-width: 22ch;
  margin-bottom: 22px;
  font-size: clamp(44px, 5.35vw, 72px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.hero .tagline {
  margin: 0 0 26px;
  max-width: 58ch;
  color: rgba(255,255,255,.82);
}

.platform-hero-line {
  margin-top: 24px;
  margin-bottom: 34px;
  padding: 20px 22px 20px 24px;
  border-left-width: 2px;
  background: rgba(255,255,255,.075);
}

.hero-cta,
.platform-actions,
.platform-hero-actions,
.cta-actions,
.executive-standalone-actions,
.pdf-resource-actions,
.guide-actions,
.template-actions {
  gap: 14px;
}

.hero-secondary-link,
.card-link,
.cta-email-note a {
  transition: color .28s var(--ease-premium), border-color .28s var(--ease-premium), transform .28s var(--ease-premium);
}

.hero-secondary-link:hover,
.card:hover .card-link {
  transform: translateX(3px);
}

.hero-philosophy {
  margin-top: 40px;
  padding-top: 26px;
  border-top-color: rgba(200,161,74,.24);
}

.hero-photo,
.photo-frame,
.founder-card,
.platform-preview-frame,
.ops-dashboard,
.executive-pdf-preview,
.pdf-resource-card,
.executive-overview,
.cta-panel {
  box-shadow: var(--shadow-deep);
}

.hero.hero-full .hero-photo {
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translateY(-18px) translateZ(0);
}

.hero.hero-full .hero-photo::before {
  right: 24px;
  top: 24px;
  width: 54px;
}

.hero.hero-full .hero-photo img {
  aspect-ratio: auto;
  object-fit: contain;
  min-height: 0;
}

.hero.hero-full .hero-photo:hover img {
  transform: none;
}

.page-hero,
.executive-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(200,161,74,.14), transparent 34%),
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  padding: clamp(84px, 10vw, 142px) 0 clamp(62px, 8vw, 102px);
}

.page-hero .tagline,
.executive-hero .tagline {
  max-width: 62ch;
  line-height: 1.66;
}

.page-hero .hero-meta {
  padding: 24px 0 0;
  border-top: 1px solid rgba(200,161,74,.36);
}

.card,
.service-card,
.guide-card,
.template-card,
.deliverable-v2,
.core-service-card,
.scenario,
.testimonial,
.proof-card,
.offer-panel,
.platform-pillar,
.capability-card,
.comparison-card,
.workflow-stage,
.pdf-resource-card,
.executive-overview {
  border-color: rgba(19,41,75,.105);
  transition:
    transform .34s var(--ease-premium),
    box-shadow .34s var(--ease-premium),
    border-color .34s var(--ease-premium),
    background .34s var(--ease-premium);
}

.card,
.service-card,
.guide-card,
.template-card,
.deliverable-v2,
.core-service-card,
.scenario,
.testimonial,
.proof-card,
.offer-panel,
.platform-pillar,
.capability-card,
.comparison-card {
  box-shadow: var(--shadow-soft);
}

.card:hover,
.service-card:hover,
.guide-card:hover,
.template-card:hover,
.deliverable-v2:hover,
.core-service-card:hover,
.scenario:hover,
.platform-pillar:hover,
.capability-card:hover,
.comparison-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,161,74,.55);
  box-shadow: var(--shadow-card);
}

.card,
.service-card,
.deliverable-v2,
.core-service-card,
.platform-pillar,
.capability-card {
  min-height: 100%;
}

.card h3,
.service-card h3,
.deliverable-v2 h3,
.core-service-card h3,
.platform-pillar h3,
.capability-card h3,
.template-body h2,
.guide-body h3 {
  line-height: 1.18;
}

.problem-item,
.outcome,
.before-after-list li,
.comparison-card p {
  border-color: rgba(19,41,75,.1);
}

.problem-item {
  padding: 24px 0;
}

.problem-mark,
.outcome-mark,
.engagement-num {
  box-shadow: 0 8px 20px rgba(200,161,74,.18);
}

.process,
.deliverables-grid-v2,
.guide-grid,
.template-grid,
.core-services-grid,
.capability-grid,
.platform-pillar-row,
.comparison-grid,
.workflow-track,
.cols {
  gap: clamp(24px, 3.2vw, 40px);
}

.platform-card {
  transition: transform .34s var(--ease-premium), border-color .34s var(--ease-premium), background .34s var(--ease-premium), box-shadow .34s var(--ease-premium);
}

.platform-card:hover,
.workflow-stage:hover {
  transform: translateY(-4px);
  border-color: rgba(200,161,74,.44);
  background: rgba(255,255,255,.085);
  box-shadow: 0 22px 58px rgba(0,0,0,.2);
}

.cta-band,
.platform-section,
.platform-preview,
.site-footer {
  background:
    radial-gradient(circle at 84% 14%, rgba(200,161,74,.14), transparent 34%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

.cta-band h2,
.cta-panel h2,
.platform-intro h2 {
  max-width: 20ch;
}

.field input,
.field textarea {
  border-radius: var(--radius-sm);
  min-height: 48px;
}

.field input:hover,
.field textarea:hover {
  border-color: rgba(19,41,75,.22);
}

.site-footer {
  padding-top: clamp(72px, 8vw, 112px);
}

.site-footer .row {
  gap: clamp(28px, 4vw, 52px);
}

.site-footer .grid {
  gap: clamp(30px, 4vw, 54px);
}

@media (prefers-reduced-motion: no-preference) {
  main > section {
    animation: premium-section-rise .72s var(--ease-premium) both;
  }

  main > section:nth-child(2) { animation-delay: .04s; }
  main > section:nth-child(3) { animation-delay: .08s; }

  .hero-copy,
  .page-hero .hero-grid > *,
  .platform-hero-copy,
  .platform-dashboard-wrap {
    animation: premium-section-rise .86s var(--ease-premium) both;
  }

  .hero-visual,
  .page-hero .hero-meta,
  .platform-dashboard-wrap {
    animation-delay: .12s;
  }
}

@keyframes premium-section-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1180px) {
  .nav-links a:not(.btn)::after {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hero.hero-full {
    min-height: auto;
  }

  .hero.hero-full .hero-grid,
  .platform-hero-grid {
    grid-template-columns: 1fr;
  }

  .hero.hero-full .hero-photo {
    transform: translateZ(0);
  }

  .hero.hero-full .hero-copy h1,
  .platform-hero-copy h1 {
    max-width: 18ch;
  }
}

@media (max-width: 880px) {
  section {
    padding: clamp(68px, 12vw, 104px) 0;
  }

  .page-hero .hero-meta {
    max-width: 420px;
  }

  .site-footer .row {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

@media (max-width: 720px) {
  h1,
  .hero.hero-full .hero-copy h1,
  .platform-hero-copy h1 {
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1.04;
  }

  h2,
  .section-title {
    font-size: clamp(30px, 9vw, 40px);
  }

  .nav-row {
    height: 66px;
  }

  .brand img {
    height: 29px;
  }

  .hero.hero-full {
    padding-top: clamp(64px, 14vw, 92px);
  }

  .hero.hero-full .hero-photo img {
    min-height: 0;
    aspect-ratio: auto;
  }

  .platform-hero-line,
  .hero-philosophy {
    padding-left: 18px;
  }

  .btn,
  .btn.lg {
    width: 100%;
    padding: 15px 20px;
    text-align: center;
  }

  .guide-actions .btn,
  .template-actions .btn,
  .executive-overview-actions .btn,
  .pdf-resource-actions .btn {
    width: 100%;
  }

  .card,
  .service-card,
  .guide-body,
  .template-body,
  .deliverable-v2,
  .core-service-card,
  .capability-card,
  .comparison-card,
  .testimonial,
  .proof-card,
  .offer-panel,
  .pdf-resource-card,
  .executive-overview,
  .cta-panel {
    padding: clamp(24px, 7vw, 32px);
  }
}

@media (max-width: 420px) {
  .container,
  .narrow {
    width: min(var(--site-max), 100% - 36px);
  }

  .eyebrow {
    letter-spacing: .24em;
  }
}

/* =========================================================
   Mobile product refinement — premium native iOS experience
   ========================================================= */
@media (max-width: 720px) {
  :root {
    --gutter: 22px;
    --radius-sm: 13px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --shadow-soft: 0 1px 2px rgba(14,31,58,.035), 0 12px 34px rgba(14,31,58,.07);
    --shadow-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 48px rgba(14,31,58,.105);
    --shadow-deep: 0 24px 70px rgba(7,18,34,.34);
  }

  html {
    scroll-padding-top: 78px;
  }

  body {
    background:
      linear-gradient(180deg, rgba(247,245,240,.68) 0, rgba(255,255,255,0) 420px),
      #fbfcfc;
    color: #344052;
    font-size: 16.5px;
    line-height: 1.68;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
  }

  .container,
  .narrow {
    width: min(100% - 38px, var(--site-max));
  }

  section,
  section.tight {
    padding: 74px 0;
  }

  section + section {
    margin-top: 0;
  }

  main > section:first-child {
    padding-top: 58px;
  }

  h1,
  .hero.hero-full .hero-copy h1,
  .platform-hero-copy h1 {
    font-size: clamp(38px, 10.8vw, 48px);
    line-height: 1.045;
    max-width: 12.5ch;
    margin-bottom: 18px;
  }

  h2,
  .section-title,
  .platform-preview-copy .section-title,
  .platform-philosophy h2,
  .cta-panel h2 {
    font-size: clamp(29px, 8.25vw, 38px);
    line-height: 1.1;
    max-width: 15ch;
  }

  h3 {
    font-size: clamp(21px, 6vw, 27px);
    line-height: 1.16;
  }

  p,
  li {
    line-height: 1.68;
  }

  .lede,
  .tagline,
  .page-hero .tagline,
  .executive-hero .tagline,
  .platform-hero-copy .tagline {
    font-size: 17px;
    line-height: 1.62;
    max-width: 34ch;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 10px;
    letter-spacing: .2em;
    line-height: 1.5;
  }

  .eyebrow::before {
    width: 16px;
    margin-right: 0;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .section-head .lede {
    margin-top: 14px;
    max-width: 35ch;
  }

  .site-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,.78);
    border-bottom-color: rgba(19,41,75,.07);
    box-shadow: 0 8px 28px rgba(14,31,58,.055);
  }

  .site-header .nav-row {
    width: min(100% - 22px, 680px);
  }

  .nav-row {
    height: 64px;
  }

  .brand {
    max-width: calc(100% - 54px);
  }

  .brand img {
    height: 26px;
    padding-right: 13px;
  }

  .brand-text {
    font-size: clamp(8.1px, 2.3vw, 9.6px);
    letter-spacing: .075em;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(19,41,75,.09);
    box-shadow: 0 1px 0 rgba(255,255,255,.86) inset, 0 8px 20px rgba(14,31,58,.08);
    transition: transform .22s var(--ease-premium), background .22s var(--ease-premium), box-shadow .22s var(--ease-premium);
  }

  .nav-toggle:active {
    transform: scale(.94);
    background: rgba(247,245,240,.96);
  }

  .nav-toggle span {
    width: 18px;
    height: 1.5px;
  }

  .nav-toggle.open {
    background: rgba(10,22,40,.9);
    border-color: rgba(255,255,255,.18);
  }

  .nav-toggle.open span {
    background: #fff;
  }

  .nav-links {
    inset: 70px 12px auto;
    height: auto;
    max-height: calc(100dvh - 86px);
    padding: 12px;
    align-items: stretch;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,250,248,.9)),
      rgba(255,255,255,.88);
    border: 1px solid rgba(19,41,75,.08);
    border-radius: 28px;
    box-shadow: 0 24px 74px rgba(7,18,34,.2), 0 1px 0 rgba(255,255,255,.92) inset;
    transform: translateY(-6px) scale(.985);
    transform-origin: top center;
  }

  .nav-links::before {
    content: none;
  }

  .nav-links.open {
    transform: translateY(0) scale(1);
  }

  .nav-links a:not(.btn) {
    max-width: none;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border: 0;
    border-radius: 17px;
    color: #1b2e4f;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: 0;
    text-align: left;
  }

  .nav-links a:not(.btn)::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: transparent;
    order: 2;
  }

  .nav-links a:not(.btn).active {
    background: rgba(200,161,74,.12);
    color: var(--navy);
  }

  .nav-links a:not(.btn).active::before {
    background: var(--gold);
  }

  .nav-links a:not(.btn):active {
    transform: scale(.985);
    background: rgba(19,41,75,.055);
  }

  .nav-links .nav-cta {
    max-width: none;
    min-height: 54px;
    margin: 10px 0 0;
    border-radius: 18px;
    padding: 16px 18px;
    font-size: 11.5px;
    letter-spacing: .055em;
    box-shadow: 0 16px 34px rgba(200,161,74,.22), 0 1px 0 rgba(255,255,255,.32) inset;
  }

  .btn,
  .btn.lg,
  .btn.compact {
    min-height: 52px;
    border-radius: 17px;
    padding: 16px 20px;
    font-size: 11.5px;
    letter-spacing: .055em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }

  .btn:active {
    transform: scale(.975);
    box-shadow: 0 8px 18px rgba(19,41,75,.12);
  }

  .hero.hero-full,
  .platform-hero-premium,
  .page-hero,
  .executive-hero {
    min-height: auto;
    padding: 62px 0 70px;
  }

  .hero.hero-full,
  .platform-hero-premium {
    background:
      radial-gradient(circle at 78% 8%, rgba(226,199,136,.19), transparent 38%),
      linear-gradient(150deg, #071321 0%, #10213b 58%, #13294b 100%);
  }

  .hero.hero-full .hero-grid,
  .platform-hero-grid,
  .page-hero .hero-grid {
    gap: 30px;
  }

  .hero .tagline,
  .platform-hero-copy .tagline {
    margin-bottom: 20px;
    color: rgba(255,255,255,.84);
  }

  .platform-hero-line,
  .hero-philosophy,
  .platform-principle,
  .positioning {
    border-left: 0;
    border-radius: 20px;
    padding: 18px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
  }

  .hero-philosophy {
    margin-top: 24px;
    padding-top: 18px;
  }

  .hero-philosophy p,
  .platform-hero-line {
    font-size: 15px;
    line-height: 1.62;
  }

  .hero-cta,
  .platform-actions,
  .platform-hero-actions,
  .cta-actions,
  .guide-actions,
  .template-actions,
  .executive-overview-actions,
  .pdf-resource-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    width: 100%;
  }

  .hero-secondary-link,
  .card-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: .08em;
  }

  .hero.hero-full .hero-photo,
  .photo-frame,
  .founder-card {
    border-radius: 24px;
  }

  .hero.hero-full .hero-photo {
    overflow: hidden;
    transform: none;
  }

  .hero.hero-full .hero-photo::before,
  .photo-frame::before {
    width: 34px;
    right: 18px;
    top: 18px;
  }

  .page-hero,
  .executive-hero {
    background:
      radial-gradient(circle at 86% 0, rgba(200,161,74,.16), transparent 34%),
      linear-gradient(180deg, #fff 0%, #f7f5f0 100%);
  }

  .page-hero .hero-meta {
    width: 100%;
    border-top: 0;
    border-radius: 20px;
    padding: 18px;
    background: rgba(255,255,255,.74);
    box-shadow: var(--shadow-soft);
  }

  .problem-grid,
  .outcomes,
  .process,
  .deliverables-grid,
  .deliverables-grid-v2,
  .service-grid,
  .guide-grid,
  .guide-grid-detailed,
  .template-grid,
  .template-grid-detailed,
  .core-services-grid,
  .capability-grid,
  .platform-grid,
  .platform-pillar-row,
  .comparison-grid,
  .workflow-track,
  .scenarios-grid,
  .cols,
  .cols.cols-2,
  .cols.cols-3,
  .cols.cols-4 {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: none;
  }

  .card,
  .service-card,
  .guide-card,
  .guide-body,
  .template-card,
  .template-body,
  .deliverable,
  .deliverable-v2,
  .core-service-card,
  .scenario,
  .testimonial,
  .proof-card,
  .offer-panel,
  .platform-pillar,
  .platform-card,
  .capability-card,
  .comparison-card,
  .workflow-stage,
  .pdf-resource-card,
  .executive-overview,
  .cta-panel,
  .field-list p {
    border-radius: 22px;
    border-color: rgba(19,41,75,.085);
    padding: 24px;
    box-shadow: var(--shadow-soft);
  }

  .card:hover,
  .service-card:hover,
  .guide-card:hover,
  .template-card:hover,
  .deliverable-v2:hover,
  .core-service-card:hover,
  .scenario:hover,
  .platform-pillar:hover,
  .platform-card:hover,
  .capability-card:hover,
  .comparison-card:hover,
  .workflow-stage:hover {
    transform: none;
  }

  .card .card-eye,
  .card .card-tag,
  .step-num,
  .scenario .scenario-eye,
  .offer-panel .offer-meta .left,
  .offer-panel .offer-meta .right,
  .comparison-card h3 {
    font-size: 10px;
    letter-spacing: .16em;
  }

  .card h3,
  .service-card h3,
  .deliverable h3,
  .deliverable-v2 h3,
  .platform-card h3,
  .capability-card h3,
  .core-service-card h3 {
    margin-bottom: 10px;
  }

  .card .card-desc,
  .service-card p,
  .deliverable-v2 p,
  .platform-card p,
  .capability-card li,
  .guide-card p,
  .template-card p {
    font-size: 15px;
    line-height: 1.62;
  }

  .problem-item,
  .outcome {
    grid-template-columns: 1fr;
    gap: 11px;
    padding: 20px;
    border: 1px solid rgba(19,41,75,.08);
    border-radius: 20px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadow-soft);
  }

  .problem-mark,
  .outcome-mark {
    width: 30px;
    height: 30px;
  }

  .step {
    align-items: flex-start;
    text-align: left;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(19,41,75,.08);
    box-shadow: var(--shadow-soft);
  }

  .step-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
  }

  .step-icon img {
    width: 32px;
    height: 32px;
  }

  .step p {
    max-width: none;
    margin: 0;
  }

  .before-after-grid {
    gap: 16px;
  }

  .before-after-col {
    border-radius: 22px;
    padding: 22px;
  }

  .before-after-list li,
  .comparison-card p {
    padding: 13px 0;
  }

  .platform-section,
  .platform-preview,
  .cta-band,
  .site-footer {
    background:
      radial-gradient(circle at 86% 8%, rgba(226,199,136,.13), transparent 34%),
      linear-gradient(145deg, #10213b 0%, #071321 100%);
  }

  .platform-shell,
  .platform-two-col,
  .platform-preview-grid,
  .field-grid,
  .field-console {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .platform-card {
    min-height: 0;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
  }

  .platform-card span,
  .platform-pillar span,
  .workflow-stage span,
  .cap-icon {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .platform-dashboard-wrap {
    display: none;
  }

  .platform-preview-frame {
    width: 100%;
    padding: 8px;
    border-radius: 24px;
  }

  .preview-image-shell {
    max-height: 64vh;
    border-radius: 17px;
    overscroll-behavior: contain;
  }

  .capability-card {
    min-height: 0;
  }

  .capability-card ul {
    padding-left: 16px;
    margin-top: 14px;
  }

  .testimonial::before {
    top: -9px;
    left: 20px;
    font-size: 70px;
  }

  .testimonial .quote {
    font-size: 22px;
    line-height: 1.42;
  }

  .field input,
  .field textarea {
    min-height: 52px;
    border-radius: 16px;
    font-size: 16px;
    padding: 15px 16px;
  }

  .field textarea {
    min-height: 132px;
  }

  .cta-band .container > div[style*="display:flex"],
  .cta-band .container > div[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px !important;
  }

  .site-footer {
    padding: 58px 0 24px;
  }

  .site-footer .row,
  .site-footer .grid,
  .site-footer .meta {
    gap: 22px;
  }

  .site-footer .grid {
    grid-template-columns: 1fr;
  }

  .site-footer .row img {
    height: 50px;
  }

  .site-footer h2 {
    margin-bottom: 10px;
  }

  .site-footer li {
    margin-bottom: 6px;
  }

  .site-footer a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .container,
  .narrow {
    width: min(100% - 32px, var(--site-max));
  }

  section,
  section.tight {
    padding: 66px 0;
  }

  .site-header .nav-row {
    width: min(100% - 18px, 390px);
  }

  .brand img {
    height: 24px;
  }

  .brand-text {
    font-size: clamp(7.2px, 2vw, 8.4px);
    letter-spacing: .045em;
  }

  .nav-links {
    inset: 66px 9px auto;
    max-height: calc(100dvh - 78px);
    border-radius: 25px;
  }

  .nav-links a:not(.btn) {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 15.5px;
  }

  h1,
  .hero.hero-full .hero-copy h1,
  .platform-hero-copy h1 {
    font-size: clamp(35px, 10.6vw, 43px);
  }

  h2,
  .section-title,
  .platform-preview-copy .section-title,
  .platform-philosophy h2,
  .cta-panel h2 {
    font-size: clamp(27px, 8.2vw, 34px);
  }

  .card,
  .service-card,
  .guide-card,
  .guide-body,
  .template-card,
  .template-body,
  .deliverable,
  .deliverable-v2,
  .core-service-card,
  .scenario,
  .testimonial,
  .proof-card,
  .offer-panel,
  .platform-pillar,
  .platform-card,
  .capability-card,
  .comparison-card,
  .workflow-stage,
  .pdf-resource-card,
  .executive-overview,
  .cta-panel,
  .step,
  .problem-item,
  .outcome {
    padding: 21px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links a,
  .nav-toggle,
  .btn,
  .card,
  .service-card,
  .guide-card,
  .template-card,
  .deliverable-v2,
  .core-service-card,
  .scenario,
  .platform-pillar,
  .platform-card,
  .capability-card,
  .comparison-card,
  .workflow-stage {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Final responsive polish pass
   ========================================================= */
.section-head {
  max-width: 820px;
}

.section-head[style*="text-align:center"],
#operational-loop .section-head {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-title {
  text-wrap: balance;
}

.section-head p,
.engagement-subhead,
.loop-caption {
  text-wrap: pretty;
}

.engagement-steps {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.engagement-step h3,
.engagement-step p {
  text-wrap: pretty;
}

#operational-loop .container {
  max-width: 1160px;
}

.loop-diagram {
  padding: 2px 0;
}

@media (min-width: 769px) {
  .loop-svg {
    max-width: 1020px;
  }
}

@media (max-width: 980px) {
  .section-head {
    max-width: 680px;
  }
}

@media (max-width: 720px) {
  .container,
  .narrow {
    width: min(100% - 44px, var(--site-max));
  }

  main > section:first-child {
    padding-top: 64px;
  }

  .section-head {
    margin-bottom: 38px;
  }

  .section-head[style*="text-align:center"],
  #operational-loop .section-head {
    width: 100%;
    padding-inline: 2px;
  }

  h1,
  .hero.hero-full .hero-copy h1,
  .platform-hero-copy h1 {
    max-width: 13.5ch;
  }

  h2,
  .section-title,
  .platform-preview-copy .section-title,
  .platform-philosophy h2,
  .cta-panel h2 {
    max-width: 17ch;
  }

  .lede,
  .tagline,
  .page-hero .tagline,
  .executive-hero .tagline,
  .platform-hero-copy .tagline {
    max-width: 36ch;
  }

  .platform-hero-line,
  .hero-philosophy,
  .platform-principle,
  .positioning {
    padding: 20px;
  }

  .problem-grid,
  .outcomes,
  .process,
  .deliverables-grid,
  .deliverables-grid-v2,
  .service-grid,
  .guide-grid,
  .guide-grid-detailed,
  .template-grid,
  .template-grid-detailed,
  .core-services-grid,
  .capability-grid,
  .platform-grid,
  .platform-pillar-row,
  .comparison-grid,
  .workflow-track,
  .scenarios-grid,
  .cols,
  .cols.cols-2,
  .cols.cols-3,
  .cols.cols-4 {
    gap: 18px;
  }

  .card,
  .service-card,
  .guide-card,
  .guide-body,
  .template-card,
  .template-body,
  .deliverable,
  .deliverable-v2,
  .core-service-card,
  .scenario,
  .testimonial,
  .proof-card,
  .offer-panel,
  .platform-pillar,
  .platform-card,
  .capability-card,
  .comparison-card,
  .workflow-stage,
  .pdf-resource-card,
  .executive-overview,
  .cta-panel,
  .field-list p {
    padding: 26px;
  }

  .engagement-steps {
    gap: 0;
    width: min(100%, 430px);
    margin-top: 42px;
    padding-left: 32px;
  }

  .engagement-step {
    min-height: 132px;
    gap: 20px;
    padding: 0 0 30px 38px;
    border-left: 2px solid rgba(200,161,74,.78);
    align-items: flex-start;
  }

  .engagement-step:last-child {
    min-height: 0;
    padding-bottom: 0;
  }

  .engagement-num {
    left: -21px;
    top: 0;
    width: 40px;
    height: 40px;
    border-width: 2px;
    font-size: 12px;
    box-shadow: 0 0 0 7px #fbfcfc, 0 10px 22px rgba(200,161,74,.2);
  }

  .engagement-step h3 {
    margin: 2px 0 9px;
    font-size: 15.5px;
  }

  .engagement-step p {
    max-width: 31ch;
    font-size: 14.5px;
    line-height: 1.62;
  }

  #operational-loop .section-head {
    margin-bottom: 36px !important;
  }

  .mobile-loop {
    width: min(100%, 346px);
    margin: 0 auto;
  }

  .loop-node {
    max-width: none;
    min-height: 54px;
    display: grid;
    place-items: center;
    padding: 15px 22px;
    border-radius: 8px;
    line-height: 1.3;
    box-shadow: 0 12px 28px rgba(19,41,75,.14);
  }

  .loop-arrow {
    height: 42px;
    margin: 10px 0 12px;
    background: linear-gradient(180deg, transparent 0, var(--gold) 18%, var(--gold) 78%, transparent 100%);
  }

  .loop-arrow::after {
    bottom: 3px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-top-width: 9px;
  }

  .loop-caption {
    max-width: 34ch;
    margin-top: 30px;
  }
}

@media (max-width: 420px) {
  .container,
  .narrow {
    width: min(100% - 40px, var(--site-max));
  }

  section,
  section.tight {
    padding: 70px 0;
  }

  .card,
  .service-card,
  .guide-card,
  .guide-body,
  .template-card,
  .template-body,
  .deliverable,
  .deliverable-v2,
  .core-service-card,
  .scenario,
  .testimonial,
  .proof-card,
  .offer-panel,
  .platform-pillar,
  .platform-card,
  .capability-card,
  .comparison-card,
  .workflow-stage,
  .pdf-resource-card,
  .executive-overview,
  .cta-panel,
  .step,
  .problem-item,
  .outcome {
    padding: 23px;
  }

  .engagement-steps {
    width: min(100%, 366px);
    padding-left: 28px;
  }

  .engagement-step {
    min-height: 136px;
    padding-left: 36px;
    padding-bottom: 31px;
  }

  .engagement-num {
    left: -20px;
  }

  .mobile-loop {
    width: min(100%, 320px);
  }
}

/* ---------- Secure Identity Experience ---------- */
.auth-screen {
  min-height: 100vh;
  background:
    linear-gradient(130deg, rgba(10,22,40,.96), rgba(19,41,75,.92)),
    url("photos/workspace.jpg") center/cover fixed;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .72fr);
  padding: clamp(22px, 4vw, 56px);
  gap: clamp(24px, 5vw, 72px);
  align-items: stretch;
}

.login-brand-panel {
  min-height: calc(100vh - clamp(44px, 8vw, 112px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(19,41,75,.62), rgba(10,22,40,.82));
  color: rgba(255,255,255,.84);
  box-shadow: var(--shadow-deep);
}

.login-brand img {
  width: min(220px, 60vw);
}

.login-brand-panel h1 {
  max-width: 12ch;
  color: #fff;
  font-size: clamp(42px, 7vw, 76px);
  line-height: .95;
}

.login-brand-panel p {
  max-width: 58ch;
  color: rgba(255,255,255,.78);
  font-size: clamp(16px, 1.8vw, 19px);
}

.login-security-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.login-security-grid span {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(226,199,136,.34);
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-card {
  align-self: center;
  padding: clamp(28px, 5vw, 48px);
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(226,199,136,.54);
  box-shadow: 0 28px 80px rgba(0,0,0,.24);
}

.login-card-head span {
  display: block;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.login-card-head h2 {
  font-size: clamp(34px, 5vw, 48px);
  margin-top: 6px;
}

.login-card-head p,
.auth-note,
.password-rules {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.auth-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.auth-form label {
  display: grid;
  gap: 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-form input {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(19,41,75,.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink);
  font: 500 16px/1.4 var(--sans);
  background: #fff;
}

.auth-form input:focus {
  outline: 2px solid rgba(200,161,74,.42);
  border-color: var(--gold);
}

.auth-form button[disabled],
.secure-logout[disabled] {
  opacity: .65;
  cursor: wait;
}

.auth-link-button {
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: 800 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-status {
  margin: 20px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  background: var(--cream);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.auth-status[data-type="error"] {
  border-left-color: #9f2d20;
  color: #7a2118;
  background: #fff1ef;
}

.auth-status[data-type="success"] {
  border-left-color: #31785a;
  color: #225742;
  background: #edf8f2;
}

.password-rules {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.secure-app {
  min-height: 100vh;
  background: var(--cream);
}

.secure-app:not(.auth-ready) .secure-content,
.secure-app:not(.auth-ready) .secure-sidebar {
  visibility: hidden;
}

.secure-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.secure-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 30px 24px;
  background: linear-gradient(180deg, var(--navy), var(--navy-deep));
  color: #fff;
}

.secure-logo img {
  width: 190px;
}

.secure-sidebar nav {
  display: grid;
  gap: 6px;
}

.secure-sidebar a {
  padding: 11px 12px;
  color: rgba(255,255,255,.78);
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: 700;
}

.secure-sidebar a:hover,
.secure-sidebar a.active {
  color: #fff;
  border-left-color: var(--gold);
  background: rgba(255,255,255,.07);
}

.secure-logout {
  margin-top: auto;
  min-height: 44px;
  border: 1px solid rgba(226,199,136,.48);
  color: #fff;
  background: transparent;
  font: 800 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.secure-logout.inline {
  margin: 0;
  padding: 0 14px;
  color: var(--navy);
  border-color: rgba(19,41,75,.22);
}

.secure-content,
.access-denied {
  padding: clamp(28px, 5vw, 64px);
}

.secure-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(19,41,75,.12);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.secure-hero {
  margin-top: clamp(34px, 6vw, 72px);
  padding: clamp(28px, 5vw, 54px);
  background: #fff;
  border: 1px solid rgba(19,41,75,.10);
  box-shadow: var(--shadow-soft);
}

.secure-hero h1 {
  font-size: clamp(42px, 7vw, 72px);
}

.secure-hero p {
  max-width: 68ch;
  font-size: 18px;
}

.secure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.secure-tile {
  min-height: 210px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(19,41,75,.10);
  box-shadow: var(--shadow-soft);
}

.secure-tile span {
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
}

.secure-tile h2 {
  margin-top: 18px;
  font-size: 28px;
}

.single-secure {
  display: block;
}

.access-denied {
  max-width: 720px;
  margin: 10vh auto;
  background: #fff;
  border: 1px solid rgba(159,45,32,.2);
  box-shadow: var(--shadow-card);
}

@media (max-width: 980px) {
  .login-shell,
  .secure-shell {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: auto;
    gap: 44px;
  }

  .secure-sidebar {
    position: static;
    height: auto;
  }

  .secure-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .login-shell {
    padding: 0;
  }

  .login-brand-panel,
  .login-card,
  .secure-hero,
  .secure-tile {
    border-left: 0;
    border-right: 0;
  }

  .login-security-grid {
    grid-template-columns: 1fr;
  }

  .secure-topline {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------- Header brand lockup refinement ---------- */
.site-header .brand {
  gap: clamp(7px, .7vw, 10px);
  flex-basis: clamp(196px, 21vw, 286px);
}

.site-header .brand img {
  height: clamp(30px, 2.05vw, 34px);
}

.site-header .brand-text {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: clamp(9px, .75vw, 12px);
  font-size: 10.5px;
  line-height: 1.05;
  letter-spacing: .145em;
}

.site-header .brand-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, rgba(19,41,75,.16), rgba(200,161,74,.72), rgba(19,41,75,.16));
}

.site-header .brand-text .small {
  width: fit-content;
  margin-top: 0;
  padding: 2px 7px 1px;
  border: 1px solid rgba(200,161,74,.36);
  border-radius: 2px;
  background: rgba(200,161,74,.08);
  color: var(--gold-deep);
  font-size: 8.5px;
  line-height: 1.15;
  letter-spacing: .16em;
}

@media (min-width: 1081px) and (max-width: 1280px) {
  .site-header .brand {
    flex-basis: 218px;
    gap: 7px;
  }

  .site-header .brand img {
    height: 30px;
  }

  .site-header .brand-text {
    padding-left: 8px;
    font-size: 9.5px;
    letter-spacing: .1em;
  }

  .site-header .brand-text .small {
    padding: 1px 5px;
    font-size: 7.75px;
    letter-spacing: .12em;
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .site-header .brand {
    flex-basis: 252px;
  }

  .site-header .brand-text {
    font-size: 10px;
    letter-spacing: .12em;
  }
}

@media (max-width: 720px) {
  .site-header .brand {
    gap: 8px;
  }

  .site-header .brand-text {
    padding-left: 9px;
    font-size: 9.5px;
    letter-spacing: .1em;
  }

  .site-header .brand-text .small {
    padding: 1px 5px;
    font-size: 7.5px;
    letter-spacing: .11em;
  }
}

@media (max-width: 380px) {
  .site-header .brand-text {
    display: none;
  }
}

/* Final executive typography and timeline alignment polish. */
.engagement-steps {
  grid-template-columns: repeat(5, minmax(154px, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  max-width: 1180px;
}

.engagement-step h3 {
  max-width: 18ch;
  min-height: 3.9em;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.28;
  text-wrap: balance;
}

.engagement-step p {
  max-width: 29ch;
  line-height: 1.64;
  text-wrap: pretty;
}

@media (min-width: 981px) {
  .engagement-steps::before {
    left: calc(10% - 2px);
    right: calc(10% - 2px);
  }
}

@media (max-width: 1180px) and (min-width: 981px) {
  .engagement-steps {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
  }
}

@media (max-width: 980px) and (min-width: 721px) {
  .engagement-steps {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    max-width: 760px;
    row-gap: 34px;
  }

  .engagement-step h3 {
    min-height: 0;
    max-width: 24ch;
  }

  .engagement-step p {
    max-width: 38ch;
  }
}

@media (max-width: 720px) {
  .engagement-steps {
    width: min(100%, 560px);
    max-width: 560px;
    margin-top: 40px;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .engagement-step {
    display: grid;
    grid-template-columns: 44px clamp(128px, 25vw, 148px) minmax(0, 1fr);
    grid-template-areas: "marker title copy";
    column-gap: clamp(12px, 4vw, 18px);
    align-items: start;
    min-height: 0;
    padding: 0 0 32px;
    border-left: 0;
    text-align: left;
  }

  .engagement-step::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 21px;
    width: 2px;
    background: rgba(200,161,74,.78);
    z-index: 0;
  }

  .engagement-step:last-child {
    padding-bottom: 0;
  }

  .engagement-step:last-child::before {
    content: none;
  }

  .engagement-num {
    grid-area: marker;
    position: relative;
    left: auto;
    top: auto;
    width: 42px;
    height: 42px;
    margin: 0;
    z-index: 1;
    box-shadow: 0 0 0 6px #fbfcfc, 0 10px 22px rgba(200,161,74,.18);
  }

  .engagement-step h3 {
    grid-area: title;
    min-height: 0;
    max-width: none;
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.28;
    letter-spacing: .01em;
    text-wrap: balance;
  }

  .engagement-step p {
    grid-area: copy;
    max-width: 34ch;
    margin: 1px 0 0;
    font-size: 14.5px;
    line-height: 1.62;
  }
}

@media (max-width: 520px) {
  .engagement-step {
    grid-template-columns: 42px clamp(124px, 34vw, 138px) minmax(0, 1fr);
    column-gap: 12px;
    padding-bottom: 30px;
  }

  .engagement-step::before {
    left: 20px;
  }

  .engagement-num {
    width: 40px;
    height: 40px;
  }

  .engagement-step h3 {
    font-size: 14.5px;
  }

  .engagement-step p {
    font-size: 14px;
    line-height: 1.6;
  }
}

@media (max-width: 420px) {
  .engagement-steps {
    width: min(100%, 390px);
  }

  .engagement-step {
    grid-template-columns: 40px clamp(118px, 34vw, 128px) minmax(0, 1fr);
    column-gap: 10px;
    padding-left: 0;
    padding-bottom: 29px;
  }

  .engagement-step h3 {
    font-size: 14px;
    line-height: 1.3;
  }

  .engagement-step p {
    max-width: none;
    font-size: 13.75px;
  }
}

/* Final cascade guard for the native-feeling mobile header/menu. */
@media (max-width: 720px) {
  .site-header .brand {
    flex: 1 1 auto;
    flex-basis: auto;
    max-width: calc(100% - 56px);
  }

  .site-header .brand img {
    height: 26px;
  }

  .site-header .brand-text {
    display: grid;
    min-width: 0;
    padding-left: 9px;
    font-size: clamp(8.1px, 2.3vw, 9.6px);
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .site-header .brand-text .small {
    max-width: 100%;
    padding: 1px 5px;
    border-radius: 999px;
    font-size: 7.4px;
    letter-spacing: .09em;
  }

  .nav-links {
    inset: 70px 12px auto;
    border-radius: 28px;
  }
}

@media (max-width: 420px) {
  .site-header .brand img {
    height: 24px;
  }

  .site-header .brand-text {
    font-size: clamp(7.15px, 1.95vw, 8.25px);
    letter-spacing: .04em;
  }

  .site-header .brand-text .small {
    color: transparent;
    font-size: 0;
    letter-spacing: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .site-header .brand-text .small::after {
    content: "Intelligence";
    display: block;
    color: var(--gold-deep);
    font-size: clamp(7px, 1.92vw, 8px);
    letter-spacing: .055em;
    line-height: 1.15;
    margin-top: 2px;
  }

  .nav-links {
    inset: 66px 9px auto;
  }
}

@media (max-width: 380px) {
  .site-header .brand-text {
    display: none;
  }
}

/* ---------- Mobile hero heading: balanced line groups, no orphaned "And" ----------
   Word groups are bound with &nbsp; in the markup ("Transformation And",
   "Intelligence For", "Residential Care") so the heading breaks only between
   groups. Combined with a group-width max-width, each group lands on its own
   line for a clean, intentional stack. clamp() scales the size smoothly across
   phone widths (320–430px) without shrinking the type just to force fewer lines
   or letting the widest group ("Transformation And") overflow. */
@media (max-width: 480px) {
  .hero.hero-full .hero-copy h1 {
    font-size: clamp(32px, 9.2vw, 43px);
    line-height: 1.14;
    letter-spacing: 0.004em;
    max-width: 19ch;
    text-wrap: balance;
    margin-bottom: 20px;
  }
}

/* =========================================================
   Hero headline & eyebrow refinement
   ---------------------------------------------------------
   Premium, intentionally-composed hero typography. Line breaks
   are controlled with block-level line groups (not automatic
   wrapping), so the headline reads as three composed lines on
   desktop/tablet and four on phones, with the ampersand always
   bound to "Transformation". These selectors are intentionally
   more specific than the earlier scattered hero rules so this
   block is the single source of truth for the composition.
   ========================================================= */

/* Give the headline column a little more room so the composed
   lines sit comfortably instead of being squeezed by the image. */
.hero.hero-full .hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

/* Eyebrow — understated, executive kicker */
.hero.hero-full .hero-eyebrow {
  color: var(--gold);
  letter-spacing: 0.3em;
  line-height: 1.5;
  margin-bottom: 26px;
  max-width: 46ch;
  text-wrap: balance;
}

/* Desktop / tablet: three composed lines */
.hero.hero-full .hero-copy h1.hero-heading {
  max-width: none;
  font-size: clamp(33px, 3.4vw, 44px);
  line-height: 1.14;
  letter-spacing: 0;
  margin-bottom: 26px;
  text-wrap: normal;
}
.hero-heading .hero-heading-line { display: block; }
.hero-heading .hero-heading-org { display: inline; }

/* Single-column layout (image stacks under copy): shrink the
   heading box to its content so the three lines form a tidy,
   left-composed block rather than spanning the full width. */
@media (max-width: 1080px) {
  .hero.hero-full .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero.hero-full .hero-copy h1.hero-heading {
    max-width: max-content;
  }
}

/* Phones: dedicated four-line treatment ("Organizations" drops
   to its own line). Type scales smoothly across 320px–600px with
   clamp() so the widest line ("Operational Intelligence") never
   clips and the layout never introduces horizontal scrolling. */
@media (max-width: 600px) {
  .hero.hero-full .hero-copy h1.hero-heading {
    max-width: none;
    font-size: clamp(24px, 7.8vw, 40px);
    line-height: 1.16;
    letter-spacing: 0.002em;
    margin-bottom: 22px;
  }
  .hero-heading .hero-heading-org {
    display: block;
  }
}

/* ============================================================
   SERVICE PORTFOLIO 2026 — ADOPTION JOURNEY SYSTEM
   Components supporting the four-engagement adoption journey:
   Baseline → Deployment → Adoption → Managed Intelligence.
   ============================================================ */

/* --- Adoption journey: four engagements, one platform --- */
.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(28px, 4vw, 44px);
}
.journey-step {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium), border-color .28s var(--ease-premium);
}
a.journey-step { border-bottom: 1px solid var(--rule); }
a.journey-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--gold-soft);
  border-top-color: var(--gold);
}
.journey-step .journey-num {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.journey-step .journey-verb {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
}
.journey-step h3 {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 12px;
}
.journey-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 20px;
  flex: 1;
}
.journey-step .journey-link {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.journey-step .journey-link::after { content: "→"; color: var(--gold); transition: transform .2s; }
a.journey-step:hover .journey-link::after { transform: translateX(4px); }

/* Progression rail: DIAGNOSE → DEPLOY → ADOPT → IMPROVE */
.journey-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 auto clamp(26px, 3.4vw, 40px);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--navy);
}
.journey-rail span:not(.sep) { white-space: nowrap; }
.journey-rail .sep { color: var(--gold); letter-spacing: 0; font-weight: 400; }

/* --- Operating architecture: three connected environments --- */
.arch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.arch-env {
  padding: clamp(26px, 2.8vw, 34px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
}
.arch-env .arch-layer {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.arch-env h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 12px;
}
.arch-env p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 0; }

/* --- Platform capabilities: twelve capabilities, three functions --- */
.capability-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.capability-group {
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
}
.capability-group h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

/* --- Outcome statement --- */
.outcome-block {
  margin-top: clamp(30px, 3.6vw, 44px);
  padding: clamp(26px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.outcome-block .outcome-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.outcome-block p {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.45;
  color: var(--navy);
  margin: 0;
  max-width: 62ch;
}

/* --- Commercial positioning (replaces public pricing strips) --- */
.commercial-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(26px, 3vw, 36px);
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 40px);
  background: var(--navy);
  border-radius: var(--radius-md);
}
.commercial-strip .commercial-label {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.commercial-strip .commercial-terms {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  color: #fff;
  line-height: 1.2;
}
.commercial-strip .commercial-note {
  flex: 1 1 320px;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: clamp(18px, 2.4vw, 32px);
  margin: 0;
}

/* --- Service Portfolio document panel --- */
.portfolio-panel {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(30px, 3.6vw, 48px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
/* Document identity mark — a restrained stand-in for the cover,
   drawn in CSS so the panel costs no extra network requests. */
.portfolio-doc {
  aspect-ratio: 17 / 22;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 16px;
  background: var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}
.portfolio-doc .doc-rule { width: 26px; height: 2px; background: var(--gold); }
.portfolio-doc .doc-org {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  margin-top: 10px;
}
.portfolio-doc .doc-title {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.2;
  color: #fff;
}
.portfolio-doc .doc-year {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-top: 8px;
}
.portfolio-panel .portfolio-meta {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.portfolio-panel h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 34px);
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 14px;
}
.portfolio-panel p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--body);
  max-width: 60ch;
  margin: 0 0 26px;
}
.portfolio-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.portfolio-filemeta {
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* --- Responsive --- */
@media (max-width: 1080px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .arch-grid,
  .capability-groups { grid-template-columns: 1fr; }
  .portfolio-panel { grid-template-columns: 120px 1fr; }
}
@media (max-width: 720px) {
  .journey { grid-template-columns: 1fr; }
  .journey-rail { font-size: 11px; letter-spacing: 0.18em; gap: 8px 12px; }
  .commercial-strip { flex-direction: column; align-items: flex-start; gap: 20px; }
  .commercial-strip .commercial-note {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    padding-left: 0;
    padding-top: 20px;
    flex-basis: auto;
  }
  .portfolio-panel { grid-template-columns: 1fr; }
  .portfolio-doc { max-width: 132px; }
  .portfolio-actions .btn { flex: 1 1 100%; text-align: center; justify-content: center; }
}
@media (max-width: 420px) {
  .journey-rail { letter-spacing: 0.12em; }
  .outcome-block { padding-left: 20px; padding-right: 20px; }
  .portfolio-doc { display: none; }
}

/* ===========================================================
   Hero editorial photograph — "the operational record"
   Art direction for the FIRST homepage image only.
   Crop, grade and editorial label; scoped to .hero-figure so
   no other photograph on the site is affected.
   =========================================================== */

.hero-figure {
  position: relative;
  width: 100%;
  margin: 0;
}

/* Frame sits ON the grid rather than floating above it:
   no lifted offset, no drop shadow, single hairline rule. */
.hero.hero-full .hero-figure .hero-photo {
  position: relative;
  width: 100%;
  transform: none;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(200, 161, 74, .22);
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}

/* Editorial crop: cinematic 16:9, weighted low and slightly right so the
   documentation in the foreground holds the frame and ceiling dead space
   is removed. Grading stays restrained — cooler, less saturated, deeper
   contrast, natural highlights preserved. */
.hero.hero-full .hero-figure .hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 58% 74%;
  filter: saturate(.88) contrast(1.05);
  transform: none;
}

.hero.hero-full .hero-figure .hero-photo:hover img {
  transform: none;
}

/* Navy influence in the shadows only. Soft-light leaves highlights intact,
   so the photograph still reads as a photograph. Rendered only where the
   blend mode is supported — otherwise no wash is applied at all. */
.hero-photo-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 1;
}

@supports (mix-blend-mode: soft-light) {
  .hero-photo-grade {
    display: block;
    background: linear-gradient(170deg, rgba(19, 41, 75, .60) 0%, rgba(10, 22, 40, .82) 100%);
    mix-blend-mode: soft-light;
    opacity: .28;
  }
}

/* Bottom scrim: seats the photo into the navy hero. Left at its current
   strength so the photograph reads exactly as it does today. */
.hero.hero-full .hero-figure .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(9, 21, 37, 0) 54%, rgba(9, 21, 37, .52) 86%, rgba(9, 21, 37, .70) 100%);
}

/* The photograph carries its own CCO wordmark in the upper right, so the
   inherited gold corner rule is dropped here — it collided with the placard
   and doubled the accent. Gold now appears once, in the label arrow. */
.hero.hero-full .hero-figure .hero-photo::before {
  content: none;
}

/* Editorial caption — sits BELOW the photograph, centred to the frame, so the
   image itself stays uncovered. Annotation, not headline: no box, no button,
   no rule, no background. Gold is used for the arrow only. */
.hero-record-label {
  position: static;
  z-index: auto;
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

/* Trailing letter-space would push the line off-centre; trim it optically. */
.hero-record-label-part {
  margin-right: -.26em;
}

.hero-record-label-arrow {
  color: var(--gold);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}

/* ---------- Stacked layout ---------- */
@media (max-width: 980px) {
  .hero.hero-full .hero-visual {
    padding-top: 6px;
  }
  /* Caption stays centred under the frame and visually attached to it. */
  .hero-record-label {
    margin-top: 14px;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .84);
  }
  .hero-record-label-part {
    margin-right: -.2em;
  }
  /* Lighter scrim — nothing sits on the image now. */
  .hero.hero-full .hero-figure .hero-photo::after {
    background: linear-gradient(180deg, rgba(9, 21, 37, 0) 62%, rgba(9, 21, 37, .34) 100%);
  }
}

@media (max-width: 640px) {
  /* Slightly taller frame so the notebook and the CCO placard still read at
     phone width, without taking excessive vertical space. */
  .hero.hero-full .hero-figure .hero-photo img {
    aspect-ratio: 16 / 10;
    object-position: 62% 78%;
  }
  .hero-record-label {
    font-size: 9.5px;
    letter-spacing: .16em;
    gap: 9px;
  }
  .hero-record-label-part {
    margin-right: -.16em;
  }
  .hero-record-label-arrow {
    font-size: 12px;
  }
}

/* Smallest phones: stack the line deliberately rather than let it wrap
   awkwardly — still centred, still attached to the image. */
@media (max-width: 380px) {
  .hero-record-label {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .hero-record-label-part {
    margin-right: 0;
    text-indent: .16em;
  }
  .hero-record-label-arrow {
    font-size: 12px;
    line-height: 1.1;
  }
}