/* ============================================================================
   Cloud 9 - the CMS half of the October 2026 design.

   cloud9-services.css is the design pack as delivered ("Design Cloud 9 Branding",
   7 Oct 2026), scoped to .c9-site: the header, hero, service cards, proof strip,
   partnership band and footer. This file is everything the CMS needs on top of it:
     1. the chrome the pack leaves to the CMS: the database-driven navigation and
        its Services mega menu, the solid bar on pages with no hero, the footer's
        data-driven service columns
     2. the content components the page generator (lib.mjs) emits that the pack has
        no equivalent for: split copy/image, feature grids, numbered steps, FAQ,
        quotes, pills, related links, the CRM lead form, legal text
     3. a shim for the Bootstrap 4 class names the shared CRM and blog includes emit
   Keep it loading after cloud9-services.css. Bootstrap 5 CSS stays loaded for the
   grid and spacing utilities; the pack's own grid classes coexist with it.
   Icons are the pack's SVGs, referenced relative to this file (../icons/).
   ========================================================================== */

/* --- 1. chrome ------------------------------------------------------------ */
/* The pack's menu is a flat list; the CMS adds a Services mega menu to it. */
.c9-site .c9-menu ul { gap: 22px; }
.c9-site .c9-menu a:not(.c9-button) { font-size: 13px; }
.c9-site .c9-menu .c9-mega { position: relative; display: flex; align-items: center; gap: 2px; }
.c9-site .c9-menu .c9-mega-caret { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.c9-site .c9-menu .c9-mega-caret img { width: 14px; height: 14px; transition: transform .2s ease; }
.c9-site .c9-menu .c9-mega-caret:hover { background: rgba(255, 255, 255, .08); }
.c9-site .c9-menu .c9-mega.c9-open > .c9-mega-caret img { transform: rotate(180deg); }
.c9-site .c9-menu .c9-mega-panel { display: none; }
.c9-site .c9-menu a.c9-mega-title { display: block; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(162, 189, 242, .22); color: #7de6fb; font-size: 11px; font-weight: 650; letter-spacing: 2px; text-transform: uppercase; min-height: 0; }
.c9-site .c9-menu .c9-mega-links { display: block; margin: 0; padding: 0; gap: 0; list-style: none; }
.c9-site .c9-menu .c9-mega-links li { display: block; }
.c9-site .c9-menu .c9-mega-links a { display: flex; min-height: 34px; padding: 4px 0; color: #dce8fa; font-size: 13px; font-weight: 500; white-space: normal; line-height: 1.35; }
.c9-site .c9-menu .c9-mega-links a:hover, .c9-site .c9-menu .c9-mega-links a[aria-current="page"] { color: #fff; }
.c9-site .c9-menu .c9-mega-links a[aria-current="page"]::after { display: none; }
@media (min-width: 992px) {
	.c9-site .c9-menu .c9-mega-panel { position: absolute; left: 50%; top: calc(100% + 4px); z-index: 40; width: min(740px, 92vw); padding: 26px 30px 22px; transform: translateX(-50%); border: 1px solid rgba(162, 189, 242, .25); border-radius: var(--c9-radius); background: #06182e; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 0 36px; }
	.c9-site .c9-menu .c9-mega:hover > .c9-mega-panel, .c9-site .c9-menu .c9-mega.c9-open > .c9-mega-panel, .c9-site .c9-menu .c9-mega-panel:focus-within { display: grid; }
	/* the pointer crosses a gap on its way down to the panel; keep it open on the way */
	.c9-site .c9-menu .c9-mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
}
@media (max-width: 991.98px) {
	.c9-site .c9-menu .c9-mega { flex-wrap: wrap; }
	.c9-site .c9-menu a.c9-mega-toggle { flex: 1 1 auto; width: auto; }
	.c9-site .c9-menu .c9-mega-caret { width: 44px; height: 44px; }
	.c9-site .c9-menu .c9-mega-caret img { width: 16px; height: 16px; }
	.c9-site .c9-menu .c9-mega-panel { flex-basis: 100%; padding: 2px 0 10px 14px; border-left: 2px solid rgba(162, 189, 242, .25); }
	.c9-site .c9-menu .c9-mega.c9-open > .c9-mega-panel { display: block; }
	.c9-site .c9-menu .c9-mega-col + .c9-mega-col { margin-top: 14px; }
	.c9-site .c9-menu .c9-mega-links a { width: auto; min-height: 40px; }
	.c9-site .c9-menu { max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* A page with no hero (blogs, shop, thank-you) cannot have the bar floating over it. */
.c9-no-hero .c9-site .c9-header { position: static; background: #06182e; }

/* footer: the service columns come from the Services mega menu, so the grid takes 4 to 6 */
.c9-site .c9-footer-grid.c9-footer-cols-5 { grid-template-columns: 1.3fr .7fr 1fr 1fr .9fr; }
.c9-site .c9-footer-grid.c9-footer-cols-6 { grid-template-columns: 1.2fr .7fr .9fr .9fr .9fr .9fr; gap: 28px; }
.c9-site .c9-footer-brand p + p { margin-top: 10px; }
.c9-site .c9-footer-brand a { color: #c5d6e7; }
@media (max-width: 1199px) {
	.c9-site .c9-footer-grid.c9-footer-cols-5, .c9-site .c9-footer-grid.c9-footer-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c9-site .c9-footer-grid.c9-footer-cols-5 .c9-footer-brand, .c9-site .c9-footer-grid.c9-footer-cols-6 .c9-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.c9-site .c9-footer-grid.c9-footer-cols-5, .c9-site .c9-footer-grid.c9-footer-cols-6 { grid-template-columns: 1fr 1fr; }
}

/* --- 2. content components ------------------------------------------------ */
/* Sections alternate white and pale; the dark band is the partnership/CTA block. */
.c9-site .c9-section.c9-soft { background: var(--c9-pale); }
.c9-site .c9-section .c9-heading { margin-bottom: 18px; }
.c9-site .c9-section .c9-lead { margin-bottom: 0; }
.c9-site .c9-section .c9-lead + .c9-lead { margin-top: .75em; }
.c9-site .c9-section-head { margin-bottom: 40px; }
.c9-site .c9-prose-list, .c9-site .c9-after { margin-top: 20px; }
.c9-site .c9-split.c9-split-top { align-items: start; }
.c9-site .c9-section-head .c9-lead { max-width: 820px; }
.c9-site .c9-heading-sm { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -1px; }
.c9-site .c9-anchor { scroll-margin-top: 24px; }

/* body copy */
.c9-site .c9-copy { color: var(--c9-muted); font-size: 16px; line-height: 1.75; }
.c9-site .c9-copy p + p { margin-top: 1em; }
.c9-site .c9-copy a, .c9-site .c9-check-list a, .c9-site .c9-legal a, .c9-site .c9-blog a { color: #175bcf; text-decoration: underline; text-underline-offset: 3px; }
.c9-site .c9-copy strong { color: var(--c9-ink); }
.c9-site .c9-outro { margin-top: 36px; max-width: 820px; }

/* image + copy, copy + panel */
.c9-site .c9-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 56px; align-items: center; }
.c9-site .c9-split.c9-split-wide { grid-template-columns: 5fr 7fr; }
.c9-site .c9-split .c9-heading { margin-bottom: 18px; }
.c9-site .c9-image { width: 100%; border-radius: var(--c9-radius); box-shadow: 0 26px 70px rgba(3, 24, 46, .18); object-fit: cover; }
.c9-site .c9-panel { padding: 30px 32px; border: 1px solid var(--c9-line); border-radius: var(--c9-radius); background: #fff; box-shadow: 0 3px 10px rgba(31, 81, 145, .045); }
.c9-site .c9-section:not(.c9-soft) .c9-panel { background: var(--c9-pale); }
.c9-site .c9-panel h3 { margin-bottom: 14px; font-size: 17px; font-weight: 650; letter-spacing: -.3px; }
.c9-site .c9-panel .c9-check-list { margin: 0; }

/* two-column copy: heading left, text right */
.c9-site .c9-prose { display: grid; grid-template-columns: 5fr 7fr; gap: 32px 56px; }
.c9-site .c9-prose .c9-heading { margin-bottom: 0; }

/* cards: the pack's service card, with or without an image */
.c9-site .c9-service-grid.c9-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.c9-site .c9-section-head + .c9-service-grid { margin-top: 0; }
.c9-site .c9-service-card .c9-card-title a { color: inherit; }
.c9-site .c9-service-card .c9-card-title a:hover { color: #175bcf; }
.c9-site .c9-card-body .c9-card-description.c9-card-description-auto { min-height: 0; }
.c9-site .c9-card-body p + p { margin-top: .6em; }
.c9-site .c9-card-body .c9-check-list { margin-bottom: 22px; }
.c9-site .c9-card-body .c9-list-title { margin: 16px 0 -12px; color: var(--c9-ink); font-size: 13px; font-weight: 650; }
.c9-site .c9-card-example { margin-top: 14px; font-size: 13px; }
.c9-site .c9-card-example strong { color: var(--c9-ink); }
.c9-site .c9-section.c9-soft .c9-service-card { box-shadow: 0 6px 18px rgba(31, 81, 145, .06); }

/* tick lists; long ones run in two columns */
.c9-site .c9-check-list.c9-check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 36px; margin: 0; }
.c9-site .c9-check-list.c9-check-grid li { font-size: 15px; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid var(--c9-line); }
.c9-site .c9-check-list.c9-check-grid img { margin-top: 4px; }
.c9-site .c9-check-list.c9-crosses img { opacity: .75; }
.c9-site .c9-check-list.c9-check-plain { margin: 20px 0 0; }

/* pills */
.c9-site .c9-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.c9-site .c9-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid rgba(151, 172, 221, .5); border-radius: 999px; background: rgba(1, 14, 30, .4); color: #dce8fa; font-size: 13px; font-weight: 500; line-height: 1.3; }
.c9-site .c9-section .c9-pill { border-color: #cfe2f5; background: #eef5fd; color: #0b4a78; }
.c9-site .c9-section.c9-soft .c9-pill { background: #fff; }

/* quotes: the questions people ask AI search */
.c9-site .c9-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.c9-site .c9-quote { padding: 16px 20px; border: 1px solid var(--c9-line); border-radius: 18px 18px 18px 6px; background: var(--c9-pale); color: #33475f; font-size: 15px; font-style: italic; line-height: 1.6; }
.c9-site .c9-section.c9-soft .c9-quote { background: #fff; }

/* feature blocks: the long-form capability copy */
.c9-site .c9-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 48px; margin-top: 8px; }
.c9-site .c9-feature { padding-top: 20px; border-top: 2px solid #dbe6f5; }
.c9-site .c9-feature h3 { margin-bottom: 10px; font-size: 20px; font-weight: 650; letter-spacing: -.4px; line-height: 1.3; }
.c9-site .c9-feature .c9-check-list { margin: 16px 0 0; }

/* numbered process */
.c9-site .c9-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; margin-top: 8px; }
.c9-site .c9-step { padding: 26px 24px; border: 1px solid var(--c9-line); border-radius: var(--c9-radius); background: #fff; box-shadow: 0 3px 10px rgba(31, 81, 145, .045); }
.c9-site .c9-step-no { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: linear-gradient(135deg, #e5f4ff, #eaeafe); color: #1e5fd0; font-size: 14px; font-weight: 700; }
.c9-site .c9-step h3 { margin-bottom: 8px; font-size: 17px; font-weight: 650; letter-spacing: -.3px; }
.c9-site .c9-step p { color: var(--c9-muted); font-size: 14px; line-height: 1.7; }

/* FAQ: native details, styled as the pack's cards */
.c9-site .c9-faq details { margin-bottom: 12px; border: 1px solid var(--c9-line); border-radius: var(--c9-radius); background: #fff; box-shadow: 0 3px 10px rgba(31, 81, 145, .045); }
.c9-site .c9-faq summary { position: relative; padding: 18px 56px 18px 22px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 650; letter-spacing: -.2px; line-height: 1.4; }
.c9-site .c9-faq summary::-webkit-details-marker { display: none; }
.c9-site .c9-faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: url("../icons/chevron-down.svg") center / contain no-repeat; transition: transform .2s ease; }
.c9-site .c9-faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.c9-site .c9-faq details p { padding: 0 22px 20px; color: var(--c9-muted); line-height: 1.75; }

/* related services */
.c9-site .c9-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.c9-site .c9-related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 18px; border: 1px solid var(--c9-line); border-radius: var(--c9-radius); background: #fff; color: var(--c9-ink); font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: 0 3px 10px rgba(31, 81, 145, .045); transition: border-color .2s ease, color .2s ease; }
.c9-site .c9-related a::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: url("../icons/arrow-right.svg") center / contain no-repeat; }
.c9-site .c9-related a:hover { border-color: #a7bcf9; color: #175bcf; }

/* the dark band doubles as every page's closing call to action */
.c9-site .c9-partnership .c9-note { margin-top: 22px; color: #9fb3ca; font-size: 13px; }
.c9-site .c9-partnership .c9-note a { color: #c5d6e7; text-decoration: underline; text-underline-offset: 3px; }
.c9-site .c9-partnership .c9-lead + .c9-button-row { margin-top: 34px; }

/* hero: our headlines and copy run longer than the pack's */
.c9-site .c9-hero h1.c9-h1-long { max-width: 780px; font-size: clamp(34px, 3.7vw, 54px); letter-spacing: -1.9px; }
.c9-site .c9-hero .c9-hero-note { max-width: 565px; margin-top: 14px; color: #c8d7e8; font-size: 15px; line-height: 1.7; }
.c9-site .c9-hero .c9-pills { margin-top: 22px; }
.c9-site .c9-hero .c9-pills a:hover { color: #fff; border-color: #fff; }
@media (max-width: 599px) {
	.c9-site .c9-hero h1.c9-h1-long { font-size: clamp(31px, 8.5vw, 42px); letter-spacing: -1.3px; }
}

/* the CRM lead form, inside a panel */
.c9-site .c9-form .control-label { color: var(--c9-ink); font-size: 14px; font-weight: 600; }
.c9-site .c9-form .form-control, .c9-site .c9-form .form-select { border: 1px solid #d3deed; border-radius: 12px; padding: .8rem 1rem; font-size: 15px; }
.c9-site .c9-form .form-control:focus { border-color: #8db4ff; box-shadow: 0 0 0 4px rgba(36, 108, 255, .12); }
.c9-site .c9-form .form-check-label { font-size: 14px; color: var(--c9-muted); }
.c9-site .c9-form .btn-primary, .c9-site .c9-form button[type="submit"] { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 28px; border: 0; border-radius: 999px; background: linear-gradient(105deg, #44daf0 0%, #8dbdff 54%, #d0a6ff 100%); color: #06172c; font-size: 14px; font-weight: 650; box-shadow: 0 6px 22px rgba(16, 112, 231, .13); }
.c9-site .c9-form .btn-primary:hover, .c9-site .c9-form button[type="submit"]:hover { color: #06172c; box-shadow: 0 9px 25px rgba(50, 110, 240, .25); transform: translateY(-2px); }
.c9-site .c9-form .error-message, .c9-site .c9-form label.error { color: #c0392b; font-size: 13px; }
.c9-site .c9-form p { color: var(--c9-muted); font-size: 14px; }
.c9-site .c9-contact-aside p + p { margin-top: 12px; }

/* legal pages: the existing wording, made readable */
.c9-site .c9-legal h2 { margin: 36px 0 12px; font-size: 22px; font-weight: 650; letter-spacing: -.5px; }
.c9-site .c9-legal h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 650; }
.c9-site .c9-legal p, .c9-site .c9-legal li { margin-bottom: 12px; color: #44566d; line-height: 1.75; }
.c9-site .c9-legal ul { margin: 0 0 14px; padding-left: 1.25rem; list-style: disc; }

/* the blog index and articles come from a shared include; give their text room */
.c9-site .c9-blog { padding-block: 48px 86px; }
.c9-site .c9-blog p { margin-bottom: 1rem; }
.c9-site .c9-blog ul { padding-left: 1.25rem; margin-bottom: 1rem; list-style: disc; }
.c9-site .c9-blog h2, .c9-site .c9-blog h3 { margin: 1.5rem 0 .75rem; font-weight: 650; }

@media (max-width: 991.98px) {
	.c9-site .c9-split, .c9-site .c9-split.c9-split-wide, .c9-site .c9-prose { grid-template-columns: 1fr; gap: 32px; }
	.c9-site .c9-service-grid.c9-grid-4, .c9-site .c9-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.c9-site .c9-features { grid-template-columns: 1fr; gap: 28px; }
	.c9-site .c9-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
	.c9-site .c9-check-list.c9-check-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 599px) {
	.c9-site .c9-service-grid.c9-grid-4, .c9-site .c9-related, .c9-site .c9-quotes { grid-template-columns: 1fr; }
	.c9-site .c9-panel { padding: 22px 20px; }
	.c9-site .c9-section-head { margin-bottom: 28px; }
}

/* --- 3. Bootstrap 4 names still emitted by shared includes ---------------- */
/* The CRM lead form, the blog index and the footer modals are shared code and
   still use these. Dropping them in Bootstrap 5 would only break Cloud 9. */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }
.form-row > .col, .form-row > [class*="col-"] { padding-right: 5px; padding-left: 5px; }
.btn-block { display: block; width: 100%; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.close { background: transparent; border: 0; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; opacity: .5; padding: .5rem; }
.close:hover { opacity: .9; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }
/* the footer modals are Bootstrap 4 markup rendered outside .c9-site: give them the site font */
.modal { font-family: Inter, "Segoe UI", Arial, sans-serif; }

/* --- 4. phones: a hero with more copy than the pack's stacks its artwork underneath ----- */
/* The pack pins the artwork to the bottom 420px of the hero and fades the copy over it,
   which suits its one-line lead. Our heroes carry a lead and one or two notes, so on a
   phone the text would run into the picture; lib.mjs marks those heroes .c9-hero-stack
   and they become a column: copy, then the artwork as its own band. */
@media (max-width: 599px) {
	.c9-site .c9-hero.c9-hero-stack { flex-direction: column; min-height: 0; }
	.c9-site .c9-hero.c9-hero-stack .c9-hero-content { padding-bottom: 30px; }
	.c9-site .c9-hero.c9-hero-stack .c9-hero-media { position: relative; order: 2; top: auto; bottom: auto; width: 100%; height: 240px; }
	.c9-site .c9-hero.c9-hero-stack .c9-hero-media img { position: absolute; }
}

/* --- 5. the proof strip as figures (the mockup's 100+ / 95% / 20+ row) -------------- */
.c9-site .c9-proof-item strong.c9-stat { color: #5166f8; background: linear-gradient(110deg, #059ae6 5%, #5665ff 52%, #a95ff0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 27px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin-bottom: 2px; }

/* --- 6. the home page blocks of the October 2026 mockup -------------------------------- */
/* a strip of six services under the hero, on the hero's dark */
.c9-site .c9-icon-row { background: var(--c9-deep); color: #fff; padding: 34px 0 40px; }
.c9-site .c9-icon-row-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.c9-site .c9-icon-row-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 14px; text-align: center; color: #fff; border-left: 1px solid rgba(162, 189, 242, .18); }
.c9-site .c9-icon-row-item:first-child { border-left: 0; }
.c9-site .c9-icon-row-item .c9-icon { width: 44px; height: 44px; flex-basis: 44px; margin-bottom: 4px; }
.c9-site .c9-icon-row-item strong { font-size: 13px; font-weight: 650; line-height: 1.3; }
.c9-site .c9-icon-row-item span { color: #acbad0; font-size: 12px; line-height: 1.45; }
.c9-site .c9-icon-row-item:hover strong { color: #82d9ff; }

/* dark sections (the "your partner" band) */
.c9-site .c9-section.c9-dark { background: linear-gradient(180deg, #041426, #06182e); color: #fff; }
.c9-site .c9-section.c9-dark .c9-eyebrow { color: #7de6fb; }
.c9-site .c9-statement { font-size: clamp(24px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.9px; line-height: 1.25; margin-bottom: 26px; }
.c9-site .c9-split-media { grid-template-columns: 5fr 6fr; gap: 40px 56px; }
.c9-site .c9-media-tile { display: block; border-radius: var(--c9-radius); overflow: hidden; box-shadow: 0 26px 70px rgba(0, 0, 0, .45); }
.c9-site .c9-media-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.c9-site .c9-media-tile:hover img { transform: scale(1.02); }
.c9-site .c9-check-list.c9-on-dark li { color: #dce8fa; border-bottom-color: rgba(162, 189, 242, .18); }
.c9-site .c9-check-list.c9-on-dark img { filter: brightness(1.35); }

/* copy beside a collage: a large image, a small one and two mini cards */
.c9-site .c9-collage { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto auto; gap: 14px; }
.c9-site .c9-collage-main { grid-row: 1 / 4; width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: var(--c9-radius); box-shadow: 0 20px 50px rgba(3, 24, 46, .16); }
.c9-site .c9-collage-side { width: 100%; height: 150px; object-fit: cover; border-radius: var(--c9-radius); }
.c9-site .c9-mini { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--c9-line); border-radius: var(--c9-radius); background: #fff; box-shadow: 0 3px 10px rgba(31, 81, 145, .045); }
.c9-site .c9-mini .c9-icon-disc { flex: 0 0 46px; width: 46px; height: 46px; }
.c9-site .c9-mini strong { display: block; font-size: 13px; font-weight: 650; line-height: 1.3; }
.c9-site .c9-mini span { display: block; color: var(--c9-muted); font-size: 12px; line-height: 1.5; }

/* six compact cards in one row, then a centred button */
.c9-site .c9-service-grid.c9-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.c9-site .c9-compact .c9-card-body { padding: 18px 16px 16px; }
.c9-site .c9-compact .c9-card-title { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; margin-bottom: 10px; }
.c9-site .c9-compact .c9-card-title h3 { font-size: 14px; letter-spacing: -.2px; }
.c9-site .c9-compact .c9-card-body p { font-size: 12px; line-height: 1.6; }
.c9-site .c9-compact .c9-card-body .c9-card-description { min-height: 0; }
.c9-site .c9-compact .c9-card-link { min-height: 36px; margin-top: 12px; }
.c9-site .c9-compact .c9-card-link .c9-link-label { display: none; }
.c9-site .c9-section-cta { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 1199px) {
	.c9-site .c9-icon-row-grid, .c9-site .c9-service-grid.c9-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.c9-site .c9-icon-row-item { border-left: 0; }
	.c9-site .c9-compact .c9-card-link .c9-link-label { display: inline; }
}
@media (max-width: 991.98px) {
	.c9-site .c9-split-media { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
	.c9-site .c9-icon-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 0; }
	.c9-site .c9-service-grid.c9-grid-6 { grid-template-columns: 1fr; }
	.c9-site .c9-collage { grid-template-columns: 1fr; }
	.c9-site .c9-collage-main { grid-row: auto; min-height: 220px; }
}

/* the menu sits over bright artwork on the "9" scene: a soft top shade keeps it readable */
.c9-site .c9-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 12, 27, .72), rgba(0, 12, 27, 0)); }

/* --- 7. a four-column Services menu and a seven-column footer ----------------------- */
/* The panel is centred under the whole bar, not under the Services item, and tucks 2px
   under the item's foot so the pointer can travel straight down into it. The item is the
   pack's 44px link centred in the bar, so its foot is 50% + 22px; at 50% + 24px the panel
   left a 2px strip of bare nav that dropped the hover, and the panel shut before the
   pointer reached it (the old ::after bridge cannot help once the item is static). */
.c9-site .c9-nav { position: relative; }
.c9-site .c9-menu .c9-mega { position: static; }
@media (min-width: 992px) {
	.c9-site .c9-menu .c9-mega-panel { top: calc(50% + 20px); width: min(1060px, 96vw); padding: 28px 32px 24px; grid-auto-columns: minmax(170px, 1fr); gap: 0 26px; }
	.c9-site .c9-menu .c9-mega::after { display: none; }
	.c9-site .c9-menu .c9-mega-links a { min-height: 32px; font-size: 12.5px; }
}
.c9-site .c9-footer-grid.c9-footer-cols-7 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.c9-site .c9-footer-grid.c9-footer-cols-7 .c9-footer-brand { grid-column: 1 / -1; }
.c9-site .c9-footer-grid.c9-footer-cols-7 .c9-footer-brand p { max-width: 420px; }
@media (max-width: 991.98px) {
	.c9-site .c9-footer-grid.c9-footer-cols-7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.c9-site .c9-footer-grid.c9-footer-cols-7 { grid-template-columns: 1fr 1fr; }
}

/* --- 8. new artwork, same names: the versioned band backdrop ------------------------ */
.c9-site .c9-partnership { background-image: url("../img/services-cta.webp?v=20261009"); }
/* The home page's own closing scene, the sunlit peak: lit from the right, so the copy sits on the dark left. */
.c9-site .c9-partnership.c9-partnership-home { background-image: url("../img/home-cta.webp?v=20261012"); }
/* The home hero's "9" stands right of centre and reaches near the top, so it is framed higher
   than the pack's scenes, and further right on a phone, where the picture sits under the copy. */
.c9-site .c9-hero-media img[src*="home-hero.webp"] { object-position: center 30%; }
@media (max-width: 991px) {
	.c9-site .c9-hero-media img[src*="home-hero.webp"] { object-position: 61% center; }
}
@media (max-width: 599px) {
	.c9-site .c9-hero-media img[src*="home-hero.webp"] { object-position: 85% bottom; }
}