with
Use this block as the forward reference for .cd-rich-text-split.
==================================================== */
.cd-rich-text-split br {
display: block;
content: "";
margin: 0;
line-height: 0;
}
.cd-rich-text-split br + br {
display: block;
content: "";
margin-top: var(--flow-space-body-to-body, var(--space-medium));
}
.cd-rich-text-split br + br + br {
display: none;
}
/* ====================================================
GENERATEPRESS OVERRIDES
Theme-level safety rules for GP output and wrappers.
Keep overrides narrow so they do not compete with the system layer.
==================================================== */
.one-container .site.grid-container {
padding: 0;
max-width: 100%;
}
.one-container .inside-article {
padding: 0;
}
/* ====================================================
CD / Capability Template / Entry Content Margin Fix
Neutralize GeneratePress false top offset when entry-content
is preceded by featured image wrapper on single capability pages.
==================================================== */
body.single-capability .inside-article > .entry-content:not(:first-child) {
margin-top: 0;
}
/* ====================================================
CD / Components / Footer / 113
Complete Footer System
Apply to outer footer wrapper:
cd-canvas cd-canvas--dark cd-footer
==================================================== */
.cd-footer {
border-top: var(--border-default) solid var(--border-divider-dark);
padding-top: var(--space-xl);
padding-bottom: var(--space-2xl);
}
/* Footer-wide link reset */
.cd-footer a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-footer a:hover {
color: var(--color-text-secondary);
opacity: .9;
}
/* Main grid */
.cd-footer-main {
display: grid;
grid-template-columns: 1.35fr .85fr 1fr;
gap: var(--space-lg);
padding-bottom: var(--space-2xl);
align-items: start;
}
.cd-footer-brand {
justify-self: start;
align-self: start;
}
.cd-footer-nav {
justify-self: start;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: .5rem;
}
.cd-footer-contact {
justify-self: end;
align-self: start;
max-width: 320px;
transform: translateY(30px);
padding-top: 0;
}
.cd-footer-contact p:first-of-type {
color: var(--color-text-secondary);
opacity: .95;
}
/* Brand */
.cd-footer-brand img {
max-width: 165px;
margin-bottom: var(--space-sm);
opacity: .98;
}
/* Navigation */
.cd-footer-nav a {
display: block;
width: 100%;
font-size: var(--text-sm);
font-weight: var(--font-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-text-secondary);
margin-bottom: var(--space-sm);
line-height: var(--leading-snug);
}
.cd-footer-nav a:hover {
transform: translateY(-1px);
}
.cd-footer-nav a:last-child {
margin-bottom: 0;
}
/* Contact block */
.cd-footer-contact strong {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--font-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-text-secondary);
margin-top: 0;
margin-bottom: var(--space-2xs);
white-space: nowrap;
opacity: .9;
}
.cd-footer-contact strong::after {
content: ":";
margin-left: .15em;
}
.cd-footer-contact p, .cd-footer-contact a {
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-text-secondary);
margin-top: 0;
margin-bottom: var(--space-sm);
overflow-wrap: anywhere;
word-break: break-word;
}
.cd-footer-contact a:hover {
color: var(--color-text-secondary);
opacity: .85;
}
/* Social */
.cd-footer-social {
display: flex;
align-items: center;
gap: var(--space-medium);
margin-top: var(--space-medium);
}
.cd-footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
opacity: .92;
}
.cd-footer-social a:hover {
opacity: 1;
transform: translateY(-.5px);
}
/* Meta */
.cd-footer-meta {
border-top: var(--border-default) solid var(--border-divider-dark);
padding-top: var(--space-medium);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-sm);
color: var(--color-text-secondary-soft);
}
.cd-footer-meta a {
color: var(--color-text-secondary-soft);
}
.cd-footer-meta a:hover {
color: var(--color-text-secondary);
}
/* Safety for accidental button-style links inside footer */
.cd-footer .gb-button, .cd-footer .wp-block-button__link {
background: transparent;
border: var(--border-default) solid var(--border-light-subtle);
color: var(--color-text-secondary);
padding: .4rem .75rem;
border-radius: var(--radius-sm);
}
.cd-footer .gb-button:hover, .cd-footer .wp-block-button__link:hover {
border-color: var(--border-light-hover);
}
/* Responsive */
@media (max-width: 960px) {
.cd-footer {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.cd-footer-main {
grid-template-columns: 1.1fr .85fr 1fr;
gap: var(--space-lg);
padding-bottom: var(--space-xl);
}
.cd-footer-brand img {
max-width: 155px;
margin-bottom: var(--space-sm);
}
.cd-footer-nav {
justify-self: start;
padding-top: .5rem;
}
.cd-footer-nav a {
font-size: var(--text-sm);
margin-bottom: var(--space-xs);
}
.cd-footer-contact {
justify-self: start;
align-self: start;
max-width: 100%;
transform: translateY(0);
}
.cd-footer-contact p, .cd-footer-contact a {
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.cd-footer-social {
gap: var(--space-sm);
}
}
@media (max-width: 880px) {
.cd-footer {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.cd-footer-main {
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-bottom: var(--space-xl);
}
.cd-footer-brand {
order: 1;
justify-self: start;
}
.cd-footer-contact {
order: 2;
justify-self: start;
align-self: start;
max-width: 100%;
transform: translateY(0);
}
.cd-footer-nav {
order: 3;
justify-self: start;
width: 100%;
}
.cd-footer-brand img {
max-width: 170px;
margin-bottom: var(--space-sm);
}
.cd-footer-nav a {
font-size: var(--text-base);
margin-bottom: var(--space-xs);
}
.cd-footer-contact p, .cd-footer-contact a {
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.cd-footer-social {
margin-top: var(--space-medium);
gap: var(--space-medium);
}
.cd-footer-meta {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: var(--space-xs);
}
}
/* ====================================================
CD / Components / Site Footer / 114
Structured four-layer footer for Footer Mark 2.
==================================================== */
.cd-site-footer {
position: relative;
isolation: isolate;
overflow: hidden;
color: var(--color-text-secondary);
background-color: var(--color-midnight-brand);
background-image: url("https://cdn-ileoooi.nitrocdn.com/MYeaiSZqNvcwqPBugRnAIKhJboYTTKFt/assets/images/optimized/rev-e3d9907/cayusedigital.com/wp-content/uploads/2026/04/conversions-2.jpg");
background-repeat: no-repeat;
background-position: calc(100% + 2rem) top;
background-size: min(72rem, 72vw) auto;
background-attachment: scroll;
}
.cd-site-footer.nitro-lazy {
background-image: none !important;
}
.cd-site-footer::before {
position: absolute;
z-index: -1;
inset: 0;
content: "";
background-color: rgba(0, 25, 48, 28%);
background-image: linear-gradient(100deg, rgba(0, 20, 39, 99%) 0%, rgba(0, 25, 48, 86%) 44%, rgba(0, 32, 60, 20%) 100%), linear-gradient(180deg, rgba(0, 25, 48, 4%) 0%, rgba(0, 25, 48, 24%) 26%, rgba(0, 25, 48, 90%) 52%, var(--color-midnight-brand) 72%);
pointer-events: none;
}
.cd-site-footer :is(p, h2) {
margin-block: 0;
}
.cd-site-footer a {
color: inherit;
text-decoration: none;
text-underline-offset: .22em;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-footer a:is(:hover, :focus-visible) {
color: #fff;
text-decoration: none;
}
.cd-site-footer a:focus-visible {
outline: 2px solid currentColor;
outline-offset: .28rem;
}
.cd-site-footer__identity .cd-container {
display: grid;
align-items: start;
}
.cd-site-footer__identity {
padding-block: var(--space-lg);
}
.cd-site-footer__brand {
max-width: 44rem;
}
.cd-site-footer__logo {
display: block;
width: clamp(11rem, 16vw, 14.5rem);
height: auto;
}
.cd-site-footer__brand > :first-child + p {
margin-top: var(--space-medium);
}
.cd-site-footer__brand > p {
max-width: 48ch;
}
.cd-site-footer__brand > p + p {
position: relative;
margin-top: var(--space-sm);
padding-top: var(--space-medium);
}
.cd-site-footer__brand > p + p::before {
position: absolute;
top: 0;
left: 0;
width: 2.75rem;
height: var(--border-default);
content: "";
background-color: var(--color-text-accent-gold);
opacity: .82;
}
.cd-site-footer__legal {
border-top: var(--border-default) solid color-mix(in srgb, var(--color-text-accent-gold) 34%, transparent);
}
.cd-site-footer__contact {
padding-block: var(--space-medium);
}
.cd-site-footer__contact > .cd-container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
.cd-site-footer__group {
min-width: 0;
}
.cd-site-footer .cd-site-footer__group > * + * {
margin-top: 0;
}
.cd-site-footer__group .cd-label {
color: var(--color-text-accent-gold);
font-size: var(--text-xs);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
letter-spacing: .1em;
}
.cd-site-footer__group > a, .cd-site-footer__group > .cd-text-body {
overflow-wrap: anywhere;
}
.cd-site-footer__contact .cd-site-footer__group {
position: relative;
display: grid;
align-content: start;
gap: .35rem;
padding-right: var(--space-lg);
padding-left: calc(var(--space-lg) + 3.5rem);
}
.cd-site-footer__contact .cd-site-footer__group:first-child {
padding-left: 3.5rem;
}
.cd-site-footer__contact .cd-site-footer__group:last-child {
padding-right: 0;
}
.cd-site-footer__contact .cd-site-footer__group + .cd-site-footer__group {
border-left: var(--border-default) solid color-mix(in srgb, var(--color-text-accent-gold) 28%, transparent);
}
.cd-site-footer__contact-link {
display: block;
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.cd-site-footer__contact-link svg {
position: absolute;
top: .05rem;
left: var(--space-lg);
width: 2.35rem;
height: 2.35rem;
color: var(--color-text-accent-gold);
}
.cd-site-footer__contact-link svg path {
fill: none;
stroke: currentColor;
stroke-width: 18;
stroke-linecap: round;
stroke-linejoin: round;
}
.cd-site-footer__contact .cd-site-footer__group:first-child .cd-site-footer__contact-link svg {
left: 0;
}
.cd-site-footer__social {
grid-template-columns: repeat(2, 1.5rem);
column-gap: var(--space-sm);
}
.cd-site-footer__social .cd-label {
grid-column: 1/-1;
}
.cd-site-footer__social > a {
display: inline-grid;
width: 1.5rem;
height: 1.5rem;
place-items: center;
}
.cd-site-footer__social-link svg {
display: block;
width: 1.15rem;
height: 1.15rem;
}
.cd-site-footer__navigation {
padding-block: var(--space-medium);
}
.cd-site-footer__navigation > .cd-container {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 0;
}
.cd-site-footer__navigation .cd-site-footer__group {
display: grid;
align-content: start;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-lg);
row-gap: .4rem;
padding-inline: var(--space-lg);
}
.cd-site-footer__navigation .cd-site-footer__group:first-child {
padding-left: 0;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child {
padding-right: 0;
border-left: var(--border-default) solid color-mix(in srgb, var(--color-text-accent-gold) 28%, transparent);
}
.cd-site-footer__navigation .cd-label {
grid-column: 1/-1;
margin-bottom: .2rem;
}
.cd-site-footer__navigation a {
width: fit-content;
max-width: 100%;
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.cd-site-footer__navigation a:nth-of-type(1) {
grid-area: 2/1;
}
.cd-site-footer__navigation a:nth-of-type(2) {
grid-area: 3/1;
}
.cd-site-footer__navigation a:nth-of-type(3) {
grid-area: 4/1;
}
.cd-site-footer__navigation a:nth-of-type(4) {
grid-area: 5/1;
}
.cd-site-footer__navigation a:nth-of-type(5) {
grid-area: 2/2;
}
.cd-site-footer__navigation a:nth-of-type(6) {
grid-area: 3/2;
}
.cd-site-footer__navigation a:nth-of-type(7) {
grid-area: 4/2;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(1) {
grid-area: 2/1;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(2) {
grid-area: 3/1;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(3) {
grid-area: 2/2;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(4) {
grid-area: 3/2;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(5) {
grid-area: 4/2;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(6) {
grid-area: 5/2;
}
.cd-site-footer__navigation .cd-site-footer__group:last-child a:nth-of-type(7) {
grid-area: 6/2;
}
.cd-site-footer__legal {
padding-block: var(--space-xs);
padding-bottom: calc(var(--space-xs) + 10px);
}
.cd-site-footer__legal > .cd-container {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-medium);
color: var(--color-text-secondary-soft);
}
.cd-site-footer__legal :is(p, a) {
font-size: var(--text-xs);
line-height: var(--leading-normal);
}
@media (max-width: 1024px) {
.cd-site-footer__contact > .cd-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-site-footer__contact .cd-site-footer__social {
grid-column: 1/-1;
padding-top: var(--space-sm);
padding-left: 0;
border-top: var(--border-default) solid color-mix(in srgb, var(--color-text-accent-gold) 22%, transparent);
border-left: 0;
}
}
@media (max-width: 768px) {
.cd-site-footer {
background-position: 72% top;
background-size: auto 24rem;
}
.cd-site-footer::before {
background-color: rgba(0, 25, 48, 86%);
background-image: linear-gradient(180deg, rgba(0, 20, 39, 91%) 0%, rgba(0, 25, 48, 98%) 30rem, rgba(0, 25, 48, 100%) 100%);
}
.cd-site-footer__contact > .cd-container, .cd-site-footer__navigation > .cd-container {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.cd-site-footer__contact .cd-site-footer__group, .cd-site-footer__contact .cd-site-footer__group:first-child, .cd-site-footer__contact .cd-site-footer__group:last-child, .cd-site-footer__navigation .cd-site-footer__group, .cd-site-footer__navigation .cd-site-footer__group:first-child, .cd-site-footer__navigation .cd-site-footer__group:last-child {
padding-inline: 0;
}
.cd-site-footer__contact .cd-site-footer__group:not(.cd-site-footer__social) {
padding-left: 3.5rem;
}
.cd-site-footer__contact .cd-site-footer__contact-link svg {
left: 0;
}
.cd-site-footer__contact .cd-site-footer__group + .cd-site-footer__group, .cd-site-footer__navigation .cd-site-footer__group:last-child {
padding-top: var(--space-sm);
border-top: var(--border-default) solid color-mix(in srgb, var(--color-text-accent-gold) 22%, transparent);
border-left: 0;
}
.cd-site-footer__navigation .cd-site-footer__group {
grid-template-columns: 1fr;
}
.cd-site-footer__navigation .cd-label, .cd-site-footer__navigation a:nth-of-type(n) {
grid-column: 1;
grid-row: auto;
}
.cd-site-footer__legal > .cd-container {
align-items: flex-start;
flex-direction: column;
gap: var(--space-xs);
}
}
/* ====================================================
CD / Components / Preheader Navigation / 115
Cayuse Commercial Secondary Navigation
Scoped to the GeneratePress hook surface only.
==================================================== */
.cd-preheader-nav {
position: relative;
z-index: 1100;
width: 100%;
background: var(--color-midnight-brand);
border-bottom: none;
color: #fff;
}
@media (min-width: 1280px) {
.cd-preheader-nav {
overflow: visible;
}
.cd-preheader-nav > .cd-container {
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
padding-inline: 2.35rem;
}
.gb-site-header:has(.cd-preheader-nav) .cd-site-header {
position: relative;
top: auto;
left: auto;
}
.cd-preheader-nav .cd-nav-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.75rem;
min-height: 66px;
padding-block: .55rem;
transition: min-height var(--motion-duration-default) var(--motion-ease-soft), padding var(--motion-duration-default) var(--motion-ease-soft);
}
div.cd-preheader-nav .cd-nav-row > a {
display: block;
flex: 0 0 auto;
min-width: max-content;
}
.cd-preheader-nav .cd-nav-brand, .cd-preheader-nav .cd-site-header__logo {
margin: 0;
flex: 0 0 auto;
color: #fff;
}
.cd-preheader-nav .cd-nav-brand {
font-size: .79rem;
font-weight: 600;
letter-spacing: .08em;
line-height: 1.1;
text-transform: uppercase;
white-space: nowrap;
}
.cd-preheader-nav .cd-site-header__logo, .cd-preheader-nav .cd-site-header__logo img, .cd-preheader-nav .cd-site-header__logo svg {
display: block;
width: auto;
height: auto;
max-height: 46px;
transform: translateY(.12rem) scale(1.05);
transform-origin: left center;
transition: max-height var(--motion-duration-default) var(--motion-ease-soft);
}
div.cd-preheader-nav .cd-nav-row > a .cd-site-header__logo {
max-width: none;
}
.cd-preheader-nav .cd-site-header__logo svg, .cd-preheader-nav .cd-site-header__logo svg * {
color: #fff;
}
.cd-preheader-nav .cd-nav-menu {
flex: 0 0 auto;
min-width: 0;
}
.cd-preheader-nav .wp-block-navigation {
flex: 0 0 auto;
min-width: 0;
}
.cd-preheader-nav .wp-block-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 100%;
margin-left: auto;
}
div.cd-preheader-nav .cd-nav-row > .wp-block-navigation {
flex: 1 1 auto;
width: auto;
max-width: 100%;
padding-right: 1.25rem;
}
.cd-preheader-nav .cd-nav-menu > ul, .cd-preheader-nav .cd-nav-menu > div > ul, .cd-preheader-nav .cd-nav-menu > nav > ul, .cd-preheader-nav .cd-nav-menu > div > nav > ul, .cd-preheader-nav .cd-nav-menu > .menu, .cd-preheader-nav .cd-nav-menu > .gb-menu, .cd-preheader-nav .wp-block-navigation > .wp-block-navigation__container {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: .2rem;
}
.cd-preheader-nav .cd-nav-menu ul, .cd-preheader-nav .cd-nav-menu .sub-menu, .cd-preheader-nav .cd-nav-menu .children, .cd-preheader-nav .wp-block-navigation ul, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container {
list-style: none;
margin: 0;
padding: 0;
}
.cd-preheader-nav .cd-nav-menu li, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item {
position: relative;
margin: 0;
}
.cd-preheader-nav .cd-nav-menu a, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item__content {
display: flex;
align-items: center;
gap: .4rem;
padding: .5rem .8rem;
color: #fff;
font-size: .775rem;
font-weight: 500;
letter-spacing: .045em;
line-height: 1.1;
text-decoration: none;
text-transform: uppercase;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft);
white-space: nowrap;
}
.cd-preheader-nav .cd-nav-menu a:hover, .cd-preheader-nav .cd-nav-menu a:focus-visible, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item__content:hover, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .08);
text-decoration: none;
}
.cd-preheader-nav .cd-nav-menu .current-menu-item > a, .cd-preheader-nav .cd-nav-menu .current-menu-parent > a, .cd-preheader-nav .cd-nav-menu .current-menu-ancestor > a, .cd-preheader-nav .cd-nav-menu .current_page_item > a, .cd-preheader-nav .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .cd-preheader-nav .wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content, .cd-preheader-nav .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content, .cd-preheader-nav .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
color: #fff;
background: rgba(255, 255, 255, .12);
}
.cd-preheader-nav .cd-nav-menu .menu-item-has-children > a .gb-submenu-toggle, .cd-preheader-nav .cd-nav-menu .page_item_has_children > a .gb-submenu-toggle, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-submenu__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.cd-preheader-nav .cd-nav-menu .menu-item-has-children > a .gb-submenu-toggle-icon, .cd-preheader-nav .cd-nav-menu .page_item_has_children > a .gb-submenu-toggle-icon, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-submenu__toggle svg {
width: .75rem;
height: .75rem;
opacity: .72;
stroke: currentColor;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-preheader-nav .cd-nav-menu .menu-item-has-children:hover > a .gb-submenu-toggle-icon, .cd-preheader-nav .cd-nav-menu .menu-item-has-children:focus-within > a .gb-submenu-toggle-icon, .cd-preheader-nav .cd-nav-menu .page_item_has_children:hover > a .gb-submenu-toggle-icon, .cd-preheader-nav .cd-nav-menu .page_item_has_children:focus-within > a .gb-submenu-toggle-icon {
opacity: 1;
}
.cd-preheader-nav .cd-nav-menu .sub-menu, .cd-preheader-nav .cd-nav-menu .children, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container {
position: absolute;
top: calc(100% + .2rem);
left: 0;
min-width: 15rem;
padding: .55rem;
display: flex;
flex-direction: column;
gap: .2rem;
background: rgba(10, 25, 47, .85);
color: rgba(255, 255, 255, .92);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: .95rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity var(--motion-duration-default) var(--motion-ease-soft), transform var(--motion-duration-default) var(--motion-ease-soft), visibility 0s linear var(--motion-duration-default);
z-index: 1110;
}
.cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: .55rem;
background: transparent;
}
div.cd-preheader-nav .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-submenu:last-child > .wp-block-navigation__submenu-container {
right: 0;
left: auto;
}
.cd-preheader-nav .cd-nav-menu .sub-menu .sub-menu, .cd-preheader-nav .cd-nav-menu .children .children, .cd-preheader-nav .cd-nav-menu .sub-menu .children, .cd-preheader-nav .cd-nav-menu .children .sub-menu, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
top: -.45rem;
right: calc(100% - .2rem);
left: auto;
transform: translateX(-8px);
}
.cd-preheader-nav .cd-nav-menu li:hover > .sub-menu, .cd-preheader-nav .cd-nav-menu li:focus-within > .sub-menu, .cd-preheader-nav .cd-nav-menu li:hover > .children, .cd-preheader-nav .cd-nav-menu li:focus-within > .children, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container, .cd-preheader-nav .wp-block-navigation .wp-block-navigation-submenu.is-menu-open > .wp-block-navigation__submenu-container {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, 0);
transition: opacity var(--motion-duration-default) var(--motion-ease-soft), transform var(--motion-duration-default) var(--motion-ease-soft), visibility 0s linear 0s;
}
.cd-preheader-nav .cd-nav-menu .sub-menu li, .cd-preheader-nav .cd-nav-menu .children li, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
width: 100%;
background: transparent;
border-radius: .7rem;
}
.cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-submenu {
display: flex;
align-items: center;
}
.cd-preheader-nav .cd-nav-menu .sub-menu li > a, .cd-preheader-nav .cd-nav-menu .children li > a, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
flex: 1 1 auto;
width: 100%;
min-width: 0;
padding: .8rem .95rem;
color: rgba(255, 255, 255, .94);
background: transparent;
font-size: .875rem;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.35;
text-transform: none;
border-radius: .7rem;
transform: none;
opacity: 1;
}
.cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
align-self: stretch;
flex: 0 0 2.2rem;
width: 2.2rem;
height: auto;
margin: 0;
padding: 0 .65rem 0 0;
color: rgba(255, 255, 255, .82);
background: transparent;
border: 0;
border-radius: 0 .7rem .7rem 0;
line-height: 1;
}
.cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg {
width: .75rem;
height: .75rem;
margin: 0;
opacity: .72;
stroke: currentColor;
}
.cd-preheader-nav .cd-nav-menu .sub-menu li > a:hover, .cd-preheader-nav .cd-nav-menu .sub-menu li > a:focus-visible, .cd-preheader-nav .cd-nav-menu .children li > a:hover, .cd-preheader-nav .cd-nav-menu .children li > a:focus-visible, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
color: #fff;
background: transparent;
}
.cd-preheader-nav .cd-nav-menu .sub-menu li:hover, .cd-preheader-nav .cd-nav-menu .sub-menu li:focus-within, .cd-preheader-nav .cd-nav-menu .children li:hover, .cd-preheader-nav .cd-nav-menu .children li:focus-within, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item:focus-within, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .current-menu-item, .cd-preheader-nav .wp-block-navigation .wp-block-navigation__submenu-container > .current_page_item {
background: rgba(255, 255, 255, .055);
}
.cd-preheader-nav .cd-nav-menu .gb-menu-toggle, .cd-preheader-nav .wp-block-navigation__responsive-container-open, .cd-preheader-nav .wp-block-navigation__responsive-container-close {
display: none;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--mobile) #menu-cayuse-commercial {
display: none;
}
}
@media (min-width: 1601px) {
.cd-preheader-nav > .cd-container {
padding-inline: 2.75rem;
}
}
@media (min-width: 1280px) and (max-width: 1480px) {
.cd-preheader-nav > .cd-container {
padding-inline: 1.75rem;
}
}
@media (min-width: 1280px) and (max-width: 1365px) {
.cd-preheader-nav > .cd-container {
padding-inline: 1.35rem;
}
}
.cd-site-header .cd-mobile-nav-group__label {
display: none;
text-transform: uppercase;
}
.cd-site-header.gb-navigation--open .gb-menu-container--mobile.gb-menu-container--toggled .cd-mobile-nav-group__label {
display: block;
}
@media (min-width: 1281px) {
.cd-site-header .cd-mobile-nav-group__label {
display: none !important;
}
}
@media (max-width: 1279px) {
.cd-preheader-nav {
display: block;
position: absolute;
inset: 0 0 auto 0;
z-index: 1001;
background: transparent;
border: 0;
pointer-events: none;
}
.cd-preheader-nav .cd-container {
padding-left: 1.2rem;
padding-right: 1.2rem;
}
.cd-preheader-nav .cd-nav-row {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 94px;
}
.cd-preheader-nav .wp-block-navigation, .cd-preheader-nav .cd-nav-menu {
display: none;
}
.cd-preheader-nav .cd-site-header__logo, .cd-preheader-nav .cd-site-header__logo img, .cd-preheader-nav .cd-site-header__logo svg, .cd-preheader-nav .cd-nav-row > a {
display: block;
width: auto;
max-height: 42px;
pointer-events: auto;
}
.gb-site-header:has(.cd-site-header.gb-navigation--open) .cd-preheader-nav {
display: none;
}
}
.cd-header-beadwork {
display: block;
height: 18px;
padding-bottom: 3px;
box-sizing: border-box;
overflow: hidden;
line-height: 0;
position: relative;
z-index: 100;
background: #0d294b;
}
.cd-header-beadwork::before {
content: "";
position: absolute;
inset: 0 0 3px;
background-image: url("https://cdn-ileoooi.nitrocdn.com/MYeaiSZqNvcwqPBugRnAIKhJboYTTKFt/assets/images/optimized/rev-e3d9907/cayusedigital.com/wp-content/uploads/2026/06/Beadwork-White.png");
background-repeat: repeat-x;
background-position: center top;
background-size: auto 13px;
opacity: .85;
}
.cd-header-beadwork__image {
display: none;
}
@media (max-width: 1280px) {
.cd-header-beadwork {
display: block;
top: auto;
z-index: 1001;
pointer-events: none;
}
.cd-site-header.gb-navigation--open + .cd-header-beadwork {
display: none;
}
.gb-site-header.gb-is-sticky .cd-header-beadwork, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-header-beadwork {
top: auto;
}
}
/* ====================================================
CD / Components / Header / 116
Canonical Header System
Opaque header. Opaque flyout.
Full replacement for existing header feature CSS.
Includes normalized mobile overlay composition.
==================================================== */
/* --------------------------------------------
Outer wrappers
-------------------------------------------- */
.site-header {
background: transparent;
border: 0;
box-shadow: none;
}
.gb-site-header[class*="gb-site-header"] {
padding: 0 !important;
background: var(--color-midnight-brand);
}
.cd-site-header-shell {
--cd-header-inline-padding: clamp(1.35rem, 3vw, 3.1rem);
--cd-header-row-padding-block: .95rem;
--cd-header-logo-height: 50px;
--cd-header-sticky-logo-height: 42px;
position: relative;
z-index: 1000;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "brand nav" "beadwork beadwork";
align-items: center;
width: 100%;
background: var(--color-midnight-brand);
overflow: visible;
}
.cd-site-header-shell > .cd-site-header__brand {
position: relative;
z-index: 1002;
grid-area: brand;
display: flex;
align-items: center;
align-self: stretch;
padding: var(--cd-header-row-padding-block) 0 var(--cd-header-row-padding-block) var(--cd-header-inline-padding);
background: transparent;
}
.cd-site-header-shell > .cd-header-beadwork {
grid-area: beadwork;
top: auto;
z-index: 1001;
}
/* --------------------------------------------
Base header surface
Opaque. Single source of truth.
-------------------------------------------- */
.cd-site-header {
position: relative;
top: auto;
left: auto;
z-index: 1002;
width: 100%;
max-width: 100%;
margin: 0;
padding: var(--cd-header-row-padding-block) var(--cd-header-inline-padding) var(--cd-header-row-padding-block) var(--space-lg);
background: transparent;
border-bottom: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 2rem;
transition: padding var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft), box-shadow var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft);
}
/* --------------------------------------------
Logo
-------------------------------------------- */
.cd-site-header__logo {
display: block;
width: auto;
max-height: 60px;
flex: 0 0 auto;
transition: max-height var(--motion-duration-default) var(--motion-ease-soft), padding var(--motion-duration-default) var(--motion-ease-soft), height var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-site-header-shell > .cd-site-header__brand .cd-site-header__logo, .cd-site-header-shell > .cd-site-header__brand .cd-site-header__logo img, .cd-site-header-shell > .cd-site-header__brand .cd-site-header__logo svg {
display: block;
width: auto;
height: var(--cd-header-logo-height);
max-height: none;
transform: none;
transform-origin: left center;
}
.cd-site-header__overlay-logo {
display: none;
width: auto;
max-height: 58px;
}
/* --------------------------------------------
Menu container
Transparent inside opaque header
-------------------------------------------- */
.cd-site-header .gb-menu-container {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
gap: 1.25rem;
background: transparent;
min-width: 0;
}
/* --------------------------------------------
Navigation layout
-------------------------------------------- */
.cd-site-header .gb-menu, .cd-site-header .gb-menu > ul, .cd-site-header nav ul, .cd-site-header ul[id^="menu-"] {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: .95rem;
min-width: 0;
}
.cd-site-header nav ul > li, .cd-site-header .gb-menu-item, .cd-site-header ul[id^="menu-"] > li {
flex: 0 0 auto;
}
.cd-site-header nav ul > li > a, .cd-site-header .gb-menu-item__link, .cd-site-header .gb-menu a, .cd-site-header ul[id^="menu-"] > li > a {
white-space: nowrap;
}
/* --------------------------------------------
Navigation typography
-------------------------------------------- */
.cd-site-header nav a, .cd-site-header .gb-menu a, .cd-site-header .gb-menu-item__link, .cd-site-header ul[id^="menu-"] > li > a {
font-size: .775rem;
font-weight: 600;
letter-spacing: .055em;
text-transform: uppercase;
line-height: 1.15;
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-header nav a:hover, .cd-site-header .gb-menu a:hover, .cd-site-header .gb-menu-item__link:hover, .cd-site-header ul[id^="menu-"] > li > a:hover, .cd-site-header nav a:focus-visible, .cd-site-header .gb-menu a:focus-visible, .cd-site-header .gb-menu-item__link:focus-visible, .cd-site-header ul[id^="menu-"] > li > a:focus-visible {
color: #fff;
opacity: 1;
transform: translateY(-1px);
text-decoration: none;
}
.cd-site-header .current-menu-item > a, .cd-site-header .current_page_item > a, .cd-site-header .current-menu-parent > a {
color: #fff;
opacity: 1;
}
/* CD / Header / Active Navigation State (Desktop Only) */
@media (min-width: 1281px) {
.cd-site-header .current-menu-item > a, .cd-site-header .current_page_item > a, .cd-site-header .current-menu-parent > a {
color: #fff;
position: relative;
}
.cd-site-header .current-menu-item > a::after, .cd-site-header .current_page_item > a::after, .cd-site-header .current-menu-parent > a::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
width: 60%;
height: 1.5px;
background: rgba(255, 255, 255, .65);
border-radius: 1px;
opacity: .9;
}
.cd-site-header .current-menu-item > a:hover, .cd-site-header .current_page_item > a:hover, .cd-site-header .current-menu-parent > a:hover {
transform: none;
}
}
/* ====================================================
CD / Header / Desktop Submenu / Capabilities
==================================================== */
@media (min-width: 1281px) {
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children {
position: relative;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children > a .gb-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: currentColor;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children > a .gb-submenu-toggle-icon {
width: .8rem;
height: .8rem;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
opacity: .72;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children:hover > a .gb-submenu-toggle-icon, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children:has(> a .gb-submenu-toggle[aria-expanded="true"]) > a .gb-submenu-toggle-icon {
transform: rotate(180deg);
opacity: 1;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu {
position: absolute;
top: calc(100% + .35rem);
left: 50%;
right: auto;
width: min(32rem, calc(100vw - 4rem));
min-width: 27rem;
margin: 0;
padding: .8rem;
list-style: none;
display: grid;
gap: .2rem;
background: rgba(10, 25, 47, .85);
color: rgba(255, 255, 255, .92);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: .95rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transform: translateX(-50%) translateY(8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1105;
transition: opacity var(--motion-duration-default) var(--motion-ease-soft), transform var(--motion-duration-default) var(--motion-ease-soft), visibility 0s linear var(--motion-duration-default);
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: .6rem;
background: transparent;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children:hover > .sub-menu.gb-sub-menu, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children:has(> a .gb-submenu-toggle[aria-expanded="true"]) > .sub-menu.gb-sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity var(--motion-duration-default) var(--motion-ease-soft), transform var(--motion-duration-default) var(--motion-ease-soft), visibility 0s linear 0s;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li {
width: 100%;
margin: 0;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link {
display: block;
width: 100%;
padding: .8rem .95rem;
border-radius: .7rem;
font-size: .95rem;
font-weight: 500;
letter-spacing: .01em;
line-height: 1.35;
text-transform: none;
color: rgba(255, 255, 255, .94);
opacity: 1;
transform: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft), transform 0s linear;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link:hover, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link:focus-visible {
color: #fff;
background: rgba(255, 255, 255, .055);
opacity: 1;
transform: none;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li.current-menu-item > a.gb-menu-link, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li.current_page_item > a.gb-menu-link {
color: #fff;
background: rgba(255, 255, 255, .08);
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-parent > a::after, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-ancestor > a::after, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-item > a::after, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li.current-menu-item > a::after, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li > .sub-menu.gb-sub-menu > li.current_page_item > a::after {
display: none;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-parent > a, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-ancestor > a, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.menu-item-has-children.current-menu-item > a {
color: rgba(255, 255, 255, .96);
opacity: 1;
transform: none;
}
/* Desktop mega menus use the existing GenerateBlocks menu and toggle states. */
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu:has(> .cd-mega-menu) {
position: relative;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu {
position: static;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu {
top: calc(100% + .75rem);
width: min(54rem, calc(100vw - 4rem));
min-width: 46rem;
padding: 1.2rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense;
column-gap: 1.5rem;
row-gap: .25rem;
background: rgba(10, 25, 47, .85);
color: #fff;
border-color: var(--border-light-hover);
border-radius: var(--radius-lg);
box-shadow: 0 18px 42px rgba(0, 24, 48, .2);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
transform: translateX(-50%) translateY(6px);
transition: opacity 180ms var(--motion-ease-soft), transform 180ms var(--motion-ease-soft), visibility 0s linear 180ms;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu--gateway > .sub-menu.gb-sub-menu {
width: min(48rem, calc(100vw - 4rem));
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu:hover > .sub-menu.gb-sub-menu, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu:has(> a .gb-submenu-toggle[aria-expanded="true"]) > .sub-menu.gb-sub-menu {
transform: translateX(-50%) translateY(0);
transition: opacity 180ms var(--motion-ease-soft), transform 180ms var(--motion-ease-soft), visibility 0s linear 0s;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu::before {
height: .9rem;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--start, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--evaluate {
grid-column: 1;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--discipline, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--build {
grid-column: 2;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--start::before, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--discipline-start::before, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--evaluate-start::before, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu__item--build-start::before {
display: block;
margin: 1.2rem .9rem .55rem;
font-size: .72rem;
font-weight: 700;
letter-spacing: .11em;
line-height: 1.2;
text-transform: uppercase;
color: var(--color-text-accent-gold);
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu--gateway .cd-mega-menu__item--start::before {
content: "Start here";
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu--gateway .cd-mega-menu__item--discipline-start::before {
content: "Delivery disciplines";
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu--capabilities .cd-mega-menu__item--evaluate-start::before {
content: "Evaluate and understand";
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .cd-mega-menu--capabilities .cd-mega-menu__item--build-start::before {
content: "Build and improve";
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu > li > a.gb-menu-link {
padding: .72rem .9rem;
color: #fff;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: .9rem;
font-weight: 600;
line-height: 1.3;
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu > li > a.gb-menu-link:hover, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu > li > a.gb-menu-link:focus-visible {
color: #fff;
background: rgba(77, 163, 255, .16);
border-color: rgba(77, 163, 255, .28);
}
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu > li.current-menu-item > a.gb-menu-link, .cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu > li.current_page_item > a.gb-menu-link {
color: #fff;
background: rgba(255, 255, 255, .1);
}
}
@media (min-width: 1281px) and (prefers-reduced-motion: reduce) {
.cd-site-header .gb-menu-container:not(.gb-menu-container--toggled) .gb-menu > li.cd-mega-menu > .sub-menu.gb-sub-menu {
transition: none;
}
}
/* --------------------------------------------
Header CTA
-------------------------------------------- */
.cd-site-header__cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 1.6rem;
border: var(--border-default) solid var(--border-light-hover);
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
text-decoration: none;
white-space: nowrap;
line-height: 1;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft), height var(--motion-duration-default) var(--motion-ease-soft), padding var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-site-header__cta:hover, .cd-site-header__cta:focus-visible {
color: var(--color-text-secondary);
border-color: var(--border-light-hover);
background-color: rgba(255, 255, 255, .04);
transform: translateY(-1px);
text-decoration: none;
}
/* --------------------------------------------
Menu toggle
-------------------------------------------- */
.cd-site-header .gb-menu-toggle, .cd-site-header .gb-menu-toggle:hover, .cd-site-header .gb-menu-toggle:focus, .cd-site-header .gb-menu-toggle:focus-visible, .cd-site-header .gb-menu-toggle:active {
color: var(--color-text-secondary);
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
min-width: 50px;
min-height: 50px;
padding: 0;
-webkit-tap-highlight-color: transparent;
transition: min-width var(--motion-duration-default) var(--motion-ease-soft), min-height var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-site-header .gb-menu-toggle .gb-menu-open, .cd-site-header .gb-menu-toggle .gb-menu-close {
outline: none !important;
box-shadow: none !important;
}
/* --------------------------------------------
Sticky state
-------------------------------------------- */
.gb-site-header.gb-is-sticky, .gb-site-header[class*="gb-site-header"].gb-is-sticky {
padding: 0 !important;
}
.gb-site-header.gb-is-sticky .cd-preheader-nav .cd-nav-row, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-preheader-nav .cd-nav-row {
min-height: 48px;
padding-block: .25rem;
}
.gb-site-header.gb-is-sticky .cd-preheader-nav .cd-site-header__logo, .gb-site-header.gb-is-sticky .cd-preheader-nav .cd-site-header__logo img, .gb-site-header.gb-is-sticky .cd-preheader-nav .cd-site-header__logo svg, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-preheader-nav .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-preheader-nav .cd-site-header__logo img, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-preheader-nav .cd-site-header__logo svg {
max-height: 36px;
transform: translateY(.18rem) scale(1.08);
}
.gb-site-header.gb-is-sticky .cd-site-header, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header {
padding-top: .75rem;
padding-bottom: .75rem;
background: var(--color-midnight-brand);
border-bottom: var(--border-default) solid var(--border-divider-dark);
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.gb-site-header.gb-is-sticky .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__logo {
max-height: 52px;
}
.gb-site-header.gb-is-sticky .cd-site-header__cta, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__cta {
height: 48px;
padding-left: 1.35rem;
padding-right: 1.35rem;
}
.gb-site-header.gb-is-sticky .cd-site-header .gb-menu-toggle, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header .gb-menu-toggle {
min-width: 48px;
min-height: 48px;
}
.gb-site-header.cd-site-header-shell.gb-is-sticky, .gb-site-header[class*="gb-site-header"].cd-site-header-shell.gb-is-sticky {
--cd-header-row-padding-block: .55rem;
--cd-header-logo-height: var(--cd-header-sticky-logo-height);
background: var(--color-midnight-brand);
box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.gb-site-header.cd-site-header-shell.gb-is-sticky > .cd-site-header, .gb-site-header[class*="gb-site-header"].cd-site-header-shell.gb-is-sticky > .cd-site-header {
padding-top: var(--cd-header-row-padding-block);
padding-bottom: var(--cd-header-row-padding-block);
background: transparent;
border-bottom: 0;
box-shadow: none;
}
.gb-site-header.cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo, .gb-site-header.cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo img, .gb-site-header.cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo svg, .gb-site-header[class*="gb-site-header"].cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo img, .gb-site-header[class*="gb-site-header"].cd-site-header-shell.gb-is-sticky > .cd-site-header__brand .cd-site-header__logo svg {
height: var(--cd-header-logo-height);
max-height: none;
transform: none;
}
/* ====================================================
DESKTOP
==================================================== */
@media (min-width: 1281px) {
.cd-site-header__nav-items {
display: flex !important;
align-items: center;
flex: 0 0 auto;
margin-left: 1rem;
}
.cd-site-header__overlay-header, .cd-site-header__overlay-items {
display: none !important;
}
.cd-site-header__overlay-logo {
display: none !important;
}
.cd-site-header > .gb-menu-toggle {
display: none !important;
}
}
/* Large desktop */
@media (min-width: 1601px) {
.cd-site-header {
padding: 1.65rem 2.75rem;
gap: 2.25rem;
}
.cd-site-header__logo {
max-height: 62px;
}
.cd-site-header .gb-menu-container {
gap: 1.5rem;
}
.cd-site-header .gb-menu, .cd-site-header .gb-menu > ul, .cd-site-header nav ul, .cd-site-header ul[id^="menu-"] {
gap: 1.1rem;
}
.gb-site-header.gb-is-sticky .cd-site-header, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header {
padding-top: .8rem;
padding-bottom: .8rem;
}
.gb-site-header.gb-is-sticky .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__logo {
max-height: 44px;
}
}
/* Mid desktop */
@media (min-width: 1281px) and (max-width: 1480px) {
.cd-site-header {
padding: 1.25rem 1.75rem;
gap: 1.5rem;
}
.cd-site-header__logo {
max-height: 54px;
}
.cd-site-header .gb-menu-container {
gap: 1rem;
}
.cd-site-header .gb-menu, .cd-site-header .gb-menu > ul, .cd-site-header nav ul, .cd-site-header ul[id^="menu-"] {
gap: .7rem;
}
.cd-site-header nav a, .cd-site-header .gb-menu a, .cd-site-header .gb-menu-item__link, .cd-site-header ul[id^="menu-"] > li > a {
font-size: .9rem;
letter-spacing: .045em;
}
.cd-site-header__cta {
height: 50px;
padding: 0 1.35rem;
}
.gb-site-header.gb-is-sticky .cd-site-header, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header {
padding-top: .75rem;
padding-bottom: .75rem;
}
.gb-site-header.gb-is-sticky .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__logo {
max-height: 42px;
}
.gb-site-header.gb-is-sticky .cd-site-header__cta, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__cta {
height: 46px;
padding-left: 1.2rem;
padding-right: 1.2rem;
}
}
/* Near breakpoint */
@media (min-width: 1281px) and (max-width: 1365px) {
.cd-site-header {
padding: 1.15rem 1.35rem;
gap: 1.2rem;
}
.cd-site-header__logo {
max-height: 50px;
}
.cd-site-header .gb-menu, .cd-site-header .gb-menu > ul, .cd-site-header nav ul, .cd-site-header ul[id^="menu-"] {
gap: .45rem;
}
.cd-site-header nav a, .cd-site-header .gb-menu a, .cd-site-header .gb-menu-item__link, .cd-site-header ul[id^="menu-"] > li > a {
font-size: .84rem;
letter-spacing: .03em;
}
.cd-site-header__cta {
height: 48px;
padding: 0 1.1rem;
}
.gb-site-header.gb-is-sticky .cd-site-header, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header {
padding-top: .7rem;
padding-bottom: .7rem;
}
.gb-site-header.gb-is-sticky .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__logo {
max-height: 40px;
}
.gb-site-header.gb-is-sticky .cd-site-header__cta, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__cta {
height: 44px;
padding-left: 1rem;
padding-right: 1rem;
}
}
/* ====================================================
MOBILE / TABLET
==================================================== */
@media (max-width: 1280px) {
.cd-site-header-shell {
--cd-header-inline-padding: clamp(1.05rem, 3vw, 1.5rem);
--cd-header-row-padding-block: .95rem;
--cd-header-logo-height: 46px;
--cd-header-sticky-logo-height: 42px;
}
.cd-site-header-shell > .cd-site-header {
padding-left: var(--space-sm);
gap: 0;
}
.cd-site-header {
padding: 1.3rem 1.2rem;
gap: 1rem;
}
.cd-site-header__logo {
max-height: 52px;
}
.cd-site-header__nav-items {
display: none !important;
}
.cd-site-header .gb-menu-container--mobile:not(.gb-menu-container--toggled) {
display: none;
}
.cd-site-header .gb-menu-toggle {
margin-left: auto;
order: 3;
min-width: 52px;
min-height: 52px;
}
.gb-site-header.gb-is-sticky .cd-site-header, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header {
padding-top: 1rem;
padding-bottom: 1rem;
}
.gb-site-header.gb-is-sticky .cd-site-header__logo, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header__logo {
max-height: 46px;
}
.gb-site-header.gb-is-sticky .cd-site-header .gb-menu-toggle, .gb-site-header[class*="gb-site-header"].gb-is-sticky .cd-site-header .gb-menu-toggle {
min-width: 48px;
min-height: 48px;
}
}
@media (max-width: 767px) {
.cd-site-header {
padding: 1.2rem 1.05rem;
}
.cd-site-header__logo {
max-height: 50px;
}
.cd-site-header .gb-menu-toggle {
min-width: 50px;
min-height: 50px;
}
}
/* ====================================================
MOBILE OVERLAY / OPEN STATE
Canonical single source of truth
==================================================== */
.cd-site-header .gb-menu-container.gb-menu-container--toggled {
position: fixed !important;
inset: 0 !important;
z-index: 9999;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 1.5rem 1.5rem 2rem 1.5rem !important;
box-sizing: border-box;
background: var(--color-midnight-brand) !important;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
justify-content: space-between !important;
}
@media (min-width: 768px) and (max-width: 1280px) {
.cd-site-header .gb-menu-container.gb-menu-container--toggled {
inset: 0 0 0 auto !important;
width: 40vw;
height: 100dvh;
box-shadow: -100vw 0 0 100vw rgba(0, 15, 31, .62);
}
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled ul {
margin-top: auto;
margin-bottom: auto;
}
/* Subtle atmosphere */
.cd-site-header .gb-menu-container.gb-menu-container--toggled::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: radial-gradient(ellipse at 24% 14%, rgba(81, 120, 145, .08) 0%, rgba(81, 120, 145, .03) 22%, rgba(81, 120, 145, 0) 48%);
opacity: .6;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled::after {
content: none !important;
}
/* Content sits above atmosphere */
.cd-site-header .gb-menu-container.gb-menu-container--toggled > * {
position: relative;
z-index: 2;
}
/* Hide duplicated closed-state items */
.cd-site-header.gb-navigation--open > .cd-site-header__logo, .cd-site-header.gb-navigation--open > .gb-menu-toggle {
opacity: 0 !important;
pointer-events: none !important;
}
.cd-site-header-shell:has(> .cd-site-header.gb-navigation--open) > .cd-site-header__brand {
opacity: 0;
pointer-events: none;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .cd-site-header__nav-items {
display: none !important;
}
/* Overlay header */
.cd-site-header .gb-menu-container.gb-menu-container--toggled .cd-site-header__overlay-header {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
margin-bottom: 2rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .cd-site-header__overlay-logo {
display: block !important;
width: auto;
max-height: 52px;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .cd-site-header__overlay-items {
margin-top: auto;
}
/* Close button clone */
.cd-site-header .gb-menu-container.gb-menu-container--toggled > .gb-menu-toggle:not(.gb-menu-toggle--clone) {
display: none !important;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu-toggle.gb-menu-toggle--clone {
position: absolute !important;
top: 0;
right: 0;
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: none !important;
color: var(--color-text-secondary);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled > ul, .cd-site-header .gb-menu-container.gb-menu-container--toggled > #menu-primary {
margin-top: auto;
margin-bottom: auto;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled .gb-menu {
align-items: flex-start;
gap: .2rem;
margin: 0 0 1rem;
text-align: left;
width: 100%;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled .cd-mobile-nav-group__label {
width: 100%;
margin: 0 0 .45rem;
padding: 0 20px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .16em;
line-height: 1.2;
text-align: left;
text-transform: uppercase;
color: rgba(243, 246, 250, .66);
}
/* ====================================================
CD / Header / Mobile Overlay Submenu / Capabilities
==================================================== */
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li.menu-item-has-children > a {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > a, .cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > a.gb-menu-link {
font-size: .94rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li.menu-item-has-children > a .gb-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li.menu-item-has-children > a .gb-submenu-toggle-icon {
width: .8rem;
height: .8rem;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li.menu-item-has-children > a .gb-submenu-toggle[aria-expanded="true"] .gb-submenu-toggle-icon {
transform: rotate(180deg);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu {
margin-top: .7rem;
margin-bottom: .9rem;
padding: 0;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li + li {
margin-top: .15rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link {
display: block;
padding: .42rem .45rem;
font-size: .94rem;
font-weight: 500;
letter-spacing: .015em;
line-height: 1.35;
text-transform: none;
color: rgba(243, 246, 250, .82);
opacity: 1;
transform: none;
border-radius: .45rem;
transition: background-color var(--motion-duration-fast) var(--motion-ease-soft), color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link:hover, .cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link:focus-visible {
color: rgba(255, 255, 255, .96);
background: rgba(255, 255, 255, .055);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li > a.gb-menu-link:active {
color: #fff;
background: rgba(255, 255, 255, .08);
}
.cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li.current-menu-item > a.gb-menu-link, .cd-site-header .gb-menu-container.gb-menu-container--toggled .gb-menu > li > .sub-menu.gb-sub-menu > li.current_page_item > a.gb-menu-link {
color: #fff;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled .cd-mobile-nav-group--commercial {
width: 100%;
margin-top: 1rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-primary, .cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial {
width: 100%;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial li.menu-item-has-children > a.gb-menu-link {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu {
margin-top: .7rem;
margin-bottom: .9rem;
width: 19.5rem;
max-width: calc(100vw - 6.75rem);
padding: 0;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu .sub-menu.gb-sub-menu {
margin-top: .35rem;
margin-bottom: .55rem;
margin-left: 1.1rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu > li + li {
margin-top: .15rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu > li > a.gb-menu-link {
display: block;
width: 100%;
max-width: 100%;
padding: .42rem .45rem;
font-size: .94rem;
font-weight: 500;
letter-spacing: .015em;
line-height: 1.35;
text-transform: none;
color: rgba(243, 246, 250, .82);
opacity: 1;
transform: none;
border-radius: .45rem;
transition: background-color var(--motion-duration-fast) var(--motion-ease-soft), color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu > li.menu-item-has-children > a.gb-menu-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu > li > a.gb-menu-link:hover, .cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial .sub-menu.gb-sub-menu > li > a.gb-menu-link:focus-visible {
color: rgba(255, 255, 255, .96);
background: rgba(255, 255, 255, .055);
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial li.menu-item-has-children > a.gb-menu-link .gb-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial li.menu-item-has-children > a.gb-menu-link .gb-submenu-toggle-icon {
width: .8rem;
height: .8rem;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-site-header .gb-menu-container.gb-menu-container--mobile.gb-menu-container--toggled #menu-cayuse-commercial li.menu-item-has-children > a.gb-menu-link .gb-submenu-toggle[aria-expanded="true"] .gb-submenu-toggle-icon {
transform: rotate(180deg);
}
/* ====================================================
CD / Components / CTA / 009
Canonical CTA System
Refactored + Tokenised
==================================================== */
/* -----------------------------------------
BASE CTA
Shared behaviour across all CTA roles
----------------------------------------- */
a.cd-cta, .cd-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 1.6rem;
border-radius: var(--radius-sm);
border: var(--border-default) solid transparent;
font-size: .95rem;
font-weight: var(--font-semi-bold);
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
/* Shared interaction language */
a.cd-cta:hover, a.cd-cta:focus-visible, .cd-cta:hover, .cd-cta:focus-visible {
transform: translateY(-1px);
text-decoration: none;
}
/* -----------------------------------------
INLINE LINK SYSTEM
Dark-surface-safe inline link behavior
----------------------------------------- */
.cd-surface-dark a.cd-link-directional, .cd-surface-dark .cd-link-directional {
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
color: rgba(255, 255, 255, .92);
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-surface-dark .cd-link-directional > .cd-link-directional__text, .cd-surface-dark .cd-link-directional__text {
display: inline !important;
width: auto !important;
max-width: none !important;
margin: 0;
line-height: 1.2;
color: inherit !important;
}
.cd-surface-dark .cd-link-directional > .cd-link-directional__icon, .cd-surface-dark .cd-link-directional__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: .9em;
height: .9em;
color: inherit;
transform: translateY(.02em);
}
.cd-surface-dark .cd-link-directional__icon svg {
display: block;
width: 100%;
height: 100%;
fill: currentColor;
}
.cd-surface-dark .cd-link-directional:hover, .cd-surface-dark .cd-link-directional:focus-visible {
color: #fff;
opacity: 1;
}
/* ====================================================
CD / Component / Directional Link / 029
Canonical inline text + arrow utility
==================================================== */
.cd-link-directional {
display: inline-flex;
align-items: center;
gap: .45rem;
width: fit-content;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-link-directional__text {
color: inherit;
text-decoration: none;
line-height: 1;
font-size: .84rem;
font-weight: var(--font-semi-bold);
letter-spacing: .11em;
opacity: .85;
text-transform: uppercase;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-link-directional__text:hover, .cd-link-directional__text:focus-visible, .cd-link-directional__text:active, .cd-link-directional__text:visited {
color: inherit;
text-decoration: none;
}
.cd-link-directional__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: .84rem;
height: .84rem;
line-height: 1;
color: inherit;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-link-directional__icon svg, .cd-link-directional__icon i {
display: block;
width: .84rem !important;
height: .84rem !important;
flex: 0 0 auto;
}
.cd-link-directional:hover, .cd-link-directional:focus-visible {
transform: translateX(2px);
}
a.cd-cta:active, .cd-cta:active {
transform: translateY(0);
}
a.cd-cta, a.cd-cta:hover, a.cd-cta:focus, a.cd-cta:focus-visible, a.cd-cta:active, a.cd-cta:visited {
text-decoration: none;
}
/* -----------------------------------------
PRIMARY CTA
High-intent conversion moments
----------------------------------------- */
a.cd-cta.cd-cta--primary, .cd-cta.cd-cta--primary {
background: var(--cta-primary-bg);
border-color: var(--border-light-subtle);
backdrop-filter: blur(var(--cta-blur-primary));
-webkit-backdrop-filter: blur(var(--cta-blur-primary));
color: var(--cta-text-on-dark);
box-shadow: 0 10px 28px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}
a.cd-cta.cd-cta--primary:hover, a.cd-cta.cd-cta--primary:focus-visible, .cd-cta.cd-cta--primary:hover, .cd-cta.cd-cta--primary:focus-visible {
background: var(--cta-primary-bg-hover);
border-color: var(--border-light-hover);
color: var(--cta-text-on-dark);
box-shadow: var(--cta-shadow-primary-hover);
}
a.cd-cta.cd-cta--primary:active, .cd-cta.cd-cta--primary:active {
color: var(--cta-text-on-dark);
opacity: .94;
}
/* -----------------------------------------
HEADER / OVERLAY CTA
Persistent but restrained action
----------------------------------------- */
a.cd-cta.cd-cta--header, .cd-cta.cd-cta--header {
background: var(--cta-header-bg);
border-color: rgba(255, 255, 255, .22);
backdrop-filter: blur(var(--cta-blur-header));
-webkit-backdrop-filter: blur(var(--cta-blur-header));
color: var(--cta-text-on-dark);
box-shadow: var(--cta-shadow-header);
}
a.cd-cta.cd-cta--header:hover, a.cd-cta.cd-cta--header:focus-visible, .cd-cta.cd-cta--header:hover, .cd-cta.cd-cta--header:focus-visible {
background: var(--cta-header-bg-hover);
border-color: var(--border-light-hover);
color: var(--cta-text-on-dark);
box-shadow: var(--cta-shadow-header-hover);
}
a.cd-cta.cd-cta--header:active, .cd-cta.cd-cta--header:active {
color: var(--cta-text-on-dark);
opacity: .95;
}
/* -----------------------------------------
SECONDARY CTA
Dark-surface supporting action
----------------------------------------- */
a.cd-cta.cd-cta--secondary, .cd-cta.cd-cta--secondary {
background: transparent;
border: var(--border-default) solid var(--cta-secondary-border-dark);
color: var(--cta-text-on-dark);
box-shadow: none;
}
a.cd-cta.cd-cta--secondary:hover, a.cd-cta.cd-cta--secondary:focus-visible, .cd-cta.cd-cta--secondary:hover, .cd-cta.cd-cta--secondary:focus-visible {
background: var(--cta-secondary-bg-dark-hover);
border-color: var(--cta-secondary-border-dark-hover);
color: var(--cta-text-on-dark);
box-shadow: none;
}
a.cd-cta.cd-cta--secondary:active, .cd-cta.cd-cta--secondary:active {
background: var(--cta-secondary-bg-dark-active);
border-color: var(--cta-secondary-border-dark-active);
color: var(--cta-text-on-dark);
}
/* -----------------------------------------
SECONDARY CTA - LIGHT CONTEXT
Alternative action on light surfaces
----------------------------------------- */
a.cd-cta.cd-cta--secondary-light, .cd-cta.cd-cta--secondary-light {
background: transparent;
border: var(--border-default) solid var(--cta-secondary-light-border);
color: var(--cta-text-on-light);
box-shadow: none;
}
a.cd-cta.cd-cta--secondary-light:hover, a.cd-cta.cd-cta--secondary-light:focus-visible, .cd-cta.cd-cta--secondary-light:hover, .cd-cta.cd-cta--secondary-light:focus-visible {
background: var(--cta-secondary-light-bg-hover);
border-color: var(--cta-secondary-light-border-hover);
color: var(--cta-text-on-light);
box-shadow: var(--cta-shadow-secondary-light-hover);
}
a.cd-cta.cd-cta--secondary-light:active, .cd-cta.cd-cta--secondary-light:active {
background: var(--cta-secondary-light-bg-active);
border-color: var(--cta-secondary-light-border-hover);
color: var(--cta-text-on-light);
opacity: .96;
}
/* -----------------------------------------
LIGHT CONTEXT CTA
Primary action for light canvases
----------------------------------------- */
a.cd-cta.cd-cta--light, .cd-cta.cd-cta--light {
background: var(--cta-light-bg);
border-color: var(--border-divider-light);
color: var(--cta-text-on-light);
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: var(--cta-shadow-light);
}
a.cd-cta.cd-cta--light:hover, a.cd-cta.cd-cta--light:focus-visible, .cd-cta.cd-cta--light:hover, .cd-cta.cd-cta--light:focus-visible {
background: var(--cta-light-bg-hover);
border-color: var(--border-strong);
color: var(--cta-text-on-light);
box-shadow: var(--cta-shadow-light-hover);
}
a.cd-cta.cd-cta--light:active, .cd-cta.cd-cta--light:active {
color: var(--cta-text-on-light);
opacity: .96;
}
/* -----------------------------------------
SIZE MODIFIERS
Size only. No role meaning.
----------------------------------------- */
a.cd-cta.cd-cta--compact, .cd-cta.cd-cta--compact {
height: 50px;
padding: 0 1.35rem;
font-size: .9rem;
}
a.cd-cta.cd-cta--large, .cd-cta.cd-cta--large {
height: 60px;
padding: 0 2rem;
font-size: 1rem;
}
/* -----------------------------------------
LAYOUT MODIFIER
----------------------------------------- */
a.cd-cta.cd-cta--block, .cd-cta.cd-cta--block {
display: flex;
width: 100%;
}
/* -----------------------------------------
DISABLED
----------------------------------------- */
a.cd-cta[disabled], .cd-cta[disabled], a.cd-cta.is-disabled, .cd-cta.is-disabled {
opacity: .5;
pointer-events: none;
box-shadow: none;
}
/* -----------------------------------------
GLOBAL SAFETY
Protect from generic theme link states
----------------------------------------- */
a.cd-cta.cd-cta--primary, a.cd-cta.cd-cta--primary:visited, a.cd-cta.cd-cta--primary:hover, a.cd-cta.cd-cta--primary:focus, a.cd-cta.cd-cta--primary:focus-visible, a.cd-cta.cd-cta--primary:active {
color: var(--cta-text-on-dark);
}
a.cd-cta.cd-cta--header, a.cd-cta.cd-cta--header:visited, a.cd-cta.cd-cta--header:hover, a.cd-cta.cd-cta--header:focus, a.cd-cta.cd-cta--header:focus-visible, a.cd-cta.cd-cta--header:active {
color: var(--cta-text-on-dark);
}
a.cd-cta.cd-cta--secondary, a.cd-cta.cd-cta--secondary:visited, a.cd-cta.cd-cta--secondary:hover, a.cd-cta.cd-cta--secondary:focus, a.cd-cta.cd-cta--secondary:focus-visible, a.cd-cta.cd-cta--secondary:active {
color: var(--cta-text-on-dark);
}
a.cd-cta.cd-cta--secondary-light, a.cd-cta.cd-cta--secondary-light:visited, a.cd-cta.cd-cta--secondary-light:hover, a.cd-cta.cd-cta--secondary-light:focus, a.cd-cta.cd-cta--secondary-light:focus-visible, a.cd-cta.cd-cta--secondary-light:active {
color: var(--cta-text-on-light);
}
a.cd-cta.cd-cta--light, a.cd-cta.cd-cta--light:visited, a.cd-cta.cd-cta--light:hover, a.cd-cta.cd-cta--light:focus, a.cd-cta.cd-cta--light:focus-visible, a.cd-cta.cd-cta--light:active {
color: var(--cta-text-on-light);
}
/* ====================================================
CD / CTA / Strategic Engagement / 09
==================================================== */
.cd-cta-strategic-engagement {
position: relative;
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
.cd-cta-strategic-engagement__inner {
max-width: none;
margin: 0 auto;
text-align: left;
}
.cd-cta-strategic-engagement__inner .cd-text-intro, .cd-cta-strategic-engagement__inner .cd-text-body {
max-width: 60ch;
}
.cd-cta-strategic-engagement__inner .cd-heading-section {
max-width: 26ch;
}
.cd-cta-strategic-engagement__inner > * > * {
--flow-space-heading-to-body: var(--space-lg);
--flow-space-body-to-body: var(--space-medium);
--flow-space-body-to-structure: var(--space-xl);
}
.cd-cta-strategic-engagement__inner > * > * > * {
margin-top: 0;
margin-bottom: 0;
}
.cd-cta-strategic-engagement__inner > * > * > * + * {
margin-top: var(--flow-space, var(--flow-space-body-to-body));
}
.cd-cta-strategic-engagement__inner > * > * > h1 + *, .cd-cta-strategic-engagement__inner > * > * > h2 + *, .cd-cta-strategic-engagement__inner > * > * > h3 + *, .cd-cta-strategic-engagement__inner > * > * > h4 + *, .cd-cta-strategic-engagement__inner > * > * > h5 + *, .cd-cta-strategic-engagement__inner > * > * > h6 + * {
margin-top: var(--flow-space-heading-to-body);
}
.cd-cta-strategic-engagement__inner > * > * > p + .cd-flow-cta {
margin-top: var(--flow-space-body-to-structure);
}
.cd-cta-strategic-engagement__inner h2 br:first-child, .cd-cta-strategic-engagement__inner p br:first-child {
display: none;
}
.cd-cta-strategic-engagement .cd-flow-cta {
margin-top: var(--space-xl);
width: 100%;
display: flex;
justify-content: flex-start;
}
.cd-cta-strategic-engagement .cd-cta {
min-width: 260px;
}
/* ====================================================
CD / Pattern / CTA / Strategic Engagement / 09 / Dark
Light Panel Variant
==================================================== */
.cd-cta-strategic-engagement__panel {
width: 100%;
padding: var(--space-2xl);
border-radius: 24px;
background: #f3f3f3;
border: 1px solid rgba(0, 0, 0, .05);
box-sizing: border-box;
}
/* ====================================================
CD / Pattern / CTA / Strategic Engagement / 09
Legacy containment support
Purpose:
Restore canonical container width when .cd-container is missing.
This is a temporary Phase 2 shim.
DO NOT extend. DO NOT reuse.
==================================================== */
.cd-container-light.cd-cta-strategic-engagement {
width: min(var(--container-max-width), calc(100% - ( 2 * var(--container-gutter) )));
max-width: var(--container-max-width);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* Mobile refinement */
@media (max-width: 767px) {
.cd-container-light.cd-cta-strategic-engagement {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
}
.cd-site-header .cd-flow-cta .cd-cta {
width: 100%;
max-width: 420px;
}
/* ====================================================
CD / Hero / Surface (Canonical)
Pattern territory.
Use shared system roles inside these sections whenever possible.
Includes:
1. header-aware hero spacing
2. proper inner containment
3. atmosphere overlays
4. robust lead/body text handling
5. support for correct paragraph structure
6. temporary safety for legacy
output
==================================================== */
/* =========================================
CD / Pattern / Hero / Img BG
========================================= */
.cd-hero-surface {
position: relative;
isolation: isolate;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
background-size: cover;
background-position: 70% center;
background-repeat: no-repeat;
background-blend-mode: normal;
color: #fff;
min-height: clamp(520px, 70vh, 820px);
padding-top: calc(var(--header-height, 80px) + var(--space-sm));
}
/* Desktop refinement */
@media (min-width: 1024px) {
.cd-hero-surface {
padding-top: calc(var(--header-height, 80px) + var(--space-xl));
}
}
/* Localized override for WordPress Engineering Insight hero */
.cd-hero-surface.cd-hero-wp-engineering {
background-attachment: fixed;
background-position: 70% 30%;
}
.cd-hero-surface.cd-hero-surface--case-studies {
background-attachment: fixed;
}
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
.cd-hero-surface.cd-hero-wp-engineering {
background-attachment: scroll;
}
}
.cd-hero-wp-engineering + .cd-intro-bridge::before {
content: none;
}
/* -----------------------------------------
Hero inner
----------------------------------------- */
.cd-hero-surface__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-max-width, 1200px);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
padding-bottom: calc(var(--space-xl) + var(--space-sm));
display: flex;
flex-direction: column;
justify-content: center;
min-height: inherit;
box-sizing: border-box;
}
/* -----------------------------------------
Atmosphere
----------------------------------------- */
.cd-hero-surface::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, rgba(10, 25, 45, .54) 0%, rgba(10, 25, 45, .63) 42%, rgba(10, 25, 45, .82) 100%);
}
.cd-hero-surface::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(to right, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .45) 28%, rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .05) 65%, rgba(0, 0, 0, 0) 80%);
}
.cd-hero-surface--case-studies::before {
background: linear-gradient(to bottom, rgba(11, 22, 34, .36) 0%, rgba(11, 22, 34, .44) 40%, rgba(11, 22, 34, .62) 100%);
}
.cd-hero-surface--case-studies::after {
background: radial-gradient(72% 78% at 78% 36%, rgba(202, 154, 104, .08) 0%, rgba(202, 154, 104, .03) 36%, rgba(202, 154, 104, 0) 68%), linear-gradient(to right, rgba(11, 22, 34, .56) 0%, rgba(11, 22, 34, .3) 34%, rgba(11, 22, 34, .1) 64%, rgba(11, 22, 34, 0) 100%);
}
.cd-hero-surface--foundational::before {
background: linear-gradient(to bottom, rgba(10, 22, 38, .34) 0%, rgba(10, 22, 38, .42) 40%, rgba(10, 22, 38, .6) 100%);
}
.cd-hero-surface--foundational::after {
background: radial-gradient(72% 78% at 78% 62%, rgba(214, 146, 84, .14) 0%, rgba(214, 146, 84, .06) 34%, rgba(214, 146, 84, 0) 68%), linear-gradient(to right, rgba(10, 22, 38, .58) 0%, rgba(10, 22, 38, .3) 34%, rgba(10, 22, 38, .1) 64%, rgba(10, 22, 38, 0) 100%);
}
/* ====================================================
CD / Hero / Overlay Control
Pattern modifier: no overlay
==================================================== */
.cd-hero-surface--no-overlay::before, .cd-hero-surface--no-overlay::after {
content: none;
display: none;
}
.cd-hero-surface--no-overlay {
background-blend-mode: normal;
}
.cd-hero-surface--no-overlay .cd-hero-surface__overlay {
display: none;
}
/* ====================================================
CD / Hero / Overlay Tone Adjustment
Pattern-specific soft overlay modifier
==================================================== */
.cd-hero-surface--tone-soft::before, .cd-hero-surface--tone-soft::after {
opacity: .5;
}
/* ====================================================
CD / Hero / Conversion Architecture / Atmosphere
Page-scoped migration from legacy hero pseudos to the canonical atmosphere layer.
==================================================== */
.cd-conversion-architecture .cd-hero-surface--foundational::before, .cd-conversion-architecture .cd-hero-surface--foundational::after {
content: none;
}
.cd-conversion-architecture .cd-section:has(> .cd-atmosphere) {
position: relative;
isolation: isolate;
}
.cd-evaluation-hero:has(> .cd-atmosphere), .single-capability .cd-section:has(> .cd-atmosphere) {
position: relative;
isolation: isolate;
overflow: hidden;
}
.cd-evaluation-hero:has(> .cd-atmosphere) > *:not(.cd-atmosphere), .single-capability .cd-section:has(> .cd-atmosphere) > *:not(.cd-atmosphere) {
position: relative;
z-index: 1;
}
.cd-conversion-architecture .cd-hero-surface .cd-atmosphere {
background-image: linear-gradient(to right, rgba(6, 27, 49, .82) 0%, rgba(6, 27, 49, .7) 24%, rgba(6, 27, 49, .42) 40%, rgba(6, 27, 49, .12) 52%, rgba(6, 27, 49, 0) 66%);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.cd-conversion-architecture .cd-hero-surface .cd-eyebrow {
margin-bottom: var(--intro-eyebrow-gap);
color: rgba(255, 255, 255, .52);
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.cd-conversion-architecture .cd-hero-surface {
background-attachment: fixed;
}
}
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
.cd-conversion-architecture .cd-hero-surface {
background-attachment: scroll;
}
}
.cd-hero-surface--case-studies .cd-hero-surface__content h1, body .entry-content .cd-hero-surface--case-studies .cd-hero-surface__content h1, body .editor-styles-wrapper .cd-hero-surface--case-studies .cd-hero-surface__content h1 {
line-height: 1.06;
}
.cd-hero-surface--case-studies .cd-hero-surface__content .cd-hero-surface__body, .cd-hero-surface--case-studies .cd-hero-surface__content p.cd-hero-surface__body, body .entry-content .cd-hero-surface--case-studies .cd-hero-surface__content .cd-hero-surface__body, body .entry-content .cd-hero-surface--case-studies .cd-hero-surface__content p.cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface--case-studies .cd-hero-surface__content .cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface--case-studies .cd-hero-surface__content p.cd-hero-surface__body {
color: rgba(255, 255, 255, .76);
}
/* ====================================================
CD / Pattern / Proof / Case Illustration / 07 / Light
Scan-first proof section on light canvas.
==================================================== */
.cd-case-illustration {
padding-bottom: calc(var(--section-space-y) + var(--space-sm));
margin-bottom: var(--section-space-y-compact);
}
.cd-case-illustration__inner {
display: flex;
flex-direction: column;
gap: var(--space-medium);
}
.cd-case-illustration__inner > * + * {
margin-top: 0;
}
.cd-case-illustration__intro {
width: 100%;
max-width: 44rem;
--flow-space-heading-to-body: var(--space-lg);
}
.cd-case-illustration__lead {
color: rgba(0, 0, 0, .72) !important;
width: 100%;
max-width: min(42rem, 48vw);
}
.cd-case-illustration__proof-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "impact change";
gap: var(--space-lg);
align-items: stretch;
margin-top: var(--space-lg);
}
.cd-case-illustration__panel {
display: flex;
flex-direction: column;
gap: var(--space-lg);
min-height: 100%;
padding: var(--space-lg);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .78);
box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
transition: transform var(--motion-duration-default) var(--motion-ease-soft), box-shadow var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-case-illustration__panel:hover {
transform: translateY(var(--motion-lift-subtle));
box-shadow: 0 10px 26px rgba(0, 0, 0, .1);
border-color: var(--border-strong);
background: rgba(255, 255, 255, .92);
}
.cd-case-illustration__proof-grid > .cd-case-illustration__panel:not(.cd-case-illustration__panel--impact) {
grid-area: change;
}
.cd-case-illustration__panel-title {
color: var(--color-midnight-brand);
}
.cd-case-illustration__panel-body {
max-width: none;
}
.cd-case-illustration__panel-body.cd-stack--tight > * + * {
margin-top: var(--space-sm);
}
.cd-case-illustration__panel-body .cd-text-body {
max-width: none;
color: rgba(0, 0, 0, .74);
}
.cd-case-illustration__panel--impact {
grid-area: impact;
padding: calc(var(--space-lg) + var(--space-xs));
background: rgba(255, 255, 255, .94);
border-color: var(--border-strong);
box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.cd-case-illustration__panel--impact:hover {
box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}
.cd-case-illustration__panel--impact .cd-case-illustration__panel-body > * + * {
margin-top: var(--space-medium);
}
.cd-case-illustration__panel--impact .cd-text-body {
color: rgba(0, 0, 0, .82);
}
.cd-case-illustration__context {
width: 100%;
max-width: 34rem;
--stack-space-default: var(--space-sm);
color: rgba(0, 0, 0, .68);
}
.cd-case-illustration__context-body {
width: 100%;
max-width: 34rem;
--stack-space-default: var(--space-sm);
}
.cd-case-illustration__context-body .cd-text-body {
max-width: none;
color: inherit;
}
.cd-canvas--dark.cd-case-illustration {
color: var(--color-text-secondary);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__lead {
color: rgba(255, 255, 255, .78) !important;
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__context {
color: rgba(255, 255, 255, .72);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel {
border-color: var(--border-light-subtle);
background: rgba(255, 255, 255, .08);
box-shadow: 0 8px 22px rgba(0, 0, 0, .24), 0 3px 10px rgba(0, 0, 0, .14);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel:hover {
border-color: var(--border-light-hover);
background: rgba(255, 255, 255, .12);
box-shadow: 0 12px 28px rgba(0, 0, 0, .28), 0 6px 14px rgba(0, 0, 0, .18);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel-title {
color: rgba(255, 255, 255, .96);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel-body .cd-text-body {
color: rgba(255, 255, 255, .78);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel--impact {
background: rgba(255, 255, 255, .12);
border-color: var(--border-light-hover);
box-shadow: 0 10px 26px rgba(0, 0, 0, .28), 0 4px 12px rgba(0, 0, 0, .16);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel--impact:hover {
box-shadow: 0 14px 34px rgba(0, 0, 0, .32), 0 7px 16px rgba(0, 0, 0, .2);
}
.cd-canvas--dark.cd-case-illustration .cd-case-illustration__panel--impact .cd-text-body {
color: rgba(255, 255, 255, .84);
}
@media (max-width: 1100px) {
.cd-case-illustration__proof-grid {
grid-template-columns: 1fr;
grid-template-areas: none;
gap: var(--space-medium);
margin-top: var(--space-lg);
align-items: start;
}
.cd-case-illustration__proof-grid > .cd-case-illustration__panel:not(.cd-case-illustration__panel--impact), .cd-case-illustration__proof-grid > .cd-case-illustration__panel.cd-case-illustration__panel--impact {
grid-area: auto;
min-height: auto;
}
}
@media (max-width: 767px) {
.cd-case-illustration {
padding-bottom: calc(var(--section-space-y-mobile) + var(--space-sm));
margin-bottom: var(--section-space-y-compact-mobile);
}
.cd-case-illustration__inner {
gap: var(--space-medium);
}
.cd-case-illustration__proof-grid {
grid-template-columns: 1fr;
grid-template-areas: none;
gap: var(--space-medium);
margin-top: var(--space-medium);
align-items: start;
}
.cd-case-illustration__proof-grid > .cd-case-illustration__panel:not(.cd-case-illustration__panel--impact), .cd-case-illustration__proof-grid > .cd-case-illustration__panel.cd-case-illustration__panel--impact {
grid-area: auto;
min-height: auto;
}
.cd-case-illustration__panel, .cd-case-illustration__panel--impact {
padding: var(--space-medium);
}
.cd-case-illustration__context {
max-width: none;
}
.cd-case-illustration__context-body {
max-width: none;
}
.cd-case-illustration__lead {
max-width: 36ch;
}
}
/* -----------------------------------------
Content
----------------------------------------- */
.cd-hero-surface__content {
max-width: 620px;
--flow-space-heading-to-body: var(--space-lg);
--flow-space-body-to-body: var(--space-medium);
--flow-space-body-to-structure: calc(var(--space-xl) + var(--space-sm));
}
.cd-hero-surface__content > * {
margin: 0;
}
/* -----------------------------------------
Heading
----------------------------------------- */
.cd-hero-surface .cd-hero-surface__content h1, body .entry-content .cd-hero-surface .cd-hero-surface__content h1, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content h1 {
margin: 0 0 var(--flow-space-heading-to-body) 0;
color: #fff;
font-size: var(--heading-display, var(--h1-size));
line-height: var(--heading-line-height-tight);
letter-spacing: var(--heading-tracking-tight);
font-weight: var(--font-semi-bold);
max-width: 12ch;
text-transform: none;
}
/* -----------------------------------------
Lead
Important:
This targets the actual GB text block class directly.
Use this when the lead is its own block.
----------------------------------------- */
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead {
margin: 0;
font-size: 1.05rem;
line-height: 1.5;
font-weight: var(--font-medium);
letter-spacing: -.01em;
color: rgba(255, 255, 255, .88);
max-width: 36ch;
}
/* -----------------------------------------
Body
Use this when the body is its own block.
----------------------------------------- */
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body {
margin: 0;
font-size: 1rem;
line-height: 1.65;
font-weight: var(--font-regular);
color: rgba(255, 255, 255, .72);
max-width: 38ch;
}
/* -----------------------------------------
Proper spacing when markup is correct
Lead block followed by body block
----------------------------------------- */
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead + .cd-hero-surface__body, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead + p.cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead + .cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead + p.cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead + .cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead + p.cd-hero-surface__body {
margin-top: var(--flow-space-body-to-body);
}
/* -----------------------------------------
Legacy safety for bad markup
If a single GB text block is output with
,
this keeps it visually acceptable until builder cleanup.
This does NOT create
. It only styles them if present.
----------------------------------------- */
.cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead br, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead br, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead br {
display: block;
content: "";
margin-top: .7rem;
}
/* -----------------------------------------
CTA
----------------------------------------- */
.cd-hero-surface__cta {
position: relative;
z-index: 2;
display: block;
margin: var(--flow-space-body-to-structure) 0 0 0;
}
.cd-hero-surface__cta .cd-cta, .cd-hero-surface__cta a.cd-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
max-width: 420px;
}
/* -----------------------------------------
Hero rhythm normalization
Local hero-only spacing calibration
----------------------------------------- */
.cd-hero-surface .cd-heading-display, .cd-hero-surface h1 {
line-height: var(--heading-line-height-tight);
letter-spacing: var(--heading-tracking-tight);
}
.cd-hero-surface .cd-stack > .cd-eyebrow, .cd-hero-surface .cd-hero-surface__content > h6.cd-eyebrow {
margin-bottom: 10px;
}
.cd-hero-surface .cd-stack > .cd-eyebrow + *, .cd-hero-surface .cd-hero-surface__content > h6 + * {
margin-top: 1.25rem;
}
.cd-hero-surface .cd-stack > .cd-text-body + .gb-button, .cd-hero-surface .cd-stack > p + .gb-button, .cd-hero-surface .cd-stack > .cd-text-body + a, .cd-hero-surface .cd-stack > p + a, .cd-hero-surface .cd-hero-surface__content > .cd-text-body + .cd-hero-surface__actions, .cd-hero-surface .cd-hero-surface__content > p + .cd-hero-surface__actions {
margin-top: 1.75rem;
}
/* -----------------------------------------
Hero-specific primary CTA tuning
----------------------------------------- */
.cd-hero-surface .cd-cta.cd-cta--primary, .cd-hero-surface a.cd-cta.cd-cta--primary {
background: rgba(18, 46, 82, .68);
border-color: rgba(255, 255, 255, .22);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
color: var(--cta-text-on-dark);
}
.cd-hero-surface .cd-cta.cd-cta--primary:hover, .cd-hero-surface .cd-cta.cd-cta--primary:focus-visible, .cd-hero-surface a.cd-cta.cd-cta--primary:hover, .cd-hero-surface a.cd-cta.cd-cta--primary:focus-visible {
background: rgba(18, 46, 82, .78);
border-color: rgba(255, 255, 255, .3);
box-shadow: 0 14px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
color: var(--cta-text-on-dark);
}
/* -----------------------------------------
GenerateBlocks specificity patch
----------------------------------------- */
header.cd-hero-surface.gb-element-fac9a9e4, .gb-element-fac9a9e4.cd-hero-surface {
background-position: 70% center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* Capabilities Gateway fixed background on stable desktop pointers. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.cd-capabilities-wrapper .cd-hero-surface, body.page-id-431 .cd-hero-surface, body.page-id-448 .cd-hero-surface, body.page-id-462 .cd-hero-surface, body.page-id-474 .cd-hero-surface {
background-attachment: fixed;
}
}
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
.cd-capabilities-wrapper .cd-hero-surface, body.page-id-431 .cd-hero-surface, body.page-id-448 .cd-hero-surface, body.page-id-462 .cd-hero-surface, body.page-id-474 .cd-hero-surface {
background-attachment: scroll;
}
}
@media (min-width: 768px) {
header.cd-hero-surface.gb-element-fac9a9e4, .gb-element-fac9a9e4.cd-hero-surface {
padding-top: calc(var(--header-height, 80px) + var(--space-2xl));
}
}
/* -----------------------------------------
Tablet and below
----------------------------------------- */
@media (max-width: 1280px) and (min-width: 768px) {
.cd-hero-surface {
padding-top: calc(var(--header-height, 80px) + var(--space-xl));
min-height: clamp(500px, 68vh, 760px);
}
.cd-hero-surface__inner {
padding-left: var(--space-lg);
padding-right: var(--space-lg);
padding-bottom: calc(var(--space-lg) + var(--space-xs));
}
.cd-hero-surface__content {
max-width: 580px;
}
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead {
font-size: 1.08rem;
max-width: 32ch;
}
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body {
max-width: 36ch;
}
}
/* -----------------------------------------
Mobile
----------------------------------------- */
@media (max-width: 767px) {
.cd-hero-surface {
min-height: calc(100svh - var(--header-height, 80px));
padding-top: var(--header-height, 80px);
align-items: center;
}
.cd-hero-surface__inner {
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 3.75rem;
}
.cd-hero-surface__content {
max-width: 100%;
--flow-space-heading-to-body: var(--space-medium);
--flow-space-body-to-body: var(--space-medium);
--flow-space-body-to-structure: calc(var(--space-xl) - var(--space-xs));
}
.cd-hero-surface .cd-hero-surface__content h1, body .entry-content .cd-hero-surface .cd-hero-surface__content h1, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content h1 {
font-size: clamp(2rem, 7vw, 2.8rem);
line-height: 1.03;
max-width: 12ch;
margin-bottom: var(--flow-space-heading-to-body);
}
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__lead, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__lead {
font-size: 1.05rem;
line-height: 1.5;
max-width: 30ch;
}
.cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .entry-content .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content .cd-hero-surface__body, body .editor-styles-wrapper .cd-hero-surface .cd-hero-surface__content p.cd-hero-surface__body {
font-size: 1rem;
line-height: 1.62;
max-width: 32ch;
}
.cd-hero-surface__cta {
width: 100%;
margin-top: 2.5rem;
padding-bottom: .75rem;
}
.cd-hero-surface__cta .cd-cta, .cd-hero-surface__cta a.cd-cta {
display: flex;
width: 100%;
max-width: 100%;
justify-content: center;
padding: 1.2rem 1.6rem;
font-size: 1rem;
}
}
/* ====================================================
CD / Pattern / Skinny Header / 01 / Dark
==================================================== */
.cd-skinny-header {
position: relative;
overflow: hidden;
}
.cd-skinny-header__inner {
padding-top: clamp(56px, 7vh, 88px);
padding-bottom: clamp(28px, 3.5vh, 44px);
}
.cd-skinny-header__stack {
max-width: 46rem;
}
.cd-skinny-header__title {
max-width: 11ch;
}
.cd-skinny-header__lead {
max-width: 42rem;
}
.cd-skinny-header__atmosphere {
opacity: .34;
filter: blur(14px);
transform: translate(26%, 28%) scale(.99);
transform-origin: bottom right;
pointer-events: none;
}
.cd-skinny-header__atmosphere.cd-atmosphere-dark::before {
background: radial-gradient(ellipse at 78% 76%, rgba(81, 120, 145, .06) 0%, rgba(81, 120, 145, .035) 32%, rgba(81, 120, 145, .015) 56%, rgba(81, 120, 145, 0) 82%);
}
@media (max-width: 767px) {
.cd-skinny-header__inner {
padding-top: 44px;
padding-bottom: 24px;
}
.cd-skinny-header__title {
max-width: 10ch;
}
.cd-skinny-header__lead {
max-width: 32rem;
}
}
/* ====================================================
CD / Pattern / Engage / Focused Conversation / 01 / Form Wrapper + Forminator Skin
==================================================== */
.cd-engage-page {
position: relative;
overflow: hidden;
}
.cd-engage-page__inner {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.cd-engage-page__trust-strip {
display: grid;
max-width: 48rem;
}
.cd-engage-page__trust-strip .cd-stack {
display: grid;
gap: var(--space-sm);
}
.cd-engage-page__trust-intro {
margin: 0;
max-width: 48rem;
font-size: var(--text-base);
line-height: var(--leading-normal);
color: rgba(0, 2, 4, .72);
}
body .entry-content .cd-engage-page .cd-engage-page__trust-strip .wp-block-list, .cd-engage-page .cd-engage-page__trust-strip .wp-block-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
padding-left: 0;
margin-top: 0;
row-gap: .7rem;
}
body .entry-content .cd-engage-page li.cd-engage-page__trust-item, .cd-engage-page li.cd-engage-page__trust-item {
position: relative;
padding-left: 1.1rem;
margin-bottom: 0;
font-size: var(--text-base);
line-height: 1.45;
color: rgba(0, 2, 4, .82);
}
.cd-engage-page__trust-item::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0, 2, 4, .22);
}
.cd-engage-page__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
gap: var(--space-2xl);
align-items: start;
}
.cd-engage-page__content, .cd-engage-page__form-col {
min-width: 0;
}
.cd-engage-page__content {
max-width: 44rem;
}
.cd-engage-page__intro-group, .cd-engage-page__steps-group, .cd-engage-page__reassurance-group {
display: grid;
}
.cd-engage-page__intro-group {
gap: var(--space-sm);
}
.cd-engage-page__steps-group {
gap: var(--space-sm);
padding-top: var(--space-sm);
}
.cd-engage-page__content.cd-stack > .cd-engage-page__steps-group {
padding-top: 45px;
}
.cd-engage-page__section-title, .cd-engage-page__body, .cd-engage-page__reassurance, .cd-engage-page__form-title, .cd-engage-page__form-copy {
margin: 0;
}
.cd-engage-page__body {
max-width: 42rem;
}
.cd-engage-page__section-title {
max-width: 22ch;
}
.cd-engage-page__signals, .cd-engage-page__steps {
display: grid;
}
body .entry-content .cd-engage-page ul.cd-engage-page__signals-list, body .entry-content .cd-engage-page ul.cd-engage-page__steps-list, body .entry-content .cd-engage-page ol.cd-engage-page__steps-list, .cd-engage-page ul.cd-engage-page__signals-list, .cd-engage-page ul.cd-engage-page__steps-list, .cd-engage-page ol.cd-engage-page__steps-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
padding-left: 0;
margin-top: 0;
row-gap: .7rem;
}
body .entry-content .cd-engage-page li.cd-engage-page__signal, .cd-engage-page li.cd-engage-page__signal {
position: relative;
padding-left: 1.35rem;
margin-bottom: 0;
font-size: var(--text-base);
line-height: 1.45;
color: rgba(0, 2, 4, .84);
}
.cd-engage-page__signal::before {
content: "";
position: absolute;
left: 0;
top: .58em;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(16, 46, 82, .34);
}
.cd-engage-page__steps-list {
counter-reset: engage-step;
}
body .entry-content .cd-engage-page li.cd-engage-page__step, .cd-engage-page li.cd-engage-page__step {
counter-increment: engage-step;
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem;
align-items: start;
margin-bottom: 0;
font-size: var(--text-base);
line-height: 1.45;
color: rgba(0, 2, 4, .82);
}
.cd-engage-page__step::before {
content: counter(engage-step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
margin-top: .05rem;
border-radius: 999px;
background: rgba(16, 46, 82, .08);
border: 1px solid rgba(16, 46, 82, .12);
color: rgba(16, 46, 82, .78);
font-size: .78rem;
font-weight: var(--font-semi-bold);
line-height: 1;
}
.cd-engage-page__reassurance {
max-width: 40rem;
color: rgba(0, 2, 4, .68);
}
.cd-engage-page__form-card {
padding: clamp(28px, 3.5vw, 42px);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(0, 0, 0, .07);
box-shadow: 0 10px 28px rgba(0, 0, 0, .06);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cd-engage-page__form-copy {
margin-top: var(--space-sm);
}
.cd-engage-page__form-embed {
margin-top: var(--space-medium);
}
.cd-engage-page .forminator-ui {
color: var(--color-text-primary);
}
.cd-engage-page .forminator-ui .forminator-row {
margin: 0 0 1.25rem;
}
.cd-engage-page .forminator-ui .forminator-row.forminator-row-last {
margin-bottom: 0;
}
.cd-engage-page .forminator-ui .forminator-field {
display: flex;
flex-direction: column;
gap: .5rem;
}
.cd-engage-page .forminator-label {
margin: 0;
font-size: 1rem;
line-height: 1.35;
font-weight: var(--font-medium);
color: rgba(0, 2, 4, .9);
}
.cd-engage-page .forminator-description {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
margin: 0;
font-size: .9rem;
line-height: 1.5;
color: rgba(0, 2, 4, .56);
}
.cd-engage-page .forminator-description span[data-limit] {
margin-left: auto;
white-space: nowrap;
font-size: .78rem;
color: rgba(0, 2, 4, .48);
}
.cd-engage-page .forminator-input, .cd-engage-page .forminator-textarea, .cd-engage-page .select2-selection--single {
width: 100%;
min-height: 56px;
padding: .95rem 1rem;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, .09);
background: rgba(255, 255, 255, .92);
color: var(--color-text-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
transition: border-color var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-engage-page .forminator-input::placeholder, .cd-engage-page .forminator-textarea::placeholder {
color: rgba(0, 2, 4, .42);
}
.cd-engage-page .forminator-textarea {
min-height: 220px;
padding-top: 1rem;
resize: vertical;
}
.cd-engage-page .forminator-input:focus, .cd-engage-page .forminator-textarea:focus, .cd-engage-page .select2-container--focus .select2-selection, .cd-engage-page .select2-container--open .select2-selection {
border-color: rgba(81, 120, 145, .42);
box-shadow: 0 0 0 3px rgba(81, 120, 145, .12);
outline: none;
}
.cd-engage-page .select2-container {
width: 100% !important;
}
.cd-engage-page .select2-selection, .cd-engage-page .select2-selection--single, .cd-engage-page .select2-selection--multiple {
width: 100% !important;
min-height: 56px;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, .09);
background: rgba(255, 255, 255, .92);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cd-engage-page .select2-selection__rendered {
display: flex !important;
align-items: center;
min-height: 56px;
padding: 0 2.75rem 0 1rem !important;
color: rgba(0, 2, 4, .8) !important;
}
.cd-engage-page .select2-selection__placeholder {
color: rgba(0, 2, 4, .46) !important;
}
.cd-engage-page .select2-selection__arrow {
height: 56px !important;
right: .7rem !important;
}
.cd-engage-page .forminator-button-submit {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 1.6rem;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(16, 46, 82, .92);
color: #fff;
font-size: .95rem;
font-weight: var(--font-semi-bold);
letter-spacing: .05em;
text-transform: uppercase;
box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-engage-page .forminator-button-submit:hover, .cd-engage-page .forminator-button-submit:focus-visible {
transform: translateY(-2px);
background: rgba(16, 46, 82, 1);
box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
}
.cd-engage-page .forminator-button-submit:active {
transform: translateY(0);
box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}
.cd-engage-page .forminator-error-message {
margin-top: .35rem;
font-size: .84rem;
line-height: 1.45;
color: rgba(143, 32, 43, .9);
}
.cd-engage-page .forminator-field.forminator-has_error .forminator-input, .cd-engage-page .forminator-field.forminator-has_error .forminator-textarea, .cd-engage-page .forminator-field.forminator-has_error .select2-selection {
border-color: rgba(143, 32, 43, .38);
box-shadow: 0 0 0 3px rgba(143, 32, 43, .08);
}
.cd-engage-page .forminator-response-message {
margin: 0 0 1rem;
padding: .9rem 1rem;
border-radius: var(--radius-md);
border: 1px solid rgba(16, 46, 82, .12);
background: rgba(16, 46, 82, .04);
color: rgba(0, 2, 4, .76);
font-size: .9rem;
line-height: 1.5;
}
.cd-engage-page .forminator-response-message.forminator-error {
border-color: rgba(143, 32, 43, .18);
background: rgba(143, 32, 43, .05);
color: rgba(105, 24, 32, .92);
}
.cd-engage-page .forminator-response-message.forminator-success {
border-color: rgba(54, 110, 84, .18);
background: rgba(54, 110, 84, .06);
color: rgba(34, 78, 58, .92);
}
.cd-engage-page #forminator-module-1327 .select2-selection__rendered {
color: rgba(0, 2, 4, .86) !important;
}
.cd-engage-page #forminator-module-1327 .select2-selection__placeholder {
color: rgba(0, 2, 4, .58) !important;
}
.forminator-select-dropdown.forminator-custom-form-1327 {
background: #fff !important;
border: 1px solid rgba(0, 2, 4, .08) !important;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
overflow: hidden;
}
.forminator-select-dropdown.forminator-custom-form-1327 .select2-dropdown {
background: #fff !important;
}
.forminator-select-dropdown.forminator-custom-form-1327 .select2-results__options {
background: #fff !important;
}
.forminator-select-dropdown.forminator-custom-form-1327 .select2-results__option, .forminator-select-dropdown.forminator-custom-form-1327 .select2-results__option--selectable {
padding: .85rem 1rem;
background: #fff !important;
color: rgba(0, 2, 4, .82) !important;
}
.forminator-select-dropdown.forminator-custom-form-1327 .select2-results__option--highlighted {
background: rgba(0, 2, 4, .05) !important;
color: rgba(0, 2, 4, .92) !important;
}
.forminator-select-dropdown.forminator-custom-form-1327 .select2-results__option--selected {
background: rgba(0, 2, 4, .09);
color: rgba(0, 2, 4, .92);
}
.cd-engage-page #forminator-module-1327 .forminator-button-submit {
box-shadow: 0 8px 20px rgba(0, 0, 0, .13);
}
.cd-engage-page #forminator-module-1327 .forminator-button-submit:hover, .cd-engage-page #forminator-module-1327 .forminator-button-submit:focus-visible {
box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}
.cd-engage-page #forminator-module-1327 .forminator-button-submit:active {
box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}
@media (max-width: 1024px) {
.cd-engage-page__grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.cd-engage-page__content {
max-width: none;
}
.cd-engage-page__form-col {
max-width: 42rem;
}
}
@media (max-width: 767px) {
.cd-engage-page__inner {
gap: var(--space-lg);
}
.cd-engage-page__grid {
gap: var(--space-lg);
}
.cd-engage-page__form-card {
padding: 26px 24px;
border-radius: var(--radius-md);
}
.cd-engage-page .forminator-description {
flex-wrap: wrap;
}
.cd-engage-page .forminator-description span[data-limit] {
margin-left: 0;
}
.cd-engage-page .forminator-button-submit {
width: 100%;
}
}
/* ====================================================
CD / Hero / Video Modal Authority / 01 / Page CSS
Page-only hero pattern. No modal styling.
==================================================== */
.cd-section.cd-surface-dark.cd-hero-modal {
background-color: var(--color-midnight-brand);
background-image: linear-gradient(105deg, rgba(0, 42, 78, .31) 0%, rgba(0, 42, 78, .22) 44%, rgba(0, 42, 78, .12) 74%, rgba(0, 42, 78, .07) 100%), var(--inline-bg-image);
background-position: center, center;
background-size: 100% 100%, cover;
background-repeat: no-repeat;
background-attachment: scroll, fixed;
}
.cd-hero-modal {
position: relative;
overflow: hidden;
padding-top: calc(var(--section-space-y) + var(--header-height, 80px) + var(--space-lg));
}
.cd-hero-modal__inner {
position: relative;
}
.cd-hero-modal__atmosphere.cd-atmosphere-dark, .cd-hero-modal > .cd-atmosphere.cd-atmosphere-dark {
opacity: 1;
transform: none;
transform-origin: center;
filter: none;
}
.cd-hero-modal.cd-surface-dark h1.cd-eyebrow, .cd-hero-modal.cd-surface-dark h2.cd-eyebrow, .cd-hero-modal.cd-surface-dark h3.cd-eyebrow, .cd-hero-modal.cd-surface-dark h4.cd-eyebrow, .cd-hero-modal.cd-surface-dark h5.cd-eyebrow, .cd-hero-modal.cd-surface-dark h6.cd-eyebrow, .cd-hero-modal.cd-surface-dark .cd-eyebrow {
color: rgba(255, 255, 255, .65);
letter-spacing: .08em;
}
.cd-hero-modal__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: var(--space-xl);
align-items: center;
}
.cd-hero-modal__content {
min-width: 0;
max-width: 55ch;
align-self: center;
}
.cd-hero-modal__content > .cd-cta, .cd-hero-modal__content > a.cd-cta {
display: none;
}
.cd-hero-modal__media {
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.cd-hero-modal__media .cd-text-intro {
max-width: 38rem;
line-height: 1.65;
color: rgba(255, 255, 255, .78);
}
.cd-hero-modal__trigger {
position: relative;
display: block;
width: min(100%, 680px);
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
background-color: rgba(255, 255, 255, .04);
background-image: var(--inline-bg-image);
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
cursor: pointer;
isolation: isolate;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-hero-modal__trigger::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .25));
pointer-events: none;
}
.cd-hero-modal__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 24px;
transform: translate(-50%, -50%);
transition: transform .2s ease, background .2s ease;
}
.cd-hero-modal__play .gb-shape, .cd-hero-modal__play svg {
display: block;
}
.cd-hero-modal__play svg {
width: 26px;
height: 26px;
}
.cd-hero-modal__meta {
margin-top: 4.5rem;
display: flex;
justify-content: center;
}
.cd-hero-modal__watch, .cd-hero-modal h1.cd-hero-modal__watch, .cd-hero-modal h2.cd-hero-modal__watch, .cd-hero-modal h3.cd-hero-modal__watch, .cd-hero-modal h4.cd-hero-modal__watch, .cd-hero-modal h5.cd-hero-modal__watch, .cd-hero-modal h6.cd-hero-modal__watch {
margin: 0;
font-size: .95rem;
line-height: 1.2;
letter-spacing: .09em;
text-transform: uppercase;
font-weight: var(--font-semi-bold);
color: rgba(255, 255, 255, .82);
}
.cd-hero-modal__trigger:hover, .cd-hero-modal__trigger:focus-visible {
transform: translateY(-4px);
box-shadow: 0 26px 54px rgba(0, 0, 0, .32);
border-color: rgba(255, 255, 255, .16);
}
.cd-hero-modal__media:hover .cd-hero-modal__watch {
color: rgba(255, 255, 255, .9);
}
.cd-hero-modal__trigger:hover .cd-hero-modal__play, .cd-hero-modal__trigger:focus-visible .cd-hero-modal__play {
transform: translate(-50%, -50%) scale(1.08);
background: rgba(255, 255, 255, .18);
}
@media (max-width: 1024px) {
.cd-section.cd-surface-dark.cd-hero-modal {
background-image: linear-gradient(102deg, rgba(0, 42, 78, .2) 0%, rgba(0, 42, 78, .13) 52%, rgba(0, 42, 78, .07) 100%), var(--inline-bg-image);
background-position: center, 100% 34%;
background-size: 100% 100%, cover;
background-repeat: no-repeat;
background-attachment: scroll, scroll;
}
.cd-hero-modal > .cd-atmosphere.cd-atmosphere-dark::before {
background: radial-gradient(34rem 22rem at 86% 24%, rgba(116, 154, 174, .08), transparent 72%), linear-gradient(180deg, rgba(0, 42, 78, .05) 0%, rgba(0, 42, 78, .01) 42%, rgba(0, 42, 78, .07) 100%);
}
.cd-hero-modal__grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.cd-hero-modal__media {
align-items: flex-start;
}
}
@media (min-width: 1025px) {
.cd-hero-modal__media {
align-self: end;
align-items: flex-start;
justify-content: flex-end;
}
}
@media (max-width: 767px) {
.cd-hero-modal {
padding-top: calc(var(--section-space-y) + var(--header-height, 80px) - var(--space-medium));
}
.cd-hero-modal__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2medium);
}
.cd-hero-modal__content {
max-width: none;
}
.cd-hero-modal__trigger {
width: 100%;
}
.cd-hero-modal__play {
width: 56px;
height: 56px;
font-size: 18px;
}
.cd-hero-modal__play svg {
width: 20px;
height: 20px;
}
}
/* ====================================================
CD / Content / Executive Summary / 019
Canonical post-hero executive summary
Uses foundational utilities only
Full replacement
==================================================== */
.cd-executive-summary {
--section-space-current: var(--section-space-y-compact);
--section-space-current-mobile: var(--section-space-y-compact-mobile);
background-color: var(--bg-soft);
color: var(--color-text-primary);
padding-top: var(--section-space-current);
padding-bottom: calc(var(--section-space-current) * .6);
border-top: var(--border-default) solid var(--border-divider-light);
}
.cd-executive-summary__inner {
max-width: var(--layout-max-width);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
box-sizing: border-box;
}
.cd-executive-summary__content {
max-width: 900px;
/* Flow owns rhythm */
--flow-space-heading-to-body: var(--intro-eyebrow-gap);
--flow-space-body-to-body: var(--space-medium);
--flow-space-body-to-structure: var(--flow-space-body-to-structure-tight);
}
.cd-executive-summary__content > p:first-of-type {
font-size: 1.12rem;
line-height: 1.75;
}
.cd-executive-summary .cd-micro-heading, .cd-executive-summary .cd-eyebrow, .cd-executive-summary .cd-label, .cd-executive-summary h6 {
font-size: var(--h6-size);
line-height: var(--heading-line-height-normal);
letter-spacing: .06em;
text-transform: uppercase;
font-weight: 600;
color: rgba(0, 0, 0, .45);
}
.cd-executive-summary__text, .cd-executive-summary__content > p, body .entry-content .cd-executive-summary__text, body .editor-styles-wrapper .cd-executive-summary__text {
max-width: var(--measure-wide);
font-size: 1.08rem;
line-height: 1.75;
letter-spacing: -.005em;
color: rgba(0, 0, 0, .78);
}
body.page-id-672 .cd-executive-summary {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #e4e9ee 0%, #d8dee5 100%);
}
body.page-id-672 .cd-executive-summary::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(92% 82% at 14% 18%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, 0) 68%), linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .035) 52%, rgba(0, 0, 0, .05) 100%);
}
body.page-id-672 .cd-executive-summary > .cd-atmosphere-light {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .85;
transform: scale(1.05);
transform-origin: top left;
}
body.page-id-672 .cd-executive-summary__inner {
position: relative;
z-index: 2;
}
@media (max-width: 1024px) {
.cd-executive-summary__inner {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.cd-executive-summary__content {
max-width: 100%;
}
.cd-executive-summary__text, .cd-executive-summary__content > p, body .entry-content .cd-executive-summary__text, body .editor-styles-wrapper .cd-executive-summary__text {
max-width: var(--measure-wide);
font-size: 1.04rem;
line-height: 1.72;
}
}
@media (max-width: 767px) {
.cd-executive-summary {
padding-top: var(--section-space-current-mobile);
padding-bottom: calc(var(--section-space-current-mobile) * .6);
}
.cd-executive-summary__inner {
padding-left: var(--space-medium);
padding-right: var(--space-medium);
}
.cd-executive-summary__content {
--flow-space-heading-to-body: var(--space-medium);
--flow-space-body-to-body: var(--flow-space-body-to-body-tight);
--flow-space-body-to-structure: var(--flow-space-body-to-structure-tight);
}
.cd-executive-summary .cd-micro-heading, .cd-executive-summary .cd-eyebrow, .cd-executive-summary .cd-label, .cd-executive-summary h6 {
font-size: .95rem;
}
.cd-executive-summary__text, .cd-executive-summary__content > p, body .entry-content .cd-executive-summary__text, body .editor-styles-wrapper .cd-executive-summary__text {
max-width: 100%;
font-size: 1rem;
line-height: 1.7;
}
}
/* ====================================================
CD / Pattern / Content / Intro Bridge / 02
Canonical post-hero bridge composition
System owns surface, spacing, and typography.
==================================================== */
.cd-intro-bridge {
position: relative;
overflow: hidden;
padding-top: var(--section-space-y-compact);
padding-bottom: calc(var(--section-space-y-compact) * .75);
}
.cd-intro-bridge.cd-canvas--light {
background: linear-gradient(180deg, #e4e9ee 0%, #d8dee5 100%);
}
.cd-intro-bridge::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(92% 82% at 14% 18%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, .02) 48%, rgba(255, 255, 255, 0) 68%), linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .035) 52%, rgba(0, 0, 0, .05) 100%);
}
.cd-intro-bridge > .cd-atmosphere-light {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-intro-bridge .cd-atmosphere-light {
opacity: .85;
transform: scale(1.05);
transform-origin: top left;
}
.cd-intro-bridge__inner {
position: relative;
z-index: 2;
max-width: var(--layout-max-width);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
box-sizing: border-box;
}
.cd-intro-bridge__stack {
max-width: 50rem;
margin-right: auto;
--flow-space-heading-to-body: var(--intro-eyebrow-gap);
--flow-space-body-to-body: var(--space-medium);
}
.cd-intro-bridge__stack > * {
margin: 0;
}
.cd-intro-bridge__stack > * + * {
margin-top: var(--flow-space-body-to-body);
}
.cd-intro-bridge__stack > .cd-eyebrow + *, .cd-intro-bridge__stack > .cd-micro-heading + *, .cd-intro-bridge__stack > .cd-label + *, .cd-intro-bridge__stack > h6 + * {
margin-top: var(--flow-space-heading-to-body);
}
@media (max-width: 767px) {
.cd-intro-bridge {
padding-top: var(--section-space-y-compact-mobile);
padding-bottom: calc(var(--section-space-y-compact-mobile) * .8);
}
.cd-intro-bridge__inner {
padding-left: var(--space-medium);
padding-right: var(--space-medium);
}
.cd-intro-bridge__stack {
max-width: 100%;
}
}
/* ====================================================
CD / Pattern / Content / Intro Bridge / 02
Tight narrative bridge after hero
==================================================== */
.cd-intro-bridge .cd-flow {
max-width: 56ch;
}
.cd-intro-bridge .cd-flow > .cd-text-body + .cd-text-body {
margin-top: 1.2rem;
}
.cd-intro-bridge .cd-list {
margin-top: 1.4rem;
}
.cd-intro-bridge .cd-flow > .cd-list + .cd-text-body {
margin-top: 1.6rem;
max-width: 52ch;
}
/* ====================================================
CD / Pattern / Content / Longform Narrative / 11 / Light
Composition only. Forward pattern.
==================================================== */
.cd-longform-narrative-11__layout {
display: grid;
grid-template-columns: minmax(12rem, .72fr) minmax(0, 1.9fr);
column-gap: clamp(1.75rem, 2.6vw, 4rem);
row-gap: var(--space-lg);
align-items: start;
}
.cd-longform-narrative-11__col {
min-width: 0;
}
.cd-longform-narrative-11__col--heading {
align-self: start;
}
.cd-longform-narrative-11__col--body {
min-width: 0;
}
.cd-longform-narrative-11__body {
min-width: 0;
max-width: 44rem;
}
@media (max-width: 1024px) {
.cd-longform-narrative-11__layout {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-medium);
}
.cd-longform-narrative-11__body {
max-width: none;
}
}
@media (max-width: 767px) {
.cd-longform-narrative-11__layout {
row-gap: var(--space-sm);
}
}
/* ====================================================
CD / Pattern / Content / Longform Narrative / 011 / WP Engineering
==================================================== */
.cd-longform-wp-engineering {
--cd-section-space: var(--section-space-y-compact);
}
/* ====================================================
CD / Pattern / WordPress Engineering / System Framework
Composition only. Global section, surface, container, typography,
stack, and atmosphere roles remain authoritative.
==================================================== */
.cd-wp-engineering-system {
position: relative;
isolation: isolate;
overflow: hidden;
padding-top: calc(var(--cd-section-space) + var(--space-lg));
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 245, 239, .76)), var(--bg-soft);
}
.cd-wp-engineering-system > .cd-atmosphere::before {
background: radial-gradient(34rem 19rem at 88% 12%, rgba(189, 158, 65, .075), transparent 72%), radial-gradient(30rem 18rem at 78% 24%, rgba(81, 120, 145, .055), transparent 74%);
}
.cd-wp-engineering-system > .cd-container {
position: relative;
z-index: 1;
--stack-space-default: var(--space-xl);
}
.cd-wp-engineering-system__intro {
max-width: 58rem;
}
.cd-wp-engineering-system__intro .cd-eyebrow {
color: var(--color-text-accent-gold);
}
.cd-wp-engineering-system__intro .cd-heading-section {
max-width: 22ch;
color: var(--color-midnight-brand);
text-wrap: balance;
}
.cd-wp-engineering-system__intro .cd-text-intro {
max-width: 66ch;
}
.cd-wp-engineering-system__principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: hidden;
border: var(--border-default) solid rgba(0, 42, 78, .14);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .72);
box-shadow: 0 18px 46px rgba(0, 42, 78, .055);
}
.cd-wp-engineering-system__principle {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr);
column-gap: var(--space-medium);
row-gap: var(--space-sm);
align-content: start;
min-width: 0;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
}
.cd-wp-engineering-system__principle:nth-child(even) {
border-inline-start: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-wp-engineering-system__principle:nth-child(n + 3) {
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-wp-engineering-system__principle > .cd-label {
display: grid;
place-items: center;
width: 2.65rem;
aspect-ratio: 1;
margin: 0;
border: var(--border-default) solid rgba(189, 158, 65, .72);
border-radius: var(--radius-sm);
color: #8f5f10;
font-size: var(--text-sm);
letter-spacing: .04em;
}
.cd-wp-engineering-system__principle > .cd-heading-component, .cd-wp-engineering-system__principle > .cd-text-body {
min-width: 0;
max-width: none;
}
.cd-wp-engineering-system__principle > .cd-heading-component {
align-self: center;
margin: 0;
color: var(--color-midnight-brand);
text-wrap: balance;
}
.cd-wp-engineering-system__principle > .cd-text-body {
grid-column: 2;
margin: 0;
}
.cd-wp-engineering-system__practice {
position: relative;
display: grid;
grid-column: 1/-1;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: var(--space-sm);
align-items: center;
margin-top: var(--space-sm);
padding: var(--space-sm) var(--space-medium);
border-radius: var(--radius-sm);
background: linear-gradient(135deg, rgba(242, 247, 252, .96), rgba(233, 239, 246, .76));
}
.cd-wp-engineering-system__practice::before {
content: "";
display: block;
width: 2rem;
height: 2rem;
color: rgba(0, 42, 78, .72);
}
.cd-wp-engineering-system__principle:nth-child(1) .cd-wp-engineering-system__practice::before {
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='22' height='22'/%3E%3Cpath d='M16 8v16M8 16h16'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='22' height='22'/%3E%3Cpath d='M16 8v16M8 16h16'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-wp-engineering-system__principle:nth-child(2) .cd-wp-engineering-system__practice::before {
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='16' r='3.5'/%3E%3Ccircle cx='24' cy='16' r='3.5'/%3E%3Cpath d='M11.5 16h9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='8' cy='16' r='3.5'/%3E%3Ccircle cx='24' cy='16' r='3.5'/%3E%3Cpath d='M11.5 16h9'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-wp-engineering-system__principle:nth-child(3) .cd-wp-engineering-system__practice::before {
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5 27 6.2v8.7c0 7.1-4.4 11.9-11 14.6C9.4 26.8 5 22 5 14.9V6.2L16 2.5Z' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5 27 6.2v8.7c0 7.1-4.4 11.9-11 14.6C9.4 26.8 5 22 5 14.9V6.2L16 2.5Z' fill='none' stroke='black' stroke-width='1.75' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-wp-engineering-system__principle:nth-child(4) .cd-wp-engineering-system__practice::before {
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 28.5h26'/%3E%3Crect x='5' y='17' width='5' height='11.5'/%3E%3Crect x='13.5' y='11' width='5' height='17.5'/%3E%3Crect x='22' y='4.5' width='5' height='24'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 28.5h26'/%3E%3Crect x='5' y='17' width='5' height='11.5'/%3E%3Crect x='13.5' y='11' width='5' height='17.5'/%3E%3Crect x='22' y='4.5' width='5' height='24'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.cd-wp-engineering-system__practice .cd-text-body {
max-width: none;
margin: 0;
font-size: var(--text-sm);
line-height: var(--leading-snug);
}
.cd-wp-engineering-system__practice strong {
color: var(--color-midnight-brand);
font-weight: var(--font-semi-bold);
}
.cd-wp-engineering-system__synthesis {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
grid-template-columns: 3.25rem minmax(0, .78fr) minmax(0, 1.22fr);
gap: var(--space-medium);
align-items: center;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
border: var(--border-default) solid rgba(189, 158, 65, .38);
border-inline-start: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-md);
background: linear-gradient(110deg, rgba(255, 252, 244, .98), rgba(247, 241, 225, .82));
}
.cd-wp-engineering-system__synthesis::before {
content: "";
position: relative;
z-index: 1;
display: block;
width: 2.75rem;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, transparent 0 .34rem, rgba(189, 158, 65, .9) .36rem .42rem, transparent .44rem .82rem, rgba(0, 42, 78, .48) .84rem .9rem, transparent .92rem), linear-gradient(rgba(189, 158, 65, .7), rgba(189, 158, 65, .7)) center/1px 100% no-repeat, linear-gradient(90deg, rgba(189, 158, 65, .7), rgba(189, 158, 65, .7)) center/100% 1px no-repeat;
}
.cd-wp-engineering-system__synthesis::after {
content: "";
position: absolute;
z-index: 0;
right: -2rem;
bottom: -3rem;
width: 19rem;
height: 10rem;
opacity: .13;
background: linear-gradient(30deg, transparent 48%, rgba(189, 158, 65, .9) 49% 50%, transparent 51%) 0 0/3.5rem 3.5rem, linear-gradient(150deg, transparent 48%, rgba(0, 42, 78, .64) 49% 50%, transparent 51%) 0 0/3.5rem 3.5rem;
pointer-events: none;
}
.cd-wp-engineering-system__synthesis > * {
position: relative;
z-index: 1;
}
.cd-wp-engineering-system__synthesis .cd-heading-component, .cd-wp-engineering-system__synthesis .cd-text-body {
max-width: none;
margin: 0;
}
.cd-wp-engineering-system__synthesis .cd-heading-component {
color: var(--color-midnight-brand);
text-wrap: balance;
}
.cd-wp-engineering-system__synthesis .cd-text-body {
padding-inline-start: var(--space-medium);
border-inline-start: var(--border-default) solid rgba(189, 158, 65, .36);
}
@media (max-width: 767px) {
.cd-wp-engineering-system {
padding-top: calc(var(--cd-section-space) + var(--space-medium));
}
.cd-wp-engineering-system > .cd-container {
--stack-space-default: var(--space-lg);
}
.cd-wp-engineering-system__intro .cd-heading-section, .cd-wp-engineering-system__intro .cd-text-intro {
max-width: none;
}
.cd-wp-engineering-system__principles {
grid-template-columns: 1fr;
}
.cd-wp-engineering-system__principle:nth-child(even) {
border-inline-start: 0;
}
.cd-wp-engineering-system__principle:nth-child(n + 2) {
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-wp-engineering-system__principle {
grid-template-columns: 2.75rem minmax(0, 1fr);
padding: var(--space-medium);
}
.cd-wp-engineering-system__practice {
grid-template-columns: 2.25rem minmax(0, 1fr);
padding: var(--space-sm);
}
.cd-wp-engineering-system__synthesis {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
.cd-wp-engineering-system__synthesis .cd-text-body {
padding-inline-start: 0;
border-inline-start: 0;
}
}
/* ====================================================
CD / Pattern / WordPress Engineering / Operational Proof Ledger
Composition only. Global section, surface, container, typography,
stack, and label roles remain authoritative.
==================================================== */
.cd-operational-proof-ledger {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--color-midnight-brand);
}
.cd-operational-proof-ledger__media {
position: absolute;
z-index: 0;
inset: 0 0 auto;
width: 100%;
height: 38rem;
overflow: hidden;
pointer-events: none;
}
.cd-operational-proof-ledger__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--color-midnight-brand) 0%, rgba(0, 42, 78, .96) 30%, rgba(0, 42, 78, .7) 52%, rgba(0, 42, 78, .12) 78%, rgba(0, 42, 78, .03) 100%), linear-gradient(180deg, rgba(0, 42, 78, .02) 32%, rgba(0, 42, 78, .72) 72%, var(--color-midnight-brand) 100%);
}
.cd-operational-proof-ledger__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
opacity: .58;
}
.cd-operational-proof-ledger > .cd-container {
position: relative;
z-index: 1;
--stack-space-default: var(--space-xl);
}
.cd-operational-proof-ledger__intro {
max-width: 58rem;
}
.cd-operational-proof-ledger__intro .cd-eyebrow {
color: var(--color-text-accent-gold);
}
.cd-operational-proof-ledger__intro .cd-heading-section {
max-width: 25ch;
color: #fff;
text-wrap: balance;
}
.cd-operational-proof-ledger__intro .cd-text-intro {
max-width: 68ch;
color: rgba(255, 255, 255, .76);
}
.cd-operational-proof-ledger__ledger {
overflow: hidden;
border: var(--border-default) solid rgba(255, 255, 255, .14);
border-radius: var(--radius-lg);
background: rgba(250, 249, 246, .98);
color: var(--color-midnight-brand);
box-shadow: 0 24px 58px rgba(0, 17, 32, .2);
}
.cd-operational-proof-ledger__header, .cd-operational-proof-ledger__row {
display: grid;
grid-template-columns: 4.25rem repeat(3, minmax(0, 1fr));
}
.cd-operational-proof-ledger__header {
background: rgba(0, 42, 78, .055);
}
.cd-operational-proof-ledger__header > * {
min-width: 0;
margin: 0;
padding: var(--space-sm) var(--space-medium);
}
.cd-operational-proof-ledger__header > :nth-child(n + 2), .cd-operational-proof-ledger__row > .cd-operational-proof-ledger__cell {
border-inline-start: var(--border-default) solid rgba(0, 42, 78, .11);
}
.cd-operational-proof-ledger__header .cd-label {
align-self: start;
margin: 0;
color: #8f5f10;
font-size: var(--text-xs);
line-height: var(--leading-snug);
}
.cd-operational-proof-ledger__row {
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-operational-proof-ledger__number, .cd-operational-proof-ledger__cell {
min-width: 0;
margin: 0;
padding: clamp(var(--space-sm), 2.2vw, var(--space-medium));
}
.cd-operational-proof-ledger__number {
color: #8f5f10;
font-size: var(--text-sm);
text-align: center;
}
.cd-operational-proof-ledger__cell {
--stack-space-tight: var(--space-xs);
align-content: start;
}
.cd-operational-proof-ledger__cell .cd-heading-component, .cd-operational-proof-ledger__cell .cd-text-body {
max-width: none;
margin: 0;
}
.cd-operational-proof-ledger__cell .cd-heading-component {
color: var(--color-midnight-brand);
font-size: clamp(1.05rem, 1.35vw, 1.25rem);
line-height: var(--leading-snug);
}
.cd-operational-proof-ledger__cell .cd-text-body {
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.cd-operational-proof-ledger__mobile-label {
display: none;
}
.cd-operational-proof-ledger__synthesis {
position: relative;
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: var(--space-lg);
align-items: center;
overflow: hidden;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: rgba(0, 42, 78, .98);
}
.cd-operational-proof-ledger__synthesis::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(90deg, var(--color-midnight-brand) 0%, rgba(0, 42, 78, .94) 48%, rgba(0, 42, 78, .38) 100%), url("https://cdn-ileoooi.nitrocdn.com/MYeaiSZqNvcwqPBugRnAIKhJboYTTKFt/assets/images/optimized/rev-e3d9907/cayusedigital.com/wp-content/uploads/2026/07/benefits.jpg") right 72%/cover no-repeat;
opacity: .8;
pointer-events: none;
}
.cd-operational-proof-ledger__synthesis > * {
position: relative;
z-index: 1;
}
.cd-operational-proof-ledger__synthesis .cd-heading-component, .cd-operational-proof-ledger__synthesis .cd-text-body {
max-width: none;
margin: 0;
}
.cd-operational-proof-ledger__synthesis .cd-heading-component {
color: #fff;
text-wrap: balance;
}
.cd-operational-proof-ledger__synthesis .cd-text-body {
color: rgba(255, 255, 255, .74);
}
@media (max-width: 1024px) {
.cd-operational-proof-ledger__media {
height: 32rem;
}
.cd-operational-proof-ledger__header, .cd-operational-proof-ledger__row {
grid-template-columns: 3.25rem repeat(3, minmax(0, 1fr));
}
.cd-operational-proof-ledger__header > *, .cd-operational-proof-ledger__number, .cd-operational-proof-ledger__cell {
padding: var(--space-sm);
}
}
@media (max-width: 767px) {
.cd-operational-proof-ledger__media {
height: 31rem;
}
.cd-operational-proof-ledger__media::after {
background: linear-gradient(90deg, rgba(0, 42, 78, .9), rgba(0, 42, 78, .32)), linear-gradient(180deg, rgba(0, 42, 78, .08) 14%, rgba(0, 42, 78, .76) 68%, var(--color-midnight-brand) 100%);
}
.cd-operational-proof-ledger > .cd-container {
--stack-space-default: var(--space-lg);
}
.cd-operational-proof-ledger__intro .cd-heading-section, .cd-operational-proof-ledger__intro .cd-text-intro {
max-width: none;
}
.cd-operational-proof-ledger__header {
display: none;
}
.cd-operational-proof-ledger__row {
grid-template-columns: minmax(0, 1fr);
padding: var(--space-sm) 0;
}
.cd-operational-proof-ledger__number {
grid-column: 1;
padding: var(--space-sm) var(--space-medium) var(--space-xs);
text-align: left;
}
.cd-operational-proof-ledger__row > .cd-operational-proof-ledger__cell {
grid-column: 1;
padding: var(--space-sm) var(--space-medium);
border-inline-start: 0;
border-top: var(--border-default) solid rgba(0, 42, 78, .1);
}
.cd-operational-proof-ledger__row > .cd-operational-proof-ledger__cell:nth-child(2) {
border-top: 0;
}
.cd-operational-proof-ledger__mobile-label {
display: block;
margin: 0 0 var(--space-xs);
color: #8f5f10;
font-size: var(--text-xs);
line-height: var(--leading-snug);
}
.cd-operational-proof-ledger__synthesis {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
}
/* ====================================================
CD / Helpers / Atmosphere / 130
Canonical atmosphere layer system
==================================================== */
.cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* -----------------------------------------
Dark surface variant
----------------------------------------- */
.cd-atmosphere-dark::before, .cd-atmosphere--dark::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 42%, rgba(81, 120, 145, .07) 0%, rgba(81, 120, 145, .045) 28%, rgba(81, 120, 145, .02) 52%, rgba(81, 120, 145, 0) 78%);
}
/* -----------------------------------------
Light surface variant
----------------------------------------- */
/* ====================================================
CD / Helpers / Atmosphere / Light
Purpose:
Subtle white atmospheric lift for light and neutral surfaces.
Usage:
Applied to an absolutely positioned child element inside a pattern.
Pairing:
Requires parent pattern to define base surface.
Rules:
- Must remain low opacity
- Must not reduce readability
- Must not introduce visible gradient edges
- Must not be used as a background replacement
==================================================== */
.cd-atmosphere-light::before, .cd-atmosphere--light::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(56rem 24rem at 18% 16%, rgba(255, 255, 255, .14), transparent 72%), radial-gradient(42rem 18rem at 82% 14%, rgba(255, 255, 255, .08), transparent 76%), radial-gradient(36rem 20rem at 50% 100%, rgba(255, 255, 255, .05), transparent 78%);
}
/* ====================================================
CD / Pattern / Context / What This Work Is Not / 21 / Light
Composition only. Forward pattern.
This pattern owns a darker neutral base surface.
Atmosphere is applied via `.cd-atmosphere-light`.
Do not reintroduce `.cd-surface-light` or `.cd-surface-dark`.
==================================================== */
.cd-what-work-is-not-21 {
background: radial-gradient(56rem 22rem at 18% 18%, rgba(81, 120, 145, .06), transparent 72%), radial-gradient(44rem 18rem at 82% 14%, rgba(30, 54, 69, .035), transparent 76%), linear-gradient(180deg, rgba(242, 247, 252, .36), rgba(242, 247, 252, .18));
}
.cd-what-work-is-not-21__layout {
display: grid;
grid-template-columns: minmax(13rem, .8fr) minmax(0, 1.7fr);
column-gap: clamp(1.75rem, 2.5vw, 3.75rem);
row-gap: var(--space-lg);
align-items: start;
}
.cd-what-work-is-not-21__col {
min-width: 0;
}
.cd-what-work-is-not-21__col--intro {
align-self: start;
}
.cd-what-work-is-not-21__col--content {
min-width: 0;
}
.cd-what-work-is-not-21__content {
max-width: 44rem;
}
.cd-what-work-is-not-21__list {
margin: 0;
padding: 0;
list-style: none;
}
.cd-what-work-is-not-21__item + .cd-what-work-is-not-21__item {
margin-top: var(--space-medium);
padding-top: var(--space-medium);
border-top: var(--border-default) solid var(--border-divider-light);
}
.cd-what-work-is-not-21__resolution {
max-width: 44rem;
margin-top: var(--space-xl);
padding-top: var(--space-medium);
border-top: var(--border-default) solid rgba(0, 0, 0, .06);
}
@media (max-width: 1024px) {
.cd-what-work-is-not-21__layout {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-medium);
}
.cd-what-work-is-not-21__content, .cd-what-work-is-not-21__resolution {
max-width: none;
}
}
@media (max-width: 767px) {
.cd-what-work-is-not-21__layout {
row-gap: var(--space-sm);
}
.cd-what-work-is-not-21__item + .cd-what-work-is-not-21__item {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
}
/* ====================================================
CD / Pattern / Strategy / What Remains / 022 / Light
System-led comparison pattern. GenerateBlocks owns structure;
this stylesheet owns composition and responsive behavior.
==================================================== */
.cd-what-remains-22 {
position: relative;
overflow: clip;
background-color: var(--bg-soft);
background-image: radial-gradient(48rem 24rem at 8% 4%, rgba(255, 255, 255, .84), transparent 72%), radial-gradient(44rem 22rem at 92% 92%, rgba(81, 120, 145, .08), transparent 74%);
color: var(--color-text-primary);
}
.cd-what-remains-22__container {
position: relative;
z-index: 1;
}
.cd-what-remains-22__layout {
display: grid;
grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.68fr);
gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
align-items: start;
}
.cd-what-remains-22__intro {
max-width: 27rem;
}
.cd-what-remains-22__eyebrow {
margin: 0 0 var(--intro-eyebrow-gap);
color: var(--color-text-accent-earth);
}
.cd-what-remains-22__title {
max-width: 12ch;
margin: 0;
color: var(--color-midnight-brand);
}
.cd-what-remains-22__intro-text {
max-width: 38ch;
margin: var(--space-lg) 0 0;
color: var(--color-midnight-brand-accent-lift);
}
.cd-what-remains-22__comparisons {
min-width: 0;
border-top: var(--border-default) solid var(--border-divider-light);
}
.cd-what-remains-22__row {
display: grid;
grid-template-columns: minmax(10rem, .82fr) minmax(5rem, .55fr) minmax(16rem, 1.08fr);
gap: clamp(var(--space-sm), 2vw, var(--space-medium));
align-items: center;
min-width: 0;
padding-block: clamp(var(--space-medium), 2.5vw, var(--space-lg));
border-bottom: var(--border-default) solid var(--border-divider-light);
}
.cd-what-remains-22__row::before, .cd-what-remains-22__row::after {
content: "";
grid-column: 2;
grid-row: 1;
align-self: center;
}
.cd-what-remains-22__row::before {
width: 100%;
height: var(--border-default);
background: linear-gradient(90deg, var(--border-divider-light), rgba(189, 158, 65, .62));
}
.cd-what-remains-22__row::after {
justify-self: end;
width: .52rem;
height: .52rem;
border-top: 1px solid var(--color-text-accent-gold);
border-right: 1px solid var(--color-text-accent-gold);
transform: rotate(45deg);
}
.cd-what-remains-22__source, .cd-what-remains-22__outcome {
margin: 0;
}
.cd-what-remains-22__source {
grid-column: 1;
color: var(--color-midnight-brand-accent-lift);
}
.cd-what-remains-22__outcome {
grid-column: 3;
color: var(--color-midnight-brand);
font-size: var(--text-xl);
font-weight: var(--font-semi-bold);
line-height: var(--leading-snug);
}
.cd-what-remains-22__closing {
margin-top: var(--space-xl);
padding-top: var(--space-medium);
border-top: var(--border-default) solid rgba(0, 42, 78, .18);
}
.cd-what-remains-22__closing-label {
margin: 0;
color: var(--color-text-accent-earth);
font-size: var(--text-xs);
font-weight: var(--font-semi-bold);
letter-spacing: var(--tracking-wider);
line-height: var(--leading-snug);
text-transform: uppercase;
}
@media (max-width: 1024px) {
.cd-what-remains-22__layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
.cd-what-remains-22__intro {
max-width: 52rem;
}
.cd-what-remains-22__title {
max-width: 18ch;
}
.cd-what-remains-22__intro-text {
max-width: var(--measure-default);
}
}
@media (max-width: 767px) {
.cd-what-remains-22__layout {
gap: var(--space-lg);
}
.cd-what-remains-22__eyebrow {
margin-bottom: var(--space-sm);
}
.cd-what-remains-22__intro-text {
margin-top: var(--space-medium);
}
.cd-what-remains-22__row {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-sm);
padding-block: var(--space-medium);
}
.cd-what-remains-22__row::before, .cd-what-remains-22__row::after {
grid-column: 1;
grid-row: 2;
justify-self: start;
}
.cd-what-remains-22__row::before {
width: 3.75rem;
}
.cd-what-remains-22__row::after {
margin-left: 3.2rem;
}
.cd-what-remains-22__source, .cd-what-remains-22__outcome {
grid-column: 1;
}
.cd-what-remains-22__source {
grid-row: 1;
}
.cd-what-remains-22__outcome {
grid-row: 3;
font-size: var(--text-lg);
}
.cd-what-remains-22__closing {
margin-top: var(--space-lg);
}
}
/* ====================================================
CD / Grid / Capabilities System / 025 / DigiPr Var
Flagship light-card system on dark canvas
Full feature block. Cards fully override shared glass panel styling.
==================================================== */
/* ====================================================
CD / Pattern / Capability Gateway / 26
Light, system-led capability entry layer.
==================================================== */
.cd-capability-gateway {
position: relative;
--cd-section-space: calc(var(--section-space-y) + var(--space-sm));
background-color: #f2f7fc;
color: #1e3645;
}
.cd-capability-gateway .cd-atmosphere {
display: none;
}
.cd-capability-gateway > .cd-container {
box-sizing: border-box;
background: transparent;
color: inherit;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.cd-capability-gateway .cd-text-stack {
max-width: 46rem;
}
.cd-capability-gateway .cd-text-stack + .cd-grid.cd-grid--3 {
margin-top: var(--space-2xl);
}
.cd-capability-gateway .cd-grid.cd-grid--3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
align-items: stretch;
}
.cd-capability-gateway .cd-card, .cd-capability-gateway .cd-card--link {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: var(--space-lg);
border: 1px solid rgba(0, 42, 78, .08);
border-radius: 16px;
background-color: #fff;
color: #1e3645;
box-shadow: 0 1px 2px rgba(0, 42, 78, .04), 0 8px 18px rgba(0, 42, 78, .03);
transition: border-color var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-capability-gateway .cd-card > * {
margin: 0;
}
.cd-capability-gateway .cd-card > * + * {
margin-top: var(--space-sm);
}
.cd-capability-gateway .cd-eyebrow {
color: rgba(0, 42, 78, .5);
}
.cd-capability-gateway .cd-card .cd-heading {
color: #002a4e;
}
.cd-capability-gateway .cd-card .cd-text {
color: #1e3645;
}
.cd-capability-gateway .cd-link-arrow {
--gateway-link-transition: color var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: auto;
padding-top: 1.25rem;
color: #002a4e;
line-height: 1;
transition: var(--gateway-link-transition);
}
.cd-capability-gateway .cd-link-arrow a, .cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta-icon {
display: inline-flex;
align-items: center;
color: inherit;
transition: var(--gateway-link-transition);
}
.cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta, body .cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta, body .entry-content .cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta, .cd-capability-gateway .cd-link-arrow a, .cd-capability-gateway .cd-link-arrow a:hover, .cd-capability-gateway .cd-link-arrow a:focus-visible {
color: inherit;
line-height: 1;
opacity: 1;
text-decoration: none;
}
.cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta-icon {
justify-content: center;
width: .9rem;
height: .9rem;
flex: 0 0 auto;
line-height: 0;
transform: translateY(0);
}
.cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta-icon svg, .cd-capability-gateway .cd-link-arrow .cd-perspectives-card__cta-icon img {
display: block;
width: 100%;
height: 100%;
}
.cd-capability-gateway .cd-card--link:hover, .cd-capability-gateway .cd-card--link:focus-within {
border-color: rgba(0, 42, 78, .12);
box-shadow: 0 2px 6px rgba(0, 42, 78, .05), 0 10px 22px rgba(0, 42, 78, .05);
transform: translateY(-2px);
}
.cd-capability-gateway .cd-card--link:hover .cd-link-arrow, .cd-capability-gateway .cd-card--link:focus-within .cd-link-arrow {
color: var(--color-midnight-brand-accent-lift);
transform: translateX(1px);
}
@media (max-width: 1024px) {
.cd-capability-gateway .cd-grid.cd-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-capability-gateway {
--cd-section-space: calc(var(--section-space-y-mobile) + var(--space-sm));
}
.cd-capability-gateway > .cd-container {
padding-left: 0;
padding-right: 0;
}
.cd-capability-gateway .cd-text-stack {
max-width: 100%;
}
.cd-capability-gateway .cd-text-stack + .cd-grid.cd-grid--3 {
margin-top: var(--space-xl);
}
.cd-capability-gateway .cd-grid.cd-grid--3 {
grid-template-columns: 1fr;
gap: var(--space-medium);
align-items: start;
}
.cd-capability-gateway .cd-card, .cd-capability-gateway .cd-card--link {
min-height: auto;
padding: 1.25rem;
border-radius: 12px;
}
.cd-capability-gateway .cd-link-arrow {
padding-top: var(--space-sm);
}
}
/* ====================================================
CD / Flow / Methodology / 05
Dark methodology canvas
Typography-led chapter structure on midnight surface.
==================================================== */
.cd-methodology-canvas {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cd-methodology-canvas__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(1200px 360px at 50% 46%, rgba(77, 163, 255, .07), transparent 72%), radial-gradient(760px at 16% 16%, var(--glow-atmosphere-subtle), transparent 64%), radial-gradient(640px at 88% 18%, rgba(81, 120, 145, .06), transparent 68%);
opacity: .9;
}
.cd-methodology-canvas > .cd-container {
position: relative;
z-index: 1;
}
.cd-methodology-canvas > .cd-container > .cd-stack:first-child {
max-width: 46rem;
}
.cd-methodology-canvas > .cd-container > .cd-stack:first-child .cd-heading-section {
max-width: 11ch;
}
.cd-methodology-canvas__grid {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1.25rem, 1rem + 1vw, 2rem);
align-items: start;
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
}
.cd-methodology-canvas__grid::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(159, 176, 200, .16) 28%, rgba(159, 176, 200, .16) 72%, rgba(255, 255, 255, .06));
}
.cd-methodology-canvas__pillar {
display: flex;
align-items: flex-start;
min-width: 0;
}
.cd-methodology-canvas__statement {
width: 100%;
max-width: 12ch;
font-size: 1.0625rem !important;
line-height: 1.45 !important;
font-weight: var(--font-semi-bold);
letter-spacing: -.01em;
text-wrap: balance;
color: rgba(255, 255, 255, .88) !important;
}
.cd-methodology-canvas__conclusion {
max-width: 34rem;
margin-top: calc(var(--space-2xl) - var(--space-sm));
}
.cd-methodology-canvas__conclusion .cd-text-body {
max-width: 34rem;
color: rgba(255, 255, 255, .74);
}
@media (max-width: 1180px) {
.cd-methodology-canvas__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-methodology-canvas__statement {
max-width: none;
font-size: 1rem !important;
line-height: 1.5 !important;
}
.cd-methodology-canvas__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
padding-top: var(--space-medium);
}
.cd-methodology-canvas__conclusion {
margin-top: var(--space-xl);
}
}
/* ====================================================
CD / Pattern / Methodology Canvas / 05 / Dark Var 2
Presence Variant (Digital Presence page only)
==================================================== */
.cd-methodology-canvas--presence .cd-methodology-canvas__atmosphere {
background: radial-gradient(ellipse at 50% 40%, rgba(81, 120, 145, .12) 0%, rgba(81, 120, 145, .06) 35%, rgba(81, 120, 145, .02) 60%, rgba(81, 120, 145, 0) 85%);
opacity: .85;
}
.cd-methodology-canvas--presence .cd-methodology-canvas__grid {
gap: calc(var(--grid-gap-default) * .9);
}
.cd-methodology-canvas--presence .cd-methodology-canvas__statement {
max-width: 28ch;
}
/* ====================================================
CD / Flow / Methodology / 05
Define Success dark variant
Canonical builder-driven methodology flow on dark canvas.
==================================================== */
.cd-methodology-flow {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cd-methodology-flow > .cd-canvas__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(1080px 300px at 50% 40%, rgba(77, 163, 255, .045), transparent 74%), radial-gradient(680px at 16% 14%, rgba(81, 120, 145, .04), transparent 64%), radial-gradient(520px at 86% 18%, rgba(81, 120, 145, .035), transparent 70%);
opacity: .56;
}
.cd-methodology-flow__container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(var(--container-max-width), calc(100% - ( 2 * var(--container-gutter) )));
max-width: var(--container-max-width);
margin-inline: auto;
padding-inline: 0;
gap: var(--space-xl);
}
.cd-methodology-flow__intro {
width: min(100%, 48rem);
margin: 0;
--stack-space-default: var(--space-medium);
--flow-space-heading-to-body: var(--space-lg);
}
.cd-methodology-flow__title {
max-width: 11ch;
}
.cd-methodology-flow__lead {
max-width: 44rem;
color: rgba(255, 255, 255, .78) !important;
}
.cd-methodology-flow__grid {
position: relative;
display: grid;
width: 100%;
margin: 0;
padding: 0;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1rem, .6rem + .9vw, 1.6rem);
align-items: stretch;
}
.cd-methodology-flow__step {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
padding-top: var(--space-medium);
padding-left: calc(var(--space-medium) + var(--space-xs));
border-top: var(--border-default) solid rgba(255, 255, 255, .1);
}
.cd-methodology-flow__step > * {
margin: 0;
}
.cd-methodology-flow__step > * + * {
margin-top: var(--space-2xs);
}
.cd-methodology-flow__step::before {
content: "";
position: absolute;
top: var(--space-medium);
left: var(--space-medium);
bottom: 0;
width: 1px;
background: linear-gradient(180deg, rgba(159, 176, 200, .36), rgba(159, 176, 200, .08));
}
.cd-methodology-flow__step:nth-child(4) {
border-top-color: rgba(159, 176, 200, .24);
}
.cd-methodology-flow__step:nth-child(4)::before {
background: linear-gradient(180deg, rgba(77, 163, 255, .42), rgba(159, 176, 200, .1));
}
.cd-methodology-flow__step-indicator {
color: rgba(255, 255, 255, .46);
}
.cd-methodology-flow__step-title {
max-width: 12ch;
color: rgba(255, 255, 255, .92);
}
.cd-methodology-flow__step-title + .cd-methodology-flow__step-body {
margin-top: var(--space-sm);
}
.cd-methodology-flow__step-body {
max-width: none;
font-size: var(--text-sm);
line-height: 1.68;
color: rgba(255, 255, 255, .7);
}
.cd-methodology-flow__step:nth-child(5) .cd-methodology-flow__step-title {
max-width: 11ch;
}
@media (max-width: 1180px) {
.cd-methodology-flow > .cd-canvas__atmosphere {
opacity: .38;
}
.cd-methodology-flow__container {
width: min(var(--container-max-width), calc(100% - ( 2 * var(--container-gutter) )));
gap: var(--space-lg);
}
.cd-methodology-flow__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-medium);
}
.cd-methodology-flow__step, .cd-methodology-flow__step:nth-child(4) {
padding-top: var(--space-sm);
padding-left: calc(var(--space-sm) + var(--space-xs));
}
.cd-methodology-flow__step::before, .cd-methodology-flow__step:nth-child(4)::before {
left: var(--space-sm);
}
.cd-methodology-flow__step-title + .cd-methodology-flow__step-body {
margin-top: var(--space-xs);
}
}
@media (max-width: 767px) {
.cd-methodology-flow__container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
gap: var(--space-lg);
}
.cd-methodology-flow__lead {
max-width: none;
}
.cd-methodology-flow > .cd-canvas__atmosphere {
background: radial-gradient(720px 220px at 50% 24%, rgba(77, 163, 255, .022), transparent 76%), radial-gradient(420px at 18% 14%, rgba(81, 120, 145, .024), transparent 66%);
opacity: .24;
}
.cd-methodology-flow__grid {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
.cd-methodology-flow__step, .cd-methodology-flow__step:nth-child(4) {
padding-top: var(--space-xs);
padding-left: var(--space-sm);
}
.cd-methodology-flow__step::before, .cd-methodology-flow__step:nth-child(4)::before {
top: var(--space-xs);
left: var(--space-sm);
background: linear-gradient(180deg, rgba(159, 176, 200, .26), rgba(159, 176, 200, .08));
}
.cd-methodology-flow__step-title + .cd-methodology-flow__step-body {
margin-top: var(--space-xs);
}
.cd-methodology-flow__step-title, .cd-methodology-flow__step:nth-child(5) .cd-methodology-flow__step-title {
max-width: none;
}
}
.cd-capabilities-canvas {
--section-space-current: var(--section-space-y-expansive);
--section-space-current-mobile: var(--section-space-y-expansive-mobile);
--capabilities-media-max-width: 62rem;
position: relative;
overflow: hidden;
isolation: isolate;
padding-top: calc(var(--section-space-current) * .72);
padding-bottom: var(--section-space-current);
background-color: var(--color-midnight-brand);
color: rgba(255, 255, 255, .78);
--capabilities-heading-to-body: var(--space-medium);
--capabilities-body-to-body: var(--space-medium);
--capabilities-body-to-grid: var(--space-xl);
}
.cd-capabilities-canvas__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(860px at 18% 12%, rgba(77, 163, 255, .075), transparent 60%), radial-gradient(640px at 82% 18%, rgba(77, 163, 255, .03), transparent 66%), radial-gradient(1100px at 50% 100%, rgba(255, 255, 255, .018), transparent 72%);
opacity: 1;
}
.cd-capabilities-system__inner {
position: relative;
z-index: 1;
max-width: var(--layout-max-width);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
box-sizing: border-box;
}
.cd-capabilities-canvas .cd-capabilities-system__top {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 3rem);
align-items: start;
margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
/* ====================================================
CD / Grid / Capabilities System / Header Rhythm
Canonical flow-based header structure
Temporary inline-break support for GB intro copy
==================================================== */
.cd-capabilities-canvas .cd-capabilities-system__header {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(28rem, 1fr);
align-items: flex-start;
column-gap: clamp(2.5rem, 5vw, 4.5rem);
row-gap: var(--capabilities-body-to-body);
max-width: none;
/* Local flow tokens */
--flow-space-heading-to-body: var(--capabilities-heading-to-body);
--flow-space-body-to-body: var(--capabilities-body-to-body);
--flow-space-body-to-structure: var(--capabilities-body-to-grid);
}
.cd-capabilities-canvas .cd-capabilities-system__media {
display: flex;
justify-content: center;
align-items: flex-start;
min-width: 0;
}
.cd-capabilities-canvas .cd-capabilities-system__media > * {
width: min(100%, var(--capabilities-media-max-width));
}
.cd-capabilities-canvas .cd-capabilities-system__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
object-position: center;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
background-color: rgba(11, 27, 48, .82);
box-shadow: 0 24px 58px rgba(4, 10, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cd-capabilities-canvas .cd-capabilities-system__trigger {
position: relative;
isolation: isolate;
display: grid;
grid-template-areas: "poster" "label";
row-gap: .95rem;
width: 100%;
max-width: 600px;
padding: 0;
background: none;
box-shadow: none;
color: rgba(255, 255, 255, .94);
overflow: visible;
text-decoration: none;
cursor: pointer;
}
.cd-capabilities-canvas .cd-capabilities-system__trigger::before {
content: "";
grid-area: poster;
display: block;
width: 100%;
aspect-ratio: 16/9;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 18px;
z-index: 0;
background-color: rgba(11, 27, 48, .82);
background: radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .08), transparent 28%), linear-gradient(180deg, rgba(8, 21, 38, .16) 0%, rgba(8, 21, 38, .54) 100%), var(--inline-bg-image);
background-size: auto, cover, cover;
background-position: 22% 22%, center, center;
background-repeat: no-repeat;
box-shadow: 0 20px 50px rgba(4, 10, 20, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.cd-capabilities-canvas .cd-capabilities-system__trigger:hover, .cd-capabilities-canvas .cd-capabilities-system__trigger:focus-visible {
transform: translateY(-2px);
text-decoration: none;
}
.cd-capabilities-canvas .cd-capabilities-system__trigger:hover::before, .cd-capabilities-canvas .cd-capabilities-system__trigger:focus-visible::before {
border-color: rgba(255, 255, 255, .2);
box-shadow: 0 26px 58px rgba(4, 10, 20, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.cd-capabilities-canvas .cd-capabilities-system__play, .cd-capabilities-canvas .cd-capabilities-system__media-meta {
position: relative;
z-index: 1;
}
.cd-capabilities-canvas .cd-capabilities-system__play {
grid-area: poster;
align-self: center;
justify-self: center;
display: flex;
align-items: center;
justify-content: center;
width: clamp(4.1rem, 6vw, 4.9rem);
height: clamp(4.1rem, 6vw, 4.9rem);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
backdrop-filter: blur(10px);
box-shadow: 0 16px 32px rgba(3, 8, 16, .28);
}
.cd-capabilities-canvas .cd-capabilities-system__play .gb-shape {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40%;
height: 40%;
line-height: 0;
}
.cd-capabilities-canvas .cd-capabilities-system__play svg, .cd-capabilities-canvas .cd-capabilities-system__play img {
width: 100%;
height: 100%;
transform: none;
}
.cd-capabilities-canvas .cd-capabilities-system__media-meta {
grid-area: label;
align-self: start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .4rem;
margin-top: .8rem;
padding: 0;
background: none;
border: 0;
max-width: 29rem;
text-align: center;
}
.cd-capabilities-canvas .cd-capabilities-system__watch {
margin: 0;
font-size: .84rem;
line-height: 1.05;
font-weight: 700;
letter-spacing: .115em;
color: rgba(255, 255, 255, .88);
text-transform: uppercase;
text-align: center;
}
.cd-capabilities-canvas .cd-capabilities-system__watch-subtext {
margin: 0;
max-width: 27rem;
font-size: .84rem;
line-height: 1.46;
font-weight: 400;
letter-spacing: .01em;
color: rgba(255, 255, 255, .56);
text-align: center;
text-transform: none;
}
/* Reset element margins completely */
.cd-capabilities-system__title, .cd-capabilities-system__intro {
margin: 0;
max-width: var(--measure-default);
}
/* Title spacing to intro */
.cd-capabilities-canvas .cd-capabilities-system__header > .cd-capabilities-system__title + .cd-capabilities-system__intro {
margin-top: 0;
}
/* Title spacing to intro */
.cd-capabilities-canvas .cd-capabilities-system__header > .cd-capabilities-system__title + .cd-capabilities-system__intro {
margin-top: 0;
}
/* Title styling */
.cd-capabilities-canvas .cd-capabilities-system__title, .cd-capabilities-canvas h2.cd-capabilities-system__title, body .cd-capabilities-canvas .entry-content h2.cd-capabilities-system__title, body .cd-capabilities-canvas .editor-styles-wrapper h2.cd-capabilities-system__title, body .cd-capabilities-canvas .gb-text.cd-capabilities-system__title {
grid-column: 1;
grid-row: 1/span 2;
margin: 0;
max-width: 11ch;
font-size: var(--heading-section);
line-height: var(--heading-line-height-tight);
letter-spacing: var(--heading-tracking-tight);
font-weight: var(--font-semi-bold);
color: rgba(255, 255, 255, .92) !important;
text-transform: none;
text-wrap: unset;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
.cd-capabilities-canvas .cd-capabilities-system__intro {
grid-column: 2;
margin: 0;
max-width: var(--measure-default);
}
/* Temporary support for single GB text block using Shift+Return */
.cd-capabilities-system__intro br {
content: "";
display: block;
height: var(--flow-space-body-to-body);
}
/* Header spacing to grid */
.cd-capabilities-system__header + .cd-capabilities-system__groups {
margin-top: var(--flow-space-body-to-structure);
}
.cd-capabilities-card--primary {
grid-column: 1/-1;
}
.cd-capabilities-system__intro + .cd-capabilities-system__intro, .cd-responsibilities__lead + .cd-responsibilities__lead {
margin-top: 1.6875rem;
}
/* ====================================================
Cards
Hard override of shared panel/glass styling
==================================================== */
.cd-capabilities-system__groups .cd-capabilities-card, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass {
--capabilities-card-link-transition: color var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 232px;
height: 100%;
padding: calc(var(--space-lg) - var(--space-xs));
box-sizing: border-box;
border-radius: 18px;
background: rgba(255, 255, 255, .94) !important;
border: 1px solid rgba(255, 255, 255, .56) !important;
color: var(--color-midnight-brand) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .035) !important;
transform: none;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft), background-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-capabilities-system__groups .cd-capabilities-card::before, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel::before, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255, 255, 255, .22);
opacity: .42;
pointer-events: none;
}
.cd-capabilities-system__groups .cd-capabilities-card:hover, .cd-capabilities-system__groups .cd-capabilities-card:focus-within, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:hover, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:focus-within, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:hover, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:focus-within {
transform: translateY(-2px);
background: #fff !important;
border-color: rgba(0, 42, 78, .12) !important;
box-shadow: 0 2px 6px rgba(0, 42, 78, .05), 0 10px 22px rgba(0, 42, 78, .05) !important;
}
/* ====================================================
CD / Grid / Capabilities System / Groups Layout
RESTORE GRID CONTEXT (CRITICAL)
==================================================== */
.cd-capabilities-system__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-lg);
row-gap: calc(var(--space-xl) - var(--space-xs));
align-items: stretch;
}
/* Primary card spans full width */
.cd-capabilities-card--primary {
grid-column: 1/-1;
}
/* ====================================================
Primary card
==================================================== */
.cd-capabilities-system__groups .cd-capabilities-card--primary, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel--glass {
min-height: 260px;
padding: calc(var(--space-lg) + var(--space-xs));
background: rgba(255, 255, 255, .985) !important;
border: 1px solid rgba(255, 255, 255, .74) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, .1), 0 4px 12px rgba(0, 0, 0, .05) !important;
}
@media (min-width: 1025px) {
.cd-capabilities-system__groups .cd-capabilities-card--primary, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel--glass {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(17rem, .8fr);
column-gap: var(--space-xl);
row-gap: var(--space-xs);
align-items: start;
}
.cd-capabilities-system__groups .cd-capabilities-card--primary .cd-capabilities-card__label, .cd-capabilities-system__groups .cd-capabilities-card--primary .cd-capabilities-card__title, .cd-capabilities-system__groups .cd-capabilities-card--primary .cd-capabilities-card__headline {
grid-column: 1;
}
.cd-capabilities-system__groups .cd-capabilities-card--primary .cd-capabilities-card__body {
grid-column: 2;
grid-row: 2/span 2;
align-self: start;
margin: 0;
max-width: 28ch;
font-size: 1.0625rem;
line-height: 1.65;
color: rgba(0, 42, 78, .72);
}
}
/* ====================================================
Card typography
Hard override against inherited dark-panel typography
==================================================== */
.cd-capabilities-card__label, body .entry-content .cd-capabilities-card__label, body .editor-styles-wrapper .cd-capabilities-card__label, body .gb-text.cd-capabilities-card__label {
margin: 0 0 var(--space-sm) 0;
font-size: .96rem;
line-height: 1.28;
letter-spacing: .045em;
text-transform: uppercase;
font-weight: 600;
color: rgba(0, 42, 78, .52) !important;
}
.cd-capabilities-card__title, .cd-capabilities-card__headline, body .entry-content .cd-capabilities-card__title, body .entry-content .cd-capabilities-card__headline, body .editor-styles-wrapper .cd-capabilities-card__title, body .editor-styles-wrapper .cd-capabilities-card__headline, body .gb-text.cd-capabilities-card__title, body .gb-text.cd-capabilities-card__headline {
margin: 0 0 var(--space-medium) 0;
font-size: clamp(1.34rem, 1.22rem + .42vw, 1.52rem);
line-height: 1.2;
letter-spacing: -.01em;
font-weight: var(--font-semi-bold);
color: var(--color-midnight-brand) !important;
text-wrap: balance;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
.cd-capabilities-card__body, body .entry-content .cd-capabilities-card__body, body .editor-styles-wrapper .cd-capabilities-card__body, body .gb-text.cd-capabilities-card__body {
margin: auto 0 0 0;
font-size: var(--text-sm);
line-height: 1.62;
color: rgba(0, 42, 78, .58) !important;
}
.cd-capabilities-card__body p {
margin: 0;
}
.cd-capabilities-card__body p + p {
margin-top: var(--space-sm);
}
.cd-capabilities-system__groups .cd-capabilities-card__footer {
display: inline-flex;
align-items: center;
flex-wrap: nowrap;
gap: .55rem;
width: fit-content;
margin-top: var(--space-medium);
}
.cd-capabilities-system__groups .cd-capabilities-card__link {
display: inline-flex !important;
align-items: center;
width: auto !important;
margin: 0;
color: var(--color-midnight-brand);
text-decoration: none;
}
.cd-capabilities-system__groups .cd-capabilities-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: auto !important;
height: auto !important;
min-width: 0;
min-height: 0;
line-height: 1;
color: currentColor;
transition: transform var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-capabilities-system__groups .cd-capabilities-card__arrow svg {
display: block;
width: .95rem !important;
height: .95rem !important;
}
.cd-capabilities-card .cd-link-arrow {
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: auto;
padding-top: 1.25rem;
color: #002a4e;
line-height: 1;
transition: var(--capabilities-card-link-transition);
}
.cd-capabilities-card .cd-link-arrow a, .cd-capabilities-card .cd-link-arrow .cd-perspectives-card__cta-icon {
display: inline-flex;
align-items: center;
color: inherit;
transition: var(--capabilities-card-link-transition);
}
.cd-capabilities-card .cd-link-arrow .cd-perspectives-card__cta, body .cd-capabilities-card .cd-link-arrow .cd-perspectives-card__cta, body .entry-content .cd-capabilities-card .cd-link-arrow .cd-perspectives-card__cta, .cd-capabilities-card .cd-link-arrow a, .cd-capabilities-card .cd-link-arrow a:hover, .cd-capabilities-card .cd-link-arrow a:focus-visible {
color: inherit;
line-height: 1;
opacity: 1;
text-decoration: none;
}
.cd-capabilities-card .cd-perspectives-card__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: .9rem;
height: .9rem;
line-height: 0;
transform: translateY(0);
flex: 0 0 auto;
}
.cd-capabilities-card .cd-perspectives-card__cta-icon svg {
display: block;
width: 100%;
height: 100%;
}
.cd-capabilities-system__groups .cd-capabilities-card:hover .cd-link-arrow, .cd-capabilities-system__groups .cd-capabilities-card:focus-within .cd-link-arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:hover .cd-link-arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:focus-within .cd-link-arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:hover .cd-link-arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:focus-within .cd-link-arrow {
color: var(--color-midnight-brand-accent-lift);
transform: translateX(1px);
}
.cd-capabilities-system__groups .cd-capabilities-card:hover .cd-capabilities-card__arrow, .cd-capabilities-system__groups .cd-capabilities-card:focus-within .cd-capabilities-card__arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:hover .cd-capabilities-card__arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel:focus-within .cd-capabilities-card__arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:hover .cd-capabilities-card__arrow, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass:focus-within .cd-capabilities-card__arrow {
transform: translateX(.18rem);
}
/* ====================================================
Tablet
==================================================== */
@media (max-width: 1024px) {
.cd-capabilities-system__groups {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: var(--space-lg);
}
.cd-capabilities-system__groups .cd-capabilities-card, .cd-capabilities-system__groups .cd-capabilities-card--primary {
min-height: 0;
height: auto;
}
.cd-capabilities-system__groups .cd-capabilities-card--primary, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel, .cd-capabilities-system__groups .cd-capabilities-card--primary.cd-panel--glass {
padding: var(--space-lg);
}
}
/* ====================================================
Mobile
==================================================== */
@media (max-width: 1100px) {
.cd-capabilities-canvas .cd-capabilities-system__top {
gap: clamp(1.25rem, 3vw, 2rem);
}
.cd-capabilities-canvas .cd-capabilities-system__header {
grid-template-columns: 1fr;
max-width: 42rem;
}
.cd-capabilities-canvas .cd-capabilities-system__title, .cd-capabilities-canvas h2.cd-capabilities-system__title, body .cd-capabilities-canvas .entry-content h2.cd-capabilities-system__title, body .cd-capabilities-canvas .editor-styles-wrapper h2.cd-capabilities-system__title, body .cd-capabilities-canvas .gb-text.cd-capabilities-system__title, .cd-capabilities-canvas .cd-capabilities-system__intro {
grid-column: 1;
grid-row: auto;
}
.cd-capabilities-canvas .cd-capabilities-system__media-meta {
padding-top: .1rem;
}
}
@media (max-width: 767px) {
.cd-capabilities-canvas {
padding-top: calc(var(--section-space-current-mobile) * .78);
padding-bottom: var(--section-space-current-mobile);
--capabilities-heading-to-body: var(--space-medium);
--capabilities-body-to-body: var(--space-medium);
--capabilities-body-to-grid: var(--space-xl);
}
.cd-capabilities-system__inner {
padding-left: var(--space-medium);
padding-right: var(--space-medium);
}
.cd-capabilities-canvas .cd-capabilities-system__top {
gap: 1.25rem;
margin-bottom: 2rem;
}
.cd-capabilities-canvas .cd-capabilities-system__title, .cd-capabilities-canvas h2.cd-capabilities-system__title, body .cd-capabilities-canvas .entry-content h2.cd-capabilities-system__title, body .cd-capabilities-canvas .editor-styles-wrapper h2.cd-capabilities-system__title, body .cd-capabilities-canvas .gb-text.cd-capabilities-system__title {
max-width: 100%;
font-size: clamp(2.2rem, 9vw, 3rem);
line-height: 1.06;
}
.cd-capabilities-canvas .cd-capabilities-system__intro, body .cd-capabilities-canvas .entry-content .cd-capabilities-system__intro, body .cd-capabilities-canvas .editor-styles-wrapper .cd-capabilities-system__intro, body .cd-capabilities-canvas .gb-text.cd-capabilities-system__intro {
max-width: 100%;
font-size: 1rem;
line-height: 1.68;
}
.cd-capabilities-canvas .cd-capabilities-system__trigger {
max-width: 100%;
padding: 0;
}
.cd-capabilities-canvas .cd-capabilities-system__trigger::before, .cd-capabilities-canvas .cd-capabilities-system__media img {
border-radius: 16px;
}
.cd-capabilities-canvas .cd-capabilities-system__play {
width: 3.85rem;
height: 3.85rem;
}
.cd-capabilities-canvas .cd-capabilities-system__media-meta {
padding-top: .05rem;
max-width: 100%;
}
.cd-capabilities-canvas .cd-capabilities-system__watch {
font-size: .76rem;
letter-spacing: .105em;
}
.cd-capabilities-canvas .cd-capabilities-system__watch-subtext {
max-width: 26rem;
font-size: .8rem;
line-height: 1.48;
}
.cd-capabilities-system__groups .cd-capabilities-card, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel, .cd-capabilities-system__groups .cd-capabilities-card.cd-panel--glass {
padding: var(--space-medium);
border-radius: 16px;
}
.cd-capabilities-card__title, .cd-capabilities-card__headline, body .entry-content .cd-capabilities-card__title, body .entry-content .cd-capabilities-card__headline, body .editor-styles-wrapper .cd-capabilities-card__title, body .editor-styles-wrapper .cd-capabilities-card__headline, body .gb-text.cd-capabilities-card__title, body .gb-text.cd-capabilities-card__headline {
font-size: clamp(1.22rem, 4.8vw, 1.5rem);
line-height: 1.28;
}
}
@media (max-width: 767px) {
.cd-capabilities-canvas .cd-capabilities-system__title, .cd-capabilities-canvas h2.cd-capabilities-system__title, body .cd-capabilities-canvas .entry-content h2.cd-capabilities-system__title, body .cd-capabilities-canvas .editor-styles-wrapper h2.cd-capabilities-system__title, body .cd-capabilities-canvas .gb-text.cd-capabilities-system__title {
max-width: 9ch;
}
}
@media (max-width: 767px) {
.cd-capabilities-system__groups {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.cd-context-necessary__list ul {
padding-left: 1rem;
}
.cd-context-necessary__list li {
padding-left: .15rem;
}
}
/* ====================================================
CD / Pattern / Homepage / Integrated Capabilities / Dark
The system owns section spacing, containment, type roles, surfaces, panels,
and the feature CTA. This pattern owns composition and route interaction.
==================================================== */
.cd-home-capabilities > .cd-container.cd-stack {
--stack-space-default: clamp(var(--space-xl), 5vw, var(--space-2xl));
}
.cd-home-capabilities__intro {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
align-items: start;
gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.cd-home-capabilities__intro > .cd-stack {
min-width: 0;
}
.cd-home-capabilities__principles {
display: grid;
gap: var(--space-lg);
}
.cd-home-capabilities__principle {
padding-top: var(--space-medium);
border-top: var(--border-default) solid rgba(159, 176, 200, .24);
}
.cd-home-capabilities .cd-text-accent-gold {
color: var(--color-text-accent-gold);
}
.cd-home-capabilities .cd-home-capabilities__route .cd-text-accent-earth {
color: var(--color-text-accent-earth);
}
.cd-home-capabilities__figure {
padding: clamp(var(--space-xs), 1.5vw, var(--space-medium));
border: var(--border-default) solid rgba(159, 176, 200, .2);
border-radius: var(--radius-lg);
background: rgba(6, 27, 49, .74);
}
.cd-home-capabilities__intro + .cd-home-capabilities__figure {
margin-top: var(--space-lg);
}
.cd-home-capabilities__figure img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
}
.cd-home-capabilities__routes {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-lg);
}
a.cd-home-capabilities__route, a.cd-home-capabilities__route:visited {
grid-column: span 2;
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
color: var(--color-midnight-brand);
text-decoration: none;
}
.cd-home-capabilities__route:nth-child(4) {
grid-column: 2/span 2;
}
.cd-home-capabilities__route:nth-child(5) {
grid-column: 4/span 2;
}
.cd-home-capabilities__route > .cd-label:last-child {
width: fit-content;
margin-top: auto;
padding-top: var(--space-medium);
}
.cd-home-capabilities__route > .cd-label:last-child::after {
content: " ↗";
display: inline-block;
}
.cd-home-capabilities__route:hover, .cd-home-capabilities__route:focus-visible {
transform: translateY(var(--motion-lift-subtle));
border-color: rgba(189, 158, 65, .42);
box-shadow: 0 14px 32px rgba(0, 20, 38, .14);
}
.cd-home-capabilities__route:focus-visible {
outline: 2px solid rgba(189, 158, 65, .82);
outline-offset: 4px;
}
.cd-home-capabilities__closing {
display: grid;
grid-template-columns: minmax(0, var(--space-2xl)) max-content minmax(0, var(--space-2xl));
column-gap: var(--space-medium);
row-gap: var(--space-sm);
align-items: center;
justify-content: center;
max-width: 48rem;
margin-inline: auto;
text-align: center;
}
.cd-home-capabilities__closing::before, .cd-home-capabilities__closing::after {
content: "";
display: block;
width: 100%;
height: var(--border-default);
background: var(--color-text-accent-gold);
}
.cd-home-capabilities__closing::before {
grid-column: 1;
grid-row: 1;
}
.cd-home-capabilities__closing::after {
grid-column: 3;
grid-row: 1;
}
.cd-home-capabilities__closing > .cd-label {
grid-column: 2;
grid-row: 1;
}
.cd-home-capabilities__closing > .cd-text-body {
grid-column: 1/-1;
grid-row: 2;
justify-self: center;
margin-top: 0;
text-align: center;
}
@media (max-width: 1280px) {
.cd-home-capabilities__routes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
a.cd-home-capabilities__route, a.cd-home-capabilities__route:nth-child(4), a.cd-home-capabilities__route:nth-child(5) {
grid-column: auto;
}
a.cd-home-capabilities__route:nth-child(5) {
grid-column: 1/-1;
width: calc(( 100% - var(--space-lg) ) / 2);
justify-self: center;
}
}
@media (max-width: 1024px) {
.cd-home-capabilities__intro {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
}
@media (max-width: 767px) {
.cd-home-capabilities > .cd-container.cd-stack {
--stack-space-default: var(--space-xl);
}
.cd-home-capabilities__intro {
gap: var(--space-lg);
}
.cd-home-capabilities__principles {
gap: var(--space-medium);
}
.cd-home-capabilities__routes {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
a.cd-home-capabilities__route, a.cd-home-capabilities__route:nth-child(5) {
grid-column: auto;
width: 100%;
}
.cd-home-capabilities__closing {
grid-template-columns: 1fr;
}
.cd-home-capabilities__closing::before, .cd-home-capabilities__closing::after {
display: none;
}
.cd-home-capabilities__closing > .cd-label, .cd-home-capabilities__closing > .cd-text-body {
grid-column: 1;
}
.cd-home-capabilities__closing > .cd-label {
grid-row: 1;
}
.cd-home-capabilities__closing > .cd-text-body {
grid-row: 2;
}
}
@media (prefers-reduced-motion: reduce) {
.cd-home-capabilities__route {
transition: none;
}
.cd-home-capabilities__route:hover, .cd-home-capabilities__route:focus-visible {
transform: none;
}
}
@media (max-width: 767px) {
.entry-content ul.cd-context-necessary__list, .cd-context-necessary__list {
padding-left: .9rem;
margin-top: var(--space-medium);
}
.entry-content ul.cd-context-necessary__list li, .cd-context-necessary__list li {
padding-left: .1rem;
}
}
/* ====================================================
CD / Context / When This Work Becomes Necessary / V2
Clean system-driven version
==================================================== */
.cd-context-necessary {
--section-space: var(--section-space-y-compact);
background: var(--bg-soft);
padding-top: calc(var(--section-space-y-compact) * .75);
padding-bottom: calc(var(--section-space-y-compact) * .75);
}
.cd-context-necessary__inner {
max-width: var(--layout-max-width);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
.cd-context-necessary__intro, .cd-context-necessary__signals, .cd-context-necessary__impact, .cd-context-necessary__connection {
max-width: 960px;
}
.cd-context-necessary__intro, .cd-context-necessary__signals, .cd-context-necessary__impact {
margin-bottom: var(--space-lg);
}
.cd-context-necessary__title {
margin: 0;
max-width: 14ch;
font-size: var(--h2-size);
line-height: 1.08;
letter-spacing: -.02em;
color: #111;
}
.cd-context-necessary__text {
margin: 0;
max-width: 42em;
line-height: 1.65;
color: #444;
}
.cd-context-necessary__list {
margin-top: var(--space-medium);
}
.cd-context-necessary__list ul {
padding-left: 1.2rem;
}
.cd-context-necessary__list li {
margin-bottom: .6rem;
}
.cd-context-necessary .cd-eyebrow {
color: rgba(0, 0, 0, .55);
}
.cd-context-necessary__subhead {
font-size: 1rem;
font-weight: 600;
color: #2f2f2f;
margin-top: var(--space-medium);
}
.cd-context-necessary__text + .cd-context-necessary__text {
margin-top: var(--space-medium);
}
.cd-context-necessary__subhead + .cd-context-necessary__text {
margin-top: var(--space-medium);
}
.cd-context-necessary__intro > .cd-context-necessary__title + .cd-context-necessary__subhead {
margin-top: var(--space-medium);
}
@media (max-width: 767px) {
.cd-context-necessary {
padding-top: var(--section-space-y-compact-mobile);
padding-bottom: var(--section-space-y-compact-mobile);
}
.cd-context-necessary__inner {
padding-left: var(--space-medium);
padding-right: var(--space-medium);
}
.cd-context-necessary__intro, .cd-context-necessary__signals, .cd-context-necessary__impact {
margin-bottom: var(--space-medium);
}
}
.cd-context-necessary.cd-context-necessary--diagnostic {
--cd-section-space: var(--section-space-y-compact);
padding-top: calc(var(--section-space-y-compact) + var(--space-medium));
padding-bottom: calc(var(--section-space-y-compact) + var(--space-medium));
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__layout {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.22fr);
gap: var(--space-2xl);
align-items: start;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__frame {
max-width: 31rem;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__content {
max-width: 42rem;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__transition + .cd-context-necessary__signals {
margin-top: var(--space-lg);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals {
display: grid;
grid-template-columns: repeat(2, minmax(0, 16rem));
justify-content: start;
gap: var(--space-medium) var(--space-lg);
margin-bottom: 0;
max-width: none;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signal {
max-width: 16rem;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signal .cd-text-body, .cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__transition, .cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: none;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals + .cd-context-necessary__closing {
margin-top: calc(var(--space-xl) + var(--space-sm));
max-width: 32rem;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: 30rem;
font-weight: var(--font-semi-bold);
color: var(--color-midnight-brand);
text-wrap: balance;
}
@media (max-width: 1024px) {
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__frame, .cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__content {
max-width: none;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals {
gap: var(--space-medium) var(--space-lg);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signal {
max-width: none;
}
}
@media (max-width: 767px) {
.cd-context-necessary.cd-context-necessary--diagnostic {
padding-top: calc(var(--section-space-y-compact-mobile) + var(--space-sm));
padding-bottom: calc(var(--section-space-y-compact-mobile) + var(--space-sm));
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__layout {
gap: var(--space-lg);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__frame .cd-heading-section {
max-width: 11ch;
font-size: clamp(1.7rem, 6.8vw, 2.05rem);
line-height: 1.08;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__content {
gap: var(--space-medium);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__transition {
max-width: 28ch;
line-height: 1.5;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__transition + .cd-context-necessary__signals {
margin-top: var(--space-sm);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signal, .cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals + .cd-context-necessary__closing, .cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: none;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signal .cd-text-body {
font-size: 1rem;
line-height: 1.45;
font-weight: var(--font-medium);
letter-spacing: -.01em;
max-width: 24ch;
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__signals + .cd-context-necessary__closing {
margin-top: var(--space-medium);
}
.cd-context-necessary.cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: 26ch;
}
}
/* ====================================================
CD / Pattern / Conversion Architecture / Diagnostic Structure / Light
Page-scoped composition for the conversion diagnostic band.
System roles retain ownership of typography and section rhythm.
==================================================== */
.cd-conversion-architecture .cd-context-necessary--diagnostic {
border-top: var(--border-default) solid rgba(0, 42, 78, .08);
border-bottom: var(--border-default) solid rgba(0, 42, 78, .08);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__layout {
grid-template-columns: minmax(0, .96fr) minmax(28rem, 1.04fr);
gap: var(--space-xl);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__frame {
max-width: 32rem;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__frame .cd-text-intro, .cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__frame .cd-text-body {
max-width: var(--measure-narrow);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__content {
max-width: none;
padding: var(--space-lg);
border: var(--border-default) solid rgba(0, 42, 78, .14);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .78);
box-shadow: none;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signals {
grid-template-columns: 1fr;
gap: 0;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal {
max-width: none;
padding: var(--space-medium) 0;
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal:first-child {
padding-top: 0;
border-top: 0;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal:last-child {
padding-bottom: 0;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal .cd-text-body {
max-width: none;
margin: 0;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal strong {
color: var(--color-midnight-brand);
font-weight: var(--font-semi-bold);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signals + .cd-context-necessary__closing {
max-width: none;
margin-top: var(--space-lg);
padding: var(--space-medium);
border: var(--border-default) solid rgba(0, 42, 78, .14);
border-radius: var(--radius-md);
background: rgba(159, 176, 200, .16);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: none;
margin: 0;
}
@media (max-width: 1024px) {
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__layout {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__content {
max-width: 48rem;
}
}
@media (max-width: 767px) {
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__content {
padding: var(--space-medium);
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signal .cd-text-body, .cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__closing .cd-text-body {
max-width: none;
}
.cd-conversion-architecture .cd-context-necessary--diagnostic .cd-context-necessary__signals + .cd-context-necessary__closing {
padding: var(--space-sm) var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Journey Continuity Recognition / Light
Page-scoped composition for Customer + User Journey Optimization.
System primitives own section spacing, containment, and typography roles.
==================================================== */
.cd-customer-user-journey .cd-journey-continuity {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: var(--border-default) solid rgba(0, 42, 78, .08);
border-bottom: var(--border-default) solid rgba(0, 42, 78, .08);
}
.cd-customer-user-journey .cd-journey-continuity > .cd-atmosphere {
opacity: .72;
}
.cd-customer-user-journey .cd-journey-continuity > .cd-atmosphere::before {
background: radial-gradient(46rem 22rem at 14% 10%, rgba(81, 120, 145, .14), transparent 74%), radial-gradient(34rem 18rem at 88% 16%, rgba(189, 158, 65, .1), transparent 78%);
}
.cd-customer-user-journey .cd-journey-continuity > *:not(.cd-atmosphere) {
position: relative;
z-index: 1;
}
.cd-customer-user-journey .cd-journey-continuity > .cd-container {
--stack-space-default: var(--space-xl);
}
.cd-customer-user-journey .cd-journey-continuity__layout {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(24rem, .96fr);
gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
align-items: start;
}
.cd-customer-user-journey .cd-journey-continuity__editorial .cd-heading-section {
max-width: 16ch;
}
.cd-customer-user-journey .cd-journey-continuity__editorial .cd-text-intro {
max-width: var(--measure-default);
}
.cd-customer-user-journey .cd-journey-continuity__evidence {
padding-top: var(--space-xs);
}
.cd-customer-user-journey .cd-journey-continuity__evidence-list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-default) solid rgba(0, 42, 78, .14);
}
.cd-customer-user-journey .cd-journey-continuity__evidence-item {
display: block;
margin: 0;
padding: var(--space-medium) 0;
border-bottom: var(--border-default) solid rgba(0, 42, 78, .14);
color: rgba(0, 42, 78, .86);
font-size: var(--text-lg);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
letter-spacing: -.01em;
}
.cd-customer-user-journey .cd-journey-continuity__conclusion {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-medium);
align-items: center;
padding: var(--space-lg);
border: var(--border-default) solid rgba(0, 42, 78, .12);
border-left: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .72);
}
.cd-customer-user-journey .cd-journey-continuity__conclusion .cd-heading-component, .cd-customer-user-journey .cd-journey-continuity__conclusion .cd-text-body {
max-width: none;
}
.cd-customer-user-journey .cd-journey-continuity__icon {
position: relative;
width: 3.25rem;
height: 3.25rem;
border: 1.5px solid var(--color-text-accent-gold);
border-radius: 50%;
flex: 0 0 auto;
}
.cd-customer-user-journey .cd-journey-continuity__icon::before, .cd-customer-user-journey .cd-journey-continuity__icon::after {
content: "";
position: absolute;
border-radius: 50%;
}
.cd-customer-user-journey .cd-journey-continuity__icon::before {
inset: .58rem;
border: 1px solid rgba(189, 158, 65, .78);
}
.cd-customer-user-journey .cd-journey-continuity__icon::after {
top: 50%;
left: 50%;
width: .42rem;
height: .42rem;
background: var(--color-text-accent-gold);
box-shadow: 0 0 0 .5rem rgba(189, 158, 65, .16);
transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
.cd-customer-user-journey .cd-journey-continuity__layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.cd-customer-user-journey .cd-journey-continuity__evidence {
padding-top: 0;
}
}
@media (max-width: 767px) {
.cd-customer-user-journey .cd-journey-continuity > .cd-container {
--stack-space-default: var(--space-lg);
}
.cd-customer-user-journey .cd-journey-continuity__layout {
gap: var(--space-lg);
}
.cd-customer-user-journey .cd-journey-continuity__editorial .cd-heading-section, .cd-customer-user-journey .cd-journey-continuity__editorial .cd-text-intro {
max-width: none;
}
.cd-customer-user-journey .cd-journey-continuity__evidence-item {
padding: var(--space-sm) 0;
font-size: 1rem;
line-height: var(--leading-snug);
}
.cd-customer-user-journey .cd-journey-continuity__conclusion {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
.cd-customer-user-journey .cd-journey-continuity__icon {
width: 2.75rem;
height: 2.75rem;
}
}
/* ====================================================
CD / Pattern / Data Evidence Recognition / Light
Page-scoped composition for Data and Business Intelligence.
System primitives own section spacing, containment, and typography roles.
==================================================== */
body.single-capability.postid-1130 .cd-data-evidence {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: var(--border-default) solid rgba(0, 42, 78, .08);
border-bottom: var(--border-default) solid rgba(0, 42, 78, .08);
}
body.single-capability.postid-1130 .cd-data-evidence > .cd-atmosphere {
opacity: .68;
}
body.single-capability.postid-1130 .cd-data-evidence > .cd-atmosphere::before {
background: radial-gradient(42rem 22rem at 86% 14%, rgba(81, 120, 145, .14), transparent 74%), radial-gradient(30rem 16rem at 18% 86%, rgba(189, 158, 65, .08), transparent 78%);
}
body.single-capability.postid-1130 .cd-data-evidence > *:not(.cd-atmosphere) {
position: relative;
z-index: 1;
}
body.single-capability.postid-1130 .cd-data-evidence > .cd-container {
--stack-space-default: var(--space-xl);
}
body.single-capability.postid-1130 .cd-data-evidence__layout {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(24rem, .96fr);
gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
align-items: start;
}
body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-heading-section {
max-width: 17ch;
}
body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-text-intro, body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-text-body {
max-width: var(--measure-default);
}
body.single-capability.postid-1130 .cd-data-evidence__evidence {
padding-top: var(--space-xs);
}
body.single-capability.postid-1130 .cd-data-evidence__evidence-list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-default) solid rgba(0, 42, 78, .14);
}
body.single-capability.postid-1130 .cd-data-evidence__evidence-item {
display: block;
margin: 0;
padding: var(--space-medium) 0;
border-bottom: var(--border-default) solid rgba(0, 42, 78, .14);
color: rgba(0, 42, 78, .86);
font-size: var(--text-lg);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
letter-spacing: -.01em;
}
body.single-capability.postid-1130 .cd-data-evidence__conclusion {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-medium);
align-items: center;
padding: var(--space-lg);
border: var(--border-default) solid rgba(0, 42, 78, .12);
border-left: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .72);
}
body.single-capability.postid-1130 .cd-data-evidence__conclusion .cd-heading-component, body.single-capability.postid-1130 .cd-data-evidence__conclusion .cd-text-body {
max-width: none;
}
body.single-capability.postid-1130 .cd-data-evidence__icon {
position: relative;
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
border: 1.5px solid rgba(81, 120, 145, .42);
flex: 0 0 auto;
}
body.single-capability.postid-1130 .cd-data-evidence__icon::before, body.single-capability.postid-1130 .cd-data-evidence__icon::after {
content: "";
position: absolute;
pointer-events: none;
}
body.single-capability.postid-1130 .cd-data-evidence__icon::before {
inset: .72rem;
border-top: 1px solid rgba(81, 120, 145, .72);
border-right: 1px solid rgba(81, 120, 145, .72);
border-bottom: 1px solid rgba(81, 120, 145, .72);
border-left: 0;
transform: rotate(45deg);
transform-origin: center;
}
body.single-capability.postid-1130 .cd-data-evidence__icon::after {
top: 50%;
left: 50%;
width: .48rem;
height: .48rem;
border-radius: 50%;
background: var(--color-text-accent-gold);
box-shadow: -1.18rem -.78rem 0 -.14rem rgba(81, 120, 145, .72), -1.18rem .78rem 0 -.14rem rgba(81, 120, 145, .72), 1.18rem 0 0 -.14rem rgba(81, 120, 145, .72);
transform: translate(-50%, -50%);
}
@media (max-width: 1024px) {
body.single-capability.postid-1130 .cd-data-evidence__layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
body.single-capability.postid-1130 .cd-data-evidence__evidence {
padding-top: 0;
}
}
@media (max-width: 767px) {
body.single-capability.postid-1130 .cd-data-evidence > .cd-container {
--stack-space-default: var(--space-lg);
}
body.single-capability.postid-1130 .cd-data-evidence__layout {
gap: var(--space-lg);
}
body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-heading-section, body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-text-intro, body.single-capability.postid-1130 .cd-data-evidence__editorial .cd-text-body {
max-width: none;
}
body.single-capability.postid-1130 .cd-data-evidence__evidence-item {
padding: var(--space-sm) 0;
font-size: 1rem;
line-height: var(--leading-snug);
}
body.single-capability.postid-1130 .cd-data-evidence__conclusion {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
body.single-capability.postid-1130 .cd-data-evidence__icon {
width: 2.75rem;
height: 2.75rem;
}
}
/* ====================================================
CD / Pattern / Platform Confidence Recognition / Light
Page-scoped composition for Platform and System Performance.
System primitives own section spacing, containment, and typography roles.
==================================================== */
body.single-capability.postid-1115 .cd-platform-confidence {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: var(--border-default) solid rgba(0, 42, 78, .08);
border-bottom: var(--border-default) solid rgba(0, 42, 78, .08);
}
body.single-capability.postid-1115 .cd-platform-confidence > .cd-atmosphere {
opacity: .66;
}
body.single-capability.postid-1115 .cd-platform-confidence > .cd-atmosphere::before {
background: radial-gradient(44rem 21rem at 12% 14%, rgba(81, 120, 145, .13), transparent 75%), radial-gradient(30rem 16rem at 90% 82%, rgba(189, 158, 65, .07), transparent 80%);
}
body.single-capability.postid-1115 .cd-platform-confidence > *:not(.cd-atmosphere) {
position: relative;
z-index: 1;
}
body.single-capability.postid-1115 .cd-platform-confidence > .cd-container {
--stack-space-default: var(--space-xl);
}
body.single-capability.postid-1115 .cd-platform-confidence__layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr);
gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
align-items: start;
}
body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-heading-section {
max-width: 17ch;
}
body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-text-intro, body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-text-body {
max-width: var(--measure-default);
}
body.single-capability.postid-1115 .cd-platform-confidence__evidence {
padding-top: var(--space-xs);
}
body.single-capability.postid-1115 .cd-platform-confidence__evidence-list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-default) solid rgba(0, 42, 78, .14);
}
body.single-capability.postid-1115 .cd-platform-confidence__evidence-item {
display: block;
margin: 0;
padding: var(--space-medium) 0;
border-bottom: var(--border-default) solid rgba(0, 42, 78, .14);
color: rgba(0, 42, 78, .86);
font-size: var(--text-lg);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
letter-spacing: -.01em;
}
body.single-capability.postid-1115 .cd-platform-confidence__conclusion {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-medium);
align-items: center;
padding: var(--space-lg);
border: var(--border-default) solid rgba(0, 42, 78, .12);
border-left: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .74);
}
body.single-capability.postid-1115 .cd-platform-confidence__conclusion .cd-heading-component, body.single-capability.postid-1115 .cd-platform-confidence__conclusion .cd-text-body {
max-width: none;
}
body.single-capability.postid-1115 .cd-platform-confidence__icon {
position: relative;
width: 3.25rem;
height: 3.25rem;
border: var(--border-default) solid rgba(0, 42, 78, .18);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .56);
flex: 0 0 auto;
}
body.single-capability.postid-1115 .cd-platform-confidence__icon::before, body.single-capability.postid-1115 .cd-platform-confidence__icon::after {
content: "";
position: absolute;
pointer-events: none;
}
body.single-capability.postid-1115 .cd-platform-confidence__icon::before {
top: .88rem;
left: .62rem;
right: .62rem;
height: 1px;
background: rgba(0, 42, 78, .62);
box-shadow: 0 .65rem 0 rgba(0, 42, 78, .62), 0 1.3rem 0 rgba(0, 42, 78, .62);
}
body.single-capability.postid-1115 .cd-platform-confidence__icon::after {
top: .62rem;
bottom: .62rem;
left: 50%;
width: 2px;
background: var(--color-text-accent-gold);
transform: translateX(-50%);
}
@media (max-width: 1024px) {
body.single-capability.postid-1115 .cd-platform-confidence__layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
body.single-capability.postid-1115 .cd-platform-confidence__evidence {
padding-top: 0;
}
}
@media (max-width: 767px) {
body.single-capability.postid-1115 .cd-platform-confidence > .cd-container {
--stack-space-default: var(--space-lg);
}
body.single-capability.postid-1115 .cd-platform-confidence__layout {
gap: var(--space-lg);
}
body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-heading-section, body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-text-intro, body.single-capability.postid-1115 .cd-platform-confidence__editorial .cd-text-body {
max-width: none;
}
body.single-capability.postid-1115 .cd-platform-confidence__evidence-item {
padding: var(--space-sm) 0;
font-size: 1rem;
line-height: var(--leading-snug);
}
body.single-capability.postid-1115 .cd-platform-confidence__conclusion {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
body.single-capability.postid-1115 .cd-platform-confidence__icon {
width: 2.75rem;
height: 2.75rem;
}
}
/* ====================================================
CD / Pattern / Website Build Foundation Recognition / Light
Page-scoped composition for Website Build and Deployment.
System primitives own section spacing, containment, surface, and typography.
==================================================== */
.cd-web-build-capability .cd-build-foundation {
position: relative;
isolation: isolate;
overflow: hidden;
border-top: var(--border-default) solid rgba(0, 42, 78, .08);
border-bottom: var(--border-default) solid rgba(0, 42, 78, .08);
}
.cd-web-build-capability .cd-build-foundation > .cd-atmosphere {
opacity: .66;
}
.cd-web-build-capability .cd-build-foundation > .cd-atmosphere::before {
background: radial-gradient(44rem 21rem at 88% 12%, rgba(81, 120, 145, .13), transparent 75%), radial-gradient(32rem 16rem at 18% 88%, rgba(189, 158, 65, .07), transparent 80%);
}
.cd-web-build-capability .cd-build-foundation > *:not(.cd-atmosphere) {
position: relative;
z-index: 1;
}
.cd-web-build-capability .cd-build-foundation > .cd-container {
--stack-space-default: var(--space-xl);
}
.cd-web-build-capability .cd-build-foundation__layout {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(24rem, .96fr);
gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
align-items: start;
}
.cd-web-build-capability .cd-build-foundation__editorial .cd-heading-section {
max-width: 17ch;
}
.cd-web-build-capability .cd-build-foundation__editorial .cd-text-intro, .cd-web-build-capability .cd-build-foundation__editorial .cd-text-body {
max-width: var(--measure-default);
}
.cd-web-build-capability .cd-build-foundation__evidence {
padding-top: var(--space-xs);
}
.cd-web-build-capability .cd-build-foundation__evidence-list {
margin: 0;
padding: 0;
list-style: none;
border-top: var(--border-default) solid rgba(0, 42, 78, .14);
}
.cd-web-build-capability .cd-build-foundation__evidence-item {
display: block;
margin: 0;
padding: var(--space-medium) 0;
border-bottom: var(--border-default) solid rgba(0, 42, 78, .14);
color: rgba(0, 42, 78, .86);
font-size: var(--text-lg);
font-weight: var(--font-medium);
line-height: var(--leading-snug);
letter-spacing: -.01em;
}
.cd-web-build-capability .cd-build-foundation__conclusion {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-medium);
align-items: center;
padding: var(--space-lg);
border: var(--border-default) solid rgba(0, 42, 78, .12);
border-left: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .74);
}
.cd-web-build-capability .cd-build-foundation__conclusion .cd-heading-component, .cd-web-build-capability .cd-build-foundation__conclusion .cd-text-body {
max-width: none;
}
.cd-web-build-capability .cd-build-foundation__icon {
position: relative;
width: 3.4rem;
height: 3.15rem;
border: var(--border-default) solid rgba(0, 42, 78, .22);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, .44);
flex: 0 0 auto;
}
.cd-web-build-capability .cd-build-foundation__icon::before, .cd-web-build-capability .cd-build-foundation__icon::after {
content: "";
position: absolute;
pointer-events: none;
}
.cd-web-build-capability .cd-build-foundation__icon::before {
inset: .58rem .62rem .78rem;
background: linear-gradient(rgba(0, 42, 78, .45), rgba(0, 42, 78, .45)) center/100% 1px no-repeat, linear-gradient(90deg, transparent 32%, rgba(0, 42, 78, .38) 32%, rgba(0, 42, 78, .38) calc(32% + 1px), transparent calc(32% + 1px), transparent 68%, rgba(0, 42, 78, .38) 68%, rgba(0, 42, 78, .38) calc(68% + 1px), transparent calc(68% + 1px));
}
.cd-web-build-capability .cd-build-foundation__icon::after {
left: .58rem;
right: .58rem;
bottom: .42rem;
height: .42rem;
background: radial-gradient(circle at 100% 50%, var(--color-text-accent-gold) 0 .19rem, transparent .2rem), linear-gradient(var(--color-text-accent-gold), var(--color-text-accent-gold)) left center/calc(100% - .12rem) 2px no-repeat;
}
@media (max-width: 1024px) {
.cd-web-build-capability .cd-build-foundation__layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.cd-web-build-capability .cd-build-foundation__evidence {
padding-top: 0;
}
}
@media (max-width: 767px) {
.cd-web-build-capability .cd-build-foundation > .cd-container {
--stack-space-default: var(--space-lg);
}
.cd-web-build-capability .cd-build-foundation__layout {
gap: var(--space-lg);
}
.cd-web-build-capability .cd-build-foundation__editorial .cd-heading-section, .cd-web-build-capability .cd-build-foundation__editorial .cd-text-intro, .cd-web-build-capability .cd-build-foundation__editorial .cd-text-body {
max-width: none;
}
.cd-web-build-capability .cd-build-foundation__evidence-item {
padding: var(--space-sm) 0;
font-size: 1rem;
line-height: var(--leading-snug);
}
.cd-web-build-capability .cd-build-foundation__conclusion {
grid-template-columns: 1fr;
gap: var(--space-sm);
padding: var(--space-medium);
}
.cd-web-build-capability .cd-build-foundation__icon {
width: 2.9rem;
height: 2.7rem;
}
}
/* ====================================================
CD / Pattern / Context / When This Work Becomes Necessary / 20 / Dark
WordPress Engineering local variant
Composition only. System primitives own typography, spacing, surface, and containment.
==================================================== */
.cd-context-wp-engineering .cd-container {
max-width: 68rem;
}
.cd-context-wp-engineering .cd-heading-section {
max-width: 16ch;
}
/* ====================================================
CD / Pattern / Context / Structural Pillars / 020 / Dark Var
Phase Two canonical block
Simple dark section with local rhythm
==================================================== */
.cd-responsibilities {
position: relative;
background: radial-gradient(900px at 18% 16%, rgba(77, 163, 255, .1), transparent 60%), radial-gradient(700px at 82% 82%, rgba(45, 113, 103, .08), transparent 65%), radial-gradient(1200px at 50% 100%, rgba(255, 255, 255, .03), transparent 75%), linear-gradient(180deg, #002a4e 0%, #05294a 100%);
color: #fff;
padding: clamp(4.5rem, 7vw, 7rem) 0;
overflow: hidden;
}
.cd-responsibilities__inner {
width: min(var(--container-max-width), calc(100% - ( 2 * var(--container-gutter) )));
margin: 0 auto;
}
.cd-responsibilities__intro {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(420px, 1fr);
gap: clamp(2rem, 4vw, 5rem);
align-items: start;
margin-bottom: var(--space-lg);
--flow-space-heading-to-body: var(--space-medium);
--flow-space-body-to-body: var(--space-medium);
--flow-space-body-to-structure: var(--space-lg);
}
.cd-responsibilities__intro-left {
max-width: 30rem;
}
.cd-responsibilities__title {
margin: 0;
font-size: var(--h1-size);
line-height: 1.02;
letter-spacing: -.02em;
font-weight: 600;
text-wrap: balance;
max-width: 10ch;
}
.cd-responsibilities__lead + .cd-responsibilities__lead {
margin-top: 1.75rem;
}
.cd-responsibilities__lead {
margin: 0;
max-width: var(--measure-default);
}
.cd-responsibilities__pillars {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.75rem, 2.5vw, 3rem);
align-items: start;
}
.cd-responsibilities__pillar {
max-width: 24rem;
}
.cd-responsibilities__pillar-title {
margin: 0 0 1rem;
font-size: clamp(1.0625rem, 1rem + .15vw, 1.1875rem);
line-height: 1.3;
font-weight: 600;
letter-spacing: .01em;
color: #fff;
}
.cd-responsibilities__pillar-text {
margin: 0;
font-size: 1rem;
line-height: 1.85;
color: rgba(255, 255, 255, .78);
}
@media (max-width: 1024px) {
.cd-responsibilities__intro {
grid-template-columns: 1fr;
gap: 2rem;
}
.cd-responsibilities__intro-left {
max-width: 34rem;
}
.cd-responsibilities__pillars {
grid-template-columns: 1fr;
gap: 2rem;
}
.cd-responsibilities__pillar {
max-width: 42rem;
}
}
@media (max-width: 767px) {
.cd-responsibilities {
padding: 4rem 0;
}
.cd-responsibilities__inner {
width: min(100% - 2rem, 42rem);
}
.cd-responsibilities__intro {
margin-bottom: 2.5rem;
}
.cd-responsibilities__title {
max-width: 12ch;
}
.cd-responsibilities__lead {
font-size: 1rem;
line-height: 1.7;
}
.cd-responsibilities__lead + .cd-responsibilities__lead {
margin-top: 1.5rem;
}
.cd-responsibilities__pillars {
gap: 1.75rem;
}
.cd-responsibilities__pillar-title {
margin-bottom: .75rem;
}
.cd-responsibilities__pillar-text {
line-height: 1.75;
}
}
/* ====================================================
CD / Pattern / Homepage / Core Pillars / Dark Editorial
Composition and atmosphere only. System primitives own
section spacing, containment, surfaces, typography, and stack rhythm.
==================================================== */
.cd-home-pillars {
position: relative;
isolation: isolate;
overflow: hidden;
}
.cd-home-pillars > .cd-container {
position: relative;
z-index: 1;
}
.cd-home-pillars__atmosphere::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(54rem 34rem at 10% 20%, rgba(88, 112, 140, .2), transparent 72%), radial-gradient(44rem 30rem at 96% 8%, rgba(189, 158, 65, .12), transparent 74%), linear-gradient(132deg, transparent 38%, rgba(88, 112, 140, .09) 76%, rgba(189, 158, 65, .045) 100%);
}
.cd-home-pillars__intro {
display: grid;
grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
align-items: start;
}
.cd-home-pillars__intro > .cd-stack:first-child .cd-heading-display {
max-width: 11ch;
}
.cd-home-pillars .cd-eyebrow.cd-text-accent-gold {
color: var(--color-text-accent-gold);
}
.cd-home-pillars__intro > .cd-stack:last-child {
justify-self: end;
width: 100%;
max-width: var(--measure-default);
}
.cd-home-pillars__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--grid-gap-default);
align-items: stretch;
margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.cd-home-pillars__pillar {
height: 100%;
border: var(--border-default) solid rgba(189, 158, 65, .24);
box-shadow: none;
}
.cd-home-pillars__pillar .cd-heading-component::after {
content: "";
display: block;
width: var(--space-lg);
height: 2px;
margin-top: var(--space-sm);
background: var(--color-text-accent-gold);
}
@media (max-width: 1280px) {
.cd-home-pillars__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-home-pillars__pillar:last-child {
grid-column: 1/-1;
justify-self: center;
width: calc(( 100% - var(--grid-gap-default) ) / 2);
}
}
@media (max-width: 1024px) {
.cd-home-pillars__intro {
grid-template-columns: 1fr;
row-gap: var(--space-xl);
}
.cd-home-pillars__intro > .cd-stack:last-child {
justify-self: start;
}
}
@media (max-width: 767px) {
.cd-home-pillars__intro {
row-gap: var(--space-lg);
}
.cd-home-pillars__grid {
grid-template-columns: 1fr;
margin-top: var(--space-xl);
}
.cd-home-pillars__pillar, .cd-home-pillars__pillar:last-child {
grid-column: auto;
width: 100%;
padding: var(--space-medium);
}
.cd-home-pillars__atmosphere::before {
background: radial-gradient(30rem 24rem at 18% 12%, rgba(88, 112, 140, .18), transparent 74%), radial-gradient(24rem 20rem at 100% 30%, rgba(189, 158, 65, .08), transparent 76%);
}
}
/* ====================================================
CD / Content / Perspectives Grid / 021 / Light Var
Canonical editorial post grid
==================================================== */
.cd-perspectives-grid {
--section-space-current: var(--section-space-y);
--section-space-current-mobile: var(--section-space-y-mobile);
background: var(--bg-soft);
padding-top: var(--section-space-current);
padding-bottom: var(--section-space-current);
}
.cd-perspectives-grid__inner {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
box-sizing: border-box;
}
/* ====================================================
Section intro
==================================================== */
.cd-perspectives-grid__intro {
width: 100%;
max-width: 760px;
margin-bottom: 2.75rem;
}
.cd-perspectives-grid__intro .cd-eyebrow, .cd-perspectives-grid__intro .cd-label, .cd-perspectives-grid__intro .cd-micro-heading {
margin: 0 0 1rem 0;
color: rgba(0, 0, 0, .34);
}
.cd-perspectives-grid__title, body h2.cd-perspectives-grid__title, body .entry-content h2.cd-perspectives-grid__title, body .editor-styles-wrapper h2.cd-perspectives-grid__title {
margin: 0 0 1rem 0;
font-size: clamp(2.45rem, 2.1rem + 1.1vw, 3.35rem);
line-height: 1.06;
letter-spacing: -.02em;
font-weight: var(--font-semi-bold);
color: var(--color-text-primary);
text-transform: none;
text-wrap: balance;
max-width: none;
}
.cd-perspectives-grid__lead, body .entry-content .cd-perspectives-grid__lead, body .editor-styles-wrapper .cd-perspectives-grid__lead {
margin: 0;
max-width: 42ch;
font-size: 1.08rem;
line-height: 1.62;
letter-spacing: -.005em;
color: #5f6773;
}
/* ====================================================
Query grid
Important:
Class cd-perspectives-grid__loop belongs on the Query Loop
==================================================== */
.cd-perspectives-grid__loop, .cd-perspectives-grid__loop.gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 1.75rem;
row-gap: 2rem;
align-items: stretch;
}
.cd-perspectives-grid__loop > div {
display: contents;
}
.cd-perspectives-grid__loop .gb-loop-item {
min-width: 0;
height: 100%;
}
/* ====================================================
Card shell
==================================================== */
.cd-perspectives-card {
display: flex;
flex-direction: column;
height: 100%;
padding: .8rem;
background: rgba(255, 255, 255, .68);
border: 1px solid rgba(0, 0, 0, .035);
border-radius: 10px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.cd-perspectives-card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, .78);
border-color: rgba(0, 0, 0, .06);
box-shadow: 0 8px 20px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .04);
}
/* Subtle primary-card hierarchy on desktop */
@media (min-width: 1025px) {
.cd-perspectives-grid__loop .gb-loop-item:first-child .cd-perspectives-card {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .05);
}
.cd-perspectives-grid__loop .gb-loop-item:first-child .cd-perspectives-card:hover {
transform: translateY(-6px);
}
}
/* ====================================================
Card media
Image supports scanning. It must not dominate the viewport.
==================================================== */
.cd-perspectives-card__media {
width: 100%;
margin: 0 0 .85rem 0;
overflow: hidden;
background: rgba(255, 255, 255, .38);
border-radius: 6px;
aspect-ratio: 1/1;
max-height: 320px;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.cd-perspectives-card:hover .cd-perspectives-card__media {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, .05);
}
.cd-perspectives-card__image, .cd-perspectives-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.9) contrast(.95);
}
/* ====================================================
Card body
==================================================== */
.cd-perspectives-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.cd-perspectives-card__title, body h3.cd-perspectives-card__title, body .entry-content h3.cd-perspectives-card__title, body .editor-styles-wrapper h3.cd-perspectives-card__title {
margin: 0 0 .65rem 0;
font-size: clamp(1.02rem, .97rem + .16vw, 1.16rem);
line-height: 1.24;
letter-spacing: -.02em;
font-weight: var(--font-semi-bold);
color: var(--color-text-primary);
text-transform: none;
text-wrap: balance;
max-width: none;
}
.cd-perspectives-card__excerpt, body .entry-content .cd-perspectives-card__excerpt, body .editor-styles-wrapper .cd-perspectives-card__excerpt {
margin: 0;
font-size: .94rem;
line-height: 1.48;
color: #4b5563;
}
.cd-perspectives-card__excerpt p, .cd-perspectives-card__body > p {
margin: 0;
font-size: .94rem;
line-height: 1.48;
color: #4b5563;
}
.cd-perspectives-card__excerpt p + p, .cd-perspectives-card__body > p + p {
margin-top: .7rem;
}
/* Optional wrapper if still present in builder */
.cd-perspectives-card__body .para-fix, .cd-perspectives-card__body .cd-para-fix {
margin: 0;
padding: 0;
}
.cd-perspectives-card__body .para-fix p, .cd-perspectives-card__body .cd-para-fix p {
margin: 0;
font-size: .94rem;
line-height: 1.48;
color: #4b5563;
}
.cd-perspectives-card__body .para-fix p + p, .cd-perspectives-card__body .cd-para-fix p + p {
margin-top: .7rem;
}
/* ====================================================
Card footer
==================================================== */
.cd-perspectives-card__footer {
display: flex;
align-items: center;
gap: .45rem;
margin-top: auto;
padding-top: 1.25rem;
}
.cd-perspectives-card__cta, body a.cd-perspectives-card__cta, body .entry-content a.cd-perspectives-card__cta {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .84rem;
line-height: 1;
letter-spacing: .11em;
font-weight: var(--font-semi-bold);
text-transform: uppercase;
color: var(--color-midnight-brand);
text-decoration: none;
opacity: .85;
}
.cd-perspectives-card:hover .cd-perspectives-card__cta, .cd-perspectives-card__cta:hover, .cd-perspectives-card__cta:focus-visible, body a.cd-perspectives-card__cta:hover, body a.cd-perspectives-card__cta:focus-visible {
color: var(--color-midnight-brand);
text-decoration: none;
opacity: 1;
}
.cd-perspectives-card__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: .9rem;
height: .9rem;
line-height: 0;
transform: translateY(0);
flex: 0 0 auto;
transition: transform 200ms ease;
}
.cd-perspectives-card:hover .cd-perspectives-card__cta-icon {
transform: translateX(2px);
}
.cd-perspectives-card__cta-icon svg, .cd-perspectives-card__cta-icon img {
display: block;
width: 100%;
height: 100%;
}
/* ====================================================
Large desktop
==================================================== */
@media (min-width: 1440px) {
.cd-perspectives-grid__loop, .cd-perspectives-grid__loop.gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop {
column-gap: 2rem;
}
}
/* ====================================================
Small desktop / large tablet
Short two-column transition only
==================================================== */
@media (max-width: 1180px) and (min-width: 1025px) {
.cd-perspectives-grid {
padding-top: var(--section-space-current);
padding-bottom: var(--section-space-current);
}
.cd-perspectives-grid__inner {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.cd-perspectives-grid__loop, .cd-perspectives-grid__loop.gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 1.5rem;
row-gap: 1.9rem;
}
.cd-perspectives-card__media {
aspect-ratio: 4/3;
max-height: 260px;
}
}
/* ====================================================
Tablet and below
Collapse early to protect readability
==================================================== */
@media (max-width: 1024px) {
.cd-perspectives-grid {
padding-top: var(--section-space-current);
padding-bottom: var(--section-space-current);
}
.cd-perspectives-grid__inner {
padding-left: 1.35rem;
padding-right: 1.35rem;
}
.cd-perspectives-grid__intro {
margin-bottom: 2rem;
}
.cd-perspectives-grid__title, body h2.cd-perspectives-grid__title, body .entry-content h2.cd-perspectives-grid__title, body .editor-styles-wrapper h2.cd-perspectives-grid__title {
font-size: clamp(2.2rem, 6vw, 2.8rem);
line-height: 1.08;
max-width: none;
text-wrap: normal;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
.cd-perspectives-grid__lead {
max-width: 100%;
font-size: 1rem;
line-height: 1.62;
}
.cd-perspectives-grid__loop, .cd-perspectives-grid__loop.gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop {
grid-template-columns: 1fr;
row-gap: 2.2rem;
}
.cd-perspectives-card {
padding: .85rem;
}
.cd-perspectives-card__media {
aspect-ratio: 4/3;
max-height: 260px;
}
.cd-perspectives-card__title, body h3.cd-perspectives-card__title, body .entry-content h3.cd-perspectives-card__title, body .editor-styles-wrapper h3.cd-perspectives-card__title {
font-size: 1.18rem;
line-height: 1.26;
max-width: none;
text-wrap: balance;
}
.cd-perspectives-card__excerpt, .cd-perspectives-card__excerpt p, .cd-perspectives-card__body > p, .cd-perspectives-card__body .para-fix p, .cd-perspectives-card__body .cd-para-fix p {
font-size: .97rem;
line-height: 1.56;
}
.cd-perspectives-card__excerpt p + p, .cd-perspectives-card__body > p + p, .cd-perspectives-card__body .para-fix p + p, .cd-perspectives-card__body .cd-para-fix p + p {
margin-top: .7rem;
}
}
/* ====================================================
Mobile
==================================================== */
@media (max-width: 767px) {
.cd-perspectives-grid {
padding-top: var(--section-space-current-mobile);
padding-bottom: var(--section-space-current-mobile);
}
.cd-perspectives-grid__inner {
padding-left: 1rem;
padding-right: 1rem;
}
.cd-perspectives-grid__intro {
margin-bottom: 2rem;
}
.cd-perspectives-grid__title, body h2.cd-perspectives-grid__title, body .entry-content h2.cd-perspectives-grid__title, body .editor-styles-wrapper h2.cd-perspectives-grid__title {
font-size: clamp(2rem, 7.6vw, 2.55rem);
line-height: 1.08;
max-width: none;
text-wrap: normal;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
}
.cd-perspectives-grid__lead {
font-size: 1rem;
line-height: 1.65;
max-width: 100%;
}
.cd-perspectives-grid__loop, .cd-perspectives-grid__loop.gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop-items, .cd-perspectives-grid__loop .gb-query-loop {
grid-template-columns: 1fr;
row-gap: 2.2rem;
}
.cd-perspectives-card {
padding: .85rem;
border-radius: 10px;
}
.cd-perspectives-card__media {
margin-bottom: .85rem;
aspect-ratio: 4/3;
max-height: 220px;
}
.cd-perspectives-card__title, body h3.cd-perspectives-card__title, body .entry-content h3.cd-perspectives-card__title, body .editor-styles-wrapper h3.cd-perspectives-card__title {
font-size: 1rem;
line-height: 1.28;
max-width: none;
text-wrap: balance;
}
.cd-perspectives-card__excerpt, .cd-perspectives-card__excerpt p, .cd-perspectives-card__body > p, .cd-perspectives-card__body .para-fix p, .cd-perspectives-card__body .cd-para-fix p {
font-size: .97rem;
line-height: 1.56;
}
.cd-perspectives-card__excerpt p + p, .cd-perspectives-card__body > p + p, .cd-perspectives-card__body .para-fix p + p, .cd-perspectives-card__body .cd-para-fix p + p {
margin-top: .7rem;
}
.cd-perspectives-card__footer {
padding-top: 1.15rem;
}
.cd-perspectives-card__cta {
font-size: .84rem;
letter-spacing: .09em;
}
}
/* ====================================================
CD / Layout / Section Flow / 128
End-of-file relationship rules.
These coordinate spacing between major sections without replacing section primitives.
Includes hero exit control.
==================================================== */
/* -----------------------------------------
Base de-stacking between adjacent sections
Prevents compounded top spacing
----------------------------------------- */
.section + .section, .section + .cd-canvas, .cd-canvas + .section, .cd-canvas + .cd-canvas, .cd-hero-surface + .cd-executive-summary, .cd-executive-summary + .cd-capabilities-canvas, .cd-capabilities-canvas + .cd-context-necessary, .cd-context-necessary + .cd-responsibilities, .cd-responsibilities + .cd-perspectives-grid {
padding-top: 0;
}
/* -----------------------------------------
Controlled re-entry spacing
Use compact top spacing where a new section
should re-enter after the previous one
----------------------------------------- */
.cd-hero-surface + .cd-executive-summary {
padding-top: var(--section-space-y-compact);
}
.cd-executive-summary + .cd-capabilities-canvas {
padding-top: var(--section-space-y-compact);
}
.cd-capabilities-canvas + .cd-home-capabilities {
padding-top: var(--section-space-y);
}
.cd-context-necessary + .cd-responsibilities {
padding-top: var(--section-space-y-compact);
}
.cd-responsibilities + .cd-perspectives-grid {
padding-top: var(--section-space-y-compact);
}
.cd-case-illustration + .cd-canvas--dark.cd-case-illustration {
padding-top: var(--section-space-y-compact);
}
.cd-capabilities-canvas + .cd-context-necessary {
padding-top: calc(var(--section-space-y-compact) * .7);
}
@media (max-width: 767px) {
.cd-case-illustration + .cd-canvas--dark.cd-case-illustration {
padding-top: var(--section-space-y-compact-mobile);
}
.cd-capabilities-canvas + .cd-context-necessary {
padding-top: calc(var(--section-space-y-compact-mobile) * .75);
}
.cd-capabilities-canvas + .cd-home-capabilities {
padding-top: var(--section-space-y-mobile);
}
}
/* -----------------------------------------
Mobile
----------------------------------------- */
@media (max-width: 767px) {
.cd-hero-surface + .cd-executive-summary, .cd-executive-summary + .cd-capabilities-canvas, .cd-context-necessary + .cd-responsibilities, .cd-responsibilities + .cd-perspectives-grid {
padding-top: var(--section-space-y-compact-mobile);
}
}
/* ====================================================
CD / Pattern / Proof / Measurement / 06
Framework-led measurement section on light canvas.
==================================================== */
/* ====================================================
CD / Pattern / System / Measurement Model / 06 / Dark
Composition only. Forward pattern.
==================================================== */
.cd-measurement-model-06 {
position: relative;
overflow: hidden;
isolation: isolate;
}
.cd-measurement-model-06__atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(72rem 28rem at 50% 18%, rgba(81, 120, 145, .16), transparent 72%), radial-gradient(38rem 20rem at 12% 24%, rgba(255, 255, 255, .05), transparent 74%);
}
.cd-measurement-model-06__container {
position: relative;
z-index: 1;
}
.cd-measurement-model-06__principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-xl);
align-items: start;
}
.cd-measurement-model-06__principle {
min-width: 0;
padding-top: var(--space-medium);
border-top: var(--border-default) solid var(--border-light-subtle);
}
.cd-measurement-model-06__principle > * {
max-width: 34rem;
}
@media (max-width: 1024px) {
.cd-measurement-model-06__principles {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-lg);
}
}
@media (max-width: 767px) {
.cd-measurement-model-06__principles {
gap: var(--space-medium);
}
.cd-measurement-model-06__principle {
padding-top: var(--space-sm);
}
}
/* ====================================================
CD / Pattern / Moment Layer / 027 / Dark (Panel)
==================================================== */
.cd-moment-layer {
position: relative;
overflow: hidden;
}
/* Atmosphere */
.cd-moment-layer > .cd-atmosphere-dark {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Content above atmosphere */
.cd-moment-layer > .cd-container {
position: relative;
z-index: 1;
}
/* Panel */
.cd-moment-layer__panel {
background: #fff;
color: var(--color-text-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-panel);
padding: var(--space-lg);
}
/* Top row */
.cd-moment-layer__top {
display: grid;
grid-template-columns: 30% 70%;
column-gap: var(--space-lg);
align-items: start;
}
/* Intro column */
.cd-moment-layer__intro {
max-width: var(--measure-tight);
}
.cd-moment-layer__intro .cd-heading-section {
max-width: 14ch;
}
/* Body column */
.cd-moment-layer__body {
max-width: 52ch;
padding-top: 0;
align-self: start;
margin-top: calc(var(--intro-eyebrow-gap) + var(--flow-space-heading-to-body));
}
/* Diagram */
/* ====================================================
CD / Pattern / Moment Layer / Visual Reset (Landscape)
Removes prior height constraint logic
==================================================== */
.cd-moment-layer__visual {
width: 100%;
max-width: 1100px;
margin: var(--space-xl) auto 0;
display: block;
}
.cd-moment-layer__diagram {
display: block;
width: 100%;
height: auto;
object-fit: initial !important;
border-radius: 0;
box-shadow: none;
}
/* ====================================================
CD / Pattern / Moment Layer / Conclusion Spacing
Creates separation from visual and readable closing rhythm
==================================================== */
.cd-moment-layer__conclusion {
margin-top: var(--space-2xl);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Mobile */
@media (max-width: 767px) {
.cd-moment-layer__panel {
padding: var(--space-lg);
}
.cd-moment-layer__top {
grid-template-columns: 1fr;
}
.cd-moment-layer__intro, .cd-moment-layer__body {
max-width: none;
}
.cd-moment-layer__body {
padding-top: 0;
margin-top: 0;
}
.cd-moment-layer__body {
max-width: none;
}
.cd-moment-layer__visual {
margin-top: var(--space-lg);
}
.cd-moment-layer__conclusion {
margin-top: var(--space-xl);
}
}
/* ====================================================
CD / Pattern / Capabilities Gateway / 028 / Light
==================================================== */
.cd-capabilities-gateway__intro {
max-width: 56ch;
margin-bottom: var(--space-2xl);
}
.cd-capabilities-gateway__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
}
.cd-capabilities-gateway__item {
display: flex;
flex-direction: column;
gap: var(--space-medium);
min-width: 0;
height: 100%;
padding: var(--space-lg);
background: #fff;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: var(--radius-lg);
box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), box-shadow var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-capabilities-gateway__item:hover, .cd-capabilities-gateway__item:focus-within {
transform: translateY(var(--motion-lift-subtle));
border-color: var(--border-strong);
box-shadow: var(--shadow-panel);
background: rgba(255, 255, 255, .92);
}
.cd-capabilities-gateway__closing {
max-width: 56ch;
margin-top: var(--space-2xl);
}
@media (max-width: 1024px) {
.cd-capabilities-gateway__intro {
margin-bottom: var(--space-xl);
}
.cd-capabilities-gateway__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-capabilities-gateway__intro, .cd-capabilities-gateway__closing {
max-width: none;
}
.cd-capabilities-gateway__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-medium);
}
.cd-capabilities-gateway__item {
padding: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / System Flow Visual / 031 / Dark
==================================================== */
.cd-system-flow-visual {
position: relative;
overflow: hidden;
}
.cd-system-flow-visual > .cd-container {
position: relative;
z-index: 1;
}
.cd-system-flow-visual__intro {
max-width: 52ch;
}
.cd-system-flow-visual__visual {
width: 100%;
max-width: 1100px;
margin: var(--space-xl) auto 0;
}
.cd-system-flow-visual__diagram {
display: block;
width: 100%;
height: auto;
border-radius: 0;
box-shadow: none;
}
.cd-system-flow-visual__conclusion {
max-width: 52ch;
margin-top: var(--space-xl);
}
@media (max-width: 767px) {
.cd-system-flow-visual__intro, .cd-system-flow-visual__conclusion {
max-width: none;
}
.cd-system-flow-visual__visual {
margin-top: var(--space-lg);
}
.cd-system-flow-visual__conclusion {
margin-top: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / System Outcomes / 033 / Light
==================================================== */
.cd-system-outcomes {
background: #ececec;
}
.cd-system-outcomes .cd-atmosphere--light {
background: radial-gradient(ellipse at 20% 18%, rgba(81, 120, 145, .08) 0%, rgba(81, 120, 145, .04) 28%, rgba(81, 120, 145, 0) 60%), radial-gradient(ellipse at 78% 70%, rgba(81, 120, 145, .06) 0%, rgba(81, 120, 145, .025) 30%, rgba(81, 120, 145, 0) 62%);
}
.cd-system-outcomes__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap-default);
margin-top: var(--space-xl);
}
/* Card refinement */
.cd-system-outcomes__item {
padding: var(--space-lg);
border: var(--border-default) solid var(--border-subtle);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .6);
transition: transform var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-system-outcomes__item:hover {
transform: translateY(var(--motion-lift-subtle));
border-color: var(--border-strong);
background: rgba(255, 255, 255, .85);
}
/* Typography spacing inside cards */
.cd-system-outcomes__item .cd-heading-component {
margin-bottom: var(--space-sm);
}
/* Closing alignment */
.cd-system-outcomes__closing {
margin-top: var(--space-2xl);
max-width: 46ch;
margin-left: 0;
margin-right: 0;
padding-left: 0;
text-align: left;
}
@media (max-width: 1024px) {
.cd-system-outcomes__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.cd-system-outcomes__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-lg);
}
.cd-system-outcomes__item {
padding: var(--space-medium);
}
.cd-system-outcomes__closing {
margin-top: var(--space-xl);
max-width: none;
padding-left: 0;
text-align: left;
}
}
/* ====================================================
CD / Pattern / Capability Role / System Function / 041 / Light
==================================================== */
.cd-capability-role {
--cd-section-space: var(--section-space-y-compact);
}
.cd-capability-role__layout {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
column-gap: 0;
row-gap: 0;
align-items: stretch;
border-radius: var(--radius-lg);
overflow: hidden;
}
.cd-capability-role__col {
position: relative;
overflow: hidden;
height: 100%;
}
.cd-capability-role__col--intro, .cd-capability-role__col--cards {
min-width: 0;
}
.cd-capability-role__col--intro {
padding: var(--space-2xl) var(--space-xl);
}
.cd-capability-role__col--cards {
padding: var(--space-lg);
}
.cd-capability-role__intro, .cd-capability-role__cards {
width: 100%;
position: relative;
z-index: 1;
}
.cd-capability-role__intro {
max-width: 38rem;
--stack-space-default: var(--space-sm);
}
.cd-capability-role__intro .cd-heading-section {
max-width: 16ch;
}
.cd-capability-role__intro .cd-text-intro {
max-width: 32rem;
}
.cd-capability-role__cards {
--stack-space-default: var(--space-xs);
}
.cd-capability-role__card {
min-width: 0;
height: auto;
}
@media (max-width: 1024px) {
.cd-capability-role > .cd-container {
width: 100%;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.cd-capability-role__layout {
grid-template-columns: 1fr;
row-gap: 0;
border-radius: 0;
}
}
@media (max-width: 767px) {
.cd-capability-role {
--cd-section-space: var(--section-space-y-compact-mobile);
}
.cd-capability-role__col {
padding: var(--space-lg);
}
.cd-capability-role__cards {
--stack-space-default: var(--space-xs);
}
}
/* ====================================================
CD / Pattern / Capability Role / System Function / 041 / Light
Token-compliant correction
==================================================== */
.cd-system-function .cd-grid.cd-grid--3 {
display: grid;
gap: var(--layout-grid-gap);
align-items: stretch;
}
@media (min-width: 768px) {
.cd-system-function .cd-grid.cd-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.cd-system-function .cd-grid.cd-grid--3 {
grid-template-columns: 1fr;
}
}
.cd-system-function .cd-grid.cd-grid--3 > .cd-panel {
height: 100%;
}
.cd-system-function .cd-grid.cd-grid--3 > .cd-panel:hover, .cd-system-function .cd-grid.cd-grid--3 > .cd-panel:focus-within {
transform: translateY(var(--motion-lift-subtle));
box-shadow: var(--shadow-panel);
border-color: var(--border-strong);
}
.cd-system-function .cd-grid.cd-grid--3 > .cd-panel > .cd-stack {
height: 100%;
}
.cd-system-function .cd-grid.cd-grid--3 .cd-heading-component {
max-width: 10ch;
}
.cd-system-function .cd-grid.cd-grid--3 .cd-text-body {
max-width: var(--measure-tight);
}
.cd-system-function .cd-grid.cd-grid--3 > .cd-panel > .cd-stack > .cd-heading-component + .cd-text-body {
margin-top: var(--space-lg);
}
.cd-system-function .cd-stack > .cd-text-intro {
max-width: var(--measure-default);
}
.cd-system-function .cd-stack > .cd-text-intro + .cd-text-body {
margin-top: var(--flow-space-body-to-body);
}
.cd-system-function > .cd-container > .cd-stack > .cd-text-body:last-child {
margin-bottom: var(--space-lg);
}
/* ====================================================
CD / Pattern / Failure Context / 043 / Dark
==================================================== */
.cd-failure-context .cd-stack {
max-width: var(--measure-wide);
}
.cd-failure-context .cd-heading-section {
max-width: var(--heading-max-width-wide);
}
.cd-failure-context .cd-text-intro {
max-width: var(--measure-narrow);
}
.cd-failure-context .cd-text-body {
max-width: var(--measure-default);
}
.cd-failure-context .cd-list {
margin-top: var(--space-lg);
margin-bottom: var(--space-lg);
max-width: var(--measure-default);
}
.cd-failure-context .cd-list + .cd-text-body {
margin-top: var(--space-lg);
max-width: var(--measure-narrow);
}
.cd-failure-context .cd-text-body:last-child {
max-width: var(--measure-narrow);
}
.cd-failure-context .cd-atmosphere::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background: radial-gradient(ellipse at 50% 34%, rgba(81, 120, 145, .22) 0%, rgba(81, 120, 145, .14) 18%, rgba(81, 120, 145, .07) 34%, rgba(81, 120, 145, .025) 50%, rgba(81, 120, 145, 0) 64%);
}
/* ====================================================
CD / Pattern / System Resolution / 044 / Light
==================================================== */
.cd-system-resolution .cd-stack {
max-width: var(--measure-wide);
}
.cd-system-resolution .cd-heading-section {
max-width: var(--heading-max-width-wide);
}
.cd-system-resolution .cd-text-intro {
max-width: var(--measure-narrow);
}
.cd-system-resolution .cd-text-body {
max-width: var(--measure-default);
}
.cd-system-resolution .cd-text-body:last-child {
max-width: var(--measure-narrow);
}
/* ====================================================
CD / Pattern / Proof / Case Illustration / 07 / Dark
Minimal pattern layer. System owns everything else.
==================================================== */
.cd-proof-case .cd-stack {
max-width: var(--measure-wide);
}
/* ====================================================
CD / Pattern / CTA / Skinny Hero Bridge / 047 / Dark
==================================================== */
.cd-cta-skinny-hero {
position: relative;
isolation: isolate;
min-height: clamp(320px, 40vh, 520px);
display: flex;
align-items: center;
padding-top: clamp(6.5rem, 9vh, 8rem);
padding-bottom: clamp(2.5rem, 5vh, 4rem);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* Hero-level atmosphere */
.cd-cta-skinny-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: var(--hero-atmosphere-dark);
}
/* Ensure content sits above atmosphere */
.cd-cta-skinny-hero .cd-container {
position: relative;
z-index: 2;
width: 100%;
}
/* Tighten readable width so content feels properly inset */
.cd-cta-skinny-hero .cd-stack {
max-width: 640px;
margin-left: clamp(1.25rem, 4vw, 3.5rem);
margin-right: auto;
}
/* Maintain readable text measures */
.cd-cta-skinny-hero .cd-text-intro {
max-width: 58ch;
}
.cd-cta-skinny-hero .cd-text-body {
max-width: 56ch;
}
/* ====================================================
CD / Pattern / Procurement / 201 / Skinny Operational Header
==================================================== */
.cd-procurement-skinny-header {
--cd-section-space: var(--space-lg);
padding-top: calc(var(--cd-section-space) + 100px);
}
@media (min-width: 768px) {
.cd-procurement-skinny-header {
padding-top: calc(var(--cd-section-space) + 100px + var(--space-xl));
}
}
.cd-procurement-skinny-header .cd-stack {
max-width: 980px;
}
@media (min-width: 1025px) {
.cd-procurement-skinny-header .cd-stack {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
column-gap: var(--space-xl);
row-gap: var(--space-medium);
align-items: start;
}
.cd-procurement-skinny-header .cd-stack > * + * {
margin-top: 0;
}
.cd-procurement-skinny-header .cd-heading-display {
max-width: 16ch;
grid-row: 2/span 2;
}
.cd-procurement-skinny-header .cd-text-intro {
grid-column: 2;
grid-row: 2;
max-width: 34ch;
align-self: start;
}
.cd-procurement-skinny-header .cd-text-body {
grid-column: 2;
grid-row: 3;
max-width: 34ch;
align-self: start;
}
}
@media (max-width: 1024px) {
.cd-procurement-skinny-header {
--cd-section-space: calc(var(--section-space-y-compact-mobile) * .95);
padding-top: calc(var(--cd-section-space) + 100px);
}
.cd-procurement-skinny-header .cd-heading-display {
max-width: 15ch;
}
.cd-procurement-skinny-header .cd-stack > .cd-heading-display + * {
margin-top: var(--flow-space-heading-to-body);
}
}
/* ====================================================
CD / Pattern / Procurement / 202 / Operational Proposition
==================================================== */
.cd-operational-proposition {
--cd-section-space: calc(var(--section-space-y-compact) * .56);
}
.cd-operational-proposition > .cd-container {
margin-top: calc(var(--space-xl) - 25px);
padding-top: calc(var(--space-xl) - var(--space-medium));
padding-right: var(--space-xl);
padding-bottom: calc(var(--space-xl) - var(--space-xs));
padding-left: var(--space-xl);
background: #eaeff4;
border: 1px solid #d6e0e8;
border-radius: var(--radius-lg);
box-shadow: none;
}
.cd-operational-proposition .cd-stack {
max-width: var(--measure-wide);
gap: 0;
}
.cd-operational-proposition .cd-eyebrow {
color: rgba(18, 38, 81, .58);
letter-spacing: .08em;
}
.cd-operational-proposition .cd-stack > .cd-eyebrow + * {
margin-top: var(--space-medium);
}
.cd-operational-proposition .cd-divider {
width: 3rem;
height: 2px;
margin: var(--space-xs) 0 var(--space-medium);
background: #7fa0b8;
}
.cd-operational-proposition .cd-text-intro {
max-width: 40ch;
color: rgba(0, 0, 0, .78) !important;
}
.cd-operational-proposition .cd-text-body {
max-width: 58ch;
line-height: 1.7;
color: rgba(0, 0, 0, .78);
}
@media (min-width: 1181px) {
.cd-operational-proposition > .cd-container {
margin-right: auto;
margin-left: max(var(--container-gutter), calc(( 100% - var(--container-max-width) ) / 2));
}
}
@media (max-width: 767px) {
.cd-operational-proposition {
--cd-section-space: calc(var(--section-space-y-compact-mobile) * .56);
}
.cd-operational-proposition > .cd-container {
margin-top: var(--space-lg);
padding-top: calc(var(--space-lg) - var(--space-sm));
padding-right: var(--space-lg);
padding-bottom: calc(var(--space-lg) - var(--space-xs));
padding-left: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / Procurement / 203 / Proof Navigator
==================================================== */
.cd-proof-navigator .cd-grid {
align-items: stretch;
gap: var(--space-lg);
}
.cd-proof-navigator .cd-container {
border: var(--border-default) solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-panel);
}
.cd-proof-navigator a.cd-panel, .cd-proof-navigator a.cd-panel:hover, .cd-proof-navigator a.cd-panel:focus-visible, .cd-proof-navigator a.cd-panel:visited {
display: flex;
flex-direction: column;
height: 100%;
min-height: 13rem;
color: inherit;
text-decoration: none;
padding: var(--space-medium) var(--space-lg) var(--space-lg);
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.cd-proof-navigator a.cd-panel:hover, .cd-proof-navigator a.cd-panel:focus-visible {
color: inherit;
text-decoration: none;
border-color: var(--border-light-hover);
transform: translateY(var(--motion-lift-subtle));
box-shadow: 0 12px 32px rgba(0, 0, 0, .24), 0 6px 14px rgba(0, 0, 0, .16), 0 0 36px var(--glow-atmosphere-subtle);
}
.cd-proof-navigator a.cd-panel .cd-heading-component, .cd-proof-navigator a.cd-panel:hover .cd-heading-component, .cd-proof-navigator a.cd-panel:focus-visible .cd-heading-component, .cd-proof-navigator a.cd-panel:visited .cd-heading-component {
color: rgba(255, 255, 255, .86);
font-size: var(--h5-size);
margin-bottom: var(--space-medium);
}
.cd-proof-navigator a.cd-panel .cd-heading-component::after {
content: "›";
display: inline-block;
font-size: 1.35em;
margin-left: .6em;
color: rgba(255, 255, 255, .74);
font-weight: var(--font-medium);
transform: translateY(-.01em);
transition: transform var(--motion-duration-fast) var(--motion-ease-soft), color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-proof-navigator a.cd-panel .cd-text-body, .cd-proof-navigator a.cd-panel:hover .cd-text-body, .cd-proof-navigator a.cd-panel:focus-visible .cd-text-body, .cd-proof-navigator a.cd-panel:visited .cd-text-body {
margin-top: auto;
color: rgba(255, 255, 255, .82);
}
.cd-proof-navigator a.cd-panel:hover .cd-heading-component, .cd-proof-navigator a.cd-panel:focus-visible .cd-heading-component {
color: rgba(255, 255, 255, .9);
}
.cd-proof-navigator a.cd-panel:hover .cd-heading-component::after, .cd-proof-navigator a.cd-panel:focus-visible .cd-heading-component::after {
color: rgba(255, 255, 255, .92);
transform: translateX(4px) translateY(-.01em);
}
.cd-proof-navigator a.cd-panel:hover .cd-text-body, .cd-proof-navigator a.cd-panel:focus-visible .cd-text-body {
color: rgba(255, 255, 255, .86);
}
/* ====================================================
CD / Pattern / Procurement / 204 / Operational Diagram
==================================================== */
.cd-operational-diagram {
padding-top: calc(var(--section-space-y-compact) * .72);
}
.cd-operational-diagram .cd-diagram-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (max-width: 767px) {
.cd-operational-diagram {
padding-top: calc(var(--section-space-y-compact-mobile) * .72);
}
}
/* ====================================================
CD / Pattern / Procurement / 205 / Operational Principles
==================================================== */
.cd-operational-principles .cd-principle-card__row {
display: grid;
grid-template-columns: auto 1fr;
gap: calc(var(--space-lg) - var(--space-xs));
align-items: start;
}
.cd-operational-principles .cd-principle-card__icon {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 2.375rem;
color: #122651;
}
.cd-operational-principles .cd-principle-card__icon svg {
display: block;
width: 2.375rem;
height: 2.375rem;
fill: none;
stroke: currentColor;
stroke-width: 1.35;
}
.cd-operational-principles .cd-principle-card__icon svg * {
fill: none;
stroke: currentColor;
stroke-width: 1.35;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.cd-operational-principles .cd-panel {
border: .5px solid rgba(11, 31, 51, .12);
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.cd-operational-principles .cd-principle-card__content {
display: flex;
flex-direction: column;
}
.cd-operational-principles .cd-heading-component {
font-size: var(--h5-size);
line-height: 1.2;
}
.cd-operational-principles .cd-principle-card__rule {
width: 2.75rem;
height: 2px;
margin-top: var(--space-medium);
margin-bottom: var(--space-medium);
background: rgba(11, 31, 51, .28);
}
@media (max-width: 767px) {
.cd-operational-principles .cd-principle-card__row {
gap: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Procurement / 206 / Proof Themes
==================================================== */
.cd-proof-themes .cd-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: calc(( var(--space-lg) - var(--space-xs) ) * .5);
align-items: stretch;
margin-top: calc(var(--space-xl) + var(--space-sm));
}
.cd-proof-themes .cd-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-height: 100%;
padding: var(--space-medium) var(--space-sm);
border: .5px solid rgba(11, 31, 51, .12);
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.cd-proof-themes .cd-proof-theme__icon {
order: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
color: #122651;
margin-bottom: var(--space-sm);
}
.cd-proof-themes .cd-proof-theme__icon svg, .cd-proof-themes .cd-proof-theme-summary__icon svg {
display: block;
width: 3rem;
height: 3rem;
fill: none;
stroke: currentColor;
stroke-width: .85;
}
.cd-proof-themes .cd-proof-theme__icon svg *, .cd-proof-themes .cd-proof-theme-summary__icon svg * {
fill: none;
stroke: currentColor;
stroke-width: .85;
}
.cd-proof-themes .cd-heading-component {
order: 3;
margin-top: 0;
margin-bottom: var(--space-sm);
font-size: var(--text-lg);
line-height: 1.08;
text-align: center;
}
.cd-proof-themes .cd-proof-theme__rule {
order: 2;
width: 2.5rem;
height: 2px;
margin: var(--space-sm) auto var(--space-lg);
background: #0b4f7a;
opacity: .55;
}
.cd-proof-themes .cd-panel .cd-text-body {
order: 4;
line-height: 1.36;
font-size: .96rem;
text-align: center;
}
.cd-proof-themes .cd-proof-theme-summary {
grid-column: 1/-1;
display: block;
padding: var(--space-lg);
background: #0d294b;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: var(--radius-lg);
color: #fff;
box-shadow: none;
}
.cd-proof-themes .cd-proof-theme-summary__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.375rem;
height: 2.375rem;
color: #122651;
}
.cd-proof-themes .cd-proof-theme-summary__content {
display: grid;
grid-template-columns: 1fr auto .75fr;
align-items: center;
gap: var(--space-lg);
}
.cd-proof-themes .cd-proof-theme-summary .cd-text-body {
color: rgba(255, 255, 255, .86);
}
.cd-proof-themes .cd-proof-theme-summary strong {
color: #fff;
}
.cd-proof-themes .cd-proof-theme-summary__rule {
width: 1px;
height: 100%;
background: rgba(255, 255, 255, .24);
}
@media (max-width: 1280px) {
.cd-proof-themes .cd-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-proof-themes .cd-grid {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
.cd-proof-themes .cd-proof-theme-summary {
padding: var(--space-medium);
}
.cd-proof-themes .cd-proof-theme-summary__content {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
.cd-proof-themes .cd-proof-theme-summary__rule {
width: 100%;
height: 1px;
}
}
/* ====================================================
CD / Pattern / Procurement / 207 / Implementation Philosophy
==================================================== */
.cd-implementation-philosophy .cd-icon {
color: #122651;
}
.cd-implementation-philosophy .cd-icon svg {
width: 3rem;
height: 3rem;
}
.cd-implementation-philosophy .cd-icon svg, .cd-implementation-philosophy .cd-icon svg * {
fill: none;
stroke: currentColor;
stroke-width: .85;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 {
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: calc(( var(--space-lg) - var(--space-xs) ) * .5);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-medium) var(--space-sm);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-label {
color: #122651;
font-size: .95rem;
line-height: 1;
letter-spacing: .08em;
font-weight: 600;
margin: 0;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel > .cd-divider {
width: 2.5rem;
height: 2px;
margin: var(--space-medium) auto var(--space-sm);
background: #7fa0b8;
opacity: .8;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-heading-component {
font-size: .96rem;
line-height: 1.08;
margin: 0;
margin-top: var(--space-sm);
text-align: center;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-text-body {
font-size: .86rem;
line-height: 1.32;
margin-top: 15px;
max-width: 16ch;
text-align: center;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-icon {
color: #122651;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-icon svg {
width: 2.55rem;
height: 2.55rem;
}
.cd-implementation-philosophy .cd-panel {
border: .5px solid rgba(11, 31, 51, .12);
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel > .cd-grid.cd-grid--2 {
display: grid;
grid-template-columns: 1fr auto .75fr;
align-items: center;
gap: var(--space-lg);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel > .cd-grid.cd-grid--2 > .cd-divider {
width: 1px;
min-height: 5rem;
background: rgba(255, 255, 255, .24);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel {
background: #0d294b;
border: 1px solid rgba(255, 255, 255, .14);
color: #fff;
box-shadow: none;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel .cd-stack {
gap: 0;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel .cd-text-body {
line-height: 1.55;
color: rgba(255, 255, 255, .86);
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel strong {
color: #fff;
}
@media (max-width: 1180px) {
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 {
grid-template-columns: 1fr;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
text-align: left;
gap: var(--space-medium);
padding: var(--space-lg);
min-height: auto;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-icon {
grid-row: 1/span 3;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-icon svg {
width: 2.25rem;
height: 2.25rem;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel > .cd-divider {
grid-column: 2;
grid-row: 2;
margin: var(--space-xs) 0 var(--space-sm);
width: 2.75rem;
height: 2px;
justify-self: start;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-heading-component {
grid-column: 2;
grid-row: 1;
font-size: var(--h5-size);
line-height: 1.15;
margin-top: 0;
margin-bottom: 0;
text-align: left;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-grid.cd-grid--3 > .cd-panel .cd-text-body {
grid-column: 2;
grid-row: 3;
font-size: 1rem;
line-height: 1.45;
margin-top: 0;
max-width: none;
text-align: left;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
}
.cd-implementation-philosophy > .cd-container .cd-stack > .cd-panel > .cd-grid.cd-grid--2 > .cd-divider {
width: 100%;
min-height: 1px;
height: 1px;
}
}
.page-id-1518 footer.site-footer, .page-id-1518 footer {
border-top-color: rgba(127, 160, 184, .2);
}
.page-id-1518 h2, .page-id-1518 h3, .page-id-1518 .cd-heading-display, .page-id-1518 .cd-heading-component {
color: #122651;
}
.page-id-1518 .cd-procurement-skinny-header .cd-heading-display, .page-id-1518 .cd-proof-navigator a.cd-panel .cd-heading-component, .page-id-1518 .cd-proof-navigator a.cd-panel:hover .cd-heading-component, .page-id-1518 .cd-proof-navigator a.cd-panel:focus-visible .cd-heading-component, .page-id-1518 .cd-proof-navigator a.cd-panel:visited .cd-heading-component {
color: rgba(255, 255, 255, .86);
}
/* ====================================================
CD / Pattern / Procurement / 208 / Delivery Governance
==================================================== */
.cd-delivery-governance > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: .7fr 1.3fr;
align-items: start;
column-gap: var(--space-xl);
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-self: stretch;
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-divider {
background: rgba(11, 31, 51, .12);
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-stack {
gap: 0;
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-divider + .cd-stack {
margin-top: calc(var(--space-xl) - var(--space-sm));
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: .7fr 1.3fr;
align-items: start;
column-gap: var(--space-xl);
padding: var(--space-medium) 0;
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-stack > .cd-divider {
margin: 0;
height: 1px;
background: rgba(11, 31, 51, .1);
}
.cd-delivery-governance > .cd-container > .cd-stack .cd-label {
color: rgba(18, 38, 81, .58);
font-size: .95rem;
letter-spacing: .09em;
font-weight: 600;
margin: 0;
}
.cd-delivery-governance .cd-label + .cd-divider {
width: 2.75rem;
height: 2px;
margin-top: var(--space-sm);
background: #7fa0b8;
}
.cd-delivery-governance .cd-heading-component {
font-size: var(--h5-size);
line-height: 1.15;
margin: 0;
}
.cd-delivery-governance .cd-heading-component + .cd-text-body {
margin-top: var(--space-sm);
}
.cd-delivery-governance .cd-panel {
margin-top: var(--space-lg);
background: #0d294b;
border: 1px solid rgba(255, 255, 255, .14);
color: #fff;
box-shadow: none;
}
.cd-delivery-governance .cd-panel > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr auto .75fr;
align-items: center;
column-gap: var(--space-lg);
}
.cd-delivery-governance .cd-panel .cd-text-body {
color: rgba(255, 255, 255, .86);
}
.cd-delivery-governance .cd-panel strong {
color: #fff;
}
.cd-delivery-governance .cd-panel > .cd-grid.cd-grid--2 > .cd-divider {
width: 1px;
height: 100%;
min-height: 4rem;
background: rgba(255, 255, 255, .24);
}
@media (max-width: 767px) {
.cd-delivery-governance > .cd-container > .cd-stack > .cd-grid.cd-grid--2, .cd-delivery-governance > .cd-container > .cd-stack > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-sm);
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack {
display: block;
}
.cd-delivery-governance > .cd-container > .cd-stack > .cd-stack > .cd-grid.cd-grid--2 {
padding: var(--space-medium) 0;
}
.cd-delivery-governance .cd-label + .cd-divider {
margin-top: var(--space-xs);
}
.cd-delivery-governance .cd-panel > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-medium);
}
.cd-delivery-governance .cd-panel > .cd-grid.cd-grid--2 > .cd-divider {
width: 100%;
height: 1px;
min-height: 0;
}
}
/* ====================================================
CD / Pattern / Delivery Governance / Governance Drift
Editorial recognition, evidence, and concluding proposition.
==================================================== */
.cd-how-we-work--delivery-governance .cd-governance-drift__layout {
display: grid;
grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
align-items: start;
column-gap: clamp(var(--space-xl), 7vw, var(--space-2xl));
}
.cd-how-we-work--delivery-governance .cd-governance-drift__editorial {
min-width: 0;
max-width: var(--measure-narrow);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__editorial > .cd-eyebrow::after {
content: "";
display: block;
width: 2.75rem;
height: 2px;
margin-top: var(--space-sm);
background: var(--color-text-accent-gold);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence {
min-width: 0;
padding-top: var(--space-xl);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence > .cd-heading-component {
max-width: 34ch;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence-list {
margin: 0;
padding: 0;
border-top: var(--border-default) solid var(--border-divider-light);
list-style: none;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence-item {
display: block;
padding: var(--space-medium) 0;
border-bottom: var(--border-default) solid var(--border-divider-light);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition {
display: grid;
grid-template-columns: minmax(0, .825fr) minmax(0, 1.175fr);
align-items: start;
gap: var(--space-medium);
margin-top: var(--space-xl);
padding: var(--space-lg);
border-left: 3px solid var(--color-text-accent-gold);
background: rgba(189, 158, 65, .08);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition > * + * {
margin-top: 0;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition > .cd-heading-subsection {
max-width: 32ch;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition > .cd-text-body {
max-width: none;
}
@media (max-width: 1024px) {
.cd-how-we-work--delivery-governance .cd-governance-drift__layout {
grid-template-columns: 1fr;
row-gap: var(--space-xl);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__editorial {
max-width: var(--measure-wide);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence {
padding-top: 0;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
}
@media (max-width: 767px) {
.cd-how-we-work--delivery-governance .cd-governance-drift__layout {
row-gap: var(--space-lg);
}
.cd-how-we-work--delivery-governance .cd-governance-drift__evidence-item {
padding: var(--space-sm) 0;
}
.cd-how-we-work--delivery-governance .cd-governance-drift__proposition {
margin-top: var(--space-lg);
padding: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 01 / Hero
Header-aware first-hero clearance.
==================================================== */
.cd-evaluation-hero {
background-attachment: fixed;
background-image: var(--inline-bg-image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding-top: var(--cd-first-hero-clearance);
scroll-margin-top: var(--cd-sticky-scroll-offset);
}
.cd-how-we-work--digital-delivery-gateway .cd-evaluation-hero {
background-attachment: fixed;
}
.cd-customer-user-journey .cd-evaluation-hero, body.postid-1130 .cd-evaluation-hero, body.postid-1115 .cd-evaluation-hero, body.postid-1140 .cd-evaluation-hero {
background-attachment: fixed;
}
.cd-how-we-work--performance-methodology .cd-evaluation-hero {
position: relative;
overflow: hidden;
}
.cd-how-we-work--performance-methodology .cd-evaluation-hero > .cd-container {
position: relative;
z-index: 2;
}
.cd-how-we-work--performance-methodology .cd-evaluation-hero .cd-atmosphere.cd-atmosphere--light::before {
background: radial-gradient(48rem 34rem at 24% 46%, rgba(0, 19, 36, .68), rgba(0, 24, 45, .38) 44%, rgba(0, 24, 45, 0) 74%), linear-gradient(90deg, rgba(0, 19, 36, .72) 0%, rgba(0, 28, 53, .48) 34%, rgba(0, 33, 57, .18) 58%, rgba(0, 33, 57, 0) 82%);
}
.cd-evaluation-hero [aria-label="Evaluation Program Actions"] {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
align-items: center;
}
.cd-evaluation-hero .cd-cta.cd-cta--secondary {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .3);
color: #8f5f10;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 26px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
}
.cd-evaluation-hero .cd-cta.cd-cta--secondary:hover, .cd-evaluation-hero .cd-cta.cd-cta--secondary:focus-visible {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .42);
color: #a06d14;
box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.cd-evaluation-hero a.cd-cta.cd-cta--secondary, .cd-evaluation-hero a.cd-cta.cd-cta--secondary:visited, .cd-evaluation-hero a.cd-cta.cd-cta--secondary:active {
color: #8f5f10;
}
.cd-evaluation-hero a.cd-cta.cd-cta--secondary:hover, .cd-evaluation-hero a.cd-cta.cd-cta--secondary:focus-visible {
color: #a06d14;
}
@media (min-width: 768px) {
.cd-evaluation-hero .cd-cta.cd-cta--secondary {
min-width: 16.15rem;
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .36);
box-shadow: 0 12px 30px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.cd-evaluation-hero .cd-cta.cd-cta--secondary:hover, .cd-evaluation-hero .cd-cta.cd-cta--secondary:focus-visible {
background: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .5);
box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .14);
}
}
@media (max-width: 767px) {
.cd-evaluation-hero {
background-attachment: scroll;
}
.cd-how-we-work--digital-delivery-gateway .cd-evaluation-hero {
background-attachment: scroll;
}
.cd-customer-user-journey .cd-evaluation-hero, body.postid-1130 .cd-evaluation-hero, body.postid-1115 .cd-evaluation-hero, body.postid-1140 .cd-evaluation-hero {
background-attachment: scroll;
}
.cd-evaluation-hero [aria-label="Evaluation Program Actions"] {
align-items: stretch;
}
.cd-evaluation-hero [aria-label="Evaluation Program Actions"] .cd-cta {
width: 100%;
}
}
@media (hover: none), (pointer: coarse) {
.cd-how-we-work--digital-delivery-gateway .cd-evaluation-hero {
background-attachment: scroll;
}
.cd-customer-user-journey .cd-evaluation-hero, body.postid-1130 .cd-evaluation-hero, body.postid-1115 .cd-evaluation-hero, body.postid-1140 .cd-evaluation-hero {
background-attachment: scroll;
}
}
/* ====================================================
CD / Pattern / How We Work / Digital Delivery Gateway / Evaluation Intro
Editorial opening for evaluating delivery behind the promise.
==================================================== */
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro {
--delivery-intro-ink: var(--color-midnight-brand);
--delivery-intro-muted: rgba(0, 42, 78, .72);
--cd-section-space: clamp(5rem, 7vw, 7.25rem);
position: relative;
overflow: hidden;
background-color: #fff;
background-image: linear-gradient(90deg, #fff 0%, #fff 47%, rgba(255, 255, 255, .86) 63%, rgba(255, 255, 255, .22) 100%), radial-gradient(48rem 22rem at 82% 18%, rgba(189, 158, 65, .06), transparent 72%), radial-gradient(44rem 22rem at 18% 12%, rgba(81, 120, 145, .08), transparent 74%), var(--inline-bg-image);
background-position: center, 82% 18%, 18% 12%, calc(100% + clamp(0rem, 2vw, 2rem)) center;
background-repeat: no-repeat;
background-size: 100% 100%, 48rem 22rem, 44rem 22rem, min(54rem, 54%) auto;
color: var(--delivery-intro-ink);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container {
position: relative;
z-index: 1;
width: min(calc(var(--container-max-width) - var(--space-xl)), calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, 1.12fr) minmax(22rem, .88fr);
align-items: start;
column-gap: clamp(var(--space-medium), 3vw, var(--space-lg));
row-gap: var(--space-xl);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
--stack-space-default: var(--space-medium);
--flow-space-heading-to-body: var(--space-lg);
max-width: var(--measure-wide);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-eyebrow {
color: #8f5f10;
letter-spacing: .13em;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-heading-section {
max-width: 14.5em;
color: var(--delivery-intro-ink);
text-wrap: balance;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-heading-subsection {
max-width: 17em;
color: rgba(0, 42, 78, .86);
text-wrap: balance;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-text-body, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-text-intro {
max-width: var(--measure-default);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-text-body {
color: var(--delivery-intro-muted);
}
@media (max-width: 1100px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro {
background-position: center, 82% 18%, 18% 12%, calc(100% + var(--space-medium)) bottom;
background-size: 100% 100%, 48rem 22rem, 44rem 22rem, min(42rem, 76%) auto;
}
}
@media (max-width: 767px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro {
--cd-section-space: 4rem;
background-image: linear-gradient(180deg, #fff 0%, #fff 62%, rgba(255, 255, 255, .62) 100%), radial-gradient(36rem 18rem at 84% 20%, rgba(189, 158, 65, .05), transparent 72%), radial-gradient(30rem 16rem at 12% 8%, rgba(81, 120, 145, .07), transparent 74%), var(--inline-bg-image);
background-position: center, 84% 20%, 12% 8%, calc(100% + var(--space-sm)) bottom;
background-size: 100% 100%, 36rem 18rem, 30rem 16rem, min(28rem, 92%) auto;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro > .cd-container > .cd-grid.cd-grid--2 {
row-gap: var(--space-medium);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation-intro .cd-heading-section {
max-width: 12.5em;
}
}
/* ====================================================
CD / Pattern / How We Work / Digital Delivery Gateway / Technical Spine
Curated route gateway for the technical spine.
==================================================== */
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine {
--spine-ink: var(--color-midnight-brand);
--spine-soft-ink: rgba(0, 42, 78, .72);
--spine-muted-ink: rgba(0, 42, 78, .54);
--spine-gold: var(--color-text-accent-gold);
--spine-line: rgba(0, 42, 78, .14);
--spine-panel: rgba(255, 255, 255, .78);
--cd-section-space: clamp(5rem, 7vw, 7.5rem);
position: relative;
overflow: hidden;
background: radial-gradient(48rem 24rem at 18% 8%, rgba(255, 255, 255, .92), transparent 72%), radial-gradient(52rem 28rem at 86% 16%, rgba(189, 158, 65, .07), transparent 74%), linear-gradient(180deg, #fff 0%, #f3f6f7 100%);
color: var(--spine-ink);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine > .cd-container {
position: relative;
z-index: 1;
width: min(var(--container-wide), calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine > .cd-container > .cd-stack {
--stack-space-default: clamp(var(--space-lg), 4.5vw, var(--space-xl));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro {
max-width: 58rem;
margin-inline: auto;
text-align: center;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro .cd-eyebrow {
color: #8f5f10;
letter-spacing: .13em;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro .cd-heading-section {
max-width: 15em;
margin-inline: auto;
color: var(--spine-ink);
text-wrap: balance;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro .cd-text-intro {
max-width: 54rem;
margin-inline: auto;
color: var(--spine-soft-ink) !important;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine a.cd-spine-route, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine a.cd-spine-route:visited {
display: grid;
min-width: 0;
color: inherit;
text-decoration: none;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route {
position: relative;
isolation: isolate;
overflow: hidden;
border: 1px solid var(--spine-line);
border-radius: var(--radius-lg);
transition: transform var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft), box-shadow var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route:hover, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route:focus-visible {
transform: translateY(var(--motion-lift-subtle));
border-color: rgba(189, 158, 65, .42);
box-shadow: 0 24px 56px rgba(0, 42, 78, .12);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route:focus-visible {
outline: 2px solid rgba(189, 158, 65, .78);
outline-offset: 4px;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route > .cd-stack {
--stack-space-default: var(--space-sm);
position: relative;
z-index: 2;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route .cd-label {
color: var(--spine-gold);
letter-spacing: .12em;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route .cd-heading-component, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route .cd-heading-subsection {
color: inherit;
text-wrap: balance;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route .cd-text-intro {
max-width: 18em;
color: var(--spine-ink) !important;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route .cd-text-body {
max-width: var(--measure-default);
color: var(--spine-soft-ink);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-cta {
display: block;
width: fit-content;
max-width: 100%;
margin-top: var(--space-sm);
color: var(--spine-gold);
transition: none;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-cta::after {
content: " ↗";
display: inline;
font-size: .92em;
line-height: 1;
vertical-align: baseline;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured {
grid-template-columns: minmax(0, .62fr) minmax(18rem, .38fr);
align-items: center;
min-height: clamp(19rem, 25vw, 24rem);
padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
background: linear-gradient(90deg, rgba(0, 42, 78, .98) 0%, rgba(0, 42, 78, .94) 46%, rgba(0, 42, 78, .62) 72%, rgba(0, 42, 78, .26) 100%), var(--inline-bg-image) right center/cover no-repeat, var(--color-midnight-brand);
border-color: rgba(159, 176, 200, .22);
box-shadow: 0 24px 56px rgba(0, 42, 78, .16);
color: #fff;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured > .cd-stack {
max-width: 40rem;
color: #fff;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured .cd-heading-subsection {
color: #fff;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured .cd-text-body {
color: rgba(255, 255, 255, .8);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes {
--stack-space-default: var(--space-medium);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid {
gap: var(--space-medium);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact {
background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .68)), var(--spine-panel);
box-shadow: 0 18px 42px rgba(0, 42, 78, .07);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large {
align-content: space-between;
gap: var(--space-lg);
min-height: clamp(27rem, 35vw, 31rem);
padding: clamp(var(--space-lg), 3.4vw, var(--space-xl));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(100deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .84) 48%, rgba(255, 255, 255, .38) 68%, rgba(255, 255, 255, 0) 88%);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large > .cd-stack {
align-self: start;
max-width: 31rem;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact {
min-height: 24rem;
padding: clamp(var(--space-medium), 2.5vw, var(--space-lg));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact > .cd-stack {
max-width: 24rem;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-illustration {
display: block;
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
pointer-events: none;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large .cd-spine-illustration {
position: absolute;
right: -12%;
bottom: -20%;
z-index: 0;
width: min(86%, 34rem);
height: min(86%, 34rem);
opacity: .38;
object-position: center;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact .cd-spine-illustration {
position: absolute;
right: -12%;
bottom: -14%;
z-index: 0;
width: min(68%, 18rem);
height: min(68%, 18rem);
opacity: .34;
object-position: center;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 > .cd-spine-route--compact:first-child .cd-spine-illustration {
bottom: calc(-14% - var(--space-xs));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-closing {
max-width: 50rem;
margin-top: var(--space-xl);
margin-inline: auto;
color: var(--spine-soft-ink) !important;
text-align: center;
text-wrap: balance;
}
@media (max-width: 1100px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured {
grid-template-columns: 1fr;
background: linear-gradient(90deg, rgba(0, 42, 78, .98) 0%, rgba(0, 42, 78, .9) 58%, rgba(0, 42, 78, .42) 100%), var(--inline-bg-image) right center/cover no-repeat, var(--color-midnight-brand);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--2 {
grid-template-columns: 1fr;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large {
min-height: 23rem;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large .cd-spine-illustration {
right: -16%;
bottom: -20%;
width: min(92%, 30rem);
height: min(92%, 30rem);
opacity: .34;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact .cd-spine-illustration {
right: -14%;
bottom: -12%;
width: min(72%, 17rem);
height: min(72%, 17rem);
opacity: .3;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 > .cd-spine-route--compact:first-child .cd-spine-illustration {
bottom: calc(-12% - var(--space-xs));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 > .cd-spine-route:last-child {
grid-column: 1/-1;
}
}
@media (max-width: 767px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine {
--cd-section-space: 4rem;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-closing {
text-align: left;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro .cd-heading-section, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-intro .cd-text-intro, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-closing {
margin-inline: 0;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--featured {
min-height: 20rem;
padding: var(--space-lg);
background: linear-gradient(90deg, rgba(0, 42, 78, .98) 0%, rgba(0, 42, 78, .92) 64%, rgba(0, 42, 78, .5) 100%), var(--inline-bg-image) 62% center/cover no-repeat, var(--color-midnight-brand);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 {
grid-template-columns: 1fr;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 > .cd-spine-route:last-child {
grid-column: auto;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large, .cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact {
grid-template-columns: 1fr;
min-height: clamp(22rem, 72vw, 26rem);
padding: var(--space-medium);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large .cd-spine-illustration {
position: absolute;
right: -22%;
bottom: -18%;
width: min(100%, 26rem);
height: min(100%, 26rem);
margin-top: 0;
opacity: .3;
filter: drop-shadow(0 14px 22px rgba(0, 42, 78, .08));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--compact .cd-spine-illustration {
position: absolute;
right: -12%;
bottom: -12%;
width: min(80%, 16rem);
height: min(80%, 16rem);
margin-top: 0;
opacity: .27;
filter: drop-shadow(0 14px 22px rgba(0, 42, 78, .08));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-routes > .cd-grid--3 > .cd-spine-route--compact:first-child .cd-spine-illustration {
bottom: calc(-12% - var(--space-xs));
}
}
@media (max-width: 480px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-gateway-spine .cd-spine-route--large .cd-spine-illustration {
right: -28%;
bottom: -16%;
width: min(108%, 23rem);
height: min(108%, 23rem);
opacity: .28;
}
}
/* ====================================================
CD / Pattern / How We Work / Digital Delivery Gateway / Evaluation Lens
Educational lens for recognising mature digital delivery signals.
==================================================== */
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation {
position: relative;
overflow: hidden;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__layout {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr);
align-items: stretch;
gap: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial {
position: relative;
align-self: start;
isolation: isolate;
min-width: 0;
padding-bottom: clamp(28rem, 37vw, 33rem);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-eyebrow, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-heading-section, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-text-intro, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-flow, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-delivery-evaluation__spine-links {
position: relative;
z-index: 2;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial > .cd-flow {
max-width: var(--measure-default);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-links {
--flow-space: 0;
width: min(100%, var(--measure-default));
margin-top: var(--space-lg);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-links > .cd-heading-label {
margin-bottom: var(--space-sm);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding-block: var(--space-sm);
border-top: var(--border-default) solid var(--border-divider-light);
color: inherit;
text-decoration: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), border-color var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:last-child {
border-bottom: var(--border-default) solid var(--border-divider-light);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link::after {
content: "→";
flex: 0 0 auto;
color: var(--color-text-accent-earth);
line-height: 1;
transition: transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:hover, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:focus-visible {
color: var(--color-midnight-brand-accent-lift);
border-color: var(--border-strong);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:hover::after, .cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:focus-visible::after {
transform: translateX(var(--space-2xs));
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__spine-link:focus-visible {
outline: 2px solid rgba(189, 158, 65, .78);
outline-offset: 3px;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__artwork {
position: absolute;
right: calc(-1 * clamp(var(--space-lg), 5vw, var(--space-xl)));
left: auto;
bottom: clamp(-2.5rem, -1.1vw, -1rem);
z-index: 0;
display: block;
width: min(58rem, calc(100% + 13rem));
max-width: none;
height: auto;
opacity: .62;
pointer-events: none;
user-select: none;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__panel {
align-self: start;
min-width: 0;
overflow: hidden;
box-shadow: none;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__panel > h3.cd-heading-label {
font-size: var(--heading-label-size);
font-weight: var(--font-medium);
line-height: var(--heading-line-height-normal);
letter-spacing: .05em;
text-transform: uppercase;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__signals {
display: grid;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__signal {
display: grid;
grid-template-columns: clamp(2.5rem, 4vw, 3.5rem) minmax(0, 1fr);
align-items: start;
padding-block: var(--space-medium);
border-top: var(--border-default) solid var(--border-subtle);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__marker {
display: flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
color: var(--color-text-accent-gold);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__signal > .cd-stack {
min-width: 0;
padding-left: var(--space-medium);
border-left: var(--border-default) solid var(--color-text-accent-gold);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__note {
padding-top: var(--space-medium);
border-top: var(--border-default) solid var(--border-subtle);
}
@media (max-width: 1100px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__layout {
grid-template-columns: 1fr;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial {
padding-bottom: clamp(28rem, 55vw, 34rem);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__artwork {
right: auto;
left: clamp(-8rem, -6vw, -3rem);
width: min(58rem, 100vw);
}
}
@media (max-width: 767px) {
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__layout {
gap: var(--space-lg);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__editorial {
padding-bottom: clamp(16rem, 68vw, 22rem);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__artwork {
left: calc(-1 * var(--container-gutter-tight));
bottom: calc(-1 * var(--space-medium));
width: min(36rem, 118vw);
opacity: .54;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__panel {
padding: var(--space-medium);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__signal {
grid-template-columns: 2.25rem minmax(0, 1fr);
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__marker {
min-height: 2.25rem;
}
.cd-how-we-work--digital-delivery-gateway .cd-delivery-evaluation__signal > .cd-stack {
padding-left: var(--space-sm);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 02 / Necessary
Diagnostic section with light evidence panel.
==================================================== */
.cd-evaluation-necessary {
position: relative;
overflow: hidden;
scroll-margin-top: 80px;
}
.cd-evaluation-necessary > .cd-atmosphere {
z-index: 0;
}
.cd-evaluation-necessary > .cd-container {
position: relative;
z-index: 2;
}
.cd-evaluation-necessary > .cd-container > .cd-grid.cd-grid--2 {
align-items: start;
}
.cd-evaluation-necessary > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
.cd-evaluation-necessary .cd-panel--light {
display: flex;
flex-direction: column;
align-self: start;
gap: var(--space-xs);
margin-top: clamp(1.5rem, 2.6vw, var(--space-lg));
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: var(--bg-soft);
border-color: rgba(0, 0, 0, .08);
box-shadow: 0 18px 46px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .72) inset;
}
.cd-evaluation-necessary .cd-panel--light img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.cd-how-we-work-ds .cd-evaluation-necessary .cd-panel--light img {
width: auto;
max-width: 100%;
max-height: 52rem;
}
.cd-evaluation-necessary .cd-panel--light figcaption, .cd-evaluation-necessary .cd-panel--light .cd-text-body {
max-width: 46ch;
margin: 0;
color: rgba(0, 2, 4, .72);
font-size: .92rem;
line-height: 1.55;
}
.cd-evaluation-necessary .cd-list {
color: rgba(255, 255, 255, .88);
}
.cd-how-we-work-ds .cd-evaluation-necessary .cd-flow:has(.cd-list) + .cd-text-body {
margin-top: var(--space-medium);
}
@media (min-width: 1101px) {
.cd-evaluation-necessary .cd-panel--light figcaption, .cd-evaluation-necessary .cd-panel--light .cd-text-body {
margin-top: var(--space-xs);
}
}
@media (max-width: 1100px) {
.cd-evaluation-necessary > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-evaluation-necessary > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
.cd-evaluation-necessary .cd-panel--light {
justify-self: center;
width: 100%;
max-width: 48rem;
margin-top: 0;
}
.cd-evaluation-necessary .cd-panel--light img {
align-self: center;
width: auto;
max-width: 100%;
max-height: 52rem;
}
}
@media (max-width: 767px) {
.cd-evaluation-necessary > .cd-container > .cd-grid.cd-grid--2 {
row-gap: var(--space-medium);
}
.cd-evaluation-necessary .cd-panel--light {
max-width: none;
margin-top: 0;
padding: var(--space-medium);
}
.cd-evaluation-necessary .cd-panel--light img {
align-self: center;
width: auto;
max-width: 100%;
max-height: 46rem;
}
.cd-evaluation-necessary .cd-panel--light figcaption, .cd-evaluation-necessary .cd-panel--light .cd-text-body {
font-size: .9rem;
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 025 / Moment
Editorial pause between diagnosis and program definition.
==================================================== */
.cd-evaluation-moment {
--cd-section-space: clamp(4rem, 5.6vw, 5.5rem);
position: relative;
overflow: hidden;
background: radial-gradient(42rem 18rem at 50% 20%, rgba(255, 255, 255, .72), transparent 72%), linear-gradient(180deg, #f6f1e8 0%, #eee8dc 100%);
color: var(--color-midnight-brand);
}
.cd-evaluation-moment > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-moment > .cd-atmosphere::before {
background: radial-gradient(44rem 18rem at 16% 18%, rgba(143, 95, 16, .08), transparent 70%), radial-gradient(36rem 16rem at 84% 16%, rgba(0, 42, 78, .055), transparent 72%), radial-gradient(52rem 18rem at 50% 100%, rgba(143, 95, 16, .045), transparent 76%);
}
.cd-evaluation-moment > .cd-container {
position: relative;
z-index: 2;
width: min(58rem, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-moment .cd-stack {
align-items: center;
text-align: center;
}
.cd-evaluation-moment .cd-eyebrow {
color: #8f5f10;
letter-spacing: .14em;
}
body .cd-evaluation-moment h2.cd-heading-section {
max-width: 36ch;
margin-right: auto;
margin-left: auto;
color: var(--color-midnight-brand);
font-weight: 600;
letter-spacing: -.012em;
text-align: center;
}
body .cd-evaluation-moment h2.cd-heading-section strong {
font-weight: inherit;
}
.cd-evaluation-moment .cd-rule-accent {
position: relative;
width: 4.75rem;
height: 1px;
margin-right: auto;
margin-left: auto;
background: rgba(143, 95, 16, .42);
}
.cd-evaluation-moment .cd-rule-accent::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: .42rem;
height: .42rem;
border-radius: 999px;
background: #8f5f10;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 .35rem rgba(143, 95, 16, .08);
}
@media (max-width: 767px) {
.cd-evaluation-moment {
--cd-section-space: 3.5rem;
}
.cd-evaluation-moment > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
body .cd-evaluation-moment h2.cd-heading-section {
max-width: 20ch;
}
}
/* ====================================================
CD / Pattern / How We Work / Growth Engine / Handoff
One governed handoff system with reusable Cayuse primitives.
==================================================== */
.cd-how-we-work--growth-engine .cd-growth-engine-handoff {
--handoff-ink: var(--color-midnight-brand);
--handoff-soft-ink: rgba(0, 42, 78, .72);
--handoff-gold: var(--color-text-accent-gold);
--handoff-border: rgba(0, 42, 78, .18);
--handoff-panel: rgba(255, 255, 255, .72);
--cd-section-space: clamp(4.75rem, 6.8vw, 7rem);
position: relative;
overflow: hidden;
background: radial-gradient(48rem 22rem at 18% 12%, rgba(255, 255, 255, .84), transparent 72%), radial-gradient(42rem 22rem at 84% 24%, rgba(189, 158, 65, .075), transparent 74%), linear-gradient(180deg, #f8f6f0 0%, #f1f4f6 100%);
color: var(--handoff-ink);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-atmosphere::before {
background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)), radial-gradient(42rem 18rem at 50% 62%, rgba(0, 42, 78, .05), transparent 76%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack {
--stack-space-default: clamp(var(--space-lg), 5vw, var(--space-xl));
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .98fr) minmax(24rem, .88fr);
align-items: start;
column-gap: clamp(var(--space-lg), 4vw, var(--space-xl));
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff .cd-eyebrow, .cd-how-we-work--growth-engine .cd-growth-engine-handoff .cd-heading-label {
color: #9a6b12;
letter-spacing: .13em;
}
body .cd-how-we-work--growth-engine .cd-growth-engine-handoff h2.cd-heading-section {
max-width: 15em;
color: var(--handoff-ink);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
align-self: start;
padding: clamp(var(--space-lg), 4vw, var(--space-xl));
background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)), var(--handoff-panel);
border-color: rgba(189, 158, 65, .42);
box-shadow: 0 24px 56px rgba(0, 42, 78, .08);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel .gb-shape {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.6rem;
height: 3.6rem;
color: var(--handoff-gold);
border: 1.5px solid currentColor;
border-radius: 999px;
background: rgba(255, 255, 255, .58);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff .gb-shape svg {
display: block;
width: 62%;
height: 62%;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff .cd-rule-accent {
width: 2.2rem;
height: 1px;
margin-bottom: var(--space-medium);
background: var(--handoff-gold);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel .cd-text-body, .cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-text-intro {
color: var(--handoff-soft-ink) !important;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(var(--space-sm), 2.8vw, var(--space-lg));
align-items: center;
margin-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
margin-bottom: var(--space-lg);
text-align: center;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label::before, .cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label::after {
content: "";
display: block;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 42, 78, .34));
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label::after {
background: linear-gradient(90deg, rgba(0, 42, 78, .34), transparent);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 {
position: relative;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(var(--space-sm), 2vw, var(--space-medium));
align-items: stretch;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5::before {
content: "";
position: absolute;
top: 6.45rem;
right: 5%;
left: 5%;
z-index: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(189, 158, 65, .88) 12%, rgba(189, 158, 65, .88) 88%, transparent 100%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 > .cd-panel {
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: clamp(18rem, 18vw, 20rem);
padding: clamp(var(--space-medium), 2.4vw, var(--space-lg)) clamp(var(--space-sm), 1.7vw, var(--space-medium));
text-align: center;
background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5)), var(--handoff-panel);
border-color: var(--handoff-border);
box-shadow: 0 18px 42px rgba(0, 42, 78, .075);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-label {
color: rgba(0, 42, 78, .2);
font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
font-weight: var(--font-bold);
letter-spacing: .08em;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .gb-shape {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.65rem;
height: 4.65rem;
color: var(--handoff-gold);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .2), transparent 42%), var(--handoff-ink);
box-shadow: 0 16px 34px rgba(0, 42, 78, .18), 0 0 0 .42rem rgba(255, 255, 255, .64);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-heading-component {
max-width: 15ch;
margin-top: var(--space-medium);
color: var(--handoff-ink);
text-transform: uppercase;
letter-spacing: .06em;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-heading-component::after {
content: "";
display: block;
width: 2.1rem;
height: 1px;
margin: var(--space-sm) auto 0;
background: var(--handoff-gold);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-text-body {
max-width: 24ch;
margin-right: auto;
margin-left: auto;
color: rgba(0, 42, 78, .72);
line-height: 1.62;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-text-intro {
max-width: 68rem;
margin-top: clamp(var(--space-lg), 4vw, var(--space-xl));
margin-right: auto;
margin-left: auto;
font-size: clamp(var(--text-xl), 1.1rem + .75vw, var(--text-2xl)) !important;
line-height: var(--leading-snug) !important;
text-align: center;
}
@media (max-width: 1279px) {
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5::before {
display: none;
}
}
@media (max-width: 1024px) {
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
max-width: 46rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-how-we-work--growth-engine .cd-growth-engine-handoff {
--cd-section-space: 4rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label {
display: block;
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label::before, .cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-heading-label::after {
display: none;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 {
grid-template-columns: 1fr;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 > .cd-panel {
align-items: flex-start;
min-height: 0;
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-heading-component, .cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-text-body {
max-width: none;
margin-right: 0;
margin-left: 0;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-grid.cd-grid--5 .cd-heading-component::after {
margin-left: 0;
}
.cd-how-we-work--growth-engine .cd-growth-engine-handoff > .cd-container > .cd-stack > .cd-text-intro {
margin-top: var(--space-lg);
font-size: var(--text-xl) !important;
line-height: var(--leading-normal) !important;
text-align: left;
}
}
/* ====================================================
CD / Pattern / How We Work / Growth Engine / Outcomes
Editorial vertical journey for organisational evolution.
==================================================== */
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes {
--outcomes-ink: var(--color-midnight-brand);
--outcomes-soft-ink: rgba(0, 42, 78, .72);
--outcomes-muted-ink: rgba(0, 42, 78, .48);
--outcomes-gold: var(--color-text-accent-gold);
--outcomes-line: rgba(0, 42, 78, .16);
--outcomes-journey-inset: clamp(4rem, 5vw, 5.25rem);
--outcomes-journey-gap: clamp(calc(var(--space-lg) - .3rem), 3.4vw, var(--space-xl));
--cd-section-space: clamp(5rem, 7vw, 7.5rem);
position: relative;
overflow: hidden;
background: radial-gradient(42rem 20rem at 14% 16%, rgba(255, 255, 255, .84), transparent 74%), radial-gradient(46rem 24rem at 86% 80%, rgba(0, 42, 78, .055), transparent 76%), linear-gradient(180deg, #f3f6f7 0%, #f8f6f0 100%);
color: var(--outcomes-ink);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-atmosphere::before {
background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)), radial-gradient(36rem 18rem at 52% 18%, rgba(189, 158, 65, .052), transparent 76%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container {
position: relative;
z-index: 2;
width: min(1280px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack {
--stack-space-default: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .78fr) minmax(28rem, 1fr);
align-items: end;
column-gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-eyebrow {
max-width: 28ch;
color: #9a6b12;
letter-spacing: .13em;
}
body .cd-how-we-work--growth-engine .cd-growth-engine-outcomes h2.cd-heading-section {
max-width: 11em;
color: var(--outcomes-ink);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-text-intro {
max-width: var(--measure-wide);
margin-inline: 0;
color: var(--outcomes-soft-ink) !important;
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list {
position: relative;
display: grid;
gap: 0;
width: min(70rem, 100%);
margin: clamp(var(--space-xl), 6vw, var(--space-2xl)) auto 0;
padding: 0;
list-style: none;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list::before {
content: "";
position: absolute;
top: .65rem;
bottom: .65rem;
left: clamp(.75rem, 1.4vw, 1rem);
width: 1px;
background: linear-gradient(180deg, transparent, var(--outcomes-line) 9%, var(--outcomes-line) 91%, transparent);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li {
position: relative;
display: grid;
grid-template-columns: minmax(14rem, .42fr) minmax(0, .58fr);
column-gap: var(--outcomes-journey-gap);
align-items: baseline;
margin: 0;
padding: 0 0 clamp(var(--space-lg), 5vw, var(--space-xl)) var(--outcomes-journey-inset);
color: inherit;
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li::before {
content: "";
position: absolute;
top: .48rem;
left: clamp(.42rem, 1vw, .65rem);
width: .82rem;
height: .82rem;
border: 1px solid var(--outcomes-gold);
border-radius: 999px;
background: #f8f6f0;
box-shadow: 0 0 0 .5rem rgba(189, 158, 65, .07);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li:last-child {
padding-bottom: 0;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list .cd-heading-component {
justify-self: start;
color: var(--outcomes-ink);
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list .cd-text-body {
justify-self: start;
max-width: 43rem;
margin-inline: 0;
color: var(--outcomes-soft-ink);
text-align: left;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel {
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(var(--space-lg), 3.25vw, var(--space-xl));
width: min(58rem, 100%);
margin: clamp(var(--space-xl), 6vw, var(--space-2xl)) auto 0;
padding: clamp(var(--space-medium), 2.2vw, var(--space-lg)) clamp(var(--space-lg), 4vw, var(--space-xl));
background: radial-gradient(34rem 18rem at 100% 0%, rgba(159, 176, 200, .16), transparent 72%), linear-gradient(135deg, #002a4e 0%, #03233d 100%);
border: 1px solid rgba(159, 176, 200, .22);
box-shadow: none;
color: #fff;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel .cd-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 3.35rem;
height: 3.35rem;
color: var(--outcomes-gold);
border: 1px solid rgba(189, 158, 65, .62);
border-radius: 999px;
background: rgba(255, 255, 255, .045);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel .cd-icon svg {
display: block;
width: 1.8rem;
height: 1.8rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel .cd-heading-subsection {
max-width: 42rem;
color: #fff;
text-align: left;
}
@media (max-width: 1280px) {
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes {
--outcomes-journey-gap: calc(var(--space-lg) - .25rem);
}
}
@media (max-width: 1024px) {
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(12rem, .42fr) minmax(0, .58fr);
align-items: end;
column-gap: var(--outcomes-journey-gap);
padding-left: var(--outcomes-journey-inset);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list {
width: min(52rem, 100%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li {
grid-template-columns: minmax(12rem, .42fr) minmax(0, .58fr);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel {
width: 100%;
}
}
@media (max-width: 767px) {
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes {
--cd-section-space: 4rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
align-items: start;
row-gap: var(--space-lg);
padding-left: 0;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-text-intro {
width: calc(100% - var(--space-lg));
margin-left: var(--space-lg);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list {
margin-top: var(--space-lg);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list::before {
left: .5rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li {
grid-template-columns: 1fr;
row-gap: var(--space-xs);
padding: 0 0 var(--space-lg) var(--space-lg);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes .cd-list > li::before {
left: .12rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel {
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
margin-top: var(--space-lg);
padding: var(--space-medium);
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel .cd-icon {
width: 3rem;
height: 3rem;
}
.cd-how-we-work--growth-engine .cd-growth-engine-outcomes > .cd-container > .cd-stack > .cd-panel .cd-heading-subsection {
text-align: left;
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 03 / Definition
Value-forward decision surface.
==================================================== */
.cd-evaluation-definition {
--cd-section-space: clamp(4.5rem, 6vw, 6rem);
position: relative;
overflow: hidden;
background: radial-gradient(48rem 22rem at 16% 18%, rgba(255, 255, 255, .7), transparent 72%), linear-gradient(180deg, #eef2f4 0%, var(--bg-soft) 100%);
color: var(--color-text-primary);
}
.cd-evaluation-definition > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-definition > .cd-atmosphere::before {
background: radial-gradient(46rem 20rem at 82% 20%, rgba(81, 120, 145, .09), transparent 72%), radial-gradient(40rem 18rem at 12% 78%, rgba(0, 42, 78, .045), transparent 74%);
}
.cd-evaluation-definition > .cd-container {
position: relative;
z-index: 2;
}
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .98fr) minmax(22rem, .82fr);
align-items: center;
column-gap: clamp(var(--space-lg), 5.2vw, var(--space-2xl));
}
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
body .cd-evaluation-definition h2.cd-heading-section {
max-width: 15.5em;
text-wrap: balance;
}
.cd-evaluation-definition .cd-panel--light {
align-self: center;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .58)), var(--bg-soft);
border-color: rgba(0, 42, 78, .11);
box-shadow: 0 22px 54px rgba(0, 42, 78, .12), 0 1px 0 rgba(255, 255, 255, .74) inset;
}
.cd-evaluation-definition .cd-panel--light .cd-eyebrow {
color: rgba(0, 42, 78, .62);
}
.cd-evaluation-definition .cd-panel--light .cd-heading-component {
max-width: 27ch;
color: var(--color-midnight-brand);
}
.cd-evaluation-definition .cd-list {
padding-left: 1.1rem;
}
.cd-evaluation-definition .cd-list li::marker {
color: var(--color-midnight-brand-accent-lift);
}
.cd-evaluation-definition .cd-panel--light > .cd-text-body:last-child {
padding-top: var(--space-sm);
border-top: 1px solid rgba(0, 42, 78, .12);
color: rgba(0, 2, 4, .72);
}
@media (max-width: 1279px) {
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
.cd-evaluation-definition .cd-panel--light {
justify-self: stretch;
max-width: 48rem;
}
}
@media (min-width: 768px) and (max-width: 1279px) {
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 {
width: min(var(--measure-wide), 100%);
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 767px) {
.cd-evaluation-definition {
--cd-section-space: 3.5rem;
}
body .cd-evaluation-definition h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-definition > .cd-container > .cd-grid.cd-grid--2 {
row-gap: var(--space-medium);
}
.cd-evaluation-definition .cd-panel--light {
padding: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 04 / Outcomes
Dark leadership value proof surface.
==================================================== */
.cd-evaluation-outcomes {
--cd-section-space: clamp(5rem, 6.8vw, 6.75rem);
position: relative;
overflow: hidden;
background: radial-gradient(60rem 28rem at 82% 14%, rgba(81, 120, 145, .18), transparent 72%), radial-gradient(42rem 22rem at 10% 88%, rgba(45, 113, 103, .11), transparent 76%), linear-gradient(180deg, #002a4e 0%, #06253f 100%);
color: var(--color-text-secondary);
}
.cd-evaluation-outcomes > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-outcomes > .cd-atmosphere::before {
background: radial-gradient(48rem 22rem at 18% 16%, rgba(255, 255, 255, .055), transparent 72%), radial-gradient(42rem 20rem at 88% 78%, rgba(127, 160, 184, .12), transparent 76%);
}
.cd-evaluation-outcomes > .cd-container {
position: relative;
z-index: 2;
}
.cd-evaluation-outcomes > .cd-container > .cd-stack {
max-width: 56rem;
}
body .cd-evaluation-outcomes h2.cd-heading-section {
max-width: 16em;
color: #fff;
text-wrap: balance;
}
.cd-evaluation-outcomes > .cd-container > .cd-stack > .cd-text-intro {
max-width: 48rem;
}
.cd-evaluation-outcomes > .cd-container > .cd-grid.cd-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(var(--space-medium), 3vw, var(--space-lg));
margin-top: var(--space-xl);
}
.cd-evaluation-outcomes .cd-panel--dark {
min-height: clamp(13rem, 16vw, 15.25rem);
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)), rgba(2, 21, 38, .42);
border: 1px solid rgba(159, 176, 200, .2);
box-shadow: 0 18px 44px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .08) inset;
}
.cd-evaluation-outcomes .cd-panel--dark .cd-heading-component {
max-width: 13em;
color: #fff;
line-height: 1.18;
}
.cd-evaluation-outcomes .cd-panel--dark .cd-text-body {
color: rgba(255, 255, 255, .8);
line-height: 1.62;
}
@media (max-width: 1279px) {
.cd-evaluation-outcomes > .cd-container > .cd-grid.cd-grid--3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-evaluation-outcomes {
--cd-section-space: 4rem;
}
body .cd-evaluation-outcomes h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-outcomes > .cd-container > .cd-grid.cd-grid--3 {
grid-template-columns: 1fr;
gap: var(--space-medium);
margin-top: var(--space-lg);
}
.cd-evaluation-outcomes .cd-panel--dark {
min-height: 0;
padding: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 05 / Lenses
Dark connected five-lens framework.
==================================================== */
.cd-evaluation-lenses {
--cd-section-space: clamp(5rem, 7vw, 7rem);
position: relative;
overflow: hidden;
background: radial-gradient(64rem 30rem at 76% 16%, rgba(81, 120, 145, .18), transparent 72%), radial-gradient(52rem 24rem at 12% 82%, rgba(45, 113, 103, .12), transparent 76%), linear-gradient(180deg, #06253f 0%, #002a4e 52%, #031f37 100%);
color: var(--color-text-secondary);
}
.cd-evaluation-lenses > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-lenses > .cd-atmosphere::before {
background: radial-gradient(42rem 20rem at 18% 18%, rgba(255, 255, 255, .055), transparent 72%), radial-gradient(36rem 18rem at 84% 78%, rgba(127, 160, 184, .11), transparent 76%);
}
.cd-evaluation-lenses > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .88fr) minmax(28rem, 1fr);
align-items: center;
column-gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
body .cd-evaluation-lenses h2.cd-heading-section {
max-width: 14em;
color: #fff;
text-wrap: balance;
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--2 > .cd-stack > .cd-text-intro {
max-width: var(--measure-default);
}
.cd-evaluation-lenses__visual {
display: flex;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: .75rem;
border: 1px solid rgba(159, 176, 200, .12);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)), rgba(2, 21, 38, .2);
}
.cd-evaluation-lenses__visual-img {
display: block;
width: min(100%, 38rem);
height: auto;
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(var(--space-sm), 1.8vw, var(--space-medium));
margin-top: var(--space-xl);
}
.cd-evaluation-lenses .cd-lens-card {
--lens-color: var(--color-sky-brand);
min-height: clamp(15rem, 18vw, 17rem);
padding: clamp(var(--space-sm), 2.2vw, var(--space-medium));
background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .022)), rgba(2, 21, 38, .46);
border: 1px solid rgba(159, 176, 200, .18);
border-top-color: var(--lens-color);
box-shadow: 0 18px 44px rgba(0, 0, 0, .16), 0 1px 0 rgba(255, 255, 255, .07) inset;
}
.cd-evaluation-lenses .cd-lens-card--platform {
--lens-color: #4db2ff;
}
.cd-evaluation-lenses .cd-lens-card--content {
--lens-color: #4fd7c5;
}
.cd-evaluation-lenses .cd-lens-card--pathways {
--lens-color: #e0b33a;
}
.cd-evaluation-lenses .cd-lens-card--governance {
--lens-color: #a66cff;
}
.cd-evaluation-lenses .cd-lens-card--measurement {
--lens-color: #ff8a2a;
}
.cd-evaluation-lenses .cd-lens-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1.1rem;
color: var(--lens-color);
border: 1px solid var(--lens-color);
border-radius: 999px;
background: rgba(0, 42, 78, .48);
box-shadow: 0 0 22px rgba(0, 0, 0, .12);
}
.cd-evaluation-lenses .cd-lens-card__icon svg {
display: block;
width: 1.35rem;
height: 1.35rem;
}
.cd-evaluation-lenses .cd-lens-card .cd-heading-component {
max-width: 13em;
color: #fff;
line-height: 1.18;
}
.cd-evaluation-lenses .cd-lens-card .cd-text-body {
color: rgba(255, 255, 255, .78);
line-height: 1.62;
}
.cd-evaluation-lenses__note {
display: flex;
align-items: center;
gap: var(--space-sm);
max-width: 52rem;
margin: var(--space-xl) auto 0;
padding: var(--space-medium);
background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .022)), rgba(2, 21, 38, .5);
border: 1px solid rgba(159, 176, 200, .2);
box-shadow: 0 18px 44px rgba(0, 0, 0, .14), 0 1px 0 rgba(255, 255, 255, .07) inset;
}
.cd-evaluation-lenses__note-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
color: #4fd7c5;
border: 1px solid rgba(79, 215, 197, .82);
border-radius: 999px;
background: rgba(0, 42, 78, .5);
}
.cd-evaluation-lenses__note-icon svg {
display: block;
width: 1.35rem;
height: 1.35rem;
}
.cd-evaluation-lenses__note .cd-text-body {
max-width: none;
color: rgba(255, 255, 255, .82);
}
@media (max-width: 1364px) {
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1279px) {
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .9fr) minmax(26rem, 1fr);
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1023px) {
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-evaluation-lenses__visual {
justify-content: center;
}
}
@media (max-width: 767px) {
.cd-evaluation-lenses {
--cd-section-space: 4rem;
}
.cd-evaluation-lenses > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
body .cd-evaluation-lenses h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-lenses__visual {
display: none;
}
.cd-evaluation-lenses > .cd-container > .cd-grid.cd-grid--5 {
grid-template-columns: 1fr;
gap: var(--space-medium);
margin-top: var(--space-lg);
}
.cd-evaluation-lenses .cd-lens-card {
min-height: 0;
padding: var(--space-medium);
}
.cd-evaluation-lenses__note {
align-items: flex-start;
margin-top: var(--space-lg);
padding: var(--space-medium);
}
}
@media (max-width: 520px) {
.cd-evaluation-lenses__note {
display: block;
}
.cd-evaluation-lenses__note-icon {
margin-bottom: var(--space-sm);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 06 / Pathway
Light program pathway from inquiry to decision.
==================================================== */
.cd-evaluation-pathway {
--pathway-light-warm: #f4f1ea;
--pathway-light-clean: #f7f8fa;
--pathway-panel: rgba(255, 255, 255, .74);
--pathway-midnight: #002a4e;
--pathway-steel: #58708c;
--pathway-blue-grey: #517891;
--pathway-blue-green: #2d7167;
--pathway-gold: #bd9e41;
--pathway-muted: rgba(0, 42, 78, .58);
--pathway-border: rgba(88, 112, 140, .26);
--pathway-shadow: 0 1.25rem 3rem rgba(0, 42, 78, .08);
--pathway-step-shadow: 0 1rem 2.25rem rgba(0, 42, 78, .06);
--pathway-shadow-strong: 0 1.5rem 4rem rgba(0, 42, 78, .12);
--cd-section-space: clamp(5rem, 6.8vw, 6.75rem);
position: relative;
overflow: hidden;
background: radial-gradient(46rem 24rem at 16% 12%, rgba(220, 214, 198, .38), transparent 72%), radial-gradient(42rem 22rem at 86% 88%, rgba(81, 120, 145, .1), transparent 76%), linear-gradient(180deg, var(--pathway-light-clean) 0%, var(--pathway-light-warm) 100%);
color: var(--pathway-midnight);
}
.cd-evaluation-pathway > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-pathway > .cd-atmosphere::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .46), transparent 38%), radial-gradient(34rem 18rem at 72% 18%, rgba(189, 158, 65, .08), transparent 74%);
}
.cd-evaluation-pathway > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-pathway > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .92fr) minmax(22rem, .68fr);
align-items: center;
gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}
.cd-evaluation-pathway > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: 56rem;
}
body .cd-evaluation-pathway h2.cd-heading-section {
max-width: 15em;
color: var(--pathway-midnight);
text-wrap: balance;
}
.cd-evaluation-pathway > .cd-container > .cd-grid.cd-grid--2 > .cd-stack > .cd-text-intro {
max-width: 48rem;
color: rgba(0, 42, 78, .76);
}
.cd-evaluation-pathway__support, .cd-evaluation-pathway .cd-pathway-step, .cd-evaluation-pathway__value {
background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .64)), var(--pathway-panel);
border: 1px solid var(--pathway-border);
box-shadow: var(--pathway-shadow);
}
.cd-evaluation-pathway__support {
position: relative;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
}
.cd-evaluation-pathway__support .cd-heading-component {
color: var(--pathway-midnight);
}
.cd-evaluation-pathway__support .cd-text-body {
color: rgba(0, 42, 78, .72);
}
.cd-evaluation-pathway__track {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(var(--space-sm), 1.8vw, var(--space-medium));
margin-top: var(--space-xl);
}
.cd-evaluation-pathway__track::before {
content: "";
position: absolute;
z-index: 0;
top: 3.55rem;
left: 4%;
right: 4%;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(0, 42, 78, .28) 10%, rgba(0, 42, 78, .36) 50%, rgba(0, 42, 78, .46) 90%, transparent);
}
.cd-evaluation-pathway .cd-pathway-step {
--pathway-number-fill: #6f849c;
position: relative;
z-index: 1;
min-height: clamp(17rem, 19vw, 19.25rem);
padding: clamp(var(--space-medium), 2vw, var(--space-lg));
border-color: rgba(88, 112, 140, .24);
box-shadow: var(--pathway-step-shadow);
}
.cd-evaluation-pathway .cd-pathway-step--context {
--pathway-number-fill: #6f849c;
}
.cd-evaluation-pathway .cd-pathway-step--exploration {
--pathway-number-fill: #58708c;
}
.cd-evaluation-pathway .cd-pathway-step--interpretation {
--pathway-number-fill: #3e6876;
}
.cd-evaluation-pathway .cd-pathway-step--blueprint {
--pathway-number-fill: #244f60;
}
.cd-evaluation-pathway .cd-pathway-step--environment {
--pathway-number-fill: var(--pathway-midnight);
border-color: rgba(88, 112, 140, .24);
box-shadow: 0 1.35rem 3.25rem rgba(0, 42, 78, .09), 0 0 0 1px rgba(0, 42, 78, .08) inset;
}
.cd-evaluation-pathway .cd-pathway-step__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1.1rem;
color: #fff;
font-size: 1rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1;
text-shadow: 0 1px 1px rgba(0, 42, 78, .28);
border: 1px solid color-mix(in srgb, var(--pathway-number-fill) 68%, #fff 32%);
border-radius: 999px;
background: linear-gradient(180deg, color-mix(in srgb, var(--pathway-number-fill) 86%, #fff 14%), var(--pathway-number-fill));
box-shadow: 0 .75rem 1.6rem rgba(0, 42, 78, .12), 0 1px 0 rgba(255, 255, 255, .26) inset;
}
.cd-evaluation-pathway .cd-pathway-step .cd-heading-component {
color: var(--pathway-midnight);
line-height: 1.18;
}
.cd-evaluation-pathway .cd-pathway-step .cd-text-body {
color: rgba(0, 42, 78, .72);
line-height: 1.62;
}
.cd-evaluation-pathway__value {
display: grid;
grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
gap: clamp(var(--space-medium), 4vw, var(--space-xl));
align-items: center;
margin-top: var(--space-xl);
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
border-color: rgba(45, 113, 103, .3);
}
.cd-evaluation-pathway__value .cd-heading-component {
color: var(--pathway-midnight);
}
.cd-evaluation-pathway__value .cd-text-body {
max-width: 44rem;
color: rgba(0, 42, 78, .74);
}
@media (max-width: 1439px) {
.cd-evaluation-pathway__track {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cd-evaluation-pathway__track::before {
display: none;
}
}
@media (max-width: 1279px) {
.cd-evaluation-pathway > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
}
.cd-evaluation-pathway > .cd-container > .cd-grid.cd-grid--2 > .cd-evaluation-pathway__support.cd-panel {
width: 100%;
max-width: none !important;
}
.cd-evaluation-pathway__track {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-evaluation-pathway {
--cd-section-space: 4rem;
}
.cd-evaluation-pathway__support, .cd-evaluation-pathway .cd-pathway-step, .cd-evaluation-pathway__value {
padding: var(--space-medium);
}
.cd-evaluation-pathway > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-evaluation-pathway__track {
grid-template-columns: 1fr;
gap: var(--space-medium);
margin-top: var(--space-lg);
}
.cd-evaluation-pathway .cd-pathway-step {
min-height: 0;
}
.cd-evaluation-pathway__value {
grid-template-columns: 1fr;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 07 / Decision Environment
Dark architecture reveal for connected deliverables.
==================================================== */
.cd-evaluation-decision-env {
--decision-env-midnight: #001c35;
--decision-env-navy: #002a4e;
--decision-env-ink: #031a2e;
--decision-env-line: rgba(159, 176, 200, .22);
--decision-env-text: rgba(255, 255, 255, .82);
--decision-env-muted: rgba(232, 239, 246, .68);
--cd-section-space: clamp(5rem, 7vw, 7rem);
position: relative;
overflow: hidden;
background: radial-gradient(62rem 28rem at 16% 10%, rgba(81, 120, 145, .16), transparent 72%), radial-gradient(54rem 24rem at 88% 76%, rgba(45, 113, 103, .1), transparent 76%), linear-gradient(180deg, var(--decision-env-ink) 0%, var(--decision-env-navy) 46%, var(--decision-env-midnight) 100%);
color: var(--decision-env-text);
}
.cd-evaluation-decision-env > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-decision-env > .cd-atmosphere::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .055), transparent 42%), radial-gradient(34rem 18rem at 72% 20%, rgba(189, 158, 65, .08), transparent 76%);
}
.cd-evaluation-decision-env > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-decision-env > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .95fr) minmax(24rem, .72fr);
align-items: start;
gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
}
.cd-evaluation-decision-env > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: 58rem;
}
body .cd-evaluation-decision-env h2.cd-heading-section {
max-width: 15em;
color: #fff;
text-wrap: balance;
}
.cd-evaluation-decision-env > .cd-container > .cd-grid.cd-grid--2 > .cd-stack > .cd-text-intro {
max-width: 50rem;
color: var(--decision-env-text);
}
.cd-evaluation-decision-env__rail {
color: var(--decision-env-muted);
}
.cd-evaluation-decision-env__rail-item + .cd-evaluation-decision-env__rail-item {
margin-top: var(--space-medium);
padding-top: var(--space-medium);
border-top: 1px solid var(--decision-env-line);
}
.cd-evaluation-decision-env__rail .cd-heading-component {
color: #fff;
line-height: 1.18;
}
.cd-evaluation-decision-env__rail .cd-text-body {
max-width: 34rem;
color: var(--decision-env-muted);
line-height: 1.62;
}
.cd-evaluation-decision-env__figure {
position: relative;
z-index: 2;
width: min(calc(100% - clamp(2rem, 18vw, 18rem)), 72rem);
margin-block-start: clamp(3rem, 7vw, 5.5rem);
margin-inline: auto;
}
.cd-evaluation-decision-env__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin-inline: auto;
border: 1px solid rgba(159, 176, 200, .16);
border-radius: var(--radius-lg);
background: rgba(2, 21, 38, .28);
}
@media (max-width: 1200px) {
.cd-evaluation-decision-env > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-evaluation-decision-env > .cd-container > .cd-grid.cd-grid--2 > .cd-stack, .cd-evaluation-decision-env__rail {
max-width: var(--measure-wide);
}
.cd-evaluation-decision-env__rail .cd-text-body {
max-width: var(--measure-default);
}
}
@media (max-width: 767px) {
.cd-evaluation-decision-env {
--cd-section-space: 4rem;
}
.cd-evaluation-decision-env > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
body .cd-evaluation-decision-env h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-decision-env__rail-item + .cd-evaluation-decision-env__rail-item {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
.cd-evaluation-decision-env__figure {
width: calc(100% - ( 2 * var(--container-gutter-tight) ));
margin-top: var(--space-lg);
}
.cd-evaluation-decision-env__image {
border-radius: var(--radius-md);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 08 / Scenarios
Light editorial ledger for leadership self-identification.
==================================================== */
.cd-evaluation-scenarios {
--scenarios-ink: #002a4e;
--scenarios-muted: rgba(0, 42, 78, .68);
--scenarios-line: rgba(0, 42, 78, .16);
--scenarios-line-strong: rgba(0, 42, 78, .22);
--cd-section-space: clamp(5rem, 6.8vw, 6.75rem);
position: relative;
overflow: hidden;
background: radial-gradient(46rem 24rem at 18% 14%, rgba(220, 214, 198, .28), transparent 70%), radial-gradient(42rem 22rem at 86% 82%, rgba(81, 120, 145, .08), transparent 76%), linear-gradient(180deg, #f7f8fa 0%, #f4f1ea 100%);
color: var(--scenarios-ink);
}
.cd-evaluation-scenarios > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-scenarios > .cd-atmosphere::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 42%), radial-gradient(36rem 18rem at 78% 18%, rgba(189, 158, 65, .07), transparent 76%);
}
.cd-evaluation-scenarios > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .78fr) minmax(0, 1.15fr);
align-items: start;
gap: clamp(var(--space-xl), 7vw, var(--space-3xl));
}
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: 52rem;
}
body .cd-evaluation-scenarios h2.cd-heading-section {
max-width: 16em;
color: var(--scenarios-ink);
text-wrap: balance;
}
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 > .cd-stack > .cd-text-intro {
max-width: 42rem;
color: var(--scenarios-muted);
}
.cd-evaluation-scenarios__ledger {
width: 100%;
}
.cd-evaluation-scenarios__item {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
gap: clamp(var(--space-medium), 4vw, var(--space-xl));
padding-block: clamp(var(--space-medium), 3vw, var(--space-lg));
border-top: 1px solid var(--scenarios-line);
}
.cd-evaluation-scenarios__item:first-child {
border-top-color: var(--scenarios-line-strong);
}
.cd-evaluation-scenarios__item .cd-heading-component {
max-width: 17em;
color: var(--scenarios-ink);
line-height: 1.18;
}
.cd-evaluation-scenarios__item .cd-text-body {
max-width: 34rem;
color: var(--scenarios-muted);
line-height: 1.62;
}
@media (max-width: 1279px) {
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-xl);
}
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: var(--measure-wide);
}
}
@media (max-width: 767px) {
.cd-evaluation-scenarios {
--cd-section-space: 4rem;
}
.cd-evaluation-scenarios > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
body .cd-evaluation-scenarios h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-scenarios > .cd-container > .cd-grid.cd-grid--2 {
row-gap: var(--space-lg);
}
.cd-evaluation-scenarios__item {
grid-template-columns: 1fr;
gap: var(--space-xs);
padding-block: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 09 / Why Cayuse
Dark practitioner point of view.
==================================================== */
.cd-evaluation-why {
--why-midnight: #001c35;
--why-navy: #002a4e;
--why-ink: #031a2e;
--why-text: rgba(255, 255, 255, .82);
--why-muted: rgba(232, 239, 246, .68);
--why-line: rgba(255, 255, 255, .16);
--cd-section-space: clamp(5rem, 7vw, 7rem);
position: relative;
overflow: hidden;
background: radial-gradient(60rem 28rem at 16% 12%, rgba(81, 120, 145, .16), transparent 72%), radial-gradient(46rem 22rem at 84% 84%, rgba(189, 158, 65, .08), transparent 76%), linear-gradient(180deg, var(--why-ink) 0%, var(--why-navy) 48%, var(--why-midnight) 100%);
color: var(--why-text);
}
.cd-evaluation-why > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cd-evaluation-why > .cd-atmosphere::before {
background: linear-gradient(135deg, rgba(255, 255, 255, .052), transparent 40%), radial-gradient(34rem 18rem at 76% 18%, rgba(159, 176, 200, .08), transparent 76%);
}
.cd-evaluation-why > .cd-container {
position: relative;
z-index: 2;
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
align-items: start;
gap: clamp(var(--space-xl), 7vw, var(--space-3xl));
}
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 > .cd-stack {
max-width: 58rem;
}
body .cd-evaluation-why h2.cd-heading-section {
max-width: 15em;
color: #fff;
text-wrap: balance;
}
.cd-evaluation-why__heading-accent {
color: var(--color-text-accent-blue);
}
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 > .cd-stack > .cd-text-intro {
max-width: 50rem;
color: var(--why-text);
}
.cd-evaluation-why__ledger {
width: 100%;
}
.cd-evaluation-why__ledger-lead {
max-width: 34rem;
margin-block-end: var(--space-medium);
color: rgba(255, 255, 255, .86);
}
.cd-evaluation-why__ledger-item {
padding-block: clamp(var(--space-sm), 2.5vw, var(--space-medium));
border-top: 1px solid var(--why-line);
}
.cd-evaluation-why__ledger-item:last-child {
border-bottom: 1px solid var(--why-line);
}
.cd-evaluation-why__ledger-item .cd-text-body {
max-width: 42rem;
color: var(--why-muted);
line-height: 1.62;
}
.cd-evaluation-why__gold {
color: var(--color-text-accent-gold);
font-weight: var(--font-semi-bold);
}
@media (max-width: 1279px) {
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-xl);
}
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 > .cd-stack, .cd-evaluation-why__ledger {
max-width: var(--measure-wide);
}
}
@media (max-width: 767px) {
.cd-evaluation-why {
--cd-section-space: 4rem;
}
.cd-evaluation-why > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
body .cd-evaluation-why h2.cd-heading-section {
max-width: 12.5em;
}
.cd-evaluation-why > .cd-container > .cd-grid.cd-grid--2 {
row-gap: var(--space-lg);
}
.cd-evaluation-why__ledger-lead {
margin-block-end: var(--space-sm);
}
.cd-evaluation-why__ledger-item {
padding-block: var(--space-medium);
}
}
/* ====================================================
CD / Pattern / Operational Evaluation / 10 / Strategic Engagement CTA
Dark quiet close with canonical light panel.
==================================================== */
.cd-evaluation-cta {
position: relative;
overflow: hidden;
background: var(--color-midnight-brand);
}
.cd-evaluation-cta > .cd-atmosphere {
position: absolute;
inset: 0;
z-index: 0;
opacity: .12;
pointer-events: none;
}
.cd-evaluation-cta > .cd-container {
position: relative;
z-index: 2;
}
.cd-evaluation-cta .cd-panel--light {
padding: clamp(var(--space-lg), 4vw, var(--space-xl));
background: var(--bg-soft);
color: var(--color-text-primary);
}
body .cd-evaluation-cta .cd-panel--light .cd-eyebrow {
color: rgba(0, 42, 78, .58);
}
body .cd-evaluation-cta .cd-panel--light h2.cd-heading-section {
color: var(--color-text-primary);
}
.cd-evaluation-cta .cd-panel--light .cd-text-intro {
color: rgba(0, 2, 4, .72) !important;
}
@media (max-width: 767px) {
.cd-evaluation-cta .cd-panel--light {
padding: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / Digital Presence Evaluation / 01 / Dark
==================================================== */
.cd-digital-presence-evaluation {
background: #020711;
padding-top: 32px;
padding-bottom: var(--space-xl);
}
.cd-digital-presence-evaluation > .cd-container {
width: min(1440px, calc(100% - ( 2 * var(--container-gutter) )));
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
display: grid;
grid-template-columns: minmax(720px, 1.14fr) minmax(0, .86fr);
column-gap: var(--space-lg);
row-gap: 0;
align-items: center;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child {
max-width: var(--measure-wide);
gap: var(--space-xs);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-heading-display, .cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 .cd-heading-component {
color: #fff;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-heading-display {
max-width: 19ch;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-eyebrow {
color: var(--color-text-accent-gold);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-text-intro {
max-width: none;
margin-top: var(--space-sm);
padding-right: var(--space-sm);
margin-bottom: var(--space-md);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-text-body {
max-width: none;
padding-right: var(--space-sm);
}
.cd-digital-presence-evaluation .cd-icon {
color: var(--color-text-accent-gold);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
align-self: start;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack {
gap: 0;
padding: 0 var(--space-sm);
background: transparent;
border: 0;
border-left: 1px solid rgba(255, 255, 255, .18);
border-radius: 0;
box-shadow: none;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack:first-child {
border-left: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 .cd-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
margin-bottom: var(--space-xs);
color: var(--color-text-accent-gold);
}
.cd-digital-presence-evaluation .cd-icon svg, .cd-digital-presence-evaluation .cd-icon svg * {
fill: none;
stroke: currentColor;
stroke-width: 1.15;
vector-effect: non-scaling-stroke;
}
.cd-digital-presence-evaluation .cd-icon svg {
width: 24px;
height: 24px;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 .cd-icon svg {
width: 42px;
height: 42px;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 .cd-heading-component {
font-size: var(--h5-size);
line-height: 1.06;
margin: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 .cd-text-body {
margin-top: var(--space-xs);
font-size: .84rem;
line-height: 1.3;
color: rgba(255, 255, 255, .72);
max-width: none;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 + .cd-text-intro {
grid-column: 1/-1;
width: 100%;
max-width: 50rem;
justify-self: center;
margin-top: calc(var(--space-xl) + var(--space-xs));
margin-bottom: var(--space-medium);
padding-inline: var(--space-sm);
color: rgba(255, 255, 255, .86);
text-align: center;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-divider {
grid-column: 1/-1;
width: 100%;
height: 1px;
margin-top: var(--space-lg);
background: #234ed4;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-divider + .cd-text-body {
grid-column: 1/-1;
max-width: 72ch;
margin-top: var(--space-sm);
color: rgba(255, 255, 255, .82);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
display: grid;
grid-template-columns: minmax(0, 1.72fr) auto minmax(240px, .58fr);
column-gap: var(--space-lg);
align-items: stretch;
grid-column: 1/-1;
margin-top: var(--space-medium);
padding: 28px;
background: #eaeff4;
border: 1px solid #d6e0e8;
border-radius: var(--radius-lg);
box-shadow: none;
color: #122651;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-grid.cd-grid--2 {
display: block;
min-width: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-divider {
width: 1px;
height: 100%;
min-height: 8rem;
background: #234ed4;
}
.cd-digital-presence-evaluation .cd-panel .cd-stack {
gap: 0;
}
.cd-digital-presence-evaluation .cd-panel .cd-label {
color: var(--color-text-accent-gold);
font-size: .9rem;
line-height: 1;
letter-spacing: .08em;
margin: 0;
}
.cd-digital-presence-evaluation .cd-panel .cd-heading-section, .cd-digital-presence-evaluation .cd-panel .cd-heading-component {
color: #122651;
}
.cd-digital-presence-evaluation .cd-panel .cd-heading-section {
max-width: none;
margin-top: var(--space-xs);
font-size: 1.85rem;
font-weight: var(--font-medium);
line-height: 1.08;
}
.cd-digital-presence-evaluation .cd-panel .cd-heading-section + .cd-text-body {
margin-top: var(--space-xs);
max-width: 70ch;
line-height: 1.44;
color: rgba(0, 0, 0, .74);
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 > .cd-stack {
padding-top: var(--space-xs);
padding-right: var(--space-sm);
border-top: 1px solid rgba(18, 38, 81, .14);
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 .cd-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.5rem;
margin-bottom: var(--space-xs);
background: rgba(35, 78, 212, .08);
border-radius: 50%;
color: var(--color-text-accent-gold);
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 .cd-icon svg {
width: 44px;
height: 44px;
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 .cd-label {
margin-bottom: var(--space-xs);
font-size: var(--text-xs);
color: #234ed4;
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 .cd-heading-component {
font-size: .92rem;
line-height: 1.08;
margin: 0;
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 .cd-text-body {
margin-top: var(--space-xs);
font-size: .78rem;
line-height: 1.24;
color: rgba(0, 0, 0, .72);
max-width: none;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: stretch;
max-width: 29ch;
padding-top: 12px;
padding-bottom: 12px;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child .cd-heading-component {
font-size: 1rem;
line-height: 1.12;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child .cd-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: var(--space-xs);
background: rgba(35, 78, 212, .08);
border-radius: 50%;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child .cd-icon svg {
width: 32px;
height: 32px;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child .cd-divider {
width: 2.75rem;
height: 2px;
margin: var(--space-xs) 0;
background: #234ed4;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child .cd-text-body {
margin-top: var(--space-xs);
font-size: .82rem;
line-height: 1.3;
color: rgba(0, 0, 0, .74);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child > .cd-stack {
gap: 6px;
margin-top: var(--space-xs);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child > .cd-stack .cd-text-body {
margin-top: 0;
font-size: .8rem;
line-height: 1.34;
}
.cd-digital-presence-evaluation .cd-panel .cd-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
margin-top: 27px;
padding: .82rem 1.05rem;
background: #122651;
border: 1px solid #122651;
border-radius: 5px;
color: #fff;
font-size: .86rem;
font-weight: var(--font-semi-bold);
line-height: 1.1;
text-align: center;
text-decoration: none;
white-space: normal;
box-shadow: none;
transition: background-color var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-digital-presence-evaluation .cd-panel .cd-cta:hover, .cd-digital-presence-evaluation .cd-panel .cd-cta:focus-visible {
background: #0b4f7a;
border-color: #0b4f7a;
color: #fff;
transform: translateY(var(--motion-lift-subtle));
}
@media (max-width: 1439px) {
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 {
grid-column: 1/-1;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-sm);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack {
padding: var(--space-sm);
border-left: 0;
}
}
@media (max-width: 1180px) {
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-sm);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack:first-child {
border-left: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack {
padding: var(--space-sm);
border-left: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-divider, .cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
margin-top: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
grid-template-columns: 1fr;
row-gap: var(--space-lg);
padding: var(--space-lg);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-divider {
width: 100%;
height: 1px;
min-height: 0;
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-sm);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child {
align-self: start;
max-width: 46rem;
padding-top: 0;
padding-bottom: 0;
}
}
@media (max-width: 767px) {
.cd-digital-presence-evaluation > .cd-container {
width: min(100% - (2 * var(--container-gutter-tight)), 100%);
}
.cd-digital-presence-evaluation {
padding-top: 32px;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 {
row-gap: var(--space-medium);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3, .cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 {
grid-template-columns: 1fr;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 {
gap: var(--space-sm);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 > .cd-stack {
padding: var(--space-medium);
border-left: 0;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-divider + .cd-text-body {
margin-top: var(--space-sm);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel {
padding: var(--space-medium);
}
.cd-digital-presence-evaluation .cd-panel .cd-heading-section {
max-width: none;
}
.cd-digital-presence-evaluation .cd-panel .cd-grid.cd-grid--5 {
gap: var(--space-medium);
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-panel > .cd-stack:last-child {
max-width: none;
padding-top: 0;
padding-bottom: 0;
}
.cd-digital-presence-evaluation .cd-panel .cd-cta {
width: 100%;
}
}
@media (min-width: 1181px) {
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child {
max-width: none;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-stack:first-child .cd-heading-display {
max-width: none;
font-size: 40px;
line-height: 1.04;
}
.cd-digital-presence-evaluation > .cd-container > .cd-stack > .cd-grid.cd-grid--2 > .cd-grid.cd-grid--3 + .cd-text-intro {
max-width: 50rem;
margin-top: calc(var(--space-xl) + var(--space-sm));
margin-bottom: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / Capability Depth / 046 / Dark
==================================================== */
.cd-capability-depth .cd-stack + .cd-grid {
margin-top: var(--flow-space-body-to-structure);
}
.cd-capability-depth .cd-grid + .cd-panel {
margin-top: var(--grid-gap-default);
}
.cd-capability-depth .cd-grid > .cd-panel {
display: flex;
flex-direction: column;
height: 100%;
}
.cd-capability-depth .cd-grid > .cd-panel > .cd-stack {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
}
.cd-capability-depth .cd-grid > .cd-panel .cd-link-directional {
margin-top: auto;
}
.cd-capability-depth .cd-link-directional, .cd-capability-depth .cd-link-directional__text, .cd-capability-depth .cd-link-directional__icon {
transform: none !important;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-capability-depth .cd-link-directional:hover, .cd-capability-depth .cd-link-directional:focus-visible, .cd-capability-depth .cd-link-directional:hover .cd-link-directional__text, .cd-capability-depth .cd-link-directional:focus-visible .cd-link-directional__text, .cd-capability-depth .cd-link-directional:hover .cd-link-directional__icon, .cd-capability-depth .cd-link-directional:focus-visible .cd-link-directional__icon {
transform: none !important;
color: #fff;
opacity: 1;
}
/* ====================================================
CD / Pattern / Capability Depth / 046 / Dark
WordPress Engineering local variant
Composition only. System primitives own spacing, typography, surfaces, grid, panel treatment, and atmosphere.
==================================================== */
.cd-capability-depth-wp-engineering > .cd-container > .cd-stack {
margin-bottom: var(--flow-space-body-to-structure);
}
.cd-capability-depth-wp-engineering .cd-grid {
align-items: stretch;
}
.cd-capability-depth-wp-engineering .cd-panel {
display: flex;
flex-direction: column;
height: 100%;
}
.cd-capability-depth-wp-engineering .cd-panel > .cd-stack {
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
}
.cd-capability-depth-wp-engineering .cd-link-directional {
margin-top: auto;
}
.cd-capability-depth-wp-engineering .cd-link-directional, .cd-capability-depth-wp-engineering .cd-link-directional:hover, .cd-capability-depth-wp-engineering .cd-link-directional:focus-visible {
transform: none;
}
.cd-capability-depth-wp-engineering > .cd-container > .cd-text-body {
margin-top: var(--flow-space-body-to-structure);
}
@media (max-width: 1024px) {
.cd-capability-depth-wp-engineering .cd-grid.cd-grid--3 {
grid-template-columns: 1fr;
}
}
/* ====================================================
CD / Pattern Adjacency / Diagnostic Context -> Capability Role
Targeted transition rhythm correction
Phase 2 placement support
==================================================== */
.cd-context-necessary.cd-context-necessary--diagnostic + .cd-capability-role {
padding-top: calc(var(--section-space-y-compact) * .55);
}
/* ====================================================
CD / Pattern / Capability Flow Visual / 031 / Dark
Transferred from Moment Layer composition
==================================================== */
.cd-capability-flow-visual {
position: relative;
}
.cd-capability-flow-visual__panel {
width: 100%;
padding: var(--space-2xl);
border-radius: 24px;
background: #f3f3f3;
border: 1px solid rgba(0, 0, 0, .05);
box-sizing: border-box;
}
.cd-capability-flow-visual__top {
display: grid;
grid-template-columns: 30% 70%;
align-items: start;
column-gap: var(--space-lg);
}
.cd-capability-flow-visual__intro .cd-heading-section {
max-width: 11ch;
}
.cd-capability-flow-visual__body {
max-width: 52ch;
align-self: start;
margin-top: calc(var(--intro-eyebrow-gap) + var(--flow-space-heading-to-body));
}
.cd-capability-flow-visual__visual {
width: 100%;
margin-top: var(--space-xl);
}
.cd-capability-flow-visual__diagram {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
.cd-capability-flow-visual__conclusion {
margin-top: var(--space-2xl);
max-width: 720px;
margin-left: 0;
margin-right: 0;
}
@media (max-width: 767px) {
.cd-capability-flow-visual__panel {
padding: var(--space-xl) var(--space-lg);
border-radius: 18px;
}
.cd-capability-flow-visual__top {
grid-template-columns: 1fr;
}
.cd-capability-flow-visual__body {
max-width: none;
margin-top: 0;
}
.cd-capability-flow-visual__visual {
margin-top: var(--space-lg);
}
.cd-capability-flow-visual__conclusion {
margin-top: var(--space-xl);
max-width: none;
}
}
/* ====================================================
CD / Pattern / Capability Outcomes / 040 / Light
Refinement: interaction + visual polish
==================================================== */
.cd-capability-outcomes__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-lg);
margin-top: var(--flow-space-body-to-structure);
}
@media (max-width: 767px) {
.cd-capability-outcomes__grid {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
}
.cd-capability-outcomes__item {
position: relative;
padding: var(--space-lg);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, .78);
border: 1px solid var(--border-subtle);
box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
transition: transform var(--motion-duration-default) var(--motion-ease-soft), box-shadow var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.cd-capability-outcomes__item:hover {
transform: translateY(var(--motion-lift-subtle));
border-color: var(--border-strong);
background: rgba(255, 255, 255, .92);
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
.cd-capability-outcomes__item .cd-heading-component {
margin-bottom: var(--space-sm);
}
.cd-capability-outcomes__item .cd-text-body {
max-width: 44ch;
}
/* ====================================================
CD / Pattern / Related Capabilities / 041 / Light
==================================================== */
.cd-related-capabilities {
--cd-section-space: 2.5rem;
}
.cd-related-capabilities__intro {
max-width: 68ch;
}
.cd-related-capabilities__intro .cd-heading-section {
max-width: 18ch;
}
.cd-related-capabilities__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.cd-related-capabilities__grid > div, .cd-related-capabilities__grid > div > div {
display: contents;
}
.cd-related-capabilities__grid .gb-loop-item {
display: flex;
min-width: 0;
height: 100%;
}
.cd-related-capabilities__grid .gb-loop-item > .cd-related-capabilities__item {
width: 100%;
height: 100%;
}
.cd-related-capabilities__item {
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
overflow: hidden;
border-radius: var(--radius-md);
box-sizing: border-box;
border: var(--border-default) solid var(--border-subtle);
background: rgba(255, 255, 255, .78);
box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
transition: transform var(--motion-duration-default) var(--motion-ease-soft), box-shadow var(--motion-duration-default) var(--motion-ease-soft), border-color var(--motion-duration-default) var(--motion-ease-soft), background-color var(--motion-duration-default) var(--motion-ease-soft);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.cd-related-capabilities__item:hover {
transform: translateY(var(--motion-lift-subtle));
border-color: var(--border-strong);
background: rgba(255, 255, 255, .92);
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
.cd-related-capabilities__media {
display: block;
width: 100%;
margin: 0;
aspect-ratio: 2/1;
overflow: hidden;
background: rgba(0, 0, 0, .03);
}
.cd-related-capabilities__thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cd-related-capabilities__content {
display: flex;
flex-direction: column;
flex: 1 0 0;
min-height: 0;
width: 100%;
padding: var(--space-sm);
box-sizing: border-box;
}
.cd-related-capabilities__item .cd-heading-component {
font-size: 1.125rem;
line-height: 1.2;
margin-bottom: var(--space-xs);
min-height: calc(1.2em * 2);
}
.cd-related-capabilities__item .cd-text-body {
max-width: none;
color: rgba(0, 0, 0, .74);
font-size: .95rem;
line-height: 1.45;
margin-bottom: 0;
flex: 1 1 auto;
}
.cd-related-capabilities__item .cd-link-directional, .cd-related-capabilities__item .cd-link-directional:hover, .cd-related-capabilities__item .cd-link-directional:focus-visible {
margin-top: var(--space-medium);
padding-top: var(--space-xs);
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: .45rem;
width: auto;
line-height: 1;
transform: none;
transition: color var(--motion-duration-fast) var(--motion-ease-soft), opacity var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-related-capabilities__item .cd-link-directional__text {
display: inline;
margin: 0;
padding: 0;
line-height: 1;
flex: 0 0 auto;
width: auto;
max-width: none;
transform: none;
transition: none;
}
.cd-related-capabilities__item .cd-link-directional__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin: 0;
padding: 0;
width: .84rem;
height: .84rem;
line-height: 1;
min-width: 0;
min-height: 0;
transform: none;
transition: none;
}
.cd-related-capabilities__item .cd-link-directional__icon svg {
display: block;
width: .84rem !important;
height: .84rem !important;
}
@media (max-width: 1100px) {
.cd-related-capabilities__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-related-capabilities__grid {
grid-template-columns: 1fr;
margin-top: var(--space-medium);
gap: var(--space-sm);
row-gap: var(--space-medium);
}
.cd-related-capabilities {
--cd-section-space: 2.25rem;
}
.cd-related-capabilities__item {
display: block;
width: 100%;
padding: 0;
overflow: hidden;
border-radius: var(--radius-md);
box-sizing: border-box;
}
.cd-related-capabilities__media {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
aspect-ratio: 16/5;
border-radius: 0;
overflow: hidden;
box-sizing: border-box;
}
.cd-related-capabilities__thumb {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cd-related-capabilities__content {
display: block;
width: 100%;
max-width: 100%;
padding: 1rem;
box-sizing: border-box;
}
.cd-related-capabilities__item .cd-link-directional {
margin-top: var(--space-medium);
padding-top: var(--space-xs);
}
}
/* ====================================================
CD / Pattern / System Illustration / 042 / Panel Dark
==================================================== */
.cd-system-illustration__panel {
max-width: 1100px;
margin: 0 auto;
padding: var(--space-2xl);
background: #fff;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-panel);
}
.cd-system-illustration__panel > * + * {
margin-top: var(--space-lg);
}
.cd-system-illustration__intro {
max-width: 48rem;
--stack-space-default: var(--space-medium);
}
.cd-system-illustration__intro .cd-heading-section {
max-width: 18ch;
}
.cd-system-illustration__intro .cd-text-intro {
max-width: 36rem;
}
.cd-system-illustration__context {
max-width: 38rem;
}
.cd-system-illustration__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
}
.cd-system-illustration__column {
min-width: 0;
}
@media (max-width: 768px) {
.cd-system-illustration__panel {
padding: var(--space-lg);
}
.cd-system-illustration__intro, .cd-system-illustration__context, .cd-system-illustration__intro .cd-text-intro {
max-width: none;
}
.cd-system-illustration__grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
}
/* ====================================================
CD / Pattern / Capability Distinction / 01 / Light
==================================================== */
.cd-capability-distinction__comparison {
display: grid;
gap: var(--space-sm);
}
.cd-capability-distinction__row {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-lg);
row-gap: var(--space-xs);
align-items: start;
}
.cd-capability-distinction__col {
min-width: 0;
}
.cd-capability-distinction__col > * + * {
margin-top: var(--space-xs);
}
.cd-capability-distinction__kicker {
font-size: .875rem;
opacity: .7;
}
@media (max-width: 767px) {
.cd-capability-distinction__comparison {
gap: var(--space-sm);
}
.cd-capability-distinction__row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-sm);
row-gap: calc(var(--space-xs) * .75);
}
.cd-capability-distinction__col > * + * {
margin-top: calc(var(--space-xs) * .75);
}
.cd-capability-distinction__col .cd-text-body {
font-size: .95rem;
line-height: 1.45;
}
.cd-capability-distinction__kicker {
font-size: .95rem;
opacity: .9;
}
}
.cd-measurement-frame {
display: flex;
flex-direction: column;
gap: var(--space-xl);
background: radial-gradient(circle at top right, rgba(81, 120, 145, .1), transparent 34%), radial-gradient(circle at left 20%, rgba(0, 42, 78, .05), transparent 30%), linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(247, 248, 249, .96));
}
.cd-measurement-frame__inner {
width: min(var(--layout-max-width), 100%);
margin-inline: auto;
}
.cd-measurement-frame__rule, .cd-measurement-frame__grid {
width: min(var(--layout-max-width), 100%);
margin-inline: auto;
padding-inline: var(--space-lg);
box-sizing: border-box;
}
.cd-measurement-frame__inner > * + * {
margin-top: 0;
}
.cd-measurement-frame__intro {
width: 100%;
max-width: 46rem;
--stack-space-default: var(--space-medium);
--flow-space-heading-to-body: var(--space-lg);
}
.cd-measurement-frame__title, .cd-measurement-frame__intro > .cd-measurement-frame__lead:first-child {
margin: 0;
max-width: 15ch;
font-size: var(--heading-section-size) !important;
line-height: var(--heading-line-height-tight) !important;
letter-spacing: var(--heading-tracking-tight);
font-weight: var(--font-semi-bold);
color: var(--color-midnight-brand) !important;
text-wrap: balance;
}
.cd-measurement-frame__lead {
max-width: 41rem;
color: rgba(0, 0, 0, .78) !important;
}
.cd-measurement-frame__body {
max-width: 39rem;
color: rgba(0, 0, 0, .7);
}
.cd-measurement-frame__rule {
height: 1px;
background: linear-gradient(90deg, rgba(0, 42, 78, .3) 0%, rgba(81, 120, 145, .18) 24%, rgba(0, 0, 0, .06) 100%);
}
.cd-measurement-frame__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
align-items: start;
}
.cd-measurement-frame__pillar {
position: relative;
min-width: 0;
padding-top: var(--space-medium);
padding-left: var(--space-medium);
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
--stack-space-default: var(--space-sm);
}
.cd-measurement-frame__pillar::before {
content: "";
position: absolute;
top: var(--space-medium);
left: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg, rgba(81, 120, 145, .42), rgba(81, 120, 145, .06));
}
.cd-measurement-frame__pillar .cd-eyebrow {
color: rgba(0, 42, 78, .52);
}
.cd-measurement-frame__pillar-title {
max-width: 18ch;
color: var(--color-midnight-brand);
}
.cd-measurement-frame__pillar .cd-text-body {
max-width: none;
color: rgba(0, 0, 0, .72);
}
@media (max-width: 1100px) {
.cd-measurement-frame {
gap: var(--space-lg);
}
.cd-measurement-frame__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cd-measurement-frame {
gap: var(--space-medium);
}
.cd-measurement-frame__intro, .cd-measurement-frame__lead, .cd-measurement-frame__body {
max-width: none;
}
.cd-measurement-frame__grid {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
.cd-measurement-frame__pillar {
padding-left: var(--space-sm);
}
.cd-measurement-frame__pillar-title {
max-width: none;
}
}
/* ====================================================
CD / CTA / Strategic Engagement / 09
Fix mobile gutter containment
==================================================== */
.cd-cta-strategic-engagement__inner {
max-width: none;
margin: 0 auto;
padding-left: var(--container-gutter);
padding-right: var(--container-gutter);
text-align: left;
box-sizing: border-box;
}
@media (max-width: 767px) {
.cd-cta-strategic-engagement {
padding-top: var(--space-xl);
padding-bottom: var(--space-xl);
}
.cd-cta-strategic-engagement__inner {
max-width: none;
padding-left: var(--container-gutter-tight);
padding-right: var(--container-gutter-tight);
text-align: left;
}
.cd-cta-strategic-engagement .cd-flow-cta {
justify-content: flex-start;
}
.cd-cta-strategic-engagement .cd-cta {
min-width: 0;
width: 100%;
max-width: 100%;
}
.cd-cta-strategic-engagement__panel {
padding: var(--space-xl) var(--space-lg);
border-radius: 18px;
}
}
/* ====================================================
CD / Component / Media Modal / Video / 01
Internal modal video shell inside GB Overlay.
==================================================== */
.cd-media-modal {
width: min(75vw, 1100px);
margin: 0 auto;
}
.cd-media-modal__inner {
position: relative;
background: var(--color-midnight-brand);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 20px;
box-shadow: 0 28px 64px rgba(0, 0, 0, .34);
padding: 1rem 1rem 1.25rem;
transform: translateY(-4px);
}
.cd-media-modal__header, .cd-media-modal__close-row {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: .85rem;
}
.cd-media-modal__close-row::before {
content: "Digital Performance System Overview";
margin: 0;
color: #fff;
font-size: .95rem;
line-height: 1.2;
font-weight: var(--font-medium);
letter-spacing: .06em;
text-transform: none;
flex: 1 1 auto;
min-width: 0;
max-width: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
order: 1;
}
.cd-media-modal__title {
margin: 0;
color: rgba(255, 255, 255, .7);
font-size: .95rem;
line-height: 1.2;
font-weight: var(--font-medium);
letter-spacing: .06em;
text-transform: none;
flex: 1 1 auto;
min-width: 0;
max-width: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-media-modal__close {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
color: #fff;
cursor: pointer;
transition: background-color var(--motion-duration-fast) var(--motion-ease-soft), transform var(--motion-duration-fast) var(--motion-ease-soft);
}
.cd-media-modal__close:hover, .cd-media-modal__close:focus-visible {
background: rgba(255, 255, 255, .14);
transform: translateY(-1px);
}
.cd-media-modal__close .gb-shape, .cd-media-modal__close svg {
display: block;
}
.cd-media-modal__close svg {
width: 14px;
height: 14px;
}
.cd-media-modal__frame, .cd-media-model__frame {
overflow: hidden;
border-radius: 14px;
background: #000;
aspect-ratio: 16/9;
}
.cd-media-modal__frame .wp-block-video, .cd-media-modal__frame video, .cd-media-model__frame .wp-block-video, .cd-media-model__frame video {
display: block;
width: 100%;
height: 100%;
margin: 0;
}
.cd-media-modal__frame .wp-block-video, .cd-media-model__frame .wp-block-video {
line-height: 0;
}
.cd-media-modal__frame video, .cd-media-model__frame video {
object-fit: contain;
background: #000;
}
@media (max-width: 1024px) {
.cd-media-modal {
width: min(88vw, 960px);
}
}
@media (max-width: 767px) {
.cd-media-modal {
width: 90vw;
}
.cd-media-modal__inner {
border-radius: 16px;
padding: .75rem .75rem 1rem;
}
.cd-media-modal__close {
width: 40px;
height: 40px;
}
.cd-media-modal__title, .cd-media-modal__close-row::before {
max-width: none;
}
.cd-media-modal__frame, .cd-media-model__frame {
border-radius: 12px;
}
}
/* ====================================================
CD / Pattern / Micro-moment / Synthesis + Takeaway / 048 / Light
Composition only. Global panel, surface, typography, and stack roles remain authoritative.
==================================================== */
.cd-micro-moment {
border: var(--border-default) solid rgba(0, 42, 78, .12);
border-inline-start: 4px solid var(--color-text-accent-gold);
}
.cd-micro-moment--synthesis:has(> .cd-micro-moment__artefact) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-medium);
align-items: center;
}
.cd-micro-moment__artefact {
position: relative;
width: 3.4rem;
height: 3.15rem;
flex: 0 0 auto;
}
.cd-micro-moment .cd-micro-moment__artefact {
border: 0;
}
.cd-micro-moment__artefact::before, .cd-micro-moment__artefact::after {
content: "";
position: absolute;
pointer-events: none;
}
.cd-micro-moment__artefact::before {
inset: .48rem .28rem .62rem;
background: linear-gradient(rgba(0, 42, 78, .58), rgba(0, 42, 78, .58)) left top/100% 2px no-repeat, linear-gradient(rgba(0, 42, 78, .46), rgba(0, 42, 78, .46)) left center/82% 2px no-repeat, linear-gradient(rgba(0, 42, 78, .34), rgba(0, 42, 78, .34)) left bottom/64% 2px no-repeat;
}
.cd-micro-moment__artefact::after {
top: .24rem;
bottom: .34rem;
left: .78rem;
width: 2px;
background: var(--color-text-accent-gold);
}
.cd-micro-moment__content > .cd-heading-component, .cd-micro-moment__content > .cd-text-body {
max-width: none;
}
.cd-micro-moment__takeaway {
padding-top: var(--space-sm);
border-top: var(--border-default) solid rgba(0, 42, 78, .12);
}
.cd-website-converting > .cd-micro-moment {
width: min(var(--container-max-width), calc(100% - ( 2 * var(--container-gutter) )));
margin: var(--space-lg) auto;
}
.cd-website-converting > .cd-wp-engineering-system {
padding-bottom: var(--space-lg);
}
.cd-website-converting > .cd-wp-engineering-system + .cd-section {
padding-top: var(--space-medium);
}
.cd-website-converting .cd-recognition-evidence__evidence > .cd-heading-subsection + .cd-recognition-evidence__list {
margin-top: var(--space-medium);
}
@media (max-width: 767px) {
.cd-micro-moment--synthesis:has(> .cd-micro-moment__artefact) {
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.cd-micro-moment__artefact {
width: 2.9rem;
height: 2.7rem;
}
}
/* ====================================================
CD / Landing Page / Lock Strategy Refresh
Composition only. System primitives own spacing, surfaces, typography,
containers, panels, controls, and interaction states.
==================================================== */
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-layout {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
gap: var(--grid-gap-default);
align-items: end;
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis {
padding-top: calc(var(--section-space-y) + var(--space-lg));
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-copy, .cd-lock-strategy--refresh .cd-lock-strategy__thesis-synthesis {
min-width: 0;
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-copy .cd-heading-display {
max-width: 18ch;
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-copy .cd-text-intro {
max-width: 62ch;
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-synthesis {
display: grid;
gap: var(--space-sm);
align-content: end;
padding: clamp(var(--space-medium), 3vw, var(--space-xl));
border-inline-start: 3px solid var(--color-text-accent-gold);
}
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-synthesis > * {
max-width: none;
margin: 0;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card {
grid-column: span 2;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card:nth-child(4) {
grid-column: 2/span 2;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card:nth-child(5) {
grid-column: 4/span 2;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-synthesis {
margin-top: var(--grid-gap-default);
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
border-inline-start: 3px solid var(--color-text-accent-gold);
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-synthesis > * {
max-width: 48ch;
margin: 0;
}
.cd-lock-strategy--refresh .cd-operational-proof-ledger--lock-strategy .cd-operational-proof-ledger__synthesis::before {
background: linear-gradient(110deg, var(--color-midnight-brand), rgba(19, 58, 92, .92));
opacity: 1;
}
.cd-lock-strategy--refresh .cd-cta-lock-strategy__content {
max-width: 62rem;
}
.cd-lock-strategy--refresh .cd-cta-lock-strategy .cd-flow-cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: center;
justify-content: flex-start;
margin-top: var(--flow-space-body-to-structure);
}
@media (max-width: 1024px) {
.cd-lock-strategy--refresh .cd-lock-strategy__thesis-layout {
grid-template-columns: 1fr;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card, .cd-lock-strategy--refresh .cd-lock-strategy__capability-card:nth-child(4), .cd-lock-strategy--refresh .cd-lock-strategy__capability-card:nth-child(5) {
grid-column: auto;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card:last-child {
grid-column: 1/-1;
}
}
@media (max-width: 767px) {
.cd-lock-strategy--refresh .cd-lock-strategy__thesis {
padding-top: calc(var(--section-space-y) + var(--space-medium));
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-grid {
grid-template-columns: 1fr;
}
.cd-lock-strategy--refresh .cd-lock-strategy__capability-card:last-child {
grid-column: auto;
}
.cd-lock-strategy--refresh .cd-cta-lock-strategy .cd-flow-cta, .cd-lock-strategy--refresh .cd-cta-lock-strategy .cd-cta {
width: 100%;
}
}
/* ====================================================
CD / Capability / Journey Handoff
Local composition only. System primitives own the surface,
container, section spacing, and typography roles.
==================================================== */
.cd-customer-user-journey .cd-capability-handoff {
--cd-handoff-ink: var(--color-midnight-brand);
--cd-handoff-muted: var(--color-midnight-brand-accent-lift);
--cd-handoff-line: rgba(0, 42, 78, .14);
--cd-handoff-panel: rgba(255, 255, 255, .72);
border-block: var(--border-default) solid var(--border-divider-light);
}
.cd-customer-user-journey .cd-capability-handoff__intro {
max-width: 52rem;
}
.cd-customer-user-journey .cd-capability-handoff__intro .cd-heading-section {
max-width: 20ch;
}
.cd-customer-user-journey .cd-capability-handoff__intro .cd-text-intro {
max-width: 62ch;
}
.cd-customer-user-journey .cd-capability-handoff__comparison {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(7rem, 10vw, 9rem) minmax(0, 1fr);
gap: var(--space-medium);
align-items: stretch;
margin-top: var(--intro-to-content-gap);
}
.cd-customer-user-journey .cd-capability-handoff__discipline {
display: grid;
grid-template-rows: auto auto 1fr;
gap: var(--space-sm);
min-width: 0;
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: var(--cd-handoff-panel);
border: var(--border-default) solid var(--cd-handoff-line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-panel);
}
.cd-customer-user-journey .cd-capability-handoff__label, .cd-customer-user-journey .cd-capability-handoff__connector-label {
margin: 0;
color: var(--color-text-accent-gold);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .12em;
line-height: 1.4;
text-transform: uppercase;
}
.cd-customer-user-journey .cd-capability-handoff__discipline .cd-heading-component {
max-width: none;
margin: 0;
color: var(--cd-handoff-ink);
}
.cd-customer-user-journey .cd-capability-handoff__list {
display: grid;
align-content: start;
margin: var(--space-sm) 0 0;
padding: 0;
list-style: none;
}
.cd-customer-user-journey .cd-capability-handoff__item {
position: relative;
margin: 0;
padding: var(--space-sm) 0 var(--space-sm) var(--space-medium);
color: var(--cd-handoff-muted);
}
.cd-customer-user-journey .cd-capability-handoff__item::before {
content: "";
position: absolute;
top: 1.15rem;
left: 0;
width: .4rem;
height: .4rem;
background: var(--color-text-accent-gold);
transform: rotate(45deg);
}
.cd-customer-user-journey .cd-capability-handoff__connector {
position: relative;
display: grid;
place-items: center;
min-width: 0;
}
.cd-customer-user-journey .cd-capability-handoff__connector::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: var(--border-default);
background: var(--cd-handoff-line);
}
.cd-customer-user-journey .cd-capability-handoff__connector::after {
content: none;
}
.cd-customer-user-journey .cd-capability-handoff__connector-label {
position: relative;
z-index: 1;
display: inline-flex;
gap: var(--space-xs);
align-items: center;
justify-content: center;
justify-self: center;
width: max-content;
max-width: 100%;
padding-inline: var(--space-xs);
background: var(--bg-soft);
text-align: center;
}
.cd-customer-user-journey .cd-capability-handoff__connector-label::after {
content: "";
width: .55rem;
height: .55rem;
border-top: 1px solid var(--color-text-accent-gold);
border-right: 1px solid var(--color-text-accent-gold);
transform: rotate(45deg);
}
.cd-customer-user-journey .cd-capability-handoff__synthesis {
margin-top: var(--grid-gap-default);
padding: clamp(var(--space-medium), 3vw, var(--space-lg));
background: linear-gradient(100deg, rgba(189, 158, 65, .1), rgba(255, 255, 255, .72));
border: var(--border-default) solid rgba(189, 158, 65, .28);
border-inline-start: 4px solid var(--color-text-accent-gold);
border-radius: var(--radius-lg);
}
.cd-customer-user-journey .cd-capability-handoff__synthesis-text {
max-width: 52ch;
margin: 0;
color: var(--cd-handoff-ink);
font-size: var(--text-lg);
font-weight: 600;
line-height: 1.4;
}
@media (max-width: 1024px) {
.cd-customer-user-journey .cd-capability-handoff__comparison {
grid-template-columns: 1fr;
gap: var(--space-medium);
}
.cd-customer-user-journey .cd-capability-handoff__connector {
min-height: var(--space-xl);
}
.cd-customer-user-journey .cd-capability-handoff__connector::before {
top: 0;
left: 50%;
width: var(--border-default);
height: 100%;
}
.cd-customer-user-journey .cd-capability-handoff__connector-label::after {
transform: rotate(135deg);
}
}
@media (max-width: 767px) {
.cd-customer-user-journey .cd-capability-handoff__comparison {
margin-top: var(--space-xl);
}
.cd-customer-user-journey .cd-capability-handoff__connector {
min-height: auto;
padding-block: var(--space-sm);
}
.cd-customer-user-journey .cd-capability-handoff__connector::before {
content: none;
}
.cd-customer-user-journey .cd-capability-handoff__connector-label::after {
position: relative;
top: -.08rem;
}
.cd-customer-user-journey .cd-capability-handoff__discipline, .cd-customer-user-journey .cd-capability-handoff__synthesis {
padding: var(--space-medium);
}
}