/* =========================================================================
Convergent Strategic Consulting — main stylesheet.
Calm · executive · spacious. Cormorant Garamond + Inter.
========================================================================= */
/* ---------- 1. Design tokens -------------------------------------------- */
:root {
/* Palette */
--cvg-navy: #00506F;
--cvg-navy-deep: #003A52;
--cvg-gold: #D88924;
--cvg-gold-light: #E0A12F;
--cvg-gold-dark: #B0691A;
--cvg-cream: #F7F1E6;
--cvg-cream-deep: #EDE5D3;
--cvg-bg: #F7F1E6;
--cvg-white: #FFFFFF;
--cvg-ink: #17364A; /* dark text */
--cvg-muted: #5A6A78; /* muted text */
--cvg-line: rgba(23, 54, 74, .12);
--cvg-line-soft: rgba(23, 54, 74, .06);
--cvg-navy-line: rgba(255, 255, 255, .14);
/* Type */
--cvg-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
--cvg-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cvg-font-nav: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing */
--cvg-gutter: 32px;
--cvg-container: 1240px;
--cvg-container-wide: 1340px;
/* Radii */
--cvg-radius-sm: 4px;
--cvg-radius-md: 8px;
--cvg-radius-lg: 16px;
/* Shadows (soft, restrained) */
--cvg-shadow-sm: 0 1px 3px rgba(28, 36, 48, .05);
--cvg-shadow: 0 10px 30px rgba(28, 36, 48, .07);
--cvg-shadow-lg: 0 24px 60px rgba(28, 36, 48, .10);
--cvg-ease: cubic-bezier(.22, 1, .36, 1);
--cvg-header-h: 84px;
}
@media (min-width: 1024px) { :root { --cvg-header-h: 100px; } }
/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cvg-header-h) + 20px); }
body {
margin: 0;
font-family: var(--cvg-font-body);
font-size: 15px;
line-height: 28px;
letter-spacing: 0.5px;
color: var(--cvg-ink);
background: var(--cvg-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cvg-navy); text-decoration: none; transition: color .25s var(--cvg-ease); }
a:hover { color: var(--cvg-gold-dark); }
button { font: inherit; cursor: pointer; }
.screen-reader-text { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- 3. Typography ----------------------------------------------- */
h1, h2, h3 {
font-family: var(--cvg-font-display);
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
color: var(--cvg-navy);
margin: 0 0 .4em;
text-transform: lowercase;
}
h4 {
font-family: var(--cvg-font-body);
font-weight: 600;
line-height: 1.2;
color: var(--cvg-navy);
margin: 0 0 .4em;
}
h1 { font-size: clamp(2.5rem, 4vw + 1rem, 3.8rem); line-height: 1; }
h2 { font-size: clamp(2rem, 2.4vw + 1rem, 3.2rem); }
h3 { font-size: clamp(1.4rem, 1vw + 1rem, 1.875rem); }
h4 { font-size: clamp(1.15rem, .5vw + 1rem, 1.375rem); }
p { margin: 0 0 1.1em; }
strong, b { font-weight: 600; }
/* Italic emphasis in headings goes gold (editorial accent) */
h1 em, h2 em, h3 em, .cvg-emphasis {
font-style: italic;
font-weight: inherit;
color: var(--cvg-gold);
}
.cvg-eyebrow {
display: inline-block;
font-family: var(--cvg-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 20px;
}
/* Light variant — for dark backgrounds (hero sections sitting over navy). */
.cvg-eyebrow-light {
display: inline-block;
font-family: var(--cvg-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cvg-gold);
margin-bottom: 20px;
}
/* In any hero where breadcrumb-pill (inline-flex) precedes an eyebrow,
force the eyebrow onto its own line under the pill. */
.cvg-breadcrumb-pill + .cvg-eyebrow,
.cvg-breadcrumb-pill + .cvg-eyebrow-light {
display: block;
width: fit-content;
margin-top: 28px;
}
.cvg-lede {
font-size: clamp(1.125rem, .5vw + 1rem, 1.3125rem);
line-height: 1.65;
color: var(--cvg-muted);
}
/* ---------- 4. Layout primitives ---------------------------------------- */
.cvg-container {
width: 100%;
max-width: var(--cvg-container);
margin: 0 auto;
padding: 0 var(--cvg-gutter);
}
.cvg-section { padding: clamp(72px, 9vw, 140px) 0; position: relative; }
.cvg-section-white { background: var(--cvg-white); }
.cvg-section-bg { background: var(--cvg-bg); }
.cvg-section-navy { background: var(--cvg-navy); color: rgba(255,255,255,.82); }
.cvg-section-navy h1, .cvg-section-navy h2, .cvg-section-navy h3, .cvg-section-navy h4 { color: #fff; }
.cvg-section-navy .cvg-eyebrow { color: var(--cvg-gold); }
.cvg-section-head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.cvg-section-head.is-left { margin-left: 0; text-align: left; }
.cvg-section-head h2 { margin-bottom: 20px; }
.cvg-actions-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
/* ---------- 5. Buttons ---------------------------------------------------
STRICT VARIANT SYSTEM (per CLAUDE.md convention #10):
.cvg-btn-accent — THE conversion CTA. Gold filled. The MONEY path:
"Schedule a Conversation" → Calendly, hero CTAs,
final-CTA primary. Max one per visual area.
.cvg-btn-outline — Secondary / "everything else": Learn more, Read story,
tertiary links. Navy outline → navy fill on hover.
.cvg-btn-light — Outline variant for dark backgrounds. White outline
→ gold fill on hover.
.cvg-btn-ghost — Inline text link with arrow (NOT a real button).
"Learn more →" style inline reads.
.cvg-btn-block — Width modifier (100%).
RESERVED — do NOT use as a page CTA:
.cvg-btn-primary — Reserved for workflow chrome only (multi-step form
"Continue", "Save", "Submit"). No styles yet — add
when first multi-step form lands.
---------------------------------------------------------------- */
.cvg-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 17px 35px;
font-family: var(--cvg-font-nav);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 0;
border: 1.5px solid transparent;
transition: all .3s var(--cvg-ease);
text-decoration: none;
position: relative;
box-shadow: 0 4px 12px rgba(0,30,55,.10);
}
.cvg-btn svg { transition: transform .3s var(--cvg-ease); }
.cvg-btn:hover svg { transform: translateX(3px); }
.cvg-btn:hover { transform: translateY(-2px); }
.cvg-btn:active { transform: translateY(0); }
/* Primary — gold default → navy hover w/ Tidii-style golden underglow */
.cvg-btn-accent {
background: var(--cvg-gold);
color: #fff;
border-color: var(--cvg-gold);
box-shadow: 0 4px 14px rgba(216, 137, 36, .25);
}
.cvg-btn-accent:hover {
background: var(--cvg-navy);
color: #fff;
border-color: var(--cvg-navy);
/* Tidii-style golden halo radiating from button */
box-shadow:
0 0 0 6px rgba(216, 137, 36, .18),
0 14px 32px rgba(216, 137, 36, .40),
0 4px 12px rgba(0, 30, 55, .15);
}
.cvg-btn-outline { background: transparent; color: var(--cvg-navy); border-color: rgba(0,80,111,.35); box-shadow: none; }
.cvg-btn-outline:hover {
background: var(--cvg-navy);
color: #fff;
border-color: var(--cvg-navy);
box-shadow:
0 0 0 6px rgba(0, 80, 111, .12),
0 14px 32px rgba(0, 30, 55, .25);
}
.cvg-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); box-shadow: none; }
.cvg-btn-light:hover {
background: var(--cvg-gold);
color: #fff;
border-color: var(--cvg-gold);
box-shadow:
0 0 0 6px rgba(216, 137, 36, .20),
0 14px 32px rgba(216, 137, 36, .45);
}
.cvg-btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--cvg-font-body);
font-size: 14px; font-weight: 600;
color: var(--cvg-navy);
letter-spacing: 0.02em;
}
.cvg-btn-ghost svg { transition: transform .3s var(--cvg-ease); }
.cvg-btn-ghost:hover { color: var(--cvg-gold-dark); }
.cvg-btn-ghost:hover svg { transform: translateX(4px); }
/* ---------- 6a. Announce bar (dismissible, 24h localStorage) ----------- */
.cvg-announce {
background: var(--cvg-navy-deep);
color: #fff;
font-family: var(--cvg-font-body);
font-size: 14px;
line-height: 1.5;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.cvg-announce.is-hidden { display: none; }
.cvg-announce-inner {
max-width: 1280px;
margin: 0 auto;
padding: 10px clamp(16px, 2vw, 32px);
display: flex; align-items: center; justify-content: center;
gap: 16px;
position: relative;
}
.cvg-announce-text {
margin: 0;
color: rgba(255,255,255,.92);
text-align: center;
}
.cvg-announce-link {
color: var(--cvg-gold);
text-decoration: none;
font-weight: 600;
margin-left: 10px;
transition: color .2s;
display: inline-flex; align-items: center; gap: 6px;
}
.cvg-announce-link:hover { color: #fff; }
.cvg-announce-link span { transition: transform .25s var(--cvg-ease); }
.cvg-announce-link:hover span { transform: translateX(3px); }
.cvg-announce-close {
position: absolute; right: clamp(12px, 1.5vw, 24px); top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
color: rgba(255,255,255,.65);
cursor: pointer;
padding: 6px;
display: inline-grid; place-items: center;
transition: color .2s;
}
.cvg-announce-close:hover { color: #fff; }
@media (max-width: 640px) {
.cvg-announce-inner { padding-right: 44px; }
.cvg-announce-text { font-size: 13px; text-align: left; }
}
/* ---------- 6. Header (full-width: logo left, nav + CTA right) ---------- */
.cvg-site-header {
position: sticky; top: 0; z-index: 50;
background: var(--cvg-white);
border-bottom: 1px solid var(--cvg-line);
transform: translateY(0);
transition: transform .4s var(--cvg-ease), box-shadow .3s var(--cvg-ease);
will-change: transform;
}
/* Constant height — never shrinks. Subtle shadow once scrolled. */
.cvg-site-header.is-scrolled { box-shadow: var(--cvg-shadow-sm); }
/* Slides up on scroll-down, slides back in on scroll-up (no flicker). */
.cvg-site-header.is-hidden { transform: translateY(-100%); }
.cvg-header-inner {
height: var(--cvg-header-h);
display: flex; align-items: center; justify-content: space-between;
gap: 32px;
padding: 0 clamp(20px, 3vw, 48px);
}
.cvg-brand { display: inline-flex; align-items: center; height: 100%; }
.cvg-brand-mark { height: 46px; width: auto; }
@media (min-width: 1024px) { .cvg-brand-mark { height: 58px; } }
.cvg-header-right { display: flex; align-items: center; gap: 16px; }
/* Phone link in header */
.cvg-header-phone {
display: none;
align-items: center;
gap: 8px;
font-family: var(--cvg-font-nav);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--cvg-navy);
transition: color .25s var(--cvg-ease);
}
.cvg-header-phone svg { color: var(--cvg-gold); transition: transform .3s var(--cvg-ease); }
.cvg-header-phone:hover { color: var(--cvg-gold-dark); }
.cvg-header-phone:hover svg { transform: rotate(-10deg); }
@media (min-width: 1024px) { .cvg-header-phone { display: inline-flex; } }
/* Icon-only buttons (search trigger, close, etc.) — CIRCULAR */
.cvg-icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border: 1.5px solid var(--cvg-line);
background: transparent;
color: var(--cvg-navy);
border-radius: 50%;
transition: all .3s var(--cvg-ease);
cursor: pointer;
}
.cvg-icon-btn:hover {
background: var(--cvg-navy);
color: #fff;
border-color: var(--cvg-navy);
box-shadow: 0 0 0 6px rgba(0, 80, 111, .10), 0 6px 18px rgba(0, 30, 55, .18);
transform: translateY(-1px);
}
.cvg-header-search-trigger { display: none; }
@media (min-width: 1024px) { .cvg-header-search-trigger { display: inline-flex; } }
/* Burger */
.cvg-burger {
display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
width: 44px; height: 44px;
background: transparent;
border: 1px solid var(--cvg-line);
cursor: pointer;
transition: all .25s var(--cvg-ease);
}
.cvg-burger span { display: block; width: 20px; height: 2px; background: var(--cvg-navy); transition: transform .3s var(--cvg-ease), opacity .3s var(--cvg-ease); }
.cvg-burger:hover { background: var(--cvg-navy); }
.cvg-burger:hover span { background: #fff; }
@media (min-width: 1024px) { .cvg-burger { display: none; } }
.cvg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cvg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cvg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cvg-primary-nav { display: none; }
@media (min-width: 1024px) { .cvg-primary-nav { display: flex; align-items: center; gap: 4px; } }
.cvg-nav-link {
position: relative;
font-family: var(--cvg-font-nav);
font-size: 14px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
color: var(--cvg-ink);
padding: 10px 14px;
white-space: nowrap;
transition: color .25s var(--cvg-ease);
}
/* Tighter packing 1024–1280px — small viewport but still desktop */
@media (min-width: 1024px) and (max-width: 1280px) {
.cvg-header-inner { gap: 18px; padding: 0 24px; }
.cvg-brand-mark { height: 48px; }
.cvg-nav-link { padding: 10px 8px; font-size: 13px; letter-spacing: 0.3px; }
.cvg-header-right { gap: 12px; }
.cvg-header-cta { padding: 12px 18px; font-size: 12px; letter-spacing: 0.3px; }
.cvg-icon-btn { width: 40px; height: 40px; }
}
/* 1281–1440px — comfortable but still controlled */
@media (min-width: 1281px) and (max-width: 1440px) {
.cvg-nav-link { padding: 10px 12px; }
.cvg-header-right { gap: 16px; }
.cvg-header-cta { padding: 13px 22px; font-size: 13px; }
}
.cvg-nav-link span { position: relative; }
.cvg-nav-link span::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
background: var(--cvg-gold); transform: scaleX(0); transform-origin: left center;
transition: transform .3s var(--cvg-ease);
}
.cvg-nav-link:hover,
.cvg-nav-link.is-current,
.cvg-nav-link.current-menu-item,
.cvg-nav-link.current_page_item { color: var(--cvg-gold-dark); }
.cvg-nav-link:hover span::after,
.cvg-nav-link.is-current span::after,
.cvg-nav-link.current-menu-item span::after,
.cvg-nav-link.current_page_item span::after { transform: scaleX(1); }
.cvg-header-cta { display: none; padding: 13px 26px; font-size: 13px; white-space: nowrap; }
@media (min-width: 1024px) { .cvg-header-cta { display: inline-flex; } }
/* ---------- 6a-b. Nav dropdown (Services parent) ----------------------- */
.cvg-nav-item--has-dropdown {
position: relative;
display: inline-block;
}
.cvg-nav-item--has-dropdown > .cvg-nav-link {
display: inline-flex; align-items: center; gap: 6px;
}
.cvg-nav-caret {
transition: transform .2s var(--cvg-ease);
opacity: .7;
}
.cvg-nav-item--has-dropdown.is-open > .cvg-nav-link .cvg-nav-caret,
.cvg-nav-item--has-dropdown:hover > .cvg-nav-link .cvg-nav-caret {
transform: rotate(180deg);
}
.cvg-nav-dropdown {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: 240px;
background: #fff;
border: 1px solid var(--cvg-line-soft);
box-shadow: 0 18px 40px -18px rgba(0,30,48,.22);
padding: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s var(--cvg-ease), transform .25s var(--cvg-ease), visibility .25s;
z-index: 50;
}
/* Hover bridge — invisible cushion between trigger + dropdown so the mouse
crossing the gap doesn't dismiss it. */
.cvg-nav-dropdown::before {
content: '';
position: absolute;
top: -14px; left: 0; right: 0;
height: 14px;
}
.cvg-nav-item--has-dropdown:hover .cvg-nav-dropdown,
.cvg-nav-item--has-dropdown:focus-within .cvg-nav-dropdown,
.cvg-nav-item--has-dropdown.is-open .cvg-nav-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.cvg-nav-dropdown-item {
display: block;
padding: 11px 16px;
color: var(--cvg-navy);
text-decoration: none;
font-family: var(--cvg-font-body);
font-size: 14.5px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
transition: background .15s, color .15s;
border-radius: 2px;
}
.cvg-nav-dropdown-item:hover,
.cvg-nav-dropdown-item:focus-visible {
background: var(--cvg-cream-deep);
color: var(--cvg-gold-dark);
outline: none;
}
.cvg-nav-dropdown-item--all {
border-bottom: 1px solid var(--cvg-line-soft);
margin-bottom: 4px;
font-family: var(--cvg-font-nav);
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--cvg-gold-dark);
}
.cvg-nav-dropdown-item--all:hover,
.cvg-nav-dropdown-item--all:focus-visible {
color: var(--cvg-navy);
}
/* On mobile, the drawer (cvg-mobile-drawer) handles nav — the desktop
dropdown is hidden. */
@media (max-width: 1023px) {
.cvg-nav-dropdown { display: none; }
.cvg-nav-caret { display: none; }
}
/* ---------- 6b. AJAX Search panel (slides down from header) ------------- */
.cvg-search-panel {
position: absolute; top: 100%; left: 0; right: 0;
background: #fff;
border-bottom: 1px solid var(--cvg-line);
box-shadow: 0 12px 32px rgba(0,30,55,.10);
transform: translateY(-12px);
opacity: 0;
visibility: hidden;
transition: transform .35s var(--cvg-ease), opacity .25s var(--cvg-ease), visibility .35s;
z-index: 40;
}
.cvg-search-panel.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.cvg-search-panel .cvg-header-inner { flex-direction: column; align-items: stretch; height: auto; padding-top: 18px; padding-bottom: 18px; gap: 0; }
.cvg-search-form {
position: relative;
display: flex; align-items: center;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--cvg-line);
}
.cvg-search-icon { color: var(--cvg-gold); display: inline-flex; }
.cvg-search-form input[type="search"] {
flex: 1;
border: 0;
background: transparent;
font-family: var(--cvg-font-display);
font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
color: var(--cvg-navy);
padding: 8px 0;
outline: none;
}
.cvg-search-form input[type="search"]::placeholder { color: rgba(0,80,111,.45); }
.cvg-search-close { width: 38px; height: 38px; }
.cvg-search-results { padding: 8px 0 20px; min-height: 24px; max-height: 60vh; overflow-y: auto; }
.cvg-search-results-list { list-style: none; padding: 0; margin: 0; }
.cvg-search-result {
display: block;
padding: 16px 4px;
border-bottom: 1px solid var(--cvg-line-soft);
transition: background .2s var(--cvg-ease), padding-left .25s var(--cvg-ease);
color: var(--cvg-ink);
}
.cvg-search-result:hover { padding-left: 14px; background: rgba(0,80,111,.04); color: var(--cvg-navy); }
.cvg-search-result-type {
font-family: var(--cvg-font-nav);
font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--cvg-gold-dark); margin-bottom: 4px;
}
.cvg-search-result-title { font-family: var(--cvg-font-display); font-size: 1.25rem; color: var(--cvg-navy); margin: 0 0 4px; text-transform: lowercase; }
.cvg-search-result-excerpt { font-size: 13px; color: var(--cvg-muted); margin: 0; line-height: 1.5; }
.cvg-search-empty { padding: 20px 4px; color: var(--cvg-muted); font-size: 14px; font-style: italic; }
.cvg-search-loading { padding: 16px 4px; color: var(--cvg-muted); font-size: 13px; }
/* ---------- 6c. Mobile drawer (Tidii pattern) -------------------------- */
.cvg-mobile {
position: fixed; inset: 0;
background: var(--cvg-cream);
transform: translateX(100%);
transition: transform .4s var(--cvg-ease);
z-index: 100;
display: flex; flex-direction: column;
overflow-y: auto;
visibility: hidden;
}
.cvg-mobile.is-open { transform: translateX(0); visibility: visible; }
.cvg-mobile-backdrop {
position: fixed; inset: 0;
background: rgba(0,30,55,.5);
z-index: 99;
opacity: 0;
transition: opacity .3s var(--cvg-ease);
cursor: pointer;
}
.cvg-mobile-backdrop.is-open { opacity: 1; }
.cvg-mobile-top {
display: flex; align-items: center; justify-content: space-between;
padding: 20px var(--cvg-gutter);
border-bottom: 1px solid var(--cvg-line);
}
.cvg-mobile-top .cvg-brand-mark { height: 42px; }
.cvg-mobile-nav { flex: 1; padding: 24px var(--cvg-gutter); }
.cvg-mobile-list { list-style: none; padding: 0; margin: 0; }
.cvg-mobile-list li { border-bottom: 1px solid var(--cvg-line-soft); }
.cvg-mobile-list a {
display: block;
padding: 18px 4px;
font-family: var(--cvg-font-display);
font-size: 1.75rem;
color: var(--cvg-navy);
text-transform: lowercase;
transition: padding-left .25s var(--cvg-ease), color .2s var(--cvg-ease);
}
.cvg-mobile-list a:hover { padding-left: 12px; color: var(--cvg-gold-dark); }
.cvg-mobile-actions {
padding: 28px var(--cvg-gutter) 32px;
border-top: 1px solid var(--cvg-line);
display: flex; flex-direction: column; gap: 12px;
}
.cvg-btn-block { width: 100%; }
.cvg-mobile-search {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border: 1px solid var(--cvg-line);
background: #fff;
}
.cvg-mobile-search input[type="search"] {
flex: 1; border: 0; background: transparent;
font-family: var(--cvg-font-body);
font-size: 15px; color: var(--cvg-ink); outline: none;
}
.cvg-mobile-search input[type="search"]::placeholder { color: rgba(0,80,111,.45); }
.cvg-mobile-social { display: flex; gap: 12px; margin-top: 8px; justify-content: center; }
.cvg-mobile-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 1px solid var(--cvg-line);
color: var(--cvg-navy);
transition: all .2s var(--cvg-ease);
}
.cvg-mobile-social a:hover { background: var(--cvg-navy); color: #fff; border-color: var(--cvg-navy); }
body.cvg-mobile-open,
body.cvg-search-open { overflow: hidden; }
/* ---------- 7. HERO ------------------------------------------------------ */
.cvg-hero {
position: relative;
min-height: clamp(640px, 92vh, 920px);
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
}
/* Layer 1 — palm-ray photograph kept in colour, lightly toned down so it
sits gracefully under the navy wash. */
.cvg-hero-bg {
position: absolute; inset: 0;
background-image: url('../images/texture-palm.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
}
/* Custom CMB2 image uses the same treatment for consistency. */
.cvg-hero.has-image .cvg-hero-bg {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
}
/* Layer 2 — navy radial pinned to top-left: stays solid through the
frame's center for easy text readability, then fades cleanly through
the right half so the photo carries the bottom-right unobstructed. */
.cvg-hero-overlay {
position: absolute; inset: 0;
width: 100%; height: 100%;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
var(--cvg-navy-deep) 0%,
var(--cvg-navy-deep) 28%,
rgba(0, 58, 82, .94) 44%,
rgba(0, 80, 111, .60) 62%,
rgba(0, 80, 111, .18) 80%,
transparent 94%
);
}
.cvg-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 40px; }
.cvg-hero-copy { max-width: 680px; }
.cvg-hero-eyebrow {
display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase; color: var(--cvg-gold); margin-bottom: 24px;
}
.cvg-hero h1 {
color: #fff;
font-size: clamp(2.5rem, 4vw + 1rem, 3.8rem);
line-height: 1;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(8, 26, 48, .35);
}
.cvg-hero-sub { font-size: 15px; line-height: 28px; letter-spacing: 0.5px; color: rgba(255,255,255,.92); max-width: 560px; margin-bottom: 36px; }
.cvg-hero .cvg-actions-row { margin-bottom: 0; }
.cvg-hero-support {
font-size: 15px; line-height: 28px; letter-spacing: 0.5px; color: rgba(255,255,255,.72);
max-width: 540px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18);
}
/* ---------- 8. THE REALITY (4 cards) ----------------------------------- */
.cvg-cards-4 { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .cvg-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cvg-cards-4 { grid-template-columns: repeat(4, 1fr); } }
.cvg-reality-card {
background: var(--cvg-bg);
border: 1px solid var(--cvg-line-soft);
border-radius: var(--cvg-radius-lg);
padding: 36px 30px;
transition: transform .3s var(--cvg-ease), box-shadow .3s var(--cvg-ease), border-color .3s var(--cvg-ease);
}
.cvg-reality-card:hover { transform: translateY(-4px); box-shadow: var(--cvg-shadow); border-color: transparent; }
.cvg-reality-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 52px; height: 52px; border-radius: 50%;
background: rgba(11,77,120,.07); color: var(--cvg-navy); margin-bottom: 22px;
}
.cvg-reality-card h3 { font-size: 1.375rem; margin-bottom: 12px; }
.cvg-reality-card p { color: var(--cvg-muted); font-size: 1rem; margin: 0; line-height: 1.6; }
/* ---------- 9. HOW WE HELP (service cards) ----------------------------- */
.cvg-service-card {
background: var(--cvg-white);
border: 1px solid var(--cvg-line-soft);
border-radius: var(--cvg-radius-lg);
padding: 40px 34px;
display: flex; flex-direction: column;
transition: transform .3s var(--cvg-ease), box-shadow .3s var(--cvg-ease);
position: relative;
overflow: hidden;
}
.cvg-service-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--cvg-gold); transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--cvg-ease);
}
.cvg-service-card:hover { transform: translateY(-5px); box-shadow: var(--cvg-shadow-lg); }
.cvg-service-card:hover::before { transform: scaleX(1); }
.cvg-service-num { font-family: var(--cvg-font-display); font-size: 1.5rem; font-style: italic; color: var(--cvg-gold-dark); margin-bottom: 18px; }
.cvg-service-card h3 { font-size: 1.5rem; margin-bottom: 14px; }
.cvg-service-card p { color: var(--cvg-muted); font-size: 1rem; line-height: 1.6; margin-bottom: 22px; flex: 1; }
.cvg-services-foot { text-align: center; margin-top: 56px; }
/* ---------- 10. WHY CLIENTS (2-col image) ------------------------------ */
.cvg-split { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .cvg-split { grid-template-columns: 1fr 1fr; gap: 80px; } }
.cvg-split.is-reverse .cvg-split-media { order: -1; }
.cvg-split-media { border-radius: var(--cvg-radius-lg); overflow: hidden; box-shadow: var(--cvg-shadow-lg); aspect-ratio: 4 / 5; }
.cvg-split-media img { width: 100%; height: 100%; object-fit: cover; }
.cvg-split-copy h2 { margin-bottom: 20px; }
.cvg-feature-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.cvg-feature-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.0625rem; color: var(--cvg-ink); }
.cvg-feature-check {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(229,182,74,.18); color: var(--cvg-gold-dark); margin-top: 2px;
}
/* ---------- 11. OUR APPROACH (timeline) -------------------------------- */
.cvg-timeline { display: grid; gap: 36px; grid-template-columns: 1fr; position: relative; }
@media (min-width: 768px) { .cvg-timeline { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }
@media (min-width: 1024px) { .cvg-timeline { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.cvg-step { position: relative; }
.cvg-step-num {
font-family: var(--cvg-font-display); font-size: 1rem; font-weight: 600;
letter-spacing: .1em; color: var(--cvg-gold-dark); margin-bottom: 18px;
display: inline-flex; align-items: center; gap: 14px;
}
.cvg-step-dot {
width: 14px; height: 14px; border-radius: 50%; background: var(--cvg-gold);
box-shadow: 0 0 0 6px rgba(229,182,74,.18); flex-shrink: 0;
}
/* connecting line on desktop */
@media (min-width: 1024px) {
.cvg-timeline::before {
content: ''; position: absolute; top: 7px; left: 7px; right: 7px; height: 2px;
background: linear-gradient(90deg, var(--cvg-gold) 0%, rgba(229,182,74,.3) 100%);
z-index: 0;
}
.cvg-step { padding-right: 24px; }
}
.cvg-step h3 { font-size: 1.5rem; margin-bottom: 10px; }
.cvg-step p { color: var(--cvg-muted); font-size: 1rem; margin: 0; line-height: 1.6; }
/* ---------- 12. WHO WE SERVE (navy blocks) ----------------------------- */
.cvg-serve-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.cvg-serve-block {
display: grid; grid-template-columns: 1fr; gap: 6px;
padding: 32px 0;
border-top: 1px solid var(--cvg-navy-line);
transition: padding-left .3s var(--cvg-ease);
}
@media (min-width: 768px) { .cvg-serve-block { grid-template-columns: 0.9fr 1.4fr; gap: 40px; align-items: baseline; padding: 36px 0; } }
.cvg-serve-grid .cvg-serve-block:last-child { border-bottom: 1px solid var(--cvg-navy-line); }
.cvg-serve-block:hover { padding-left: 16px; }
.cvg-serve-block h3 {
color: #fff; font-size: 1.625rem; margin: 0;
display: flex; align-items: baseline; gap: 16px;
}
.cvg-serve-num { font-family: var(--cvg-font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; color: var(--cvg-gold); }
.cvg-serve-block p { margin: 0; color: rgba(255,255,255,.72); font-size: 1.0625rem; }
/* ---------- 13. TEAM --------------------------------------------------- */
.cvg-team-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .cvg-team-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cvg-team-card { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 480px) { .cvg-team-card { flex-direction: row; gap: 28px; align-items: flex-start; } }
.cvg-team-photo {
flex-shrink: 0; width: 160px; height: 190px; border-radius: var(--cvg-radius-lg);
overflow: hidden; background: var(--cvg-navy);
display: flex; align-items: center; justify-content: center;
}
.cvg-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.cvg-team-initials { font-family: var(--cvg-font-display); font-size: 3rem; color: rgba(255,255,255,.85); }
.cvg-team-name { font-size: 1.625rem; margin: 0 0 2px; }
.cvg-team-role { color: var(--cvg-gold-dark); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.cvg-team-bio { color: var(--cvg-muted); font-size: 1rem; line-height: 1.65; margin-bottom: 16px; }
/* ---------- 14. FIELD NOTES -------------------------------------------- */
.cvg-notes-grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-bottom: 56px; }
@media (min-width: 720px) { .cvg-notes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cvg-notes-grid { grid-template-columns: repeat(3, 1fr); } }
.cvg-note-card {
background: var(--cvg-white); border: 1px solid var(--cvg-line-soft);
border-radius: var(--cvg-radius-lg); padding: 34px 30px;
display: flex; flex-direction: column; gap: 14px;
transition: transform .3s var(--cvg-ease), box-shadow .3s var(--cvg-ease);
}
.cvg-note-card:hover { transform: translateY(-4px); box-shadow: var(--cvg-shadow); }
.cvg-note-tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--cvg-gold-dark); }
.cvg-note-card h3 { font-size: 1.5rem; margin: 0; line-height: 1.2; flex: 1; }
.cvg-note-more { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cvg-navy); }
.cvg-newsletter {
display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center;
max-width: 560px; margin: 0 auto; padding-top: 16px;
}
.cvg-newsletter-form { display: flex; gap: 12px; width: 100%; max-width: 440px; }
.cvg-newsletter-form input[type=email] { flex: 1; }
@media (max-width: 520px) { .cvg-newsletter-form { flex-direction: column; } }
/* ---------- 15. FINAL CTA ---------------------------------------------- */
.cvg-final-cta { text-align: center; }
.cvg-final-cta h2 { max-width: 760px; margin: 0 auto 20px; color: #fff; }
.cvg-final-cta p { max-width: 600px; margin: 0 auto 36px; color: rgba(255,255,255,.82); font-size: 1.125rem; }
.cvg-final-cta .cvg-actions-row { justify-content: center; }
/* ---------- 16. FOOTER -------------------------------------------------- */
.cvg-site-footer { background: var(--cvg-navy-deep); color: rgba(255,255,255,.78); padding: 84px 0 32px; }
.cvg-site-footer a { color: rgba(255,255,255,.78); }
.cvg-site-footer a:hover { color: var(--cvg-gold); }
.cvg-footer-grid { display: grid; gap: 44px; margin-bottom: 56px; }
@media (min-width: 720px) { .cvg-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }
.cvg-footer-brand .cvg-brand-mark { height: 56px; filter: brightness(0) invert(1); }
.cvg-footer-tagline { color: rgba(255,255,255,.62); font-size: .9375rem; margin-top: 18px; max-width: 320px; }
.cvg-footer-col h4 { color: var(--cvg-gold); font-family: var(--cvg-font-body); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.cvg-footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cvg-footer-col a, .cvg-footer-col p { font-size: .9375rem; margin: 0; }
.cvg-footer-bottom { border-top: 1px solid var(--cvg-navy-line); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; color: rgba(255,255,255,.5); font-size: .8125rem; }
.cvg-social-row { display: flex; gap: 12px; }
.cvg-social-row a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--cvg-navy-line); border-radius: 50%; color: rgba(255,255,255,.8); transition: all .25s var(--cvg-ease); }
.cvg-social-row a:hover { background: var(--cvg-gold); color: var(--cvg-navy); border-color: var(--cvg-gold); }
/* =========================================================================
HOMEPAGE — sections matching client master spec (v3)
Hero · Ribbon · What We Do · What We Offer · Who We Serve ·
Quotes · Approach · Final CTA
========================================================================= */
/* ---------- HERO type overrides (gradient/image live in §7 above) ------ */
.cvg-hero { background: var(--cvg-navy-deep); }
.cvg-hero h1 { font-weight: 400; text-shadow: 0 2px 24px rgba(0,30,48,0.45); }
.cvg-hero h1 em { color: var(--cvg-gold-light); }
.cvg-hero-sub { text-shadow: 0 1px 12px rgba(0,30,48,0.35); }
/* ---------- RIBBON (thin gold strip of services) ----------------------- */
.cvg-ribbon { background: var(--cvg-gold); padding: 18px var(--cvg-gutter); }
.cvg-ribbon-text {
max-width: var(--cvg-container);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0;
font-family: var(--cvg-font-nav);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
line-height: 1.4;
}
.cvg-ribbon-text span {
padding: 0 18px;
opacity: .92;
white-space: nowrap; /* don't break mid-name ever */
border-left: 1px solid rgba(255,255,255,.32);
}
.cvg-ribbon-text span:first-child { border-left: 0; }
/* Tablet — 2 columns, vertical separators */
@media (max-width: 900px) {
.cvg-ribbon { padding: 16px var(--cvg-gutter); }
.cvg-ribbon-text { gap: 6px 0; font-size: 11.5px; letter-spacing: 0.16em; }
.cvg-ribbon-text span { padding: 0 14px; }
}
/* Mobile — clean vertical stack, no dividers, centered */
@media (max-width: 600px) {
.cvg-ribbon { padding: 18px 24px; }
.cvg-ribbon-text {
flex-direction: column;
gap: 8px;
font-size: 11px;
letter-spacing: 0.16em;
}
.cvg-ribbon-text span {
padding: 0;
border-left: 0;
text-align: center;
}
}
/* ---------- WHAT WE DO (cream · 2-col image / copy) -------------------- */
.cvg-wwd {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
}
/* Warm/cool atmospheric washes — softens flatness without distraction */
.cvg-wwd::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 55% 75% at 105% -5%, rgba(216,137,36,.18), transparent 60%),
radial-gradient(ellipse 50% 65% at -5% 105%, rgba(0,80,111,.14), transparent 65%);
}
.cvg-wwd > .cvg-container { position: relative; z-index: 1; }
.cvg-wwd-grid { display: grid; gap: 60px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
.cvg-wwd-grid { grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 120px); }
}
.cvg-wwd-image {
aspect-ratio: 1 / 1;
background-color: var(--cvg-cream-deep);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cvg-wwd-copy .cvg-eyebrow { color: var(--cvg-gold-dark); margin-bottom: 24px; }
.cvg-wwd-copy h2 { margin-bottom: 32px; color: var(--cvg-ink); }
.cvg-wwd-copy p { color: var(--cvg-muted); font-size: 16px; line-height: 1.8; max-width: 520px; }
.cvg-wwd-copy .cvg-btn { margin-top: 16px; }
/* ---------- WHAT WE OFFER (navy bg · 2x2 gold cards) ------------------- */
.cvg-offer {
background: var(--cvg-navy);
color: rgba(255,255,255,.85);
padding: clamp(90px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
/* Premium layered atmosphere: radial spotlight + deeper edges + grain */
background-image:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(ellipse 80% 80% at 100% 100%, rgba(216,137,36,.10), transparent 65%),
linear-gradient(180deg, var(--cvg-navy) 0%, #003F5A 100%);
}
/* Subtle film grain */
.cvg-offer::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
}
/* Faint brand palm-ray watermark, anchored bottom-left */
.cvg-offer::after {
content: '';
position: absolute;
left: -8%; bottom: -28%;
width: 60%; aspect-ratio: 1;
background: url('../images/convergent_Burst.svg') no-repeat center / contain;
opacity: .05;
pointer-events: none;
}
.cvg-offer > .cvg-container { position: relative; z-index: 1; }
.cvg-offer-head { max-width: 800px; margin: 0 auto 72px; text-align: center; position: relative; }
.cvg-offer-head .cvg-eyebrow {
color: var(--cvg-gold);
display: inline-flex; align-items: center; gap: 14px;
}
.cvg-offer-head .cvg-eyebrow::before,
.cvg-offer-head .cvg-eyebrow::after {
content: '';
width: 28px; height: 1px;
background: var(--cvg-gold);
opacity: .55;
}
.cvg-offer-head h2 { color: #fff; margin-bottom: 20px; }
.cvg-offer-head p { color: rgba(255,255,255,.75); font-size: 18px; margin: 0; }
/* 2×2 grid at desktop (4 service cards) */
.cvg-offer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cvg-offer-grid { grid-template-columns: 1fr 1fr; } }
/* Editorial service card — uses the Final CTA's atmospheric navy gradient.
Warm gold radial top-left, deeper navy bottom-right, center wash. */
.cvg-offer-card {
position: relative;
display: flex; flex-direction: column;
justify-content: flex-end;
min-height: 380px;
padding: 0;
color: #fff;
background:
radial-gradient(ellipse 70% 90% at 15% 20%, rgba(216,137,36,.22), transparent 60%),
radial-gradient(ellipse 80% 70% at 85% 100%, rgba(0,80,111,.55), transparent 60%),
radial-gradient(ellipse 100% 80% at 50% 50%, rgba(0,55,80,.45), transparent 70%),
linear-gradient(180deg, var(--cvg-navy-deep) 0%, #001D2D 100%);
border: 1px solid rgba(255,255,255,.10);
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -2px 0 0 var(--cvg-gold),
0 1px 2px rgba(0,30,50,.20);
transition: transform .5s var(--cvg-ease), box-shadow .5s var(--cvg-ease), border-color .5s var(--cvg-ease);
}
/* Subtle paper grain inside the card for tactile depth */
.cvg-offer-card::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .22;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px;
}
/* Animated top accent line — appears on hover */
.cvg-offer-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
transform: scaleX(0);
transform-origin: center;
transition: transform .55s var(--cvg-ease);
z-index: 2;
}
/* Editorial folio number — sized down to be a refined accent, not a hero */
.cvg-offer-card-folio {
position: absolute;
top: 30px;
left: 38px;
font-family: var(--cvg-font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(3rem, 4vw, 4.5rem);
line-height: 1;
color: rgba(216, 137, 36, .55);
letter-spacing: -0.02em;
pointer-events: none;
user-select: none;
transition: color .5s var(--cvg-ease), transform .5s var(--cvg-ease);
z-index: 2;
}
/* Brand burst watermark behind content — organic depth, rotates on hover */
.cvg-offer-card-burst {
position: absolute;
bottom: -40%;
left: -22%;
width: 80%;
aspect-ratio: 1;
background: rgba(216, 137, 36, .04);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
transition: transform .8s var(--cvg-ease), background .5s var(--cvg-ease);
z-index: 1;
pointer-events: none;
}
/* Body wrapper — pinned to the bottom so the folio breathes above */
.cvg-offer-card-body {
position: relative;
z-index: 2;
padding: 0 38px 38px;
}
/* Molecule mark removed — folio is the only header element */
.cvg-offer-card h3 {
color: #fff;
font-size: clamp(1.5rem, 1vw + 1rem, 1.875rem);
line-height: 1.1;
margin: 0 0 14px;
}
.cvg-offer-card p {
color: rgba(255,255,255,.78);
font-size: 15px;
line-height: 1.65;
margin: 0 0 26px;
padding-bottom: 22px;
border-bottom: 1px solid rgba(216,137,36,.30);
}
/* "Learn More" — vibrant ORANGE link + animated hairline arrow */
.cvg-offer-more {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0; border: 0;
font-family: var(--cvg-font-nav);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: #E58921;
transition: gap .3s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-offer-more::after {
content: '';
display: inline-block;
width: 24px; height: 1px;
background: #E58921;
transition: width .35s var(--cvg-ease), background .35s var(--cvg-ease);
}
.cvg-offer-more:hover { gap: 16px; color: #F39B36; }
.cvg-offer-more:hover::after { width: 44px; background: #F39B36; }
/* HOVER — gold bottom border thickens, folio brightens, mark rotates */
.cvg-offer-card:hover {
transform: translateY(-8px);
border-color: rgba(216,137,36,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
inset 0 -3px 0 0 var(--cvg-gold),
0 32px 64px rgba(0,18,30,.55),
0 8px 20px rgba(0,18,30,.30);
}
.cvg-offer-card:hover::after { transform: scaleX(1); }
.cvg-offer-card:hover .cvg-offer-card-folio {
color: #E58921;
transform: translate(4px, 2px);
}
.cvg-offer-card:hover .cvg-offer-card-burst {
background: rgba(216, 137, 36, .10);
transform: rotate(40deg) scale(1.05);
}
/* ----- EXPLORE TILE — 6th grid cell, brand statement ----- */
.cvg-offer-tile {
position: relative;
display: flex; flex-direction: column;
justify-content: center;
align-items: center;
min-height: 380px;
text-align: center;
padding: 48px 36px;
color: #fff;
background:
radial-gradient(ellipse 90% 90% at 50% 0%, rgba(216,137,36,.32), transparent 60%),
radial-gradient(ellipse 90% 90% at 50% 100%, rgba(0,30,55,.65), transparent 70%),
linear-gradient(180deg, #0F4A6A 0%, var(--cvg-navy-deep) 60%, #001D2D 100%);
border: 1px solid rgba(216,137,36,.28);
overflow: hidden;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 1px 2px rgba(0,30,50,.20);
transition: transform .5s var(--cvg-ease), box-shadow .5s var(--cvg-ease), border-color .5s var(--cvg-ease);
}
/* Large gold burst dominating the background — the brand "statement" */
.cvg-offer-tile-burst {
position: absolute;
inset: -15%;
background: rgba(216, 137, 36, .12);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
transition: transform 1s var(--cvg-ease), background .5s var(--cvg-ease);
pointer-events: none;
z-index: 0;
}
/* Brand molecule mark above the headline */
.cvg-offer-tile-mark {
width: 56px; height: 56px;
background: var(--cvg-gold);
-webkit-mask: url('../images/convergent_icon.svg') no-repeat center / contain;
mask: url('../images/convergent_icon.svg') no-repeat center / contain;
margin-bottom: 24px;
position: relative;
z-index: 2;
transition: transform .5s var(--cvg-ease);
}
.cvg-offer-tile-body { position: relative; z-index: 2; max-width: 320px; }
.cvg-offer-tile-eyebrow {
display: block;
font-family: var(--cvg-font-nav);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cvg-gold);
margin-bottom: 18px;
}
.cvg-offer-tile h3 {
color: #fff;
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
line-height: 1.1;
margin: 0 0 28px;
}
.cvg-offer-tile-cta { padding: 14px 26px; font-size: 12px; }
/* Hover — tile lifts + gold rotates dramatically + brand mark animates */
.cvg-offer-tile:hover {
transform: translateY(-8px);
border-color: rgba(216,137,36,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 32px 64px rgba(0,18,30,.55),
0 8px 20px rgba(0,18,30,.30);
}
.cvg-offer-tile:hover .cvg-offer-tile-burst {
transform: rotate(60deg) scale(1.05);
background: rgba(216, 137, 36, .18);
}
.cvg-offer-tile:hover .cvg-offer-tile-mark { transform: rotate(25deg) scale(1.08); }
/* ---------- WHO WE SERVE (cream · sleek list with chevrons) ------------ */
.cvg-serve {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
}
/* Stronger warm/cool atmospheric washes — visible but never loud */
.cvg-serve::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 55% 75% at 105% 10%, rgba(216,137,36,.20), transparent 60%),
radial-gradient(ellipse 50% 65% at -5% 95%, rgba(0,80,111,.16), transparent 65%);
pointer-events: none;
}
.cvg-serve > .cvg-container { position: relative; }
.cvg-serve-head { max-width: 880px; margin-bottom: 48px; }
.cvg-serve-head .cvg-eyebrow {
color: var(--cvg-navy);
font-family: var(--cvg-font-nav);
font-size: 13px;
letter-spacing: 0.22em;
font-weight: 600;
margin-bottom: 28px;
}
.cvg-serve-head h2 { margin-bottom: 28px; font-weight: 400; }
.cvg-serve-head p {
color: var(--cvg-ink);
font-family: var(--cvg-font-body);
font-size: 16px;
line-height: 1.75;
max-width: 720px;
margin: 0;
}
.cvg-serve-list {
list-style: none;
padding: 0;
margin: 0 0 44px;
max-width: 1080px;
}
.cvg-serve-list li {
display: flex;
gap: 16px;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid rgba(23, 54, 74, .14);
font-family: var(--cvg-font-body);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 1.5;
color: var(--cvg-ink);
transition: padding-left .35s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-serve-list li:hover { padding-left: 8px; }
.cvg-serve-list li::before {
content: '';
flex-shrink: 0;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
.cvg-serve-close {
font-family: var(--cvg-font-body);
font-size: 16px;
font-weight: 500;
line-height: 1.75;
color: var(--cvg-ink);
max-width: 720px;
margin: 0;
}
.cvg-serve-close em {
font-style: normal;
color: var(--cvg-ink);
font-weight: 500;
}
/* ---------- WHAT CLIENTS EXPERIENCE (3x2 alternating tiles) ------------ */
.cvg-quotes {
background: var(--cvg-navy);
padding: clamp(90px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
/* Premium layered atmosphere */
background-image:
radial-gradient(ellipse 60% 90% at 100% 50%, rgba(216,137,36,.22), transparent 65%),
radial-gradient(ellipse 60% 90% at 0% 30%, rgba(0,0,0,.30), transparent 65%),
linear-gradient(180deg, #003F5A 0%, var(--cvg-navy) 60%, #003F5A 100%);
}
/* Subtle film grain */
.cvg-quotes::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .3;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
}
/* Giant decorative quote-mark watermark, top-left */
.cvg-quotes::after {
content: '“';
position: absolute;
top: -110px; left: -10px;
font-family: var(--cvg-font-display);
font-size: clamp(360px, 36vw, 520px);
line-height: 1;
color: rgba(216,137,36,.08);
pointer-events: none;
user-select: none;
}
.cvg-quotes > .cvg-container { position: relative; z-index: 1; }
.cvg-quotes-head { max-width: 760px; margin: 0 0 56px; }
.cvg-quotes-head .cvg-eyebrow {
color: var(--cvg-gold);
display: inline-flex; align-items: center; gap: 14px;
}
.cvg-quotes-head .cvg-eyebrow::after {
content: '';
width: 56px; height: 1px;
background: linear-gradient(90deg, var(--cvg-gold), transparent);
}
.cvg-quotes-head h2 { color: #fff; margin: 0; }
.cvg-quotes-head h2 {
color: #fff;
font-size: clamp(2rem, 2.5vw + 1rem, 3.2rem);
line-height: 1.05;
margin: 16px 0 0;
}
.cvg-quotes-head { text-align: center; margin: 0 auto 56px; max-width: 760px; }
.cvg-quotes-head .cvg-eyebrow::before,
.cvg-quotes-head .cvg-eyebrow::after { content: ''; display: none; }
/* Static 3×2 tile grid — alternating navy / gold backgrounds. The
carousel variant was tried and reverted; don't reintroduce. */
.cvg-quotes-watermark {
position: absolute;
top: -40px; right: 4%;
font-family: var(--cvg-font-display);
font-size: clamp(220px, 28vw, 360px);
line-height: 1;
color: rgba(216,137,36,.10);
pointer-events: none;
user-select: none;
z-index: 0;
}
.cvg-quotes-grid {
display: grid; gap: 24px;
grid-template-columns: 1fr;
position: relative; z-index: 1;
}
@media (min-width: 720px) { .cvg-quotes-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 1024px) { .cvg-quotes-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.cvg-quote-tile {
padding: clamp(32px, 3.5vw, 44px) clamp(26px, 3vw, 36px);
position: relative;
overflow: hidden;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease);
display: flex; flex-direction: column; gap: 16px;
min-height: 200px;
}
.cvg-quote-tile:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -22px rgba(0,0,0,.40);
}
.cvg-quote-tile--navy {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
color: #fff;
}
.cvg-quote-tile--gold {
background: var(--cvg-gold);
border: 1px solid var(--cvg-gold);
color: #fff;
}
.cvg-quote-tile-mark {
font-family: var(--cvg-font-display);
font-size: 3rem;
line-height: .6;
color: rgba(255,255,255,.45);
display: block;
}
.cvg-quote-tile--gold .cvg-quote-tile-mark { color: rgba(255,255,255,.75); }
.cvg-quote-tile-text {
margin: 0;
font-family: var(--cvg-font-display);
font-style: italic;
font-size: clamp(1.05rem, .5vw + .9rem, 1.25rem);
line-height: 1.4;
}
.cvg-quote-tile-attr {
display: block;
margin-top: auto;
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.78);
font-style: normal;
}
.cvg-quote-tile--gold .cvg-quote-tile-attr { color: rgba(255,255,255,.90); }
/* ---------- OUR APPROACH (cream · 2-col copy / image) ------------------ */
.cvg-approach {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative;
overflow: hidden;
}
/* Atmospheric warm/cool wash mirrored on the opposite axis from WWD */
.cvg-approach::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 55% 75% at -5% 0%, rgba(0,80,111,.16), transparent 65%),
radial-gradient(ellipse 55% 75% at 105% 100%, rgba(216,137,36,.20), transparent 60%);
}
.cvg-approach > .cvg-container { position: relative; z-index: 1; }
.cvg-approach-grid { display: grid; gap: 60px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
.cvg-approach-grid { grid-template-columns: 1fr 1fr; gap: clamp(60px, 8vw, 120px); }
}
.cvg-approach-copy .cvg-eyebrow { color: var(--cvg-gold-dark); margin-bottom: 24px; }
.cvg-approach-copy h2 { margin-bottom: 32px; color: var(--cvg-ink); }
.cvg-approach-copy p { color: var(--cvg-muted); font-size: 16px; line-height: 1.8; max-width: 520px; }
.cvg-approach-copy .cvg-btn { margin-top: 16px; }
.cvg-approach-image {
aspect-ratio: 4 / 5;
background-color: var(--cvg-cream-deep);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ---------- FINAL CTA (dark · centered, premium atmosphere) ------------ */
.cvg-final-cta {
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(100px, 13vw, 180px) 0;
text-align: center;
position: relative;
overflow: hidden;
/* Layered radials for atmospheric depth */
background-image:
radial-gradient(ellipse 70% 90% at 15% 20%, rgba(216,137,36,.22), transparent 60%),
radial-gradient(ellipse 80% 70% at 85% 100%, rgba(0,80,111,.65), transparent 60%),
radial-gradient(ellipse 100% 80% at 50% 50%, rgba(0,55,80,.40), transparent 70%),
linear-gradient(180deg, var(--cvg-navy-deep) 0%, #001D2D 100%);
}
/* Film grain */
.cvg-final-cta::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .35;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
}
/* Subtle decorative gold horizontal accent line at very top of section */
.cvg-final-cta::after {
content: '';
position: absolute;
left: 50%; top: 0;
transform: translateX(-50%);
width: 120px; height: 2px;
background: linear-gradient(90deg, transparent, var(--cvg-gold), transparent);
opacity: .8;
pointer-events: none;
}
.cvg-final-cta > * { position: relative; z-index: 1; }
.cvg-final-cta .cvg-eyebrow {
color: var(--cvg-gold);
letter-spacing: 0.22em;
display: inline-flex; align-items: center; gap: 16px;
}
.cvg-final-cta .cvg-eyebrow::before,
.cvg-final-cta .cvg-eyebrow::after {
content: '';
width: 32px; height: 1px;
background: var(--cvg-gold);
opacity: .6;
}
.cvg-final-cta h2 {
color: #fff;
max-width: 900px;
margin: 0 auto 28px;
font-size: clamp(2.25rem, 3vw + 1rem, 3.5rem);
}
.cvg-final-cta h2 em { color: var(--cvg-gold-light); }
.cvg-final-cta p {
color: rgba(255,255,255,.82);
max-width: 660px;
margin: 0 auto 40px;
font-size: 17px;
line-height: 1.7;
}
.cvg-final-cta .cvg-actions-row { justify-content: center; }
/* ---------- FOOTER (slim service ribbon + copyright) ------------------- */
.cvg-site-footer {
background: var(--cvg-navy-deep);
background-image: linear-gradient(180deg, #001D2D 0%, var(--cvg-navy-deep) 100%);
padding: 32px var(--cvg-gutter);
color: rgba(255,255,255,.55);
position: relative;
}
/* Gold hairline at very top, fading to transparent at edges */
.cvg-site-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(216,137,36,.45), transparent);
}
.cvg-footer-inner { max-width: var(--cvg-container); margin: 0 auto; }
.cvg-footer-links {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
justify-content: center;
font-family: var(--cvg-font-nav);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cvg-footer-links a { color: rgba(255,255,255,.65); transition: color .25s var(--cvg-ease); text-decoration: none; }
.cvg-footer-links a:hover { color: var(--cvg-gold); }
.cvg-footer-copy {
margin-top: 18px;
text-align: center;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(255,255,255,.42);
}
/* =========================================================================
404 + SEARCH RESULTS — branded
========================================================================= */
.cvg-404-hero,
.cvg-search-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(120px, 14vw, 180px);
overflow: hidden;
min-height: clamp(560px, 70vh, 720px);
display: flex; align-items: center;
}
.cvg-404-hero-bg,
.cvg-search-hero-bg {
position: absolute; inset: 0;
background-position: center center; background-size: cover; background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-404-hero-overlay,
.cvg-search-hero-overlay {
--cvg-hero-overlay-strength: .85;
position: absolute; inset: 0; z-index: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
}
.cvg-404-hero > .cvg-container,
.cvg-search-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-404-hero-content,
.cvg-search-hero-content { max-width: 780px; }
.cvg-404-hero-folio {
font-family: var(--cvg-font-display);
font-style: italic;
font-size: clamp(4rem, 8vw, 7rem);
line-height: 1;
color: var(--cvg-gold);
margin: 24px 0 14px;
opacity: .9;
}
.cvg-404-hero-content h1,
.cvg-search-hero-content h1 {
color: #fff;
font-size: clamp(2.25rem, 4vw + 1rem, 3.8rem);
line-height: 1.06;
margin: 14px 0 22px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-404-hero-sub,
.cvg-search-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.2rem);
line-height: 1.6;
color: rgba(255,255,255,.85);
max-width: 620px;
margin: 0 0 32px;
}
.cvg-404-search {
display: flex; align-items: center;
gap: 0;
max-width: 520px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.20);
transition: background .25s, border-color .25s;
}
.cvg-404-search:focus-within {
background: rgba(255,255,255,.14);
border-color: var(--cvg-gold);
}
.cvg-404-search input {
flex: 1; min-width: 0;
background: transparent;
border: 0;
padding: 14px 18px;
color: #fff;
font-family: var(--cvg-font-body);
font-size: 15px;
outline: none;
}
.cvg-404-search input::placeholder { color: rgba(255,255,255,.55); }
.cvg-404-search button {
display: inline-grid; place-items: center;
width: 52px; height: 100%;
background: var(--cvg-gold);
border: 0;
color: #fff;
cursor: pointer;
transition: background .2s;
align-self: stretch;
}
.cvg-404-search button:hover { background: var(--cvg-gold-dark); }
/* Routes (404 escape grid) */
.cvg-404-routes {
background: var(--cvg-cream);
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-404-routes .cvg-section-head {
max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.cvg-404-routes .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-404-routes-grid {
display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-404-routes-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cvg-404-routes-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.cvg-404-route {
background: #fff;
border: 1px solid var(--cvg-line-soft);
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative; overflow: hidden;
}
.cvg-404-route::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-404-route:hover { transform: translateY(-4px); border-color: rgba(216,137,36,.30); box-shadow: 0 18px 40px -22px rgba(0,30,48,.20); }
.cvg-404-route:hover::after { transform: scaleX(1); }
.cvg-404-route-link {
display: flex; flex-direction: column;
padding: 32px 28px; height: 100%;
color: var(--cvg-ink); text-decoration: none;
}
.cvg-404-route-icon {
display: inline-grid; place-items: center;
width: 52px; height: 52px;
background: var(--cvg-cream-deep);
color: var(--cvg-gold-dark);
margin-bottom: 20px;
}
.cvg-404-route h3 {
font-family: var(--cvg-font-display);
font-size: 1.3rem; line-height: 1.18;
color: var(--cvg-navy);
margin: 0 0 12px;
}
.cvg-404-route p {
color: var(--cvg-ink); font-size: 14.5px; line-height: 1.6;
margin: 0 0 22px; flex: 1;
}
.cvg-404-route-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
margin-top: auto;
}
.cvg-404-route:hover .cvg-404-route-cta { color: var(--cvg-navy); }
.cvg-404-route-cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-404-route:hover .cvg-404-route-cta svg { transform: translateX(3px); }
/* Search results list */
.cvg-search-results {
background: #fff;
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-search-results > .cvg-container { max-width: 860px; }
.cvg-search-results-list {
list-style: none; padding: 0; margin: 0;
}
.cvg-search-result {
padding: 32px 0;
border-bottom: 1px solid var(--cvg-line-soft);
}
.cvg-search-result:first-child { padding-top: 0; }
.cvg-search-result-type {
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
display: inline-block;
margin-bottom: 10px;
}
.cvg-search-result-title {
font-family: var(--cvg-font-display);
font-size: 1.6rem; line-height: 1.15;
margin: 0 0 12px;
}
.cvg-search-result-title a {
color: var(--cvg-navy); text-decoration: none;
transition: color .2s;
}
.cvg-search-result-title a:hover { color: var(--cvg-gold-dark); }
.cvg-search-result-excerpt {
color: var(--cvg-muted);
font-size: 15px; line-height: 1.65;
margin: 0 0 14px;
}
.cvg-search-result-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
text-decoration: none;
transition: gap .25s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-search-result-cta:hover { color: var(--cvg-navy); gap: 12px; }
.cvg-search-result-cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-search-result-cta:hover svg { transform: translateX(3px); }
/* =========================================================================
ABOUT PAGE
========================================================================= */
/* ----- 1. Hero: full-bleed agave image + navy→orange duotone (sibling to home) ----- */
.cvg-about-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
/* Layer 1 — brand image kept in colour, lightly toned down so it sits
gracefully under the navy wash. URL is set inline from CMB2 meta. */
.cvg-about-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
/* Layer 2 — navy radial pinned to top-left. Every alpha stop derives from
the --cvg-hero-overlay-strength custom property so a single slider in the
editor (0–95%) controls the entire wash, including the top-left corner. */
.cvg-about-hero-overlay {
--cvg-hero-overlay-strength: .80;
position: absolute; inset: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
z-index: 0;
}
/* Use the standard site container so hero content aligns vertically with the
sections below (no narrower override). Inner content is constrained instead. */
.cvg-about-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-about-hero-content { max-width: 780px; }
/* Breadcrumb pill — translucent dark on dark bg */
.cvg-breadcrumb-pill {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--cvg-font-nav);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,.72);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 18px;
border-radius: 999px;
margin-bottom: 36px;
transition: border-color .3s var(--cvg-ease), background .3s var(--cvg-ease);
}
.cvg-breadcrumb-pill:hover { border-color: rgba(216,137,36,.45); background: rgba(216,137,36,.08); }
.cvg-breadcrumb-pill a { color: #fff; transition: color .2s var(--cvg-ease); }
.cvg-breadcrumb-pill a:hover { color: var(--cvg-gold); }
.cvg-breadcrumb-pill span[aria-hidden] { color: rgba(255,255,255,.40); }
/* Tidii-style pill badge eyebrow — icon + uppercase text on glass */
.cvg-hero-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px 8px 8px;
margin-bottom: 24px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(216, 137, 36, .42);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
font-family: var(--cvg-font-nav);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #fff;
transition: border-color .3s var(--cvg-ease), background .3s var(--cvg-ease);
}
.cvg-hero-badge:hover { border-color: var(--cvg-gold); background: rgba(216, 137, 36, .12); }
.cvg-hero-badge-mark {
display: inline-block;
width: 24px; height: 24px;
background: var(--cvg-gold);
-webkit-mask: url('../images/convergent_icon.svg') no-repeat center / contain;
mask: url('../images/convergent_icon.svg') no-repeat center / contain;
flex-shrink: 0;
}
.cvg-about-hero h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-about-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
text-shadow: 0 1px 12px rgba(0,30,48,.35);
}
/* Hero ornaments — tuned for dark bg */
.cvg-about-hero .cvg-ornament-mark {
position: absolute; bottom: -10%; left: -6%;
width: clamp(320px, 36vw, 520px);
aspect-ratio: 1;
background: rgba(216, 137, 36, .18);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
animation: cvg-spin-cw 160s linear infinite;
z-index: 1;
}
.cvg-about-hero .cvg-ornament-circle {
width: 100px; height: 100px;
opacity: .9; z-index: 1;
box-shadow: 0 12px 32px rgba(0, 30, 50, .35);
}
.cvg-about-hero .cvg-ornament-circle.is-tr { top: 12%; right: 6%; animation: cvg-drift 12s ease-in-out infinite; }
@media (max-width: 768px) { .cvg-about-hero .cvg-ornament-mark, .cvg-about-hero .cvg-ornament-circle { display: none; } }
/* ----- 2. Our Story: soft warm wash. Brand-aligned echo of the reference
"faded but elegant" approach — pale cream base + barely-there diagonal
gold/navy radials so the section has personality without competing with
the heavier cream bands further down. ----- */
.cvg-about-story {
background: #FBF7EE;
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-about-story::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 65% 80% at 0% 0%, rgba(216,137,36,.09), transparent 65%),
radial-gradient(ellipse 75% 70% at 100% 100%, rgba(0,80,111,.06), transparent 65%);
}
.cvg-about-story > .cvg-container { position: relative; z-index: 1; }
.cvg-about-story-grid {
display: grid; gap: 60px; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
.cvg-about-story-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(60px, 7vw, 96px); }
}
.cvg-about-story-copy .cvg-eyebrow { color: var(--cvg-gold-dark); margin-bottom: 24px; }
.cvg-about-story-copy h2 { margin-bottom: 32px; }
.cvg-about-story-body {
color: var(--cvg-ink);
font-family: var(--cvg-font-body);
font-size: 16px;
line-height: 1.8;
max-width: 540px;
}
.cvg-about-story-body p { margin: 0 0 1.1em; }
.cvg-about-story-body p:last-child { margin: 0; }
.cvg-about-story-image {
aspect-ratio: 4 / 5;
background-color: var(--cvg-cream-deep);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 4px;
}
.cvg-about-story .cvg-ornament-mark {
position: absolute; top: -8%; right: -10%;
width: clamp(260px, 30vw, 420px);
aspect-ratio: 1;
background: rgba(216, 137, 36, .08);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
animation: cvg-spin-ccw 200s linear infinite;
}
.cvg-about-story .cvg-ornament-dot {
position: absolute; top: 18%; left: 4%;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--cvg-gold);
animation: cvg-pulse 4s ease-in-out infinite;
}
@media (max-width: 768px) { .cvg-about-story .cvg-ornament-mark, .cvg-about-story .cvg-ornament-dot { display: none; } }
/* ----- 3. Team: founder cards, photo left + body right ----- */
.cvg-about-team {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
}
.cvg-about-team-grid {
display: grid; gap: 32px; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cvg-about-team-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.cvg-team-card-v2 {
background: var(--cvg-white);
border: 1px solid var(--cvg-line-soft);
border-radius: 6px;
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative;
}
.cvg-team-card-v2::after {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .45s var(--cvg-ease);
}
.cvg-team-card-v2:hover {
transform: translateY(-6px);
border-color: transparent;
box-shadow: 0 28px 60px rgba(0,30,55,.12);
}
.cvg-team-card-v2:hover::after { transform: scaleX(1); }
.cvg-team-card-v2-photo {
aspect-ratio: 1 / 1;
background: var(--cvg-navy);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative;
}
/* Floating contact pills, bottom-left of the photo. Email + LinkedIn.
Translucent dark chips that fully fill in gold on hover. */
.cvg-team-card-v2-social {
position: absolute;
left: 16px; bottom: 16px;
display: flex; gap: 8px;
z-index: 2;
}
.cvg-team-card-v2-social a {
display: inline-grid; place-items: center;
width: 38px; height: 38px;
background: rgba(0,30,48,.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
color: #fff;
text-decoration: none;
transition: background .25s var(--cvg-ease), border-color .25s var(--cvg-ease), transform .25s var(--cvg-ease);
}
.cvg-team-card-v2-social a:hover {
background: var(--cvg-gold);
border-color: var(--cvg-gold);
transform: translateY(-2px);
}
.cvg-team-card-v2-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--cvg-ease); }
.cvg-team-card-v2:hover .cvg-team-card-v2-photo img { transform: scale(1.04); }
.cvg-team-card-v2-initials {
font-family: var(--cvg-font-display);
font-style: italic;
font-size: 4.5rem;
color: rgba(255,255,255,.65);
}
.cvg-team-card-v2-body { padding: 32px 36px 36px; }
.cvg-team-card-v2-role {
display: block;
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 12px;
}
.cvg-team-card-v2-name {
font-family: var(--cvg-font-display);
font-size: clamp(1.5rem, 1vw + 1rem, 2rem);
color: var(--cvg-navy);
margin: 0 0 16px;
line-height: 1.1;
}
.cvg-team-card-v2-name a {
color: inherit;
text-decoration: none;
transition: color .25s var(--cvg-ease);
}
.cvg-team-card-v2-name a:hover { color: var(--cvg-gold-dark); }
.cvg-team-card-v2-actions {
display: flex; flex-wrap: wrap; gap: 18px 24px;
align-items: center;
}
.cvg-team-card-v2-link--bio { color: var(--cvg-gold-dark); border-bottom-color: rgba(216,137,36,.45); }
.cvg-team-card-v2-link--bio:hover { color: var(--cvg-navy); border-bottom-color: var(--cvg-navy); }
.cvg-team-card-v2-bio {
color: var(--cvg-muted);
font-size: 15px;
line-height: 1.7;
margin-bottom: 24px;
/* Render the full bio — no clamps, no overflow hiding. */
display: block;
overflow: visible;
}
.cvg-team-card-v2-bio p { margin: 0 0 1em; }
.cvg-team-card-v2-bio p:last-child { margin: 0; }
/* Equalize cards in the 2-up grid so a longer bio doesn't make one card
look taller than the other on desktop. */
.cvg-team-card-v2 { height: 100%; }
.cvg-about-team-grid { align-items: stretch; }
.cvg-team-card-v2-body { display: flex; flex-direction: column; }
.cvg-team-card-v2-body .cvg-team-card-v2-link--bio { margin-top: auto; }
.cvg-team-card-v2-link {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--cvg-navy);
border-bottom: 1px solid rgba(0,80,111,.25);
padding-bottom: 4px;
transition: color .25s var(--cvg-ease), border-color .25s var(--cvg-ease), gap .25s var(--cvg-ease);
}
.cvg-team-card-v2-link:hover { color: var(--cvg-gold-dark); border-color: var(--cvg-gold); gap: 12px; }
/* ----- 4. What We Believe: deeper cream so it reads as a distinct band
from the Team section above (which uses the lighter --cvg-cream). ----- */
.cvg-about-believe {
background: var(--cvg-cream-deep);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-about-believe::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 55% 75% at 100% 0%, rgba(216,137,36,.18), transparent 60%),
radial-gradient(ellipse 70% 50% at 0% 100%, rgba(0,80,111,.08), transparent 65%);
}
.cvg-about-believe > .cvg-container { position: relative; z-index: 1; max-width: 1080px; }
.cvg-about-believe-head { max-width: 760px; margin-bottom: 56px; }
.cvg-about-believe-head .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-about-believe-head h2 { margin-bottom: 22px; }
.cvg-about-believe-head p {
font-size: 16px; line-height: 1.75; color: var(--cvg-muted); max-width: 680px; margin: 0;
}
.cvg-about-believe .cvg-ornament-circle {
width: 100px; height: 100px;
opacity: .8; z-index: 0;
}
.cvg-about-believe .cvg-ornament-circle.is-bl { bottom: 6%; left: 4%; animation: cvg-drift-x 14s ease-in-out infinite reverse; }
@media (max-width: 768px) { .cvg-about-believe .cvg-ornament-circle { display: none; } }
/* ----- 5. Where We Work: deep navy, distinct from the duotone hero -----
Hero owns the orange spectrum; this section stays cool — pure navy with
a subtle blue vignette so the two sections read as visually distinct. */
.cvg-about-where {
background: var(--cvg-navy-deep);
color: rgba(255,255,255,.85);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
background-image:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(11,77,120,.45), transparent 70%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(7,43,69,.55), transparent 70%),
linear-gradient(180deg, var(--cvg-navy-deep) 0%, #022538 100%);
}
.cvg-about-where::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .3; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
}
.cvg-about-where > .cvg-container { position: relative; z-index: 1; }
.cvg-about-where .cvg-section-head { max-width: 800px; margin: 0 auto 72px; text-align: center; }
.cvg-about-where .cvg-eyebrow { color: var(--cvg-gold); }
.cvg-about-where h2 { color: #fff; margin-bottom: 20px; }
.cvg-about-where-grid {
display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-about-where-grid { grid-template-columns: 1fr 1fr; } }
.cvg-about-where-block {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
padding: 40px 36px;
transition: transform .35s var(--cvg-ease), background .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative;
overflow: hidden;
}
.cvg-about-where-block::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-about-where-block:hover {
transform: translateY(-4px);
background: rgba(255,255,255,.07);
border-color: rgba(216,137,36,.30);
}
.cvg-about-where-block:hover::after { transform: scaleX(1); }
.cvg-about-where-num {
display: block;
font-family: var(--cvg-font-display);
font-style: italic;
font-size: 1.75rem;
color: var(--cvg-gold);
margin-bottom: 18px;
line-height: 1;
}
.cvg-about-where-block h3 {
color: #fff;
font-size: clamp(1.375rem, .8vw + 1rem, 1.625rem);
margin: 0 0 12px;
line-height: 1.2;
}
.cvg-about-where-block p {
color: rgba(255,255,255,.78);
font-size: 15px; line-height: 1.6; margin: 0;
}
.cvg-about-where .cvg-ornament-mark {
width: clamp(220px, 25vw, 360px);
aspect-ratio: 1;
background: url('../images/convergent_Burst.svg') no-repeat center / contain;
opacity: .05;
}
.cvg-about-where .cvg-ornament-mark.is-tl { top: -6%; left: -4%; animation: cvg-spin-cw 200s linear infinite; }
.cvg-about-where .cvg-ornament-mark.is-br { bottom: -6%; right: -4%; background-image: url('../images/convergent_Center.svg'); animation: cvg-spin-ccw 240s linear infinite; }
@media (max-width: 768px) { .cvg-about-where .cvg-ornament-mark { display: none; } }
/* ----- 6. How We Show Up: same chevron-list pattern on cream ----- */
.cvg-about-showup {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-about-showup::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 50% 70% at 0% 100%, rgba(0,80,111,.12), transparent 65%);
}
.cvg-about-showup > .cvg-container { position: relative; z-index: 1; max-width: 1080px; }
.cvg-about-showup .cvg-ornament-circle {
width: 90px; height: 90px;
opacity: .8; z-index: 0;
}
.cvg-about-showup .cvg-ornament-circle.is-tr { top: 12%; right: 4%; animation: cvg-drift 14s ease-in-out infinite; }
@media (max-width: 768px) { .cvg-about-showup .cvg-ornament-circle { display: none; } }
/* ---------- 17. PAGE HERO + BLOG (interior, simple) -------------------- */
.cvg-page-hero { background: var(--cvg-white); padding: clamp(72px,9vw,128px) 0 clamp(40px,5vw,64px); border-bottom: 1px solid var(--cvg-line); }
.cvg-page-hero-title { margin-bottom: 18px; }
.cvg-page-hero-sub { font-size: 1.15rem; max-width: 720px; color: var(--cvg-muted); margin: 0; }
.cvg-grid { display: grid; gap: 28px; }
.cvg-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .cvg-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .cvg-grid-3 { grid-template-columns: repeat(3,1fr); } }
.cvg-pagination { margin-top: 56px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cvg-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--cvg-radius-sm); border: 1px solid var(--cvg-line); color: var(--cvg-navy); }
.cvg-pagination .page-numbers.current { background: var(--cvg-navy); color: #fff; border-color: var(--cvg-navy); }
.cvg-blog-tabs { margin-bottom: 40px; }
.cvg-blog-tabs-rail { display: flex; gap: 8px; flex-wrap: wrap; }
.cvg-blog-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--cvg-radius-sm); border: 1px solid var(--cvg-line); font-size: 13px; color: var(--cvg-navy); background: var(--cvg-white); }
.cvg-blog-tab.is-active { background: var(--cvg-navy); color: #fff; border-color: var(--cvg-navy); }
.cvg-blog-tab-count { font-size: 11px; opacity: .7; }
.cvg-empty { text-align: center; padding: 64px 0; }
.cvg-breadcrumbs { padding: 18px 0; background: var(--cvg-bg); border-bottom: 1px solid var(--cvg-line); }
.cvg-breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .8125rem; color: var(--cvg-muted); }
.cvg-breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 8px; opacity: .5; }
.cvg-reading-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--cvg-gold); z-index: 60; transition: width .08s linear; }
/* =========================================================================
INSIGHTS / BLOG — TiDii architecture ported to Convergent brand tokens
- Hero: Convergent locked dark hero spec (convention #9) — same dimensions
as About + Services + single service.
- Featured card (cream bg), posts grid (white), single post body (2-col
with content + author aside), tags, share row, related posts.
- Hover animations: card lift 4px + image scale 1.04 + CTA arrow slide 3px.
========================================================================= */
/* ----- Insights index hero ----------------------------------------------- */
.cvg-insights-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-insights-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-insights-hero-overlay {
--cvg-hero-overlay-strength: .80;
position: absolute; inset: 0; z-index: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
}
.cvg-insights-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-insights-hero-content { max-width: 780px; }
.cvg-insights-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-insights-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0 0 32px;
}
.cvg-insights-hero-cats {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.cvg-insights-hero-cat {
display: inline-flex; align-items: center;
padding: 8px 16px;
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.85);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
text-decoration: none;
transition: background .25s var(--cvg-ease), border-color .25s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-insights-hero-cat:hover,
.cvg-insights-hero-cat.is-current {
background: var(--cvg-gold);
border-color: var(--cvg-gold);
color: #fff;
}
/* ----- Featured post (cream bg) ------------------------------------------ */
.cvg-blog-feature {
background: var(--cvg-cream);
padding: clamp(70px, 9vw, 130px) 0 clamp(50px, 6vw, 90px);
}
.cvg-blog-feature__card {
display: grid; gap: 0;
grid-template-columns: 1fr;
background: #fff;
border: 1px solid var(--cvg-line-soft);
overflow: hidden;
text-decoration: none;
color: var(--cvg-ink);
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative;
}
@media (min-width: 768px) { .cvg-blog-feature__card { grid-template-columns: 1fr 1fr; } }
.cvg-blog-feature__card::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-blog-feature__card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 22px 50px -22px rgba(0,30,48,.22);
}
.cvg-blog-feature__card:hover::after { transform: scaleX(1); }
.cvg-blog-feature__media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
margin: 0;
}
/* On desktop the grid is 2-col, so let the image fill the card's row height
instead of locking to 4:3 (which leaves dead space below when the body
column is taller). */
@media (min-width: 768px) {
.cvg-blog-feature__media { aspect-ratio: auto; height: 100%; min-height: 100%; }
}
.cvg-blog-feature__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .6s var(--cvg-ease);
}
.cvg-blog-feature__card:hover .cvg-blog-feature__img { transform: scale(1.03); }
.cvg-blog-feature__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--cvg-cream-deep), var(--cvg-cream));
color: var(--cvg-navy);
}
.cvg-blog-feature__badge {
position: absolute; top: 20px; left: 20px;
background: var(--cvg-gold);
color: #fff;
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
padding: 6px 14px;
box-shadow: 0 6px 14px rgba(216,137,36,.35);
}
.cvg-blog-feature__body {
padding: clamp(28px, 3vw, 48px);
display: flex; flex-direction: column; justify-content: center;
}
.cvg-blog-feature__cat {
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 14px;
}
.cvg-blog-feature__title {
font-family: var(--cvg-font-display);
font-size: clamp(1.6rem, 1.5vw + 1rem, 2.4rem);
line-height: 1.1;
color: var(--cvg-navy);
margin: 0 0 16px;
}
.cvg-blog-feature__excerpt {
color: var(--cvg-ink);
font-size: 15.5px;
line-height: 1.65;
margin: 0 0 18px;
}
.cvg-blog-feature__meta {
display: flex; gap: 8px; align-items: center;
font-size: 13px; color: var(--cvg-muted);
font-family: var(--cvg-font-body); letter-spacing: .02em;
margin-bottom: 22px;
}
.cvg-blog-feature__card .cvg-btn { align-self: flex-start; }
/* ----- Posts grid (white bg) --------------------------------------------- */
.cvg-blog-grid {
background: #fff;
padding: clamp(70px, 9vw, 130px) 0 clamp(80px, 10vw, 140px);
}
.cvg-blog-grid .cvg-section-head {
max-width: 760px; margin: 0 0 56px;
}
.cvg-blog-grid .cvg-eyebrow { color: var(--cvg-gold-dark); }
/* AJAX category filter bar — sits above the grid on /insights/. */
.cvg-insights-filter {
display: flex; flex-wrap: wrap; gap: 10px;
align-items: center; justify-content: center;
margin: 0 0 48px;
position: relative;
}
.cvg-insights-filter-pill {
background: transparent;
border: 1px solid var(--cvg-line);
color: var(--cvg-navy);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
padding: 10px 18px;
cursor: pointer;
transition: background .2s, border-color .2s, color .2s, transform .2s;
line-height: 1;
}
.cvg-insights-filter-pill:hover {
border-color: var(--cvg-gold);
color: var(--cvg-gold-dark);
}
.cvg-insights-filter-pill.is-active {
background: var(--cvg-navy);
border-color: var(--cvg-navy);
color: #fff;
}
.cvg-insights-filter-spinner {
display: none;
width: 16px; height: 16px;
border: 2px solid rgba(0,80,111,.15);
border-top-color: var(--cvg-gold);
border-radius: 999px;
margin-left: 4px;
animation: cvg-spin 0.6s linear infinite;
}
.cvg-insights-filter-spinner.is-visible { display: inline-block; }
@keyframes cvg-spin { to { transform: rotate(360deg); } }
[data-cvg-insights].is-loading [data-cvg-insights-grid] { opacity: .55; transition: opacity .2s; }
.cvg-insights-pagination { margin-top: 0; }
.cvg-insights-empty {
grid-column: 1 / -1;
text-align: center;
padding: 56px 24px;
}
.cvg-posts-grid {
display: grid; gap: 28px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cvg-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cvg-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
/* ----- Post card --------------------------------------------------------- */
.cvg-post-card {
background: #fff;
border: 1px solid var(--cvg-line-soft);
overflow: hidden;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative;
}
.cvg-post-card::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-post-card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 18px 40px -22px rgba(0,30,48,.20);
}
.cvg-post-card:hover::after { transform: scaleX(1); }
.cvg-post-card__link {
display: flex; flex-direction: column; height: 100%;
color: var(--cvg-ink);
text-decoration: none;
}
.cvg-post-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
margin: 0;
}
.cvg-post-card__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .6s var(--cvg-ease);
}
.cvg-post-card:hover .cvg-post-card__img { transform: scale(1.04); }
.cvg-post-card__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
background: linear-gradient(135deg, var(--cvg-cream-deep), var(--cvg-cream));
color: var(--cvg-navy);
}
.cvg-post-card__cat {
position: absolute; top: 14px; left: 14px;
background: #fff;
color: var(--cvg-navy);
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
padding: 6px 12px;
box-shadow: 0 4px 12px rgba(0,30,48,.14);
}
.cvg-post-card__body {
padding: 24px 26px 22px;
display: flex; flex-direction: column; flex: 1;
}
.cvg-post-card__meta {
display: flex; gap: 6px; align-items: center;
font-size: 12px; color: var(--cvg-muted);
font-family: var(--cvg-font-body); letter-spacing: .02em;
margin-bottom: 12px;
}
.cvg-post-card__dot { opacity: .5; }
.cvg-post-card__title {
font-family: var(--cvg-font-display);
font-size: 1.35rem;
line-height: 1.18;
color: var(--cvg-navy);
margin: 0 0 12px;
}
.cvg-post-card__excerpt {
color: var(--cvg-ink);
font-size: 14.5px; line-height: 1.6;
margin: 0 0 20px;
flex: 1;
}
.cvg-post-card__foot {
display: flex; justify-content: space-between; align-items: center;
padding-top: 16px;
border-top: 1px solid var(--cvg-line-soft);
}
.cvg-post-card__author {
display: flex; align-items: center; gap: 9px;
font-size: 13px; font-weight: 600; color: var(--cvg-ink);
}
.cvg-post-card__avatar { width: 28px; height: 28px; border-radius: 999px; }
.cvg-post-card__cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
transition: gap .25s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-post-card:hover .cvg-post-card__cta { color: var(--cvg-navy); gap: 12px; }
.cvg-post-card__cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-post-card:hover .cvg-post-card__cta svg { transform: translateX(3px); }
/* ----- Pagination (TiDii pattern, Convergent palette) -------------------- */
.cvg-blog-grid .nav-links {
display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
margin-top: 56px;
}
.cvg-blog-grid .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px;
padding: 0 14px;
background: #fff;
border: 1px solid var(--cvg-line);
color: var(--cvg-navy);
font-family: var(--cvg-font-nav);
font-size: 13px; font-weight: 600; letter-spacing: .08em;
text-decoration: none;
transition: border-color .2s, color .2s, background .2s;
}
.cvg-blog-grid .page-numbers:hover {
border-color: var(--cvg-gold);
color: var(--cvg-gold-dark);
}
.cvg-blog-grid .page-numbers.current {
background: var(--cvg-navy);
border-color: var(--cvg-navy);
color: #fff;
}
/* ----- Single post hero (locked spec, post featured image as bg) --------- */
.cvg-post-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-post-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-post-hero-overlay {
--cvg-hero-overlay-strength: .82;
position: absolute; inset: 0; z-index: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
}
.cvg-post-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-post-hero-content { max-width: 780px; }
.cvg-post-hero-cat {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px;
background: rgba(216,137,36,.16);
border: 1px solid rgba(216,137,36,.40);
color: var(--cvg-gold);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
text-decoration: none;
margin: 24px 0 22px;
transition: background .25s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-post-hero-cat:hover { background: var(--cvg-gold); color: #fff; }
.cvg-post-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin: 0 0 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
max-width: 22ch;
}
.cvg-post-hero-meta {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
color: rgba(255,255,255,.82);
font-size: 14px; font-weight: 500;
font-family: var(--cvg-font-body);
}
.cvg-post-hero-author { display: inline-flex; align-items: center; gap: 10px; }
.cvg-post-hero-avatar {
width: 36px; height: 36px; border-radius: 999px;
border: 2px solid rgba(255,255,255,.25);
}
/* ----- Single post body (2-col: content + author aside) ------------------ */
.cvg-post-body {
background: #fff;
padding: clamp(70px, 9vw, 130px) 0 clamp(70px, 9vw, 120px);
}
.cvg-post-body__inner {
display: grid; gap: 56px;
grid-template-columns: 1fr;
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 960px) {
.cvg-post-body__inner { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }
}
.cvg-post-body__content {
font-family: var(--cvg-font-body);
font-size: 17px;
line-height: 1.75;
color: var(--cvg-ink);
max-width: 720px;
}
.cvg-post-body__content > * + * { margin-top: 1.2em; }
.cvg-post-body__content h2 {
font-family: var(--cvg-font-display);
font-size: clamp(1.6rem, 1vw + 1.2rem, 2rem);
line-height: 1.15;
color: var(--cvg-navy);
margin: 2.2em 0 .6em;
}
.cvg-post-body__content h3 {
font-family: var(--cvg-font-display);
font-size: 1.4rem;
line-height: 1.2;
color: var(--cvg-navy);
margin: 1.8em 0 .5em;
}
.cvg-post-body__content p { margin: 0 0 1.2em; }
.cvg-post-body__content ul,
.cvg-post-body__content ol { margin: 0 0 1.4em; padding-left: 26px; }
.cvg-post-body__content li { margin-bottom: .5em; }
.cvg-post-body__content a {
color: var(--cvg-gold-dark);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: color .2s;
}
.cvg-post-body__content a:hover { color: var(--cvg-navy); }
.cvg-post-body__content blockquote {
border-left: 4px solid var(--cvg-gold);
padding: 18px 26px;
background: var(--cvg-cream-deep);
margin: 32px 0;
font-family: var(--cvg-font-display);
font-style: italic;
font-size: 1.25rem;
line-height: 1.4;
color: var(--cvg-navy);
}
.cvg-post-body__content img {
max-width: 100%; height: auto;
margin: 28px 0;
}
/* Tags + share */
/* Tags + share live INSIDE .cvg-post-body__content, where the prose `a`
rule has higher specificity (0,1,1) than a single .class selector (0,1,0).
We escape it by scoping these selectors with `.cvg-post-body__content`
too, plus drop the prose underline/color. */
.cvg-post-tags {
list-style: none; padding: 0; margin: 40px 0 24px;
display: flex; flex-wrap: wrap; gap: 8px;
}
.cvg-post-body__content .cvg-post-tags a {
display: inline-flex;
padding: 6px 14px;
background: var(--cvg-cream-deep);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 600; letter-spacing: .08em;
color: var(--cvg-muted);
text-decoration: none;
text-decoration-thickness: 0;
transition: background .2s, color .2s;
}
.cvg-post-body__content .cvg-post-tags a:hover {
background: var(--cvg-gold);
color: #fff;
}
.cvg-post-share {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin: 24px 0 0;
padding: 20px 24px;
background: var(--cvg-cream);
border: 1px solid var(--cvg-line-soft);
}
.cvg-post-share__label {
font-family: var(--cvg-font-nav);
font-weight: 700; font-size: 13px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--cvg-navy);
}
.cvg-post-share__links { display: flex; gap: 8px; }
.cvg-post-body__content .cvg-post-share__btn {
display: inline-grid; place-items: center;
width: 40px; height: 40px;
background: #fff;
border: 1px solid var(--cvg-line);
border-radius: 999px;
font-family: var(--cvg-font-display);
font-weight: 700; font-size: 14px;
color: var(--cvg-navy);
text-decoration: none;
text-decoration-thickness: 0;
transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.cvg-post-body__content .cvg-post-share__btn:hover {
background: var(--cvg-navy);
border-color: var(--cvg-navy);
color: #fff;
transform: translateY(-2px);
}
/* Author card aside */
.cvg-post-author {
display: flex; gap: 18px; align-items: flex-start;
padding: 26px;
background: var(--cvg-cream);
border: 1px solid var(--cvg-line-soft);
position: sticky; top: 100px;
height: fit-content;
}
.cvg-post-author__avatar { width: 64px; height: 64px; border-radius: 999px; flex-shrink: 0; }
.cvg-post-author__body { flex: 1; }
.cvg-post-author__label {
display: block;
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 6px;
}
.cvg-post-author__name {
display: block;
font-family: var(--cvg-font-display);
font-size: 1.2rem;
color: var(--cvg-navy);
margin-bottom: 8px;
}
.cvg-post-author__bio {
color: var(--cvg-muted);
font-size: 13.5px; line-height: 1.6;
margin: 0;
}
/* Related posts band */
.cvg-post-related {
background: var(--cvg-cream);
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-post-related .cvg-section-head {
max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.cvg-post-related .cvg-eyebrow { color: var(--cvg-gold-dark); }
/* =========================================================================
CONTACT PAGE
========================================================================= */
/* ----- 1. Hero (locked spec per convention #9) --------------------------- */
.cvg-contact-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-contact-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-contact-hero-overlay {
--cvg-hero-overlay-strength: .80;
position: absolute; inset: 0; z-index: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
}
.cvg-contact-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-contact-hero-content { max-width: 780px; }
.cvg-contact-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-contact-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
}
/* ----- 2. Ways to connect (3-card grid on cream) ------------------------- */
.cvg-contact-ways {
background: var(--cvg-cream);
/* #7: tighter bottom padding so the form section starts sooner */
padding: clamp(90px, 11vw, 160px) 0 clamp(60px, 7vw, 110px);
position: relative; overflow: hidden;
}
.cvg-contact-ways > .cvg-container { position: relative; z-index: 1; }
.cvg-contact-ways .cvg-section-head {
max-width: 760px; margin: 0 auto 64px; text-align: center;
}
.cvg-contact-ways .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-contact-ways h2 { margin-bottom: 22px; }
/* #3: bump the botanical from .12 → .20 so it reads as ornament, not smudge */
.cvg-contact-ways .cvg-ornament-circle.is-tr {
top: 5%; right: 3%; width: clamp(200px, 20vw, 300px); aspect-ratio: 1;
background-size: contain; background-repeat: no-repeat; background-position: center;
opacity: .20;
}
@media (max-width: 768px) { .cvg-contact-ways .cvg-ornament-circle { display: none; } }
.cvg-contact-ways-grid {
display: grid; gap: 28px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-contact-ways-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cvg-contact-ways-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.cvg-contact-card {
background: #fff;
border: 1px solid var(--cvg-line-soft);
position: relative;
overflow: hidden;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
}
.cvg-contact-card::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-contact-card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 18px 40px -22px rgba(0,30,48,.20);
}
.cvg-contact-card:hover::after { transform: scaleX(1); }
.cvg-contact-card-link {
display: flex; flex-direction: column;
padding: 36px 32px 32px;
color: var(--cvg-ink);
text-decoration: none;
height: 100%;
}
.cvg-contact-card-icon {
display: inline-grid; place-items: center;
width: 56px; height: 56px;
background: var(--cvg-cream-deep);
color: var(--cvg-gold-dark);
margin-bottom: 22px;
transition: background .3s var(--cvg-ease), color .3s var(--cvg-ease);
}
.cvg-contact-card:hover .cvg-contact-card-icon {
background: var(--cvg-gold);
color: #fff;
}
.cvg-contact-card-title {
font-family: var(--cvg-font-display);
font-size: clamp(1.45rem, .4vw + 1.25rem, 1.6rem);
line-height: 1.18;
color: var(--cvg-navy);
margin: 0 0 14px;
}
.cvg-contact-card-body {
color: var(--cvg-ink);
font-size: 15px; line-height: 1.6;
margin: 0 0 24px;
flex: 1;
}
.cvg-contact-card-cta {
display: inline-flex; align-items: center; gap: 8px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
transition: gap .25s var(--cvg-ease), color .25s var(--cvg-ease);
margin-top: auto;
}
.cvg-contact-card:hover .cvg-contact-card-cta { color: var(--cvg-navy); gap: 14px; }
.cvg-contact-card-cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-contact-card:hover .cvg-contact-card-cta svg { transform: translateX(3px); }
/* ----- 3. Form + sidebar (2-col on white) -------------------------------- */
.cvg-contact-form-wrap {
background: #fff;
padding: clamp(90px, 11vw, 160px) 0;
scroll-margin-top: 100px;
}
.cvg-contact-form-grid {
display: grid; gap: 48px;
grid-template-columns: 1fr;
max-width: 1100px; margin: 0 auto;
}
@media (min-width: 960px) {
.cvg-contact-form-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; }
}
.cvg-contact-form-main .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-contact-form-main h2 {
font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.4rem);
line-height: 1.1;
margin: 14px 0 18px;
}
.cvg-contact-form-intro {
color: var(--cvg-muted);
font-size: 16px; line-height: 1.65;
margin: 0 0 32px;
}
.cvg-contact-form-embed { margin-top: 8px; }
.cvg-contact-form-fallback {
display: grid; gap: 22px;
background: var(--cvg-cream);
border: 1px solid var(--cvg-line-soft);
padding: 36px clamp(28px, 3vw, 40px);
}
.cvg-contact-form-fallback label {
display: block;
font-family: var(--cvg-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--cvg-navy);
margin-bottom: 8px;
}
.cvg-contact-form-fallback input,
.cvg-contact-form-fallback textarea {
width: 100%;
background: #fff;
border: 1.5px solid rgba(0,30,48,.10);
font-family: var(--cvg-font-body);
font-size: 15.5px;
padding: 14px 16px;
color: var(--cvg-ink);
border-radius: 0;
transition: border-color .2s, box-shadow .2s;
}
.cvg-contact-form-fallback input:focus,
.cvg-contact-form-fallback textarea:focus {
outline: none;
border-color: var(--cvg-gold);
box-shadow: 0 0 0 3px rgba(216,137,36,.15);
}
.cvg-contact-form-fallback textarea { min-height: 140px; resize: vertical; }
/* Make the submit anchor the form — full-width, slightly larger */
.cvg-contact-form-fallback button {
width: 100%;
padding: 19px 35px;
font-size: 15px;
letter-spacing: 0.6px;
margin-top: 8px;
}
.cvg-contact-form-note {
margin: 0;
font-size: 12px;
color: var(--cvg-muted);
font-style: italic;
padding: 12px 14px;
background: rgba(0,30,48,.04);
border-left: 2px solid var(--cvg-gold);
}
.cvg-contact-form-note a { color: var(--cvg-gold-dark); font-weight: 600; }
/* Sidebar */
.cvg-contact-form-side {
display: flex; flex-direction: column; gap: 24px;
}
@media (min-width: 960px) {
.cvg-contact-form-side { position: sticky; top: 110px; height: fit-content; }
}
.cvg-contact-side-block {
background: var(--cvg-cream);
border: 1px solid var(--cvg-line-soft);
padding: 26px 28px;
}
/* The primary, actionable block — gold left border + slightly deeper bg
so it visibly leads the sidebar stack. */
.cvg-contact-side-details {
background: var(--cvg-cream-deep);
border-left: 3px solid var(--cvg-gold);
padding-left: 25px;
}
.cvg-contact-side-block h3 {
font-family: var(--cvg-font-display);
font-size: 1.25rem;
color: var(--cvg-navy);
margin: 0 0 10px;
}
.cvg-contact-side-block h4 {
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin: 0 0 14px;
}
.cvg-contact-side-block p {
margin: 0;
color: var(--cvg-ink);
font-size: 14.5px; line-height: 1.6;
}
.cvg-contact-detail-list {
list-style: none; padding: 0; margin: 0 0 18px;
display: flex; flex-direction: column; gap: 12px;
}
.cvg-contact-detail-list li {
display: flex; align-items: center; gap: 12px;
font-size: 14.5px;
}
.cvg-contact-detail-list a {
color: var(--cvg-navy);
text-decoration: none;
transition: color .2s;
}
.cvg-contact-detail-list a:hover { color: var(--cvg-gold-dark); }
.cvg-contact-detail-icon {
display: inline-grid; place-items: center;
width: 32px; height: 32px;
background: #fff;
border: 1px solid var(--cvg-line);
color: var(--cvg-gold-dark);
flex-shrink: 0;
}
.cvg-contact-area-note {
font-size: 12.5px; line-height: 1.55;
color: var(--cvg-muted);
font-style: italic;
margin: 0;
padding-top: 14px;
border-top: 1px solid var(--cvg-line-soft);
}
.cvg-contact-social-row {
display: flex; gap: 8px;
}
.cvg-contact-social-row a {
display: inline-grid; place-items: center;
width: 36px; height: 36px;
background: #fff;
border: 1px solid var(--cvg-line);
border-radius: 999px;
color: var(--cvg-navy);
transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cvg-contact-social-row a:hover {
background: var(--cvg-navy);
border-color: var(--cvg-navy);
color: #fff;
transform: translateY(-2px);
}
/* Solo-social variant — text link with icon so a single social channel
doesn't look lonely as one floating circle. */
.cvg-contact-social-solo {
display: inline-flex; align-items: center; gap: 10px;
color: var(--cvg-navy);
font-family: var(--cvg-font-body);
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
transition: color .2s, gap .25s var(--cvg-ease);
}
.cvg-contact-social-solo:hover { color: var(--cvg-gold-dark); gap: 14px; }
.cvg-contact-social-solo > svg:first-child {
color: var(--cvg-gold-dark);
padding: 8px;
background: #fff;
border-radius: 999px;
box-sizing: content-box;
width: 18px; height: 18px;
}
.cvg-contact-social-solo > svg:last-child { transition: transform .25s var(--cvg-ease); }
.cvg-contact-social-solo:hover > svg:last-child { transform: translateX(3px); }
/* =========================================================================
SINGLE TEAM MEMBER (cvg_team)
Hero is INTENTIONALLY compact (~280px) with a solid navy gradient — it's a
title bar, not a hero. Convention #9's tall image-bg hero doesn't apply
here because the full portrait + bio live below in the body's aside.
========================================================================= */
.cvg-team-single-hero {
position: relative;
background: linear-gradient(180deg, var(--cvg-navy-deep) 0%, #022538 100%);
color: #fff;
padding: clamp(70px, 7vw, 100px) 0 clamp(50px, 5vw, 70px);
overflow: hidden;
min-height: clamp(220px, 26vh, 320px);
display: flex; align-items: center;
border-bottom: 1px solid rgba(216,137,36,.30);
}
/* Subtle gold hairline at top, fading to transparent at edges (matches footer) */
.cvg-team-single-hero::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(216,137,36,.45), transparent);
}
.cvg-team-single-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-team-single-hero-content { max-width: 780px; }
.cvg-team-single-hero-content h1 {
color: #fff;
font-size: clamp(1.85rem, 2.2vw + 1rem, 2.75rem);
line-height: 1.08;
margin: 18px 0 10px;
text-shadow: 0 2px 16px rgba(0,30,48,.25);
}
.cvg-team-single-hero-role {
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold);
margin: 0;
}
.cvg-team-single-body {
background: #FBF7EE;
padding: clamp(80px, 10vw, 140px) 0;
}
.cvg-team-single-grid {
display: grid; gap: 60px; grid-template-columns: 1fr; align-items: start;
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 900px) {
.cvg-team-single-grid { grid-template-columns: 1.4fr 1fr; gap: 72px; }
}
.cvg-team-single-prose {
font-family: var(--cvg-font-body);
font-size: 17px; line-height: 1.75; color: var(--cvg-ink);
}
.cvg-team-single-prose > * + * { margin-top: 1.2em; }
.cvg-team-single-prose h2 {
font-family: var(--cvg-font-display); color: var(--cvg-navy);
font-size: clamp(1.5rem, .8vw + 1rem, 1.85rem);
margin: 2em 0 .5em;
}
.cvg-team-single-prose p { margin: 0 0 1.2em; }
.cvg-team-single-aside {
background: #fff;
border: 1px solid var(--cvg-line-soft);
padding: 28px;
position: sticky; top: 100px;
display: flex; flex-direction: column; gap: 22px;
}
.cvg-team-single-portrait {
margin: 0;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--cvg-cream);
}
.cvg-team-single-portrait-img,
.cvg-team-single-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvg-team-single-portrait-initials {
display: grid; place-items: center;
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--cvg-cream-deep), var(--cvg-cream));
color: var(--cvg-navy);
font-family: var(--cvg-font-display);
font-size: clamp(3rem, 6vw, 5rem);
}
.cvg-team-single-label {
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin: 0 0 10px;
}
.cvg-team-single-focus ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.cvg-team-single-focus li {
display: inline-flex;
padding: 5px 12px;
background: var(--cvg-cream-deep);
color: var(--cvg-navy);
font-family: var(--cvg-font-body);
font-size: 12.5px; font-weight: 600;
}
.cvg-team-single-contact ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.cvg-team-single-contact li {
display: flex; align-items: center; gap: 10px;
font-size: 14.5px; color: var(--cvg-ink);
}
.cvg-team-single-contact a { color: var(--cvg-navy); text-decoration: none; }
.cvg-team-single-contact a:hover { color: var(--cvg-gold-dark); }
.cvg-team-single-contact-icon {
display: inline-grid; place-items: center;
width: 30px; height: 30px;
background: var(--cvg-cream-deep);
color: var(--cvg-gold-dark);
flex-shrink: 0;
}
.cvg-team-single-related {
background: var(--cvg-cream);
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-team-single-related .cvg-section-head {
max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.cvg-team-single-related .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-team-single-related-grid {
display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-team-single-related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cvg-team-single-related-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.cvg-team-related-card {
background: #fff;
border: 1px solid var(--cvg-line-soft);
overflow: hidden;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
}
.cvg-team-related-card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 18px 40px -22px rgba(0,30,48,.20);
}
.cvg-team-related-card-link {
display: flex; flex-direction: column;
color: var(--cvg-ink);
text-decoration: none;
}
.cvg-team-related-card-photo {
aspect-ratio: 4 / 5;
background: var(--cvg-cream-deep);
overflow: hidden;
}
.cvg-team-related-card-photo img,
.cvg-team-related-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--cvg-ease); }
.cvg-team-related-card:hover .cvg-team-related-card-img { transform: scale(1.04); }
.cvg-team-related-card-initials {
display: grid; place-items: center; width: 100%; height: 100%;
color: var(--cvg-navy); font-family: var(--cvg-font-display); font-size: 2.5rem;
background: linear-gradient(135deg, var(--cvg-cream-deep), var(--cvg-cream));
}
.cvg-team-related-card-body { padding: 22px 24px 26px; }
.cvg-team-related-card-role {
font-family: var(--cvg-font-nav); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 8px; display: block;
}
.cvg-team-related-card-body h3 {
font-family: var(--cvg-font-display);
font-size: 1.3rem; line-height: 1.18; color: var(--cvg-navy);
margin: 0 0 14px;
}
.cvg-team-related-card-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
transition: gap .25s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-team-related-card:hover .cvg-team-related-card-cta { color: var(--cvg-navy); gap: 12px; }
.cvg-team-related-card-cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-team-related-card:hover .cvg-team-related-card-cta svg { transform: translateX(3px); }
/* =========================================================================
CASE STUDY — archive + single
========================================================================= */
/* Shared hero for both archive + single (same locked spec) */
.cvg-case-archive-hero,
.cvg-case-single-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-case-archive-hero-bg,
.cvg-case-single-hero-bg {
position: absolute; inset: 0;
background-position: center center; background-size: cover; background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-case-archive-hero-overlay,
.cvg-case-single-hero-overlay {
--cvg-hero-overlay-strength: .80;
position: absolute; inset: 0; z-index: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
}
.cvg-case-archive-hero > .cvg-container,
.cvg-case-single-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-case-archive-hero-content,
.cvg-case-single-hero-content { max-width: 780px; }
.cvg-case-single-hero-meta {
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold);
margin: 24px 0 18px;
}
.cvg-case-archive-hero-content h1,
.cvg-case-single-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin: 0 0 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-case-archive-hero-sub,
.cvg-case-single-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
}
/* Metrics row */
.cvg-case-metrics {
background: var(--cvg-cream);
padding: clamp(50px, 6vw, 90px) 0;
border-bottom: 1px solid var(--cvg-line-soft);
}
.cvg-case-metrics-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 32px;
grid-template-columns: 1fr;
text-align: center;
}
@media (min-width: 640px) { .cvg-case-metrics-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cvg-case-metrics-list { grid-template-columns: repeat(4, 1fr); } }
.cvg-case-metrics-value {
display: block;
font-family: var(--cvg-font-display);
font-style: italic;
font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem);
color: var(--cvg-gold-dark);
line-height: 1;
margin-bottom: 12px;
}
.cvg-case-metrics-label {
font-family: var(--cvg-font-body);
font-size: 13px; color: var(--cvg-muted);
line-height: 1.5;
}
/* Story blocks */
.cvg-case-story {
background: #FBF7EE;
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-case-story > .cvg-container {
max-width: 840px;
}
.cvg-case-story-block {
margin: 0 0 clamp(50px, 6vw, 80px);
}
.cvg-case-story-block:last-child { margin-bottom: 0; }
.cvg-case-story-head {
display: flex; align-items: baseline; gap: 16px;
margin-bottom: 22px;
padding-bottom: 16px;
border-bottom: 2px solid var(--cvg-gold);
}
.cvg-case-story-folio {
font-family: var(--cvg-font-display);
font-style: italic;
font-size: 2rem;
color: var(--cvg-gold);
line-height: 1;
}
.cvg-case-story-head .cvg-eyebrow { color: var(--cvg-navy); margin: 0; }
.cvg-case-story-body {
font-family: var(--cvg-font-body);
font-size: 17px; line-height: 1.75;
}
.cvg-case-story-body p { margin: 0 0 1.2em; }
.cvg-case-story-body p:last-child { margin-bottom: 0; }
/* Pull-quote band */
.cvg-case-quote-band {
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(70px, 9vw, 120px) 0;
position: relative;
}
.cvg-case-quote-band > .cvg-container { max-width: 880px; text-align: center; }
.cvg-case-quote-band figure { margin: 0; }
.cvg-case-quote {
font-family: var(--cvg-font-display);
font-style: italic;
font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem);
line-height: 1.4;
color: #fff;
margin: 0 0 24px;
padding: 0;
border: 0;
background: transparent;
text-shadow: 0 2px 24px rgba(0,30,48,.3);
}
.cvg-case-quote::before { content: '"'; font-size: 2em; color: var(--cvg-gold); line-height: 0; vertical-align: -.1em; margin-right: .12em; }
.cvg-case-quote::after { content: '"'; font-size: 2em; color: var(--cvg-gold); line-height: 0; vertical-align: -.4em; margin-left: .08em; }
.cvg-case-quote-attr {
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255,255,255,.75);
}
/* Related case studies + archive grid */
.cvg-case-related,
.cvg-case-archive-grid {
background: var(--cvg-cream);
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-case-related .cvg-section-head {
max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.cvg-case-related .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-case-related-grid {
display: grid; gap: 28px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cvg-case-related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cvg-case-related-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.cvg-case-related-card {
background: #fff;
border: 1px solid var(--cvg-line-soft);
overflow: hidden;
position: relative;
transition: transform .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
}
.cvg-case-related-card::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-case-related-card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 18px 40px -22px rgba(0,30,48,.20);
}
.cvg-case-related-card:hover::after { transform: scaleX(1); }
.cvg-case-related-card-link {
display: flex; flex-direction: column; height: 100%;
color: var(--cvg-ink); text-decoration: none;
}
.cvg-case-related-card-media {
margin: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.cvg-case-related-card-media img,
.cvg-case-related-card-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s var(--cvg-ease);
}
.cvg-case-related-card:hover .cvg-case-related-card-img { transform: scale(1.04); }
.cvg-case-related-card-body {
padding: 26px 28px 28px;
display: flex; flex-direction: column; flex: 1;
}
.cvg-case-related-card-folio {
font-family: var(--cvg-font-display); font-style: italic;
color: var(--cvg-gold-dark);
font-size: 1.3rem; line-height: 1;
margin-bottom: 12px; display: block;
}
.cvg-case-related-card-client {
font-family: var(--cvg-font-nav); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--cvg-gold-dark);
margin-bottom: 6px; display: block;
}
.cvg-case-related-card-body h3 {
font-family: var(--cvg-font-display);
font-size: 1.3rem; line-height: 1.18; color: var(--cvg-navy);
margin: 0 0 12px;
}
.cvg-case-related-card-body p {
color: var(--cvg-ink); font-size: 14.5px; line-height: 1.6;
margin: 0 0 20px; flex: 1;
}
.cvg-case-related-card-cta {
display: inline-flex; align-items: center; gap: 6px;
color: var(--cvg-gold-dark);
font-family: var(--cvg-font-nav);
font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
transition: gap .25s var(--cvg-ease), color .25s var(--cvg-ease);
margin-top: auto;
}
.cvg-case-related-card:hover .cvg-case-related-card-cta { color: var(--cvg-navy); gap: 12px; }
.cvg-case-related-card-cta svg { transition: transform .25s var(--cvg-ease); }
.cvg-case-related-card:hover .cvg-case-related-card-cta svg { transform: translateX(3px); }
/* =========================================================================
TRUST STRIP — homepage partners
========================================================================= */
.cvg-trust-strip {
background: var(--cvg-cream);
padding: clamp(36px, 5vw, 64px) 0;
border-bottom: 1px solid rgba(0,30,48,.06);
}
.cvg-trust-strip-inner {
display: grid; gap: 20px;
align-items: center;
text-align: center;
}
@media (min-width: 900px) {
.cvg-trust-strip-inner { grid-template-columns: auto 1fr; gap: 36px; text-align: left; }
}
.cvg-trust-strip-eyebrow {
font-family: var(--cvg-font-nav);
font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
color: var(--cvg-gold-dark);
white-space: nowrap;
}
.cvg-trust-strip-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(20px, 4vw, 56px);
align-items: center;
}
@media (min-width: 900px) { .cvg-trust-strip-list { justify-content: flex-start; } }
.cvg-trust-strip-wordmark {
font-family: var(--cvg-font-display);
font-size: clamp(1.05rem, .4vw + 1rem, 1.3rem);
color: var(--cvg-navy);
letter-spacing: .01em;
opacity: .75;
transition: opacity .3s var(--cvg-ease);
}
.cvg-trust-strip li:hover .cvg-trust-strip-wordmark { opacity: 1; }
.cvg-trust-strip-logo {
max-height: 44px; width: auto; display: block;
filter: grayscale(1); opacity: .6;
transition: filter .3s var(--cvg-ease), opacity .3s var(--cvg-ease);
}
.cvg-trust-strip li:hover .cvg-trust-strip-logo { filter: grayscale(0); opacity: 1; }
/* =========================================================================
FINAL CTA — proof element (right column when set)
========================================================================= */
.cvg-final-cta-grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: center;
}
/* Final CTA always renders as a single-column centered block — same layout
on every page including the homepage (the 2-col "has-proof" variant
was tried and reverted; don't reintroduce). */
.cvg-final-cta .cvg-final-cta-grid { grid-template-columns: 1fr; }
.cvg-final-cta .cvg-final-cta-copy { text-align: center; max-width: 760px; margin: 0 auto; }
.cvg-searchform { display: flex; gap: 10px; max-width: 480px; }
.cvg-searchform input[type=search] { flex: 1; }
input[type=text], input[type=email], input[type=tel], input[type=url], textarea, select {
width: 100%; padding: 14px 16px; border: 1px solid var(--cvg-line); border-radius: var(--cvg-radius-sm);
font: inherit; background: var(--cvg-white); color: var(--cvg-ink);
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(229,182,74,.5); outline-offset: 1px; border-color: var(--cvg-gold); }
textarea { min-height: 140px; }
label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; color: var(--cvg-navy); }
/* =========================================================================
BRAND ORNAMENTS — tasteful animated marks reinforcing the brand identity.
Slow, restrained motion; killed entirely for users with reduced-motion.
========================================================================= */
@keyframes cvg-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cvg-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes cvg-drift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -14px, 0); }
}
@keyframes cvg-drift-x {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(12px, -8px, 0); }
}
.cvg-ornament {
position: absolute;
pointer-events: none;
user-select: none;
will-change: transform;
}
/* Botanical circle ornaments (round photo crops) */
.cvg-ornament-circle {
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 12px 32px rgba(0, 30, 50, .18);
opacity: .9;
}
/* --- WHAT WE OFFER (navy): 2 small drifting brand circles in top corners --- */
.cvg-offer .cvg-ornament-circle {
width: 90px; height: 90px;
opacity: .55;
z-index: 0;
}
.cvg-offer .cvg-ornament-circle.is-tl {
top: 7%; left: 4%;
animation: cvg-drift 11s ease-in-out infinite;
}
.cvg-offer .cvg-ornament-circle.is-tr {
top: 10%; right: 5%;
animation: cvg-drift-x 13s ease-in-out infinite;
}
@media (max-width: 900px) { .cvg-offer .cvg-ornament-circle { display: none; } }
/* --- WHAT CLIENTS EXPERIENCE: two brand marks rotating in opposing directions - */
.cvg-quotes .cvg-ornament-mark {
bottom: -8%; right: -6%;
width: clamp(280px, 32vw, 460px);
aspect-ratio: 1;
background: url('../images/convergent_Center.svg') no-repeat center / contain;
opacity: .10;
animation: cvg-spin-cw 120s linear infinite;
}
.cvg-quotes .cvg-ornament-mark.is-tl {
top: -8%; left: -6%;
bottom: auto; right: auto;
width: clamp(220px, 26vw, 380px);
background-image: url('../images/convergent_Burst.svg');
opacity: .07;
animation: cvg-spin-ccw 180s linear infinite;
}
@media (max-width: 768px) { .cvg-quotes .cvg-ornament-mark { display: none; } }
/* --- WHAT WE OFFER: subtle brand burst marks anchored at edges --- */
.cvg-offer .cvg-ornament-mark {
width: clamp(220px, 28vw, 400px);
aspect-ratio: 1;
background: url('../images/convergent_Burst.svg') no-repeat center / contain;
opacity: .03;
animation: cvg-spin-ccw 200s linear infinite;
}
.cvg-offer .cvg-ornament-mark.is-br { bottom: -6%; right: -5%; }
.cvg-offer .cvg-ornament-mark.is-tr { top: -8%; right: 4%; left: auto; bottom: auto; opacity: .02; animation: cvg-spin-cw 160s linear infinite; }
.cvg-offer .cvg-ornament-mark.is-bl { bottom: -6%; left: -5%; right: auto; top: auto; background-image: url('../images/convergent_Center.svg'); opacity: .03; animation: cvg-spin-cw 220s linear infinite; }
@media (max-width: 768px) { .cvg-offer .cvg-ornament-mark { display: none; } }
/* --- Shared cream-section paper grain (very subtle, premium tactile feel) - */
.cvg-wwd::after,
.cvg-serve::after,
.cvg-approach::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
opacity: .12;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px;
}
/* --- WHO WE SERVE (cream): two botanical circles drifting in opposite corners --- */
.cvg-serve .cvg-ornament-circle {
width: 110px; height: 110px;
opacity: .85;
z-index: 0;
}
.cvg-serve .cvg-ornament-circle.is-tr {
top: 12%; right: 5%;
animation: cvg-drift 12s ease-in-out infinite;
}
.cvg-serve .cvg-ornament-circle.is-bl {
bottom: 10%; left: 4%;
width: 84px; height: 84px;
animation: cvg-drift-x 14s ease-in-out infinite reverse;
}
@media (max-width: 768px) { .cvg-serve .cvg-ornament-circle { display: none; } }
/* --- OUR APPROACH (cream): botanical circle + rotating brand mark + pulse dot - */
.cvg-approach .cvg-ornament-circle {
width: 100px; height: 100px;
opacity: .85;
z-index: 0;
}
.cvg-approach .cvg-ornament-circle.is-tl {
top: 8%; left: 4%;
animation: cvg-drift 13s ease-in-out infinite;
}
.cvg-approach .cvg-ornament-mark {
bottom: -8%; left: -5%;
width: clamp(340px, 38vw, 540px);
aspect-ratio: 1;
/* Masked brand burst — tinted navy so it sits gracefully on cream */
background: rgba(0, 80, 111, .12);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
animation: cvg-spin-cw 160s linear infinite;
}
.cvg-approach .cvg-ornament-dot {
top: 22%; right: 8%;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--cvg-gold);
animation: cvg-pulse 3.5s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(216,137,36,.5);
}
@keyframes cvg-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(216,137,36,.6); transform: scale(1); }
50% { box-shadow: 0 0 0 18px rgba(216,137,36,0); transform: scale(.85); }
}
@media (max-width: 768px) {
.cvg-approach .cvg-ornament-circle,
.cvg-approach .cvg-ornament-mark,
.cvg-approach .cvg-ornament-dot { display: none; }
}
/* --- WHAT WE DO (cream): botanical accent + brand burst + pulsing dot --- */
.cvg-wwd .cvg-ornament-circle {
width: 90px; height: 90px;
opacity: .8;
z-index: 0;
}
.cvg-wwd .cvg-ornament-circle.is-br {
bottom: 8%; right: 4%;
animation: cvg-drift 13s ease-in-out infinite reverse;
}
.cvg-wwd .cvg-ornament-mark {
bottom: -8%; left: -5%;
width: clamp(340px, 38vw, 540px);
aspect-ratio: 1;
background: rgba(0, 80, 111, .12);
-webkit-mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
mask: url('../images/convergent_Burst.svg') no-repeat center / contain;
animation: cvg-spin-ccw 175s linear infinite;
}
.cvg-wwd .cvg-ornament-dot {
top: 18%; left: 6%;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--cvg-navy);
animation: cvg-pulse 4s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(0,80,111,.5);
}
@media (max-width: 768px) {
.cvg-wwd .cvg-ornament-circle,
.cvg-wwd .cvg-ornament-mark,
.cvg-wwd .cvg-ornament-dot { display: none; }
}
/* --- FINAL CTA: large brand burst rotating glacially in bottom-right --- */
.cvg-final-cta .cvg-ornament-mark {
bottom: -10%; right: -8%;
width: clamp(320px, 38vw, 540px);
aspect-ratio: 1;
background: url('../images/convergent_Burst.svg') no-repeat center / contain;
opacity: .08;
animation: cvg-spin-ccw 150s linear infinite;
}
.cvg-final-cta .cvg-ornament-mark.is-tl {
top: -8%; left: -6%;
bottom: auto; right: auto;
width: clamp(220px, 26vw, 380px);
background-image: url('../images/convergent_Center.svg');
opacity: .07;
animation: cvg-spin-cw 180s linear infinite;
}
@media (max-width: 768px) { .cvg-final-cta .cvg-ornament-mark { display: none; } }
@media (prefers-reduced-motion: reduce) {
.cvg-ornament,
.cvg-ornament-circle,
.cvg-ornament-mark { animation: none !important; }
}
/* =========================================================================
SERVICES PAGE
========================================================================= */
/* ----- 1. Hero: palm bg + navy radial overlay. Dimensions mirror the
About hero exactly so the two pages feel like siblings. ----- */
.cvg-services-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-services-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-services-hero-overlay {
--cvg-hero-overlay-strength: .80;
position: absolute; inset: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
z-index: 0;
}
.cvg-services-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-services-hero-content { max-width: 780px; }
.cvg-services-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-services-hero-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
}
/* ----- 2. Services grid (4 cards from cvg_service CPT) ----- */
.cvg-services-grid-section {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-services-grid-section > .cvg-container { position: relative; z-index: 1; }
.cvg-services-grid-section .cvg-section-head {
max-width: 760px; margin: 0 auto 72px; text-align: center;
}
.cvg-services-grid-section .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-services-grid-section h2 { margin-bottom: 22px; }
.cvg-services-grid {
display: grid; gap: 28px; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .cvg-services-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
.cvg-services-card {
background: #fff;
border: 1px solid var(--cvg-line-soft);
padding: 44px 38px 36px;
position: relative;
overflow: hidden;
transition: transform .35s var(--cvg-ease), border-color .35s var(--cvg-ease), box-shadow .35s var(--cvg-ease);
}
.cvg-services-card::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-services-card:hover {
transform: translateY(-4px);
border-color: rgba(216,137,36,.30);
box-shadow: 0 18px 40px -22px rgba(0,30,48,.18);
}
.cvg-services-card:hover::after { transform: scaleX(1); }
.cvg-services-card-folio {
font-family: var(--cvg-font-display); font-style: italic;
font-size: 1.4rem; color: var(--cvg-gold-dark);
display: block; margin-bottom: 14px; line-height: 1;
}
.cvg-services-card h3 {
color: var(--cvg-navy); font-size: clamp(1.5rem, .8vw + 1.1rem, 1.75rem);
margin: 0 0 14px; line-height: 1.15;
}
.cvg-services-card h3 a { color: inherit; text-decoration: none; }
.cvg-services-card h3 a:hover { color: var(--cvg-gold-dark); }
.cvg-services-card-sub {
color: var(--cvg-ink); font-size: 15px; line-height: 1.65;
margin: 0 0 22px;
}
.cvg-services-card-label {
font-family: var(--cvg-font-ui, var(--cvg-font-body));
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--cvg-muted); font-weight: 600;
margin: 0 0 12px;
}
.cvg-services-card-list {
list-style: none; padding: 0; margin: 0 0 26px;
display: flex; flex-direction: column; gap: 10px;
}
.cvg-services-card-list li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 14px; line-height: 1.55; color: var(--cvg-ink);
}
.cvg-services-card-list svg { color: var(--cvg-gold-dark); flex-shrink: 0; margin-top: 1px; }
.cvg-services-card-more {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--cvg-font-ui, var(--cvg-font-body));
font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
color: var(--cvg-navy); text-decoration: none;
border-bottom: 1px solid currentColor; padding-bottom: 4px;
transition: color .25s var(--cvg-ease), gap .25s var(--cvg-ease);
}
.cvg-services-card-more:hover { color: var(--cvg-gold-dark); gap: 14px; }
.cvg-services-grid-section .cvg-ornament-circle.is-tl {
top: 4%; left: 3%; width: clamp(180px, 18vw, 260px); aspect-ratio: 1;
background-size: contain; background-repeat: no-repeat; background-position: center;
opacity: .12;
}
@media (max-width: 768px) { .cvg-services-grid-section .cvg-ornament-circle { display: none; } }
/* ----- 3. Engagement options ----- */
.cvg-services-engage {
background: var(--cvg-cream-deep);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-services-engage::before {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 50% 60% at 100% 0%, rgba(216,137,36,.14), transparent 65%),
radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0,80,111,.07), transparent 65%);
}
.cvg-services-engage > .cvg-container { position: relative; z-index: 1; }
.cvg-services-engage .cvg-section-head {
max-width: 760px; margin: 0 auto 64px; text-align: center;
}
.cvg-services-engage .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-services-engage-grid {
display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .cvg-services-engage-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cvg-services-engage-grid { grid-template-columns: repeat(4, 1fr); } }
.cvg-services-engage-card {
background: rgba(255,255,255,.55);
border: 1px solid rgba(0,30,48,.08);
padding: 36px 28px 32px;
transition: background .3s var(--cvg-ease), transform .3s var(--cvg-ease);
}
.cvg-services-engage-card:hover { background: #fff; transform: translateY(-3px); }
.cvg-services-engage-num {
font-family: var(--cvg-font-display); font-style: italic;
color: var(--cvg-gold-dark); font-size: 1.5rem; line-height: 1;
display: block; margin-bottom: 16px;
}
.cvg-services-engage-card h3 {
color: var(--cvg-navy); font-size: 1.2rem;
margin: 0 0 10px; line-height: 1.2;
}
.cvg-services-engage-card p {
color: var(--cvg-muted); font-size: 14px; line-height: 1.6; margin: 0;
}
/* ----- 4. Common challenges (cream + chevron list, echoes About → Believe) ----- */
.cvg-services-challenges {
background: var(--cvg-cream);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
}
.cvg-services-challenges > .cvg-container {
position: relative; z-index: 1; max-width: 920px;
}
.cvg-services-challenges .cvg-section-head {
max-width: 720px; margin: 0 0 52px; text-align: left;
}
.cvg-services-challenges .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-services-challenges-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
border-top: 1px solid rgba(0,30,48,.08);
}
.cvg-services-challenges-list li {
display: flex; gap: 22px; align-items: center;
padding: 22px 0;
border-bottom: 1px solid rgba(0,30,48,.08);
font-size: clamp(1.05rem, .4vw + .95rem, 1.2rem);
line-height: 1.45; color: var(--cvg-ink);
transition: padding-left .35s var(--cvg-ease), color .25s var(--cvg-ease);
}
.cvg-services-challenges-list li:hover {
padding-left: 12px; color: var(--cvg-navy);
}
.cvg-services-chal-chev {
font-family: var(--cvg-font-display);
color: var(--cvg-gold); font-size: 1.5rem; line-height: 1;
flex-shrink: 0; transition: transform .3s var(--cvg-ease);
}
.cvg-services-challenges-list li:hover .cvg-services-chal-chev { transform: translateX(4px); }
.cvg-services-challenges .cvg-ornament-circle.is-br {
bottom: 6%; right: 4%; width: clamp(180px, 18vw, 260px); aspect-ratio: 1;
background-size: contain; background-repeat: no-repeat; background-position: center;
opacity: .14; animation: cvg-drift-x 18s ease-in-out infinite reverse;
}
@media (max-width: 768px) { .cvg-services-challenges .cvg-ornament-circle { display: none; } }
/* ----- 5. Audiences (navy 2×2, echoes About → Where We Work) ----- */
.cvg-services-audiences {
background: var(--cvg-navy-deep);
color: rgba(255,255,255,.85);
padding: clamp(90px, 11vw, 160px) 0;
position: relative; overflow: hidden;
background-image:
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(11,77,120,.45), transparent 70%),
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(7,43,69,.55), transparent 70%),
linear-gradient(180deg, var(--cvg-navy-deep) 0%, #022538 100%);
}
.cvg-services-audiences > .cvg-container { position: relative; z-index: 1; }
.cvg-services-audiences .cvg-section-head {
max-width: 800px; margin: 0 auto 72px; text-align: center;
}
.cvg-services-audiences .cvg-eyebrow { color: var(--cvg-gold); }
.cvg-services-audiences h2 { color: #fff; margin-bottom: 20px; }
.cvg-services-aud-grid {
display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-services-aud-grid { grid-template-columns: 1fr 1fr; } }
.cvg-services-aud-block {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
padding: 40px 36px;
transition: transform .35s var(--cvg-ease), background .35s var(--cvg-ease), border-color .35s var(--cvg-ease);
position: relative; overflow: hidden;
}
.cvg-services-aud-block::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: var(--cvg-gold);
transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--cvg-ease);
}
.cvg-services-aud-block:hover {
transform: translateY(-4px);
background: rgba(255,255,255,.07);
border-color: rgba(216,137,36,.30);
}
.cvg-services-aud-block:hover::after { transform: scaleX(1); }
.cvg-services-aud-num {
display: block; font-family: var(--cvg-font-display); font-style: italic;
font-size: 1.75rem; color: var(--cvg-gold); margin-bottom: 18px; line-height: 1;
}
.cvg-services-aud-block h3 {
color: #fff; font-size: clamp(1.375rem, .8vw + 1rem, 1.625rem);
margin: 0 0 12px; line-height: 1.2;
}
.cvg-services-aud-block p {
color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; margin: 0;
}
/* =========================================================================
SINGLE SERVICE (detail page)
========================================================================= */
/* Single service hero — same dimensions as About/Services for visual parity
across every non-homepage page. */
.cvg-service-single-hero {
position: relative;
background: var(--cvg-navy-deep);
color: #fff;
padding: clamp(140px, 16vw, 220px) 0 clamp(130px, 15vw, 200px);
overflow: hidden;
min-height: clamp(620px, 82vh, 820px);
display: flex; align-items: center;
}
.cvg-service-single-hero-bg {
position: absolute; inset: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
filter: grayscale(0) contrast(.55) brightness(.85);
z-index: 0;
}
.cvg-service-single-hero-overlay {
--cvg-hero-overlay-strength: .82;
position: absolute; inset: 0;
background: radial-gradient(
ellipse 130% 130% at 0% 0%,
rgba(0, 58, 82, var(--cvg-hero-overlay-strength)) 0%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .98)) 28%,
rgba(0, 58, 82, calc(var(--cvg-hero-overlay-strength) * .85)) 44%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .55)) 62%,
rgba(0, 80, 111, calc(var(--cvg-hero-overlay-strength) * .16)) 80%,
transparent 94%
);
z-index: 0;
}
.cvg-service-single-hero > .cvg-container { position: relative; z-index: 2; }
.cvg-service-single-hero-content { max-width: 780px; }
.cvg-service-single-hero-content h1 {
color: #fff;
font-size: clamp(2.5rem, 4.5vw + 1rem, 4.5rem);
line-height: 1.04;
margin-bottom: 28px;
text-shadow: 0 2px 24px rgba(0,30,48,.4);
}
.cvg-service-single-sub {
font-family: var(--cvg-font-body);
font-size: clamp(1.0625rem, .4vw + 1rem, 1.25rem);
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
}
.cvg-service-single-body {
background: #FBF7EE;
padding: clamp(80px, 10vw, 140px) 0;
position: relative; overflow: hidden;
}
.cvg-service-single-body > .cvg-container {
position: relative; z-index: 1;
}
.cvg-service-single-grid {
display: grid; gap: 60px; grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 900px) {
.cvg-service-single-grid { grid-template-columns: 1.4fr 1fr; gap: 80px; }
}
.cvg-service-single-prose {
font-size: 17px; line-height: 1.7; color: var(--cvg-ink);
}
.cvg-service-single-prose p { margin: 0 0 1.2em; }
.cvg-service-single-prose h2 {
color: var(--cvg-navy); margin: 1.8em 0 .5em;
}
.cvg-service-single-aside {
background: #fff;
border: 1px solid var(--cvg-line-soft);
padding: 36px 32px;
position: sticky; top: 100px;
}
.cvg-service-single-aside-label {
font-family: var(--cvg-font-ui, var(--cvg-font-body));
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--cvg-gold-dark); font-weight: 600;
margin: 0 0 14px;
}
.cvg-service-single-aside h3 {
color: var(--cvg-navy); font-size: 1.3rem;
margin: 0 0 20px; line-height: 1.2;
}
.cvg-service-single-aside ul {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 12px;
}
.cvg-service-single-aside li {
display: flex; gap: 12px; align-items: flex-start;
font-size: 14.5px; line-height: 1.55; color: var(--cvg-ink);
}
.cvg-service-single-aside svg { color: var(--cvg-gold-dark); flex-shrink: 0; margin-top: 1px; }
.cvg-service-single-outcome {
background: var(--cvg-cream-deep);
padding: 22px 24px;
margin-top: 24px;
border-left: 3px solid var(--cvg-gold);
}
.cvg-service-single-outcome strong {
display: block;
font-family: var(--cvg-font-ui, var(--cvg-font-body));
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--cvg-gold-dark); font-weight: 700;
margin-bottom: 8px;
}
.cvg-service-single-outcome p {
margin: 0; font-size: 15px; line-height: 1.55; color: var(--cvg-ink);
}
.cvg-service-single-related {
background: var(--cvg-cream);
padding: clamp(80px, 10vw, 130px) 0;
}
.cvg-service-single-related .cvg-section-head {
max-width: 720px; margin: 0 auto 48px; text-align: center;
}
.cvg-service-single-related .cvg-eyebrow { color: var(--cvg-gold-dark); }
.cvg-service-single-related-grid {
display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cvg-service-single-related-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cvg-service-single-related-grid { grid-template-columns: repeat(3, 1fr); } }
/* ---------- 18. Reveal + utilities ------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--cvg-ease), transform .8s var(--cvg-ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
body.cvg-menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
html { scroll-behavior: auto; }
[data-reveal] { opacity: 1; transform: none; }
}