, , etc.)
*/
/* ============================================================================
css/elements/_typography.css (was included by css/main.css)
============================================================================ */
/* === Base body type === */
body {
font-family: var(--font-body);
font-weight: var(--weight-body-regular);
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-primary);
}
/* === Headings — display font, all variants === */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--weight-display);
color: var(--color-text-primary);
margin: 0 0 var(--paragraph-spacing) 0;
line-height: 1.1;
letter-spacing: 0.01em;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
/* === All-caps section headers (the "WHO WE ARE" pattern) === */
.section-header {
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* === Paragraphs === */
p {
margin: 0 0 var(--paragraph-spacing) 0;
font-size: var(--font-size-body);
line-height: 1.6;
}
p:last-child { margin-bottom: 0; }
/* === Links === */
a {
color: var(--color-text-link);
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity var(--transition-fast);
}
a:hover { opacity: 0.7; }
/* === Strong, em === */
strong { font-weight: var(--weight-body-semibold); }
em { font-style: italic; }
/* === Lists === */
ul, ol {
margin: 0 0 var(--paragraph-spacing) 0;
padding-left: 1.5em;
}
li {
margin-bottom: 0.5em;
line-height: 1.6;
}
/* ============================================================================
end css/elements/_typography.css
============================================================================ */
/* ============================================================================
css/elements/_buttons.css (was included by css/main.css)
============================================================================ */
/* === Base button === */
.button,
button,
a.button,
input[type="submit"] {
display: inline-block;
padding: 16px 32px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-button);
line-height: 1.2;
text-align: center;
text-decoration: none;
border: none;
border-radius: var(--border-radius-button);
cursor: pointer;
transition: background-color var(--transition-base), opacity var(--transition-base), transform var(--transition-fast);
}
.button:hover,
button:hover {
opacity: 0.85;
}
.button:active,
button:active {
transform: translateY(1px);
}
/* === Primary CTA — gold === */
.button--primary,
.button.primary,
button.primary {
background-color: var(--color-emphasis);
color: var(--color-dark);
}
/* Hover: brighten the gold; text color/weight unchanged. The doubled class beats
the generic `.button:hover` in the element-defaults section later in this file, and
opacity:1 cancels the base `button:hover` fade so only the background shifts. */
.button.button--primary:hover,
.button.primary:hover,
button.primary:hover {
background-color: var(--color-emphasis-hover);
color: var(--color-dark);
opacity: 1;
}
/* === Secondary — navy === */
.button--secondary,
.button.secondary,
button.secondary {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
}
/* === Tertiary (if needed) — outlined navy on white === */
.button--tertiary {
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.button--tertiary:hover {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
opacity: 1;
}
/* === Remove bottom border that inherits from anchor styling === */
a.button {
border-bottom: none;
}
/* === Disabled === */
button:disabled,
.button:disabled,
.hs-button:disabled {
background-color: #D0D0D0;
border-color: #D0D0D0;
color: #E6E6E6;
cursor: not-allowed;
}
/* === No-button utility (preserved from boilerplate for content-as-button anchors) === */
.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
background: none;
border: none;
border-radius: 0;
color: initial;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
margin-bottom: 0;
padding: 0;
text-align: left;
text-decoration: none;
transition: none;
}
/* ============================================================================
end css/elements/_buttons.css
============================================================================ */
/* ============================================================================
css/elements/_forms.css (was included by css/main.css)
============================================================================ */
/* Fields */
.hs-form-field {
margin-bottom: 1.4rem;
}
/* Labels */
form label {
display: block;
font-size: 0.875rem;
margin-bottom: 0.35rem;
}
/* Form Title */
.form-title {
margin-bottom: 0;
}
/* Help text */
form legend {
font-size: 0.875rem;
}
/* Inputs */
form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
display: inline-block;
font-size: 0.875rem;
padding: 0.7rem;
width: 100%;
}
form textarea {
resize: vertical;
}
form fieldset {
max-width: 100% !important;
}
/* Inputs - checkbox/radio */
form .inputs-list {
margin: 0;
padding: 0;
list-style: none;
}
form .inputs-list > li {
display: block;
margin: 0.7rem 0;
}
form .inputs-list input,
form .inputs-list span {
vertical-align: middle;
}
form input[type=checkbox],
form input[type=radio] {
cursor: pointer;
margin-right: 0.35rem;
}
/* Inputs - date picker */
.hs-dateinput {
position: relative;
}
.hs-dateinput:before {
content:'\01F4C5';
position: absolute;
right: 10%;
top: 50%;
transform: translateY(-50%);
}
.fn-date-picker .pika-table thead th {
color: #FFF;
}
.fn-date-picker td.is-selected .pika-button {
border-radius: 0;
box-shadow: none;
}
.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
border-radius: 0 !important;
color: #FFF;
}
/* Inputs - file picker */
form input[type=file] {
background-color: transparent;
border: initial;
padding: initial;
}
/* Headings and text */
form .hs-richtext,
form .hs-richtext p {
font-size: 0.875rem;
margin: 0 0 1.4rem;
}
form .hs-richtext img {
max-width: 100% !important;
}
/* GDPR */
.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
margin-left: 1rem !important;
}
/* Validation */
.hs-form-required {
color: #EF6B51;
}
.hs-input.invalid.error {
border-color: #EF6B51;
}
.hs-error-msg {
color: #EF6B51;
margin-top: 0.35rem;
}
/* Submit button */
form input[type=submit],
form .hs-button {
cursor: pointer;
display: inline-block;
text-align: center;
transition: all 0.15s linear;
white-space: normal;
}
/* Captcha */
.grecaptcha-badge {
margin: 0 auto;
}
/* Search button input field and suggestions */
.body-container-wrapper .hs-search-field__button {
padding: 15px;
}
.body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
margin-left: 6px;
margin-bottom: 0;
}
.body-container-wrapper .hs-search-field__button svg {
height: 15px;
fill: #fff;
}
.body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
padding: 10px;
}
.body-container-wrapper .hs-search-field__suggestions li a {
color: #494A52;
padding: 0.35rem 0.7rem;
text-decoration: none;
transition: background-color 0.3s;
}
/* ============================================================================
end css/elements/_forms.css
============================================================================ */
/* ============================================================================
css/elements/_tables.css (was included by css/main.css)
============================================================================ */
/* Table */
table {
border-collapse: collapse;
margin-bottom: 1.4rem;
overflow-wrap: break-word;
}
/* Table cells */
td,
th {
vertical-align: top;
}
/* Table header */
thead th {
vertical-align: bottom;
}
/* ============================================================================
end css/elements/_tables.css
============================================================================ */
/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/
/* ============================================================================
css/components/_header.css (was included by css/main.css)
============================================================================ */
/* Header DND sections */
.header .dnd-section {
padding: 0;
}
/* Header container */
.header__container {
display: flex;
justify-content: space-between;
}
.header__row-1 {
padding-top: 1rem;
}
.header__row-1,
.header__row-2 {
align-items: center;
display: flex;
justify-content: flex-end;
width: 100%;
}
@media (max-width: 1150px) and (min-width: 767px) {
.header__column {
width: 100%;
}
}
@media (max-width: 767px) {
.header__container {
flex-direction: column;
padding: 1rem 0 0;
}
.header__column {
position: relative;
}
.header__row-1 {
padding-top: 0;
}
.header__row-2 {
justify-content: center;
padding: 1.05rem;
}
}
/* Navigation skipper */
.header__skip {
height: 1px;
left: -1000px;
overflow: hidden;
position: absolute;
text-align: left;
top: -1000px;
width: 1px;
}
.header__skip:hover,
.header__skip:focus,
.header__skip:active {
height: auto;
left: 0;
overflow: visible;
top: 0;
width: auto;
}
/* Logo */
.header__logo {
align-items: center;
display: flex;
height: auto;
margin-right: auto;
max-width: 200px;
overflow: hidden;
}
@media (max-width: 767px) {
.header__logo {
margin: 0 auto;
width: 100%;
}
}
.header__logo img {
max-width: 100%;
}
.header__logo .logo-company-name {
font-size: 1.167rem;
margin-top: 0.7rem;
}
.header__logo--main {
padding-top: 1rem;
}
/* Search bar */
.header__search {
padding: 0 1rem;
width: auto;
}
.hs-search-field__form {
position: relative;
}
.header__search .hs-search-field__label {
flex-basis: auto;
}
.header__search .hs-search-field__input {
height: 45px;
padding: 0 0.7rem;
}
.header__search .hs-search-field__button {
padding: 0;
fill: #000;
background-color: transparent;
border: none;
padding: 10px;
position: absolute;
top: 0;
right: 0;
}
.header__search .hs-search-field__button svg {
height: 25px;
}
.header__search .hs-search-field--open .hs-search-field__input {
border-bottom: none;
border-radius: 6px 6px 0 0;
max-width: 100%;
}
.header__search .hs-search-field--open .hs-search-field__suggestions {
background-color: #FFF;
border: 2px solid #D1D6DC;
border-radius: 0 0 6px 6px;
border-top-width: 1px;
position: absolute;
width: 100%;
z-index: 10;
}
.header__search .hs-search-field__suggestions li {
border-top: 1px solid #D1D6DC;
font-size: 0.875rem;
}
.header__search .hs-search-field__suggestions li a {
color: #494A52;
padding: 0.35rem 0.7rem;
text-decoration: none;
transition: background-color 0.3s;
}
.header__search .hs-search-field__suggestions #results-for {
display: none;
}
@media (min-width: 767px) {
.header__search form {
align-items: center;
display: flex;
flex-direction: row;
}
.header__search label {
margin: 0 1rem 0 0;
}
.header__search .hs-search-field__input {
width: auto;
}
}
@media (max-width: 767px) {
.header__search {
border-top: 2px solid #CED4DB;
order: 1;
padding: 1.05rem;
}
}
/* Language switcher */
.header__language-switcher {
cursor: pointer;
padding-right: 1.4rem;
}
.header__language-switcher .lang_switcher_class {
position: static;
}
.header__language-switcher .lang_list_class {
border: 2px solid;
border-radius: 3px;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
display: block;
left: calc(100% - 24px);
opacity: 0;
min-width: 100px;
padding-top: 0;
text-align: left;
top: 100%;
transition: opacity 0.3s;
visibility: hidden;
}
.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
opacity: 1;
transition: opacity 0.3s;
visibility: visible;
}
.header__language-switcher .lang_list_class:before {
left: 70%;
top: -25px;
}
.header__language-switcher .lang_list_class:after {
left: 70%;
top: -22px;
}
.header__language-switcher .lang_list_class.first-active::after {
top: -22px;
transition: 0.3s;
}
.header__language-switcher .lang_list_class li {
border: none;
font-size: 18px;
padding: 0.35rem 0.7rem;
}
.header__language-switcher .lang_list_class li:first-child {
border-radius: 6px 6px 0 0;
border-top: none;
}
.header__language-switcher .lang_list_class li:last-child {
border-bottom: none;
border-radius: 0 0 6px 6px;
}
.header__language-switcher .lang_list_class li:hover {
transition: background-color 0.3s;
}
.header__language-switcher--label {
display: flex;
position: relative;
}
.header__language-switcher--label-current {
align-items: center;
display: flex;
font-size: 0.75rem;
margin-bottom: 0.175rem;
margin-left: 0.7rem;
}
.header__language-switcher--label-current:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #494A52;
content: "";
display: block;
height: 0px;
margin-left: 0.7rem;
margin-top: 0.175rem;
width: 0px;
}
@media (max-width: 767px) {
.header__language-switcher {
border-top: 2px solid #CED4DB;
padding-left: 1.05rem;
padding-right: 0;
}
.header__language-switcher .lang_list_class {
border: none;
box-shadow: unset;
display: block;
left: 30px;
opacity: 1;
padding: 0 1.05rem;
top: 0;
visibility: visible;
}
.header__language-switcher .lang_list_class li {
background-color: inherit;
font-size: 0.917rem;
}
.header__language-switcher--label-current {
display: none;
}
.header__language-switcher .globe_class {
background-image: none;
}
.header__language-switcher .lang_list_class li:hover{
background-color: inherit;
}
.header__language-switcher .lang_list_class:before,
.header__language-switcher .lang_list_class:after {
content: none;
}
/* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
.header__language-switcher .hs-language-switcher__menu {
display: block;
box-shadow:none!important;
background: transparent;
}
.header__language-switcher .hs-language-switcher__menu a {
font-size: 20px!important;
}
.header__language-switcher .hs-language-switcher__button {
display: none;
}
}
/* Navigation */
#nav-toggle {
display: none;
}
/* Mobile toggles */
@media (max-width: 767px) {
.header__navigation,
.header__search,
.header__language-switcher {
display: none;
width: 100%;
}
.header__navigation.open,
.header__search.open,
.header__language-switcher.open {
background-color: #F8FAFC;
display: block;
left: 0;
min-height: calc(100vh - 115px);
position: absolute;
right: 0;
top: 75px;
z-index: 2;
}
.header__navigation--toggle,
.header__search--toggle,
.header__language-switcher--toggle,
.header__close--toggle {
cursor: pointer;
margin: 0 5vw;
position: relative;
}
.header__navigation--toggle.hide,
.header__search--toggle.hide,
.header__language-switcher--toggle.hide {
display: none;
}
.header__navigation--toggle.open,
.header__search--toggle.open,
.header__language-switcher--toggle.open {
display: block;
margin-left: 0;
margin-right: auto;
}
.header__navigation--toggle:after,
.header__search--toggle:after,
.header__language-switcher--toggle:after {
display: none;
font-size: 1.083rem;
font-weight: 600;
position: absolute;
left: 40px;
text-transform: uppercase;
top: -10px;
}
.header__navigation--toggle.open:after,
.header__search--toggle.open:after,
.header__language-switcher--toggle.open:after {
display: block;
word-break: normal;
}
.header__navigation--toggle {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
background-size: cover;
height: 25px;
width: 25px;
}
.header__navigation--toggle:after {
content: "Menu";
}
.header__language-switcher--toggle {
background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
background-size: cover;
height: 25px;
width: 25px;
}
.header__language-switcher--toggle:after {
content: "Language";
}
.header__search--toggle {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
background-size: cover;
height: 25px;
width: 25px;
}
.header__search--toggle:after {
content: "Search";
}
.header__close--toggle {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
background-repeat: no-repeat;
background-size: 110%;
display: none;
height: 25px;
margin-right: 0;
width: 25px;
}
.header__close--toggle.show {
display: block;
}
}
/* ============================================================================
end css/components/_header.css
============================================================================ */
/* ============================================================================
css/components/_default-modules.css (was included by css/main.css)
============================================================================ */
/* Menu and simple menu */
.hs-menu-wrapper ul {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding-left: 0;
}
/* Horizontal menu */
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
flex-direction: column;
}
@media (max-width: 767px) {
.hs-menu-wrapper.hs-menu-flow-horizontal ul {
flex-direction: column;
}
}
/* Vertical menu */
.hs-menu-wrapper.hs-menu-flow-vertical ul {
flex-direction: column;
}
/* Flyouts */
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
display: inline-flex;
}
@media (max-width: 767px) {
.hs-menu-wrapper.hs-menu-flow-vertical ul {
display: flex;
}
}
.hs-menu-wrapper.flyouts .hs-item-has-children {
position: relative;
}
.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
left: -9999px;
opacity: 0;
position: absolute;
}
.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
display: block;
white-space: nowrap;
}
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 0;
opacity: 1;
top: 100%;
}
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 100%;
opacity: 1;
top: 0;
}
@media (max-width: 767px) {
.hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
left: 0;
opacity: 1;
position: relative;
top: auto;
}
}
/* CTA, logo, and rich text images */
.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
height: auto;
max-width: 100%;
}
/* ============================================================================
end css/components/_default-modules.css
============================================================================ */
/* Utilities
Helper classes with ability to override anything that comes before it
*/
/* ============================================================================
css/utilities/_helper.css (was included by css/main.css)
============================================================================ */
/* For content that needs to be visually hidden but stay visible for screenreaders */
.show-for-sr {
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
@media (max-width: 767px) {
.show-for-sr--mobile {
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important;
}
}
/* === Photo duotone — slate-blue, used on dark backgrounds === */
.photo--duotone {
filter: grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(0.4) brightness(0.85);
}
/* === Subtle hover lift for principal photo cards (Who We Are pattern) === */
.photo-card {
transition: transform var(--transition-base);
}
.photo-card:hover {
transform: translateY(-4px);
}
/* ============================================================================
end css/utilities/_helper.css
============================================================================ */
/* === Homepage header state ===
The .site-header--scrolled class is toggled sitewide by header module.js; on
the homepage it also swaps the transparent header to the solid gold band. */
/* Pin the homepage header at all times so it never disappears mid-hero. It floats
transparent over the light top of the hero photo, then gains the solid gold band
once the user scrolls a little. (Other treatments stay in normal flow.) */
.page--home .site-header.site-header--transparent {
position: relative; /* the wrapper carries position: fixed (see the header section) */
}
.page--home .site-header.site-header--transparent.site-header--scrolled {
background-color: var(--color-emphasis);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* Nav links are navy in every header state now (set in the header module), so no
on-scroll color flip is needed here. The scrolled state only swaps the
background to gold and pins the header. */
/* === In-page anchor navigation === */
/* Smooth-scroll for header section links and the pillar TOC, disabled for users
who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Offset the homepage section anchors so their headings clear the pinned header. */
.page--home #who-we-are,
.page--home #how-we-work,
.page--home #contact-us {
scroll-margin-top: calc(var(--site-header-offset) + 24px);
}
/* ============================================================================
2. former per-template stylesheets (css/templates/*.css)
============================================================================ */
/* ============================================================================
was css/templates/blog.css
loaded by: blog-index.html, blog-post.html
============================================================================ */
/* Blog post */
.blog-post {
margin: 0 auto;
max-width: 960px;
}
.blog-post__meta {
margin-bottom: 1.4rem;
}
.blog-post__meta a {
text-decoration: underline;
}
.blog-post__timestamp {
display: block;
}
.blog-post__tags svg {
height: auto;
margin-right: 0.35rem;
width: 15px;
}
.blog-post__tag-link {
font-size: 0.875rem;
}
/* Blog related posts */
.blog-related-posts {
background-color: #F8FAFC;
}
.blog-related-posts h2 {
text-align: center;
}
.blog-related-posts__list {
display: flex;
flex-wrap: wrap;
}
.blog-related-posts__post {
flex: 0 0 100%;
padding: 1rem;
}
@media screen and (min-width: 768px) {
.blog-related-posts__post {
flex: 0 0 calc(100% / 2);
}
}
@media screen and (min-width: 1000px) {
.blog-related-posts__post {
flex: 0 0 calc(100% / 3);
}
}
.blog-related-posts__image {
height: auto;
max-width: 100%;
}
.blog-related-posts__title {
margin: 0.7rem 0;
}
/* Blog comments */
.blog-comments {
margin: 0 auto;
max-width: 680px;
}
.blog-comments .hs-submit {
text-align: center;
}
.blog-comments .comment-reply-to {
border: 0 none;
}
.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
background-color: transparent;
text-decoration: underline;
}
/* ============================================================================
was css/templates/campaign-lp.css
loaded by: lp-ria-for-sale.html, lp-ria-valuation.html, lp-selling-advisory-practice.html, lp-succession-planning.html
============================================================================ */
/* === Campaign landing pages (paid-search LPs) ===============================
Shared stylesheet for every per-keyword Google Ads landing page
(lp-ria-for-sale, lp-succession-planning, + 2 more to come). All of them set
body_class="page--campaign-lp" and template_css to this file.
Same design system as LP2 (confidential-conversation.css): the same theme-token
aliases, neutrals, squared buttons, and brand-styled HubSpot form, plus the
two-column sticky form layout. These use the standard site header + footer
(same as LP2, per Mike) via base.html's default blocks; the page-specific
styling is the message-matched hero and guide card. Scoped to
.page--campaign-lp so nothing leaks site-wide.
Note: the HubSpot form's own internals (fields, labels, inputs, submit button)
are styled in HubSpot's form editor (Styling tab) — one place, applied to the
form everywhere it's embedded (these LPs + the CV page). We deliberately do NOT
restyle the form internals in CSS, to avoid specificity conflicts with
HubSpot's form stylesheet. This file owns only the card and the 2-col layout. */
.page--campaign-lp {
--gj-navy: var(--color-primary);
--gj-ink: var(--color-dark);
--gj-gold: var(--color-emphasis);
--gj-muted: var(--color-muted); /* AA-passing muted text on white (~5.1:1) */
--gj-paper: #ffffff;
--gj-cream: #faf6ed;
--gj-stone: #f4f5f6;
--gj-rule: #e3e6e9;
background-color: var(--gj-paper);
}
/* Squared buttons + focus states (matches LP1/LP2) */
.page--campaign-lp .button {
border-radius: 2px;
}
.page--campaign-lp a:focus-visible {
outline: 2px solid var(--gj-navy);
outline-offset: 2px;
border-radius: 2px;
}
/* === Shared bits =========================================================== */
.clp-eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gj-navy);
margin: 0 0 18px 0;
}
.clp-arrow {
display: inline-block;
margin-left: 6px;
transition: transform var(--transition-fast);
}
/* === Two-column grid (left = hero + assurance, right = sticky form) ======== */
.clp-grid {
max-width: var(--content-width);
margin: 0 auto;
padding: clamp(40px, 5vw, 72px) var(--content-padding-x);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(400px, 480px);
grid-template-rows: auto 1fr;
column-gap: clamp(32px, 4vw, 64px);
row-gap: clamp(36px, 4.5vw, 56px);
align-items: start;
}
.clp-hero {
grid-column: 1;
grid-row: 1;
}
.clp-form {
grid-column: 2;
grid-row: 1 / span 2;
position: sticky;
top: calc(var(--site-header-offset) + 24px); /* clear the pinned header */
}
.clp-assurance {
grid-column: 1;
grid-row: 2;
}
/* === Hero ================================================================== */
.clp-hero__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(36px, 4.8vw, 56px);
line-height: 1.06;
color: var(--gj-navy);
margin: 0 0 22px 0;
}
.clp-hero__subhead {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 58ch;
margin: 0;
}
/* Inline proof points under the hero */
.clp-proof {
list-style: none;
margin: 26px 0 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 0;
font-size: 14px;
font-weight: var(--weight-body-semibold);
color: var(--gj-muted);
}
.clp-proof li {
display: inline-flex;
align-items: center;
}
.clp-proof li:not(:last-child)::after {
content: "\00b7";
margin: 0 14px;
color: var(--gj-rule);
}
/* === Form card (right column) ============================================= */
.clp-form-card {
background-color: var(--gj-paper);
border: 1px solid var(--gj-rule);
border-top: 4px solid var(--gj-gold);
border-radius: 2px;
padding: clamp(28px, 3vw, 40px);
box-shadow: 0 6px 28px rgba(23, 42, 56, 0.06);
}
.clp-form__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 8px 0;
}
.clp-form__subline {
font-size: 15px;
line-height: 1.5;
color: var(--gj-muted);
margin: 0 0 24px 0;
}
.clp-form__microcopy {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
margin: 16px 0 0 0;
}
.clp-form__privacy {
font-size: 13px;
line-height: 1.5;
color: var(--gj-muted);
margin: 10px 0 0 0;
}
.clp-form__privacy a {
color: var(--gj-navy);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
}
.clp-form__placeholder {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
background-color: rgba(39, 80, 116, 0.05);
padding: 14px 16px;
border-radius: 2px;
margin: 0;
}
.clp-form__placeholder code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
}
/* Form internals (fields, labels, inputs, submit button) are styled in HubSpot's
form editor (Styling tab), not here — see the note at the top of this file. */
/* Exception: the element-defaults section of this file ("was css/theme-overrides.css")
styles the HubSpot form *title* element (.form-title). The embed renders that
title empty — our card supplies the heading — so it would show as an empty bar at
the top of the form. Hide it. */
.clp-form__embed .form-title,
.clp-form__embed .hs-form-title {
display: none;
}
/* Direct-contact line under the card */
.clp-direct {
margin: 20px 0 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--gj-muted);
text-align: center;
}
.clp-direct__link {
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
}
.clp-direct__sep {
margin: 0 6px;
color: var(--gj-rule);
}
/* === Assurance column (under the hero) ==================================== */
.clp-block {
margin-bottom: clamp(36px, 4vw, 52px);
}
.clp-block:last-child {
margin-bottom: 0;
}
.clp-h2 {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(26px, 3vw, 34px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 24px 0;
}
/* What happens — numbered steps */
.clp-steps__list {
list-style: none;
margin: 0;
padding: 0;
}
.clp-step {
display: flex;
gap: 18px;
padding-bottom: 24px;
}
.clp-step:last-child {
padding-bottom: 0;
}
.clp-step__num {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--gj-navy);
color: var(--color-text-on-dark);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 20px;
}
.clp-step__title {
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: 18px;
color: var(--gj-navy);
margin: 0 0 6px 0;
}
.clp-step__body {
font-size: 16px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0;
}
/* === Guide card — the "read the pillar instead" secondary path =========== */
.clp-guide {
background-color: var(--gj-cream);
border: 1px solid var(--gj-rule);
border-left: 4px solid var(--gj-gold);
border-radius: 2px;
padding: clamp(24px, 3vw, 34px);
}
.clp-guide__eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gj-muted);
margin: 0 0 12px 0;
}
.clp-guide__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(23px, 2.5vw, 29px);
line-height: 1.12;
color: var(--gj-navy);
margin: 0 0 12px 0;
}
.clp-guide__body {
font-size: 16px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0 0 18px 0;
}
.clp-guide__link {
display: inline-flex;
align-items: center;
font-weight: var(--weight-body-semibold);
font-size: 16px;
color: var(--gj-navy);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.clp-guide__link:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.clp-guide__link:hover .clp-arrow {
transform: translateX(3px);
}
/* === Trust block — who you'll talk to + recent work + confidentiality ===== */
.clp-trust__body {
font-size: 16px;
line-height: 1.7;
color: var(--gj-ink);
margin: 0 0 18px 0;
}
.clp-deals {
list-style: none;
margin: 0 0 18px 0;
padding: 0;
}
.clp-deals li {
font-size: 15px;
line-height: 1.5;
color: var(--gj-ink);
padding: 10px 0;
border-bottom: 1px solid var(--gj-rule);
}
.clp-deals li:last-child {
border-bottom: none;
}
.clp-deals__arrow {
color: var(--gj-navy);
margin: 0 6px;
}
.clp-deals__aum {
color: var(--gj-muted);
}
.clp-trust__confidential {
font-size: 14px;
line-height: 1.6;
color: var(--gj-muted);
margin: 0;
}
.clp-trust__more {
margin: 18px 0 0 0;
font-size: 15px;
}
.clp-trust__more a {
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(39, 80, 116, 0.3);
}
/* Screen-reader-only helper (for the deal-arrow context) */
.show-for-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === Responsive =========================================================== */
@media (max-width: 1024px) {
.clp-grid {
padding-left: 48px;
padding-right: 48px;
}
}
/* Single column below 980px: hero -> form -> assurance. */
@media (max-width: 979px) {
.clp-grid {
grid-template-columns: 1fr;
}
.clp-hero,
.clp-form,
.clp-assurance {
grid-column: 1;
grid-row: auto;
}
.clp-form {
position: static;
}
}
@media (max-width: 767px) {
.clp-grid {
padding-left: 24px;
padding-right: 24px;
}
/* >=44px tap targets on mobile. (Form inputs are sized by HubSpot's form styles.) */
.clp-direct__link,
.clp-guide__link,
.clp-trust__more a {
min-height: 44px;
}
.clp-direct__link,
.clp-guide__link {
display: inline-flex;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.clp-arrow {
transition: none;
}
.clp-guide__link:hover .clp-arrow {
transform: none;
}
}
/* ============================================================================
was css/templates/confidential-conversation.css
loaded by: confidential-conversation-thank-you.html, confidential-conversation.html
============================================================================ */
/* === LP2 "Confidential Conversation" (/confidential-conversation) + its thank-you page
============================================================================
Same design system as LP1 (start-here.css): the same theme-token aliases,
cream/stone/rule neutrals, squared buttons, and focus treatment, plus the LP2
two-column sticky layout and the brand-styled HubSpot form. Scoped to the two
LP2 page classes so nothing leaks. */
.page--confidential-conversation,
.page--cc-thankyou {
--gj-navy: var(--color-primary);
--gj-ink: var(--color-dark);
--gj-gold: var(--color-emphasis);
--gj-muted: var(--color-muted); /* AA-passing muted text on white (~5.1:1) */
--gj-paper: #ffffff;
--gj-cream: #faf6ed;
--gj-stone: #f4f5f6;
--gj-rule: #e3e6e9;
background-color: var(--gj-paper);
}
/* === Buttons (squared) + focus states (matches LP1) === */
.page--confidential-conversation .button,
.page--cc-thankyou .button {
border-radius: 2px;
}
.page--confidential-conversation a:focus-visible,
.page--cc-thankyou a:focus-visible {
outline: 2px solid var(--gj-navy);
outline-offset: 2px;
border-radius: 2px;
}
/* Shared eyebrow + arrow */
.cc-eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gj-navy);
margin: 0 0 18px 0;
}
.cc-arrow {
display: inline-block;
transition: transform var(--transition-fast);
}
/* === Two-column grid (left = assurance A–D, right = sticky form) === */
.cc-grid {
max-width: var(--content-width);
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) var(--content-padding-x);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
grid-template-rows: auto 1fr;
column-gap: clamp(32px, 4vw, 64px);
row-gap: clamp(40px, 5vw, 64px);
align-items: start;
}
.cc-hero {
grid-column: 1;
grid-row: 1;
}
.cc-form {
grid-column: 2;
grid-row: 1 / span 2;
position: sticky;
top: calc(var(--site-header-offset) + 24px); /* clear the pinned header */
}
.cc-assurance {
grid-column: 1;
grid-row: 2;
}
/* === Hero === */
.cc-hero__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.08;
color: var(--gj-navy);
margin: 0 0 22px 0;
}
.cc-hero__subhead {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 60ch;
margin: 0;
}
/* === Form card === */
.cc-form-card {
background-color: var(--gj-paper);
border: 1px solid var(--gj-rule);
border-top: 4px solid var(--gj-gold);
border-radius: 2px;
padding: clamp(28px, 3vw, 40px);
}
.cc-form__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 8px 0;
}
.cc-form__subline {
font-size: 15px;
line-height: 1.5;
color: var(--gj-muted);
margin: 0 0 24px 0;
}
.cc-form__microcopy {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
margin: 16px 0 0 0;
}
.cc-form__placeholder {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
background-color: rgba(39, 80, 116, 0.05);
padding: 14px 16px;
border-radius: 2px;
margin: 0;
}
.cc-form__placeholder code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
}
/* Form internals (fields, labels, inputs, submit button) are styled once in
HubSpot's form editor (Styling tab), applied wherever this form is embedded
(this conversation page + the campaign LPs). We deliberately do NOT restyle the form
internals here, to avoid specificity conflicts with HubSpot's form stylesheet.
Only the card and two-column layout are styled in this file. */
/* Exception: the element-defaults section of this file ("was css/theme-overrides.css")
styles the HubSpot form *title* element (.form-title). The embed renders that
title empty — our card supplies the heading — so it would show as an empty bar at
the top of the form. Hide it. */
.cc-form__embed .form-title,
.cc-form__embed .hs-form-title {
display: none;
}
/* === Direct-contact line === */
.cc-direct {
margin: 16px 0 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--gj-muted);
}
.cc-direct__channels {
display: block;
margin-top: 4px;
font-size: 13px;
}
.cc-direct__link {
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
white-space: nowrap;
}
.cc-direct__sep {
margin: 0 6px;
color: var(--gj-muted);
}
/* === Assurance blocks === */
.cc-block {
margin-bottom: clamp(36px, 4vw, 52px);
}
.cc-block:last-child {
margin-bottom: 0;
}
.cc-h2 {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(26px, 3vw, 34px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 24px 0;
}
/* Steps */
.cc-steps__list {
list-style: none;
margin: 0;
padding: 0;
}
.cc-step {
display: flex;
gap: 18px;
padding-bottom: 24px;
}
.cc-step:last-child {
padding-bottom: 0;
}
.cc-step__num {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--gj-navy);
color: var(--color-text-on-dark);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 20px;
}
.cc-step__title {
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: 18px;
color: var(--gj-navy);
margin: 0 0 6px 0;
}
.cc-step__body {
font-size: 16px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0;
}
/* Commitments */
.cc-commit__list {
list-style: none;
margin: 0;
padding: 0;
}
.cc-commit__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--gj-rule);
}
.cc-commit__item:last-child {
border-bottom: none;
}
.cc-commit__item > span:last-child {
font-size: 16px;
line-height: 1.55;
color: var(--gj-ink);
}
.cc-check {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--gj-gold);
color: var(--gj-ink);
margin-top: 2px;
}
/* Client quote */
.cc-quote__figure {
margin: 0;
padding: 24px 28px;
background-color: var(--gj-cream);
border-left: 3px solid var(--gj-gold);
border-radius: 8px;
}
.cc-quote__text {
margin: 0 0 14px 0;
font-size: 17px;
font-style: italic;
line-height: 1.6;
color: var(--gj-navy);
}
.cc-quote__cite {
display: flex;
flex-direction: column;
font-style: normal; /* reset default italics */
}
.cc-quote__name {
font-weight: var(--weight-body-semibold);
font-size: 15px;
color: var(--gj-navy);
}
.cc-quote__role {
font-size: 14px;
color: var(--gj-muted);
}
/* Who */
.cc-who__body {
font-size: 16px;
line-height: 1.7;
color: var(--gj-ink);
margin: 0 0 16px 0;
}
.cc-who__more {
margin: 0 0 16px 0;
}
.cc-who__more a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.cc-who__more a:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.cc-who__more a:hover .cc-arrow {
transform: translateX(3px);
}
/* === Thank-you page === */
.cc-ty {
max-width: 640px;
margin: 0 auto;
padding: clamp(80px, 12vw, 160px) var(--content-padding-x);
text-align: center;
}
.cc-ty__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(34px, 5vw, 52px);
line-height: 1.05;
color: var(--gj-navy);
margin: 0 0 20px 0;
}
.cc-ty__body {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 56ch;
margin: 0 auto 36px auto;
}
.cc-ty__subhead {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 16px;
color: var(--gj-navy);
margin: 0 0 16px 0;
}
.cc-ty__links {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.cc-ty__links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.cc-ty__links a:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.cc-ty__links a:hover .cc-arrow {
transform: translateX(3px);
}
/* === Responsive === */
@media (max-width: 1024px) {
.cc-grid {
padding-left: 48px;
padding-right: 48px;
}
.cc-ty {
padding-left: 48px;
padding-right: 48px;
}
}
/* Single column below 980px: hero -> form -> assurance (spec §2). */
@media (max-width: 979px) {
.cc-grid {
grid-template-columns: 1fr;
}
.cc-hero,
.cc-form,
.cc-assurance {
grid-column: 1;
grid-row: auto;
}
.cc-form {
position: static;
}
}
@media (max-width: 767px) {
.cc-grid {
padding-left: 24px;
padding-right: 24px;
}
.cc-ty {
padding-left: 24px;
padding-right: 24px;
}
/* >=44px tap targets on mobile (spec §8). (Form inputs are sized by HubSpot's form styles.) */
.cc-direct__link,
.cc-who__more a,
.cc-ty__links a {
min-height: 44px;
}
.cc-direct__link {
display: inline-flex;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.cc-arrow {
transition: none;
}
.cc-who__more a:hover .cc-arrow,
.cc-ty__links a:hover .cc-arrow {
transform: none;
}
}
/* ============================================================================
was css/templates/confidential-valuation.css
loaded by: confidential-valuation-thank-you.html, confidential-valuation.html
============================================================================ */
/* === LP2 "Confidential Valuation" (/confidential-valuation) + its thank-you page
============================================================================
Same design system as LP1 (start-here.css): the same theme-token aliases,
cream/stone/rule neutrals, squared buttons, and focus treatment, plus the LP2
two-column sticky layout and the brand-styled HubSpot form. Scoped to the two
LP2 page classes so nothing leaks. */
.page--confidential-valuation,
.page--cv-thankyou {
--gj-navy: var(--color-primary);
--gj-ink: var(--color-dark);
--gj-gold: var(--color-emphasis);
--gj-muted: var(--color-muted); /* AA-passing muted text on white (~5.1:1) */
--gj-paper: #ffffff;
--gj-cream: #faf6ed;
--gj-stone: #f4f5f6;
--gj-rule: #e3e6e9;
background-color: var(--gj-paper);
}
/* === Buttons (squared) + focus states (matches LP1) === */
.page--confidential-valuation .button,
.page--cv-thankyou .button {
border-radius: 2px;
}
.page--confidential-valuation a:focus-visible,
.page--cv-thankyou a:focus-visible {
outline: 2px solid var(--gj-navy);
outline-offset: 2px;
border-radius: 2px;
}
/* Shared eyebrow + arrow */
.cv-eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gj-navy);
margin: 0 0 18px 0;
}
.cv-arrow {
display: inline-block;
transition: transform var(--transition-fast);
}
/* === Two-column grid (left = assurance A–D, right = sticky form) === */
.cv-grid {
max-width: var(--content-width);
margin: 0 auto;
padding: clamp(48px, 6vw, 88px) var(--content-padding-x);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
grid-template-rows: auto 1fr;
column-gap: clamp(32px, 4vw, 64px);
row-gap: clamp(40px, 5vw, 64px);
align-items: start;
}
.cv-hero {
grid-column: 1;
grid-row: 1;
}
.cv-form {
grid-column: 2;
grid-row: 1 / span 2;
position: sticky;
top: calc(var(--site-header-offset) + 24px); /* clear the pinned header */
}
.cv-assurance {
grid-column: 1;
grid-row: 2;
}
/* === Hero === */
.cv-hero__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.08;
color: var(--gj-navy);
margin: 0 0 22px 0;
}
.cv-hero__subhead {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 60ch;
margin: 0;
}
/* === Form card === */
.cv-form-card {
background-color: var(--gj-paper);
border: 1px solid var(--gj-rule);
border-top: 4px solid var(--gj-gold);
border-radius: 2px;
padding: clamp(28px, 3vw, 40px);
}
.cv-form__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 8px 0;
}
.cv-form__subline {
font-size: 15px;
line-height: 1.5;
color: var(--gj-muted);
margin: 0 0 24px 0;
}
.cv-form__microcopy {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
margin: 16px 0 0 0;
}
.cv-form__privacy {
font-size: 13px;
line-height: 1.5;
color: var(--gj-muted);
margin: 10px 0 0 0;
}
.cv-form__privacy a {
color: var(--gj-navy);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
}
.cv-form__placeholder {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
background-color: rgba(39, 80, 116, 0.05);
padding: 14px 16px;
border-radius: 2px;
margin: 0;
}
.cv-form__placeholder code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
}
/* Form internals (fields, labels, inputs, submit button) are styled once in
HubSpot's form editor (Styling tab), applied wherever this form is embedded
(this CV page + the campaign LPs). We deliberately do NOT restyle the form
internals here, to avoid specificity conflicts with HubSpot's form stylesheet.
Only the card and two-column layout are styled in this file. */
/* Exception: the element-defaults section of this file ("was css/theme-overrides.css")
styles the HubSpot form *title* element (.form-title). The embed renders that
title empty — our card supplies the heading — so it would show as an empty bar at
the top of the form. Hide it. */
.cv-form__embed .form-title,
.cv-form__embed .hs-form-title {
display: none;
}
/* === Direct-contact line === */
.cv-direct {
margin: 20px 0 0 0;
font-size: 14px;
line-height: 1.6;
color: var(--gj-muted);
text-align: center;
}
.cv-direct__link {
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
}
.cv-direct__sep {
margin: 0 6px;
color: var(--gj-rule);
}
/* === Assurance blocks === */
.cv-block {
margin-bottom: clamp(36px, 4vw, 52px);
}
.cv-block:last-child {
margin-bottom: 0;
}
.cv-h2 {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(26px, 3vw, 34px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 24px 0;
}
/* Steps */
.cv-steps__list {
list-style: none;
margin: 0;
padding: 0;
}
.cv-step {
display: flex;
gap: 18px;
padding-bottom: 24px;
}
.cv-step:last-child {
padding-bottom: 0;
}
.cv-step__num {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--gj-navy);
color: var(--color-text-on-dark);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 20px;
}
.cv-step__title {
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: 18px;
color: var(--gj-navy);
margin: 0 0 6px 0;
}
.cv-step__body {
font-size: 16px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0;
}
/* Commitments */
.cv-commit__list {
list-style: none;
margin: 0;
padding: 0;
}
.cv-commit__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--gj-rule);
}
.cv-commit__item:last-child {
border-bottom: none;
}
.cv-commit__item > span:last-child {
font-size: 16px;
line-height: 1.55;
color: var(--gj-ink);
}
.cv-check {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--gj-gold);
color: var(--gj-ink);
margin-top: 2px;
}
/* Who */
.cv-who__body {
font-size: 16px;
line-height: 1.7;
color: var(--gj-ink);
margin: 0 0 16px 0;
}
.cv-who__more {
margin: 0 0 16px 0;
}
.cv-who__more a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.cv-who__more a:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.cv-who__more a:hover .cv-arrow {
transform: translateX(3px);
}
.cv-who__guides {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: var(--gj-muted);
}
.cv-who__guides a {
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(39, 80, 116, 0.3);
}
.cv-who__sep {
margin: 0 6px;
color: var(--gj-muted);
}
/* === Thank-you page === */
.cv-ty {
max-width: 640px;
margin: 0 auto;
padding: clamp(80px, 12vw, 160px) var(--content-padding-x);
text-align: center;
}
.cv-ty__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(34px, 5vw, 52px);
line-height: 1.05;
color: var(--gj-navy);
margin: 0 0 20px 0;
}
.cv-ty__body {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 56ch;
margin: 0 auto 36px auto;
}
.cv-ty__subhead {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 16px;
color: var(--gj-navy);
margin: 0 0 16px 0;
}
.cv-ty__links {
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.cv-ty__links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.cv-ty__links a:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.cv-ty__links a:hover .cv-arrow {
transform: translateX(3px);
}
/* === Responsive === */
@media (max-width: 1024px) {
.cv-grid {
padding-left: 48px;
padding-right: 48px;
}
.cv-ty {
padding-left: 48px;
padding-right: 48px;
}
}
/* Single column below 980px: hero -> form -> assurance (spec §2). */
@media (max-width: 979px) {
.cv-grid {
grid-template-columns: 1fr;
}
.cv-hero,
.cv-form,
.cv-assurance {
grid-column: 1;
grid-row: auto;
}
.cv-form {
position: static;
}
}
@media (max-width: 767px) {
.cv-grid {
padding-left: 24px;
padding-right: 24px;
}
.cv-ty {
padding-left: 24px;
padding-right: 24px;
}
/* >=44px tap targets on mobile (spec §8). (Form inputs are sized by HubSpot's form styles.) */
.cv-direct__link,
.cv-who__more a,
.cv-who__guides a,
.cv-ty__links a {
min-height: 44px;
}
.cv-direct__link,
.cv-who__guides a {
display: inline-flex;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.cv-arrow {
transition: none;
}
.cv-who__more a:hover .cv-arrow,
.cv-ty__links a:hover .cv-arrow {
transform: none;
}
}
/* ============================================================================
was css/templates/contact.css
loaded by: contact-us.html
============================================================================ */
/* Contact Us page — warm intro above the reused navy contact-section module. */
.contact-intro {
width: 100%;
background-color: var(--color-background);
padding: var(--module-padding) var(--content-padding-x);
}
.contact-intro__inner {
max-width: var(--content-width);
margin: 0 auto;
text-align: center;
}
.contact-intro__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h1);
line-height: 1.05;
color: var(--color-primary);
margin: 0 0 20px;
}
.contact-intro__lead {
max-width: 58ch;
margin: 0 auto;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.7;
color: var(--color-text-primary);
}
/* ============================================================================
was css/templates/how-we-work.css
loaded by: how-we-work.html
============================================================================ */
/* === How We Work — page-level styles ===
Almost all styling lives in the section modules (process-detail,
responsibilities-split, testimonial-carousel, cta-band) so they stay
portable and can be reused on other pages. This file holds only page-scoped
concerns. */
.page--how-we-work {
background-color: var(--color-background);
}
/* ============================================================================
was css/templates/insights.css
loaded by: insights-listing.html
============================================================================ */
/* === Insights listing — page-level styles === */
/* The card grid styles (.insights-grid / .insights-card) live in the
insight-card-list section of this file ("was modules/insight-card-list.module/module.css")
so the cards render identically wherever the module is placed (Insights index,
principal bio pages). */
.page--insights-listing {
background-color: var(--color-background);
}
/* ============================================================================
was css/templates/legal.css
loaded by: disclosures.html, privacy-policy.html, terms-of-use.html
============================================================================ */
/* GJ legal / policy pages (Privacy Policy, Terms of Use).
Long-form prose in a narrow, readable column beneath the standard navy banner.
Colours come from the :root tokens at the top of this file. */
.legal {
max-width: 820px;
margin: 0 auto;
padding: var(--module-padding, 57px) 24px;
}
.legal__meta {
margin: 0 0 36px;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-style: italic;
color: var(--color-light); /* light slate */
}
.legal h2 {
font-family: "Big Shoulders Display", sans-serif;
font-weight: 300;
font-size: 33px;
line-height: 1.1;
color: var(--color-primary); /* primary navy */
margin: 44px 0 12px;
}
.legal h3 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 19px;
color: var(--color-dark); /* dark navy */
margin: 28px 0 8px;
}
.legal p,
.legal li {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--color-dark);
}
.legal p {
margin: 0 0 16px;
}
.legal ul {
margin: 0 0 16px;
padding-left: 22px;
}
.legal li {
margin-bottom: 8px;
}
.legal a {
color: var(--color-primary);
text-decoration: underline;
}
.legal a:hover {
color: var(--color-dark);
}
/* ============================================================================
was css/templates/partner-bio.css
loaded by: bio-clark-benton.html, bio-jack-benton.html, bio-rush-benton.html
============================================================================ */
/* === Principal bio pages — page-level styles === */
/* The Recent Perspectives card list (insight-card-list module) defaults to the
Insights-index spacing, where doubled bottom padding separates the last card
row from the footer. On bio pages the list sits mid-page between the bio and
the Other Principals strip, so it takes the same hairline-top-border section
chrome as that strip instead. */
.page--partner-bio .insight-card-list {
padding: 0 var(--content-padding-x) var(--module-padding);
}
.page--partner-bio .insight-card-list__inner {
padding-top: var(--module-padding);
border-top: 1px solid rgba(39, 80, 116, 0.2);
}
/* ============================================================================
was css/templates/pillar.css
loaded by: book-of-business-for-sale.html, continuity-planning.html, how-to-value-advisory-practice.html, minority-recaps.html, pillar.html, ria-aggregators.html, ria-for-sale.html, ria-m-and-a.html, ria-private-equity.html, ria-succession-plan.html, ria-valuation.html, sell-side-process.html, selling-advisory-practice.html, succession-planning.html, wealth-management-firm-valuation.html, wealth-management-valuation-multiples.html
============================================================================ */
/* === Pillar page — page-level styles ===
Most styling lives in the pillar-hero and pillar-article modules so they
stay portable. This file holds only page-scoped concerns. */
.page--pillar {
background-color: var(--color-background);
}
/* ============================================================================
was css/templates/start-here.css
loaded by: start-here.html
============================================================================ */
/* === LP1 "Start Here" (/start-here) — page-scoped styles =====================
One stylesheet for the whole landing page (spec §2). Everything is scoped under
.page--start-here so it can't leak into other templates. Brand colors come from
the theme tokens; the cream/stone/rule band neutrals are page-local. */
.page--start-here {
/* Map the spec's tokens onto the established theme palette + page-local neutrals. */
--gj-navy: var(--color-primary); /* var(--color-primary) */
--gj-ink: var(--color-dark); /* var(--color-dark) */
--gj-gold: var(--color-emphasis); /* var(--color-emphasis) */
--gj-paper: #ffffff;
--gj-cream: #faf6ed;
--gj-stone: #f4f5f6;
--gj-rule: #e3e6e9;
background-color: var(--gj-paper);
}
/* === Shared section frame ============================================== */
.lp1-hero,
.lp1-doors,
.lp1-trust,
.lp1-notready,
.lp1-final {
padding: clamp(56px, 7vw, 96px) var(--content-padding-x);
}
.lp1-hero__inner,
.lp1-doors__inner,
.lp1-trust__inner,
.lp1-notready__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* Eyebrow */
.lp1-eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0 0 18px 0;
}
.lp1-eyebrow--ink {
color: var(--gj-navy);
}
/* Shared arrow nudge */
.lp1-arrow {
display: inline-block;
transition: transform var(--transition-fast);
}
/* === Buttons (squared-off, per spec §3) =============================== */
.page--start-here .button {
border-radius: 2px;
}
.lp1-button {
padding: 16px 28px;
border-radius: 2px;
margin: 0;
}
/* === Focus states (spec §6) ==========================================
Visible everywhere: navy outline on light bands, gold on the navy band,
ink on the gold buttons (a gold outline on a gold button is invisible). */
.page--start-here a:focus-visible {
outline: 2px solid var(--gj-navy);
outline-offset: 2px;
border-radius: 2px;
}
.page--start-here .lp1-button:focus-visible {
outline: 2px solid var(--gj-ink);
outline-offset: 3px;
}
.lp1-trust a:focus-visible {
outline-color: var(--gj-gold);
}
/* === S1 — Hero ======================================================== */
.lp1-hero {
background-color: var(--gj-paper);
padding-top: clamp(72px, 9vw, 128px);
}
/* The hero content is a left-aligned 760px column (spec §1) sitting at the left
edge of the page's content frame — so it lines up with the sections below. */
.lp1-hero__block {
max-width: 760px;
}
.lp1-hero__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(40px, 6vw, 64px);
line-height: 1.05;
color: var(--gj-navy);
max-width: 16ch;
margin: 0 0 24px 0;
}
.lp1-hero__subhead {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 62ch;
margin: 0 0 36px 0;
}
.lp1-hero__cta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px 28px;
}
.lp1-textlink {
display: inline-flex;
align-items: center;
color: var(--gj-navy);
font-weight: var(--weight-body-medium);
border-bottom: 1px solid rgba(39, 80, 116, 0.35);
max-width: 52ch;
}
.lp1-textlink:hover {
opacity: 1;
border-bottom-color: var(--gj-navy);
}
/* === S2 — Doors ======================================================= */
.lp1-doors {
background-color: var(--gj-stone);
scroll-margin-top: calc(var(--site-header-offset) + 24px);
}
/* Semantically the doors section heading (an ), but styled as an instructional
lead — body font, not the display face, so it reads as a sentence. */
.lp1-doors__lead {
max-width: 720px;
font-family: var(--font-body);
font-weight: var(--weight-body-regular);
font-size: clamp(18px, 1.8vw, 20px);
line-height: 1.6;
letter-spacing: normal;
text-transform: none;
color: var(--gj-ink);
margin: 0 0 var(--h2-spacing) 0;
}
.lp1-doors__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.lp1-door {
display: flex;
flex-direction: column;
background-color: var(--gj-paper);
border: 1px solid var(--gj-rule);
border-top: 4px solid transparent;
border-radius: 2px;
padding: 32px 32px 28px;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.lp1-door:hover {
border-top-color: var(--gj-gold);
box-shadow: 0 12px 28px rgba(23, 42, 56, 0.08);
}
.lp1-door__label {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(22px, 2.4vw, 27px);
line-height: 1.1;
color: var(--gj-navy);
margin: 0 0 14px 0;
}
.lp1-door__body {
font-size: 17px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0 0 22px 0;
}
.lp1-door__primary {
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.lp1-door__primary:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.lp1-door__secondary {
margin-top: 14px;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 15px;
color: var(--gj-navy);
border-bottom: 1px solid transparent;
}
.lp1-door__secondary:hover {
opacity: 1;
border-bottom-color: rgba(39, 80, 116, 0.4);
}
.lp1-door__note {
margin: 14px 0 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--gj-navy);
}
.lp1-door__primary:hover .lp1-arrow,
.lp1-door__secondary:hover .lp1-arrow,
.lp1-option__link:hover .lp1-arrow {
transform: translateX(3px);
}
/* === S3 — Trust band (navy) =========================================== */
.lp1-trust {
background-color: var(--gj-navy);
color: var(--color-text-on-dark);
}
.lp1-trust__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(28px, 3.5vw, 40px);
color: var(--color-text-on-dark);
margin: 0 0 var(--h2-spacing) 0;
}
.lp1-trust__cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.lp1-trust__col-title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(22px, 2.2vw, 26px);
line-height: 1.15;
color: var(--gj-gold);
margin: 0 0 14px 0;
}
.lp1-trust__col-body {
font-size: 16px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
.lp1-trust__deals {
list-style: none;
margin: 0;
padding: 0;
}
.lp1-trust__deals li {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lp1-trust__deals li:last-child {
border-bottom: none;
}
.lp1-trust__aum {
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.lp1-trust__footer {
margin: var(--h2-spacing) 0 0 0;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
}
.lp1-trust__link {
display: inline-flex;
align-items: center;
color: var(--gj-gold);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid rgba(238, 193, 88, 0.5);
}
.lp1-trust__link:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.lp1-trust__sep {
margin: 0 8px;
color: rgba(255, 255, 255, 0.4);
}
/* === S4 — Not-ready band ============================================== */
.lp1-notready {
background-color: var(--gj-paper);
}
.lp1-notready__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(28px, 3.5vw, 40px);
color: var(--gj-navy);
margin: 0 0 16px 0;
}
.lp1-notready__intro {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
max-width: 70ch;
margin: 0 0 var(--h2-spacing) 0;
}
.lp1-notready__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.lp1-option {
background-color: var(--gj-stone);
border: 1px solid var(--gj-rule);
border-radius: 2px;
padding: 32px;
}
.lp1-option__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(21px, 2.2vw, 26px);
line-height: 1.15;
color: var(--gj-navy);
margin: 0 0 12px 0;
}
.lp1-option__body {
font-size: 17px;
line-height: 1.6;
color: var(--gj-ink);
margin: 0 0 20px 0;
}
.lp1-option__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--gj-navy);
font-weight: var(--weight-body-semibold);
border-bottom: 2px solid transparent;
padding-bottom: 2px;
}
.lp1-option__link:hover {
opacity: 1;
border-bottom-color: var(--gj-gold);
}
.lp1-option__form input[type="email"],
.lp1-option__form input[type="text"] {
width: 100%;
}
.lp1-option__form-placeholder {
font-size: 14px;
line-height: 1.5;
color: var(--gj-navy);
background-color: rgba(39, 80, 116, 0.05);
padding: 12px 14px;
border-radius: 2px;
margin: 0;
}
.lp1-option__form-placeholder code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
}
/* === S5 — Final CTA band (cream, gold top rule) ======================= */
.lp1-final {
background-color: var(--gj-cream);
border-top: 4px solid var(--gj-gold);
text-align: center;
}
.lp1-final__inner {
max-width: 640px;
margin: 0 auto;
}
.lp1-final__heading {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(30px, 4vw, 44px);
color: var(--gj-navy);
margin: 0 0 18px 0;
}
.lp1-final__body {
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--gj-ink);
margin: 0 0 32px 0;
}
/* === Responsive ======================================================= */
@media (max-width: 1024px) {
.lp1-hero,
.lp1-doors,
.lp1-trust,
.lp1-notready,
.lp1-final {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 860px) {
.lp1-trust__cols {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Doors collapse to a single column at 720px (spec §8). */
@media (max-width: 720px) {
.lp1-doors__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.lp1-hero,
.lp1-doors,
.lp1-trust,
.lp1-notready,
.lp1-final {
padding-left: 24px;
padding-right: 24px;
}
.lp1-notready__options {
grid-template-columns: 1fr;
}
/* Let the hero secondary link wrap to the viewport, not an arbitrary 52ch. */
.lp1-textlink {
max-width: none;
}
/* Keep tap targets >=44px tall on mobile (spec §6). */
.lp1-textlink,
.lp1-door__primary,
.lp1-door__secondary,
.lp1-option__link,
.lp1-trust__link {
min-height: 44px;
padding-top: 8px;
padding-bottom: 8px;
}
/* The HubSpot-rendered newsletter inputs default to ~34px tall; bump them so
the email field is a >=44px tap target on mobile (spec §6). */
.lp1-option__form input[type="email"],
.lp1-option__form input[type="text"] {
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.lp1-arrow,
.lp1-door {
transition: none;
}
.lp1-door__primary:hover .lp1-arrow,
.lp1-door__secondary:hover .lp1-arrow,
.lp1-option__link:hover .lp1-arrow {
transform: none;
}
}
/* ============================================================================
was css/templates/system.css
loaded by: system/404.html, system/500.html, system/backup-unsubscribe.html, system/membership-login.html, system/membership-register.html, system/membership-reset-password-request.html, system/membership-reset-password.html, system/password-prompt.html, system/search-results.html, system/subscription-preferences.html, system/subscriptions-confirmation.html
============================================================================ */
/* Error pages */
.error-page {
padding: 10rem 0;
position: relative;
text-align: center;
}
.error-page:before {
color: #F3F6F9;
content: attr(data-error);
font-size: 40vw;
font-weight: bold;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: -1;
}
@media screen and (min-width: 1100px) {
.error-page:before {
font-size: 20rem;
}
}
/* GJ branded 404 — used by templates/system/404.html (extends base.html) */
.gj-404 {
display: flex;
align-items: center;
justify-content: center;
min-height: 55vh;
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
text-align: center;
}
.gj-404__inner {
max-width: 680px;
margin: 0 auto;
}
.gj-404__eyebrow {
margin: 0 0 18px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-light);
}
.gj-404__title {
margin: 0 0 22px;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h1);
line-height: 1.05;
color: var(--color-primary);
}
.gj-404__body {
margin: 0 auto 36px;
max-width: 48ch;
font-family: var(--font-body);
font-weight: var(--weight-body-regular);
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-primary);
}
.gj-404__actions {
margin: 0 0 44px;
}
@media (max-width: 600px) {
.gj-404 {
padding: var(--module-padding) 24px;
}
}
/* System pages */
.systems-page {
margin: 0 auto;
max-width: 700px;
padding: 3rem 1.4rem;
}
.systems-page--search-results {
max-width: 100%;
}
.systems-page .header {
background-color: transparent;
border-bottom: none;
padding: 0;
}
.systems-page .success {
background-color: #CDE3CC;
border: 1.5px solid #4F7D24;
border-radius: 6px;
color: #4F7D24;
display: inline-block;
margin: 1.4rem 0;
padding: 0.1rem 0.7rem;
width: 100%;
}
.systems-page form input {
max-width: 100%;
}
.systems-page form input[type='submit'] {
margin: 0.7rem 0;
display: block;
}
/* Search pages */
.hs-search-results__title {
font-size: 1.25rem;
margin-bottom: 0.35rem;
text-decoration: underline;
}
.hs-search-results__title:hover {
text-decoration: none;
}
.hs-search-results__description {
padding-top: 0.7rem;
}
/* Password prompt */
.password-prompt input[type=password] {
height: auto !important;
margin-bottom: 1.4rem;
}
.systems-page #hs-login-widget-remember,
.systems-page #hs-login-widget-remember ~ label {
display: inline-block;
margin-bottom: 0.175rem;
}
.systems-page #hs_login_reset {
display: block;
margin-bottom: 0.7rem;
}
/* Backup unsubscribe */
.backup-unsubscribe #email-prefs-form div {
padding-bottom: 0 !important;
}
.backup-unsubscribe input[type=email] {
font-size: 0.875rem !important;
margin-bottom: 1.4rem;
padding: 0.7rem !important;
}
/* Subscription preferences */
#email-prefs-form .item.disabled {
opacity: 0.6;
cursor: not-allowed;
}
#email-prefs-form .item.disabled input:disabled {
cursor: not-allowed;
}
/* Input error messages */
.form-input-validation-message ul.hs-error-msgs {
padding-left: 0;
margin: 0;
}
.form-input-validation-message ul.hs-error-msgs li {
margin: 0;
}
/* ============================================================================
was css/templates/track-record.css
loaded by: track-record.html
============================================================================ */
/* === Track Record — page-level styles ===
Section styling lives in the modules (specialization-block, deal-tombstones,
track-record-prior, testimonial, cta-band) so they stay portable. This file
holds only page-scoped concerns. */
.page--track-record {
background-color: var(--color-background);
}
/* ============================================================================
was css/templates/valuation-calculator.css
loaded by: valuation-estimate.html
============================================================================ */
/* === Valuation Calculator page (/resources/ria-valuation-calculator) =========
Page-level layout only: the full-bleed navy frame banner (Zone 1) and the
centered content column (.vc-body) that holds the tool, convert block, and FAQ.
The interactive tool, result card, segmented controls, band, chips, and form
card are styled in the valuation-calculator module section of this file.
Same design-system family as the pillars and LPs: brand tokens from the :root
block at the top of this file.
The banner mirrors the pillar-hero pattern (full-width navy, centered inner).
Scoped to .page--valuation-calculator. No HubL literals in this file. */
.page--valuation-calculator {
background-color: var(--color-background);
}
/* Full-width wrapper: the banner spans edge to edge, the body is centered. */
.page--valuation-calculator .vc {
width: 100%;
}
.page--valuation-calculator a:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* === Zone 1 — full-bleed navy banner === */
.page--valuation-calculator .vc-frame {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
padding: clamp(48px, 7vw, 88px) 0;
}
.page--valuation-calculator .vc-frame__inner {
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 48px);
}
.page--valuation-calculator .vc-frame__kicker {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-emphasis);
margin: 0 0 16px;
}
.page--valuation-calculator .vc-frame__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(40px, 5.2vw, 60px);
line-height: 1.04;
color: var(--color-text-on-dark);
margin: 0 0 24px;
}
.page--valuation-calculator .vc-frame__intro {
max-width: 64ch;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-on-dark);
}
.page--valuation-calculator .vc-frame__intro p {
margin: 0 0 18px;
opacity: 0.92;
}
.page--valuation-calculator .vc-frame__intro p:last-child {
margin-bottom: 0;
}
.page--valuation-calculator .vc-frame__intro a {
color: var(--color-text-on-dark);
text-decoration: underline;
text-underline-offset: 2px;
}
/* === Body — centered content column (aligned with the banner inner) === */
.page--valuation-calculator .vc-body {
max-width: 920px;
margin: 0 auto;
padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px) 96px;
}
/* === Zone rhythm === */
.page--valuation-calculator .vc-convert {
margin-top: 48px;
}
/* Legal disclaimer (§11) — italic fine print under the CTA copy in the left column. */
.page--valuation-calculator .vc-disclaimer {
margin-top: 20px;
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
line-height: 1.55;
color: var(--color-muted);
}
.page--valuation-calculator .vc-disclaimer p {
margin: 0;
}
/* ============================================================================
was css/templates/who-we-are.css
loaded by: who-we-are.html
============================================================================ */
/* === Who We Are — page-level styles ===
Almost all styling lives in the modules (principal-card-grid,
behind-the-name, cta-band, pillar-hero) so they stay portable. This file
holds only page-scoped concerns. */
.page--who-we-are {
background-color: var(--color-background);
}
/* Alternate the two white sections so the page doesn't read as one long
white scroll: a faint slate tint behind the Behind the Name story sets it
apart from the principal grid above and the dark CTA band below. */
.page--who-we-are .behind-the-name {
background-color: #f3f6f9;
}
/* ============================================================================
3. was css/theme-overrides.css
(its HubL import of tools/_macros.css now sits on line 1 of this file; the color() macro is used by the set statements below)
============================================================================ */
/* 1a. Containers */
/* 1b. Colors */
/* 1c. Typography */
/* 1d. Buttons */
/* 1e. Forms */
/* 1f. Tables */
/* 1g. Website header */
/* 1h. Website footer */
.content-wrapper {
max-width: var(--content-width);
}
.dnd-section,
.content-wrapper--vertical-spacing {
padding: 80px 1rem;
}
.dnd-section > .row-fluid {
max-width: var(--content-width);
}
html {
font-size: 21px;
}
body {
font-family: var(--font-body); font-style: normal; font-weight: 400; text-decoration: none;
color: var(--color-primary);
font-size: var(--body-size);
}
/* Paragraphs */
p {
font-family: var(--font-body); font-style: normal; font-weight: 400; text-decoration: none;
}
/* Anchors */
a {
font-weight: normal; text-decoration: none; font-family: var(--font-body); font-style: normal;
color: var(--color-emphasis);
}
/* Hover / focus / active only change colour. They used to re-assert the body
font, weight and style too (a theme-settings artefact), which made links set
in the display face — the phone overlay menu — flash into Montserrat on tap. */
a:hover,
a:focus {
color: var(--color-emphasis-dark);
}
a:active {
color: var(--color-emphasis-active);
}
/* Headings */
h1,
.h1 {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h1);
text-transform: none;
}
h2,
.h2 {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h2);
text-transform: none;
}
h3,
.h3 {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h3);
text-transform: none;
}
h4,
.h4 {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h4);
text-transform: none;
}
h5,
.h5 {
font-weight: normal; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h5);
text-transform: none;
}
h6,
.h6 {
font-weight: normal; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: var(--heading-size-h6);
text-transform: none;
}
/* Blockquote */
blockquote {
border-left-color: var(--color-dark);
}
button,
.button,
.hs-button,
.hs-blog-post-listing__post-button {
border: 1px solid var(--color-primary);
padding-top: var(--button-padding-y);
padding-right: var(--button-padding-x);
padding-bottom: var(--button-padding-y);
padding-left: var(--button-padding-x);
font-family: var(--font-body); font-style: normal; font-weight: 600; text-decoration: none;
background-color: var(--color-primary);
border-radius: var(--border-radius-button);
color: var(--color-text-on-dark);
font-size: 25px;
text-transform: none;
}
button:hover,
button:focus,
.button:hover,
.button:focus,
.hs-button:hover,
.hs-button:focus,
.hs-blog-post-listing__post-button:hover,
.hs-blog-post-listing__post-button:focus {
border: 1px solid var(--color-dark);
color: var(--color-text-on-dark);
background-color: var(--color-dark);
border-radius: var(--border-radius-button-hover);
}
button:active,
.button:active,
.hs-button:active,
.hs-blog-post-listing__post-button:active {
font-family: var(--font-body); font-style: normal; font-weight: 600; text-decoration: none;
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
}
form,
.submitted-message {
font-family: var(--font-body); font-style: normal; font-weight: 400; text-decoration: none;
border: 1px none var(--color-dark);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
background-color: var(--color-dark);
padding: 0px;
}
/* Form title */
.form-title {
border: 1px none var(--color-background);
padding: 0px;
font-family: var(--font-body); font-style: normal; font-weight: normal; text-decoration: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
font-size: 33px;
color: var(--color-primary);
background-color: var(--color-text-on-dark);
}
/* Labels */
form label {
color: var(--color-primary);
}
/* Help text */
form legend {
color: var(--color-primary);
}
/* Inputs */
form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
border: 2px solid var(--color-border-field);
background-color: var(--color-text-on-dark);
color: var(--color-primary);
border-radius: 3px;
}
/* Form placeholder text */
::-webkit-input-placeholder {
color: var(--color-primary);
}
::-moz-placeholder {
color: var(--color-primary);
}
:-ms-input-placeholder {
color: var(--color-primary);
}
::placeholder {
color: var(--color-primary);
}
/* Inputs - date picker */
.hs-fieldtype-date .input .hs-dateinput:before {
color: var(--color-primary);
}
.fn-date-picker td.is-selected .pika-button {
background: var(--color-primary);
}
.fn-date-picker td .pika-button:hover {
background-color: var(--color-primary) !important;
}
.fn-date-picker td.is-today .pika-button {
color: var(--color-primary);
}
/* Submit button */
form input[type=submit],
form .hs-button {
border: 1px none var(--color-primary);
padding-top: var(--button-padding-y);
padding-right: var(--button-padding-x);
padding-bottom: var(--button-padding-y);
padding-left: var(--button-padding-x);
font-family: var(--font-body); font-style: normal; font-weight: normal; text-decoration: none;
color: var(--color-text-on-dark);
font-size: 22px;
background-color: var(--color-primary);
border-radius: var(--border-radius-button);
text-transform: none;
}
form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
background-color: var(--color-dark);
color: var(--color-text-on-dark);
border: 1px none var(--color-dark);
}
form input[type=submit]:active,
form .hs-button:active {
background-color: var(--color-primary-active);
border-color: var(--color-primary-active);
}
/* New HubSpot forms (hsfc) render dropdowns as a searchable combobox. GJ's
dropdowns are short lists (Firm AUM, inquiry catalyst), so the type-ahead
"Search" box adds friction without value — hide it. Targeted by ARIA role +
the hsfc data-id so it never touches the name/email text inputs (which share
the generic hsfc-TextInput class) or any non-HubSpot search field. Unscoped
on purpose: the dropdown popover is portaled outside the form container. */
input[role="searchbox"][data-hsfc-id="TextInput"] {
display: none !important;
}
/* Table */
table {
border: 1px solid var(--color-primary);
background-color: var(--color-text-on-dark);
}
/* Table cells */
td,
th {
border: 1px solid var(--color-primary);
padding: 18px;
color: var(--color-primary);
}
/* Table header */
thead th {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
}
/* Table footer */
tfoot td {
background-color: var(--color-text-on-dark);
color: var(--color-primary);
}
.header {
background-color: var(--color-dark);
}
.menu__link,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
color: var(--color-primary);
font-family: Montserrat;
}
.menu__child-toggle-icon {
border-top-color: var(--color-primary);
}
.menu .menu__link:hover,
.menu .menu__link:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
color: var(--color-primary-hover);
}
.menu__child-toggle-icon:hover,
.menu__child-toggle-icon:focus {
border-top-color: var(--color-primary-hover);
}
.menu .menu__link:active,
.header__language-switcher-label-current:active,
.header__language-switcher .lang_list_class li a:active {
color: var(--color-primary-active);
}
.menu__child-toggle-icon:active {
border-top-color: var(--color-primary-active);
}
.menu .menu__item--depth-1 > .menu__link--active-link:after {
background-color: var(--color-primary);
}
@media (min-width: 767px) {
.menu .menu__submenu,
.header__language-switcher .lang_list_class {
border: 2px solid var(--color-primary);
background-color: var(--color-text-on-dark);
}
.menu__submenu--level-2 > .menu__item:first-child:before {
border: 2px solid var(--color-primary);
background-color: var(--color-text-on-dark);
}
}
.menu__submenu .menu__link,
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus {
color: var(--color-primary);
background-color: var(--color-text-on-dark);
}
.header__language-switcher .lang_list_class:before {
border-bottom-color: var(--color-primary);
}
.menu__submenu .menu__link:hover,
.menu__submenu .menu__link:focus,
.header__language-switcher .lang_list_class li:hover,
.menu__submenu--level-2 > .menu__item:first-child:hover:before,
.menu__submenu--level-2 > .menu__item:first-child.focus:before {
background-color: var(--color-dark);
}
.header__language-switcher .lang_list_class.first-active::after {
border-bottom-color: var(--color-dark);
}
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
font-family: Montserrat;
}
.header__language-switcher-label-current:after {
border-top-color: var(--color-primary);
}
@media(max-width: 767px) {
.header__navigation {
background-color: var(--color-dark);
}
.header__navigation-toggle svg,
.menu-arrow svg {
fill: var(--color-primary);
}
}
.footer {
background-color: var(--color-dark);
}
/* Footer content */
.footer p,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer label,
.footer span,
.footer li,
.footer img {
color: var(--color-primary);
}
.blog-post,
.blog-header__inner,
.blog-related-posts {
padding: 80px 0;
}
/* Blog post */
.blog-post__meta a {
color: var(--color-primary);
}
.blog-post__tag-link {
color: var(--color-primary);
}
.blog-post__tag-link:hover,
.blog-post__tag-link:focus {
color: var(--color-primary-hover);
}
.blog-post__tag-link:active {
color: var(--color-primary-active);
}
/* Blog related posts */
.blog-related-posts__title-link,
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus,
.blog-related-posts__title-link:active {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
text-transform: none;
}
.blog-related-posts__title-link {
color: var(--color-primary);
}
.blog-related-posts__title-link:hover,
.blog-related-posts__title-link:focus {
color: var(--color-primary-hover);
}
.blog-related-posts__title-link:active {
color: var(--color-primary-active);
}
/* Blog comments */
.blog-comments {
margin-bottom: 80px;
}
#comments-listing .comment-reply-to {
color: var(--color-emphasis);
}
#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
color: var(--color-emphasis-dark);
}
#comments-listing .comment-reply-to:active {
color: var(--color-emphasis-active);
}
.hs-search-results__title {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
}
/* Blog listing */
.hs-blog-post-listing__post-title-link,
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus,
.hs-blog-post-listing__post-title-link:active {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
text-transform: none;
}
.hs-blog-post-listing__post-title-link {
color: var(--color-primary);
}
.hs-blog-post-listing__post-title-link:hover,
.hs-blog-post-listing__post-title-link:focus {
color: var(--color-primary-hover);
}
.hs-blog-post-listing__post-title-link:active {
color: var(--color-primary-active);
}
.hs-blog-post-listing__post-tag,
.hs-blog-post-listing__post-author-name {
color: var(--color-primary);
}
/* Blog pagination */
.hs-pagination__link-text,
.hs-pagination__link--number {
color: var(--color-primary);
}
.hs-pagination__link:hover .hs-pagination__link-text,
.hs-pagination__link:focus .hs-pagination__link-text,
.hs-pagination__link--number:hover,
.hs-pagination__link--number:focus {
color: var(--color-primary-hover);
}
.hs-pagination__link:active .hs-pagination__link-text,
.hs-pagination__link--number:active {
color: var(--color-primary-active);
}
.hs-pagination__link-icon svg {
fill: var(--color-primary);
}
/* Pricing card */
.card__price {
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: 33px;
}
.card__body svg {
fill: var(--color-primary);
}
/* Social follow */
.social-links__icon {
background-color: var(--color-primary);
}
.social-links__icon:hover,
.social-links__icon:focus {
background-color: var(--color-primary-hover);
}
.social-links__icon:active {
background-color: var(--color-primary-active);
font-weight: 300; text-decoration: none; font-family: var(--font-display); font-style: normal;
color: var(--color-primary);
font-size: 33px;
}
/* ============================================================================
4. former module stylesheets (modules/.module/module.css), in live load order
============================================================================ */
/* ============================================================================
was modules/nav-overlay.module/module.css
============================================================================ */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--color-dark);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base), visibility var(--transition-base);
}
.nav-overlay[aria-hidden="false"] {
opacity: 1;
visibility: visible;
}
.nav-overlay__close {
position: absolute;
top: 32px;
right: 32px;
background: transparent;
border: none;
color: var(--color-text-on-dark);
cursor: pointer;
padding: 12px;
line-height: 1;
}
.nav-overlay__close-icon {
font-size: 48px;
font-weight: 300;
display: block;
}
.nav-overlay__close:hover {
opacity: 0.7;
}
.nav-overlay__nav {
width: 100%;
max-width: var(--content-width);
padding: 0 var(--content-padding-x);
}
.nav-overlay__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.nav-overlay__item {
margin: 0;
}
.nav-overlay__link {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(36px, 6vw, 72px);
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
text-transform: uppercase;
letter-spacing: 0.02em;
transition: opacity var(--transition-fast);
}
.nav-overlay__link:hover,
.nav-overlay__link:focus-visible,
.nav-overlay__link:active {
color: var(--color-text-on-dark); /* stay white on the dark overlay (global a:hover is gold) */
opacity: 0.7;
}
/* === Dropdown group (e.g. News & Resources) === */
.nav-overlay__item--group {
text-align: center;
}
.nav-overlay__group-label {
display: block;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(36px, 6vw, 72px);
color: var(--color-text-on-dark);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.nav-overlay__sublist {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.nav-overlay__subitem {
margin: 0;
}
.nav-overlay__sublink {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: clamp(18px, 3.5vw, 28px);
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
letter-spacing: 0.04em;
transition: opacity var(--transition-fast);
}
.nav-overlay__sublink:hover,
.nav-overlay__sublink:focus-visible,
.nav-overlay__sublink:active {
color: var(--color-text-on-dark);
opacity: 0.7;
}
/* === Contact call-to-action button in the overlay (2026-09-21) ===
The menu's contact entry renders as a gold button beneath the text links
(markup in nav-overlay module.html). */
.nav-overlay__item--cta {
margin-top: 8px;
}
.nav-overlay__cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 40px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: clamp(16px, 2.4vw, 19px);
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
color: var(--color-dark);
background-color: var(--color-emphasis);
border: none;
border-bottom: none;
border-radius: var(--border-radius-button);
text-decoration: none;
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
/* The overlay inherits the desktop page padding; on phones that leaves too
little width for the menu text and the button, so use the header's padding. */
@media (max-width: 959px) {
.nav-overlay__nav {
padding: 0 var(--header-padding-x);
}
}
.nav-overlay__cta:hover,
.nav-overlay__cta:focus-visible {
background-color: var(--color-emphasis-hover);
color: var(--color-dark);
opacity: 1;
text-decoration: none;
border-bottom: none;
}
.nav-overlay__cta:focus-visible {
outline: 2px solid var(--color-text-on-dark);
outline-offset: 3px;
}
.nav-overlay__cta:active {
transform: translateY(1px);
}
/* Prevent body scroll when overlay is open */
body.nav-open {
overflow: hidden;
}
/* ============================================================================
was modules/header.module/module.css
============================================================================ */
/* Pinned on every page. HubSpot renders each module inside a wrapper div sized
to its content, and a sticky element can only stick within its parent's box —
so the WRAPPER is the sticky element (it sits directly in .body-wrapper, which
spans the page). The header inside stays in normal flow: no layout shift, no
body offset. The transparent homepage header is the one exception — position:
fixed further down, so it floats over the hero (its wrapper then has no height,
which is harmless). Sizes come from the --header-* tokens in :root. */
#hs_cos_wrapper_site_header {
position: sticky;
top: 0;
z-index: 100;
}
/* Homepage: the header floats over the hero, so the WRAPPER is fixed (not the
header inside a sticky wrapper — WebKit positions a fixed descendant relative
to a sticky ancestor, which pushed the phone header down the hero). */
.page--home #hs_cos_wrapper_site_header {
position: fixed;
left: 0;
width: 100%;
}
.site-header {
position: relative;
left: 0;
width: 100%;
z-index: 100;
padding: var(--header-padding-y) var(--header-padding-x);
transition: background-color var(--transition-base), padding var(--transition-base), box-shadow var(--transition-base);
}
/* Compact form once the reader has scrolled past the top (toggled sitewide in
header module.js): tighter padding, a smaller logo, and a soft shadow to
separate it from content sliding underneath. --site-header-offset tracks this
height so sticky rails and anchor jumps clear it. */
.site-header--scrolled {
padding-top: var(--header-padding-y-compact);
padding-bottom: var(--header-padding-y-compact);
box-shadow: 0 2px 12px rgba(23, 42, 56, 0.08);
}
/* === Background treatments === */
.site-header--transparent {
background-color: transparent;
}
.site-header--gold {
background-color: var(--color-emphasis);
}
.site-header--white {
background-color: var(--color-background);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.site-header__inner {
max-width: var(--grid-max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.site-header__logo-link {
display: inline-block;
border-bottom: none;
}
.site-header__logo {
display: block;
height: var(--header-logo-height);
width: auto;
max-width: 100%;
transition: height var(--transition-base);
}
.site-header--scrolled .site-header__logo {
height: var(--header-logo-height-compact);
}
/* === Hamburger button === */
.site-header__menu-trigger {
background: transparent;
border: none;
padding: 10px;
margin-right: -10px; /* let the icon, not its hit area, sit on the page edge */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.site-header__hamburger {
display: inline-flex;
flex-direction: column;
gap: 6px;
width: 32px;
}
.site-header__hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: var(--color-primary);
transition: background-color var(--transition-base);
}
/* Hamburger bars stay navy on every header treatment — including the transparent
homepage header, whose hero top is light — matching the desktop nav. */
/* Subtle navy-tint highlight on hover/focus, overriding the global dark
button:hover fill with something far lighter and more transparent. */
.site-header__menu-trigger:hover,
.site-header__menu-trigger:focus {
background-color: rgba(39, 80, 116, 0.1);
border: none;
border-radius: 6px;
box-shadow: none;
}
/* === Desktop horizontal nav ===
Hidden by default (mobile shows the hamburger + fullscreen overlay instead);
revealed at the desktop breakpoint (960px) where the items fit on one row. */
.site-header__nav {
display: none;
}
.site-header__nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 28px;
}
.site-header__nav-item {
margin: 0;
}
.site-header__nav-link {
display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 15px;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
color: var(--color-primary);
text-decoration: none;
border: none;
border-bottom: 2px solid transparent;
padding: 0 0 3px;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
/* Hover: keep the text color and weight exactly as-is (overriding the global
gold/lighter a:hover styles) and show only a navy underline — gold would
disappear against the gold navbar once the homepage header scrolls. */
.site-header__nav-link:hover,
.site-header__nav-link:focus-visible {
color: var(--color-primary);
font-weight: var(--weight-body-semibold);
opacity: 1;
text-decoration: none;
border-bottom-color: var(--color-primary);
}
/* Nav links stay navy across every header treatment — including the transparent
homepage header pre-scroll — so the brand color is consistent at all times.
(Base .site-header__nav-link color above is already navy; no per-treatment
override needed. The hamburger, shown below 960px, still tracks treatment.) */
/* === Contact call-to-action button (2026-09-21) ===
The menu's contact entry renders as a solid gold button at the end of the nav
(markup in header module.html). Sized independently of the theme's large
--font-size-button so it sits on the nav line. */
.site-header__nav-item--cta {
margin-left: 8px;
}
.site-header__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px 12px 18px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
color: var(--color-dark);
background-color: var(--color-emphasis);
border: none;
border-bottom: none;
border-radius: var(--border-radius-button);
text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
background-color: var(--color-emphasis-hover);
color: var(--color-dark);
opacity: 1;
text-decoration: none;
border-bottom: none;
}
.site-header__cta:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.site-header__cta:active {
transform: translateY(1px);
}
.site-header__cta-arrow {
display: inline-flex;
transition: transform var(--transition-fast);
}
.site-header__cta-arrow svg {
display: block;
}
.site-header__cta:hover .site-header__cta-arrow {
transform: translateX(3px);
}
/* Gold-on-gold would vanish: on the gold band (and the homepage header once it
scrolls into its gold state) the button flips to navy. */
.site-header--gold .site-header__cta,
.site-header--transparent.site-header--scrolled .site-header__cta {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
}
.site-header--gold .site-header__cta:hover,
.site-header--gold .site-header__cta:focus-visible,
.site-header--transparent.site-header--scrolled .site-header__cta:hover,
.site-header--transparent.site-header--scrolled .site-header__cta:focus-visible {
background-color: var(--color-dark);
color: var(--color-text-on-dark);
}
/* === Dropdown (News & Resources) === */
.site-header__nav-item--dropdown {
position: relative;
}
/* The toggle reuses .site-header__nav-link styling (display, border, padding, font);
it only needs the button-chrome resets that class doesn't cover. */
.site-header__nav-toggle {
background: none;
cursor: pointer;
}
/* Override the global hover/focus styling (dark fill, radius, border,
press-shift) so the toggle behaves exactly like the other nav links — no box,
just the navy underline. */
.site-header__nav-toggle:hover,
.site-header__nav-toggle:focus,
.site-header__nav-toggle:active {
background: none;
border: none;
border-bottom: 2px solid var(--color-primary);
border-radius: 0;
box-shadow: none;
color: var(--color-primary);
opacity: 1;
transform: none;
}
.site-header__caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 7px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition-fast);
}
.site-header__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 210px;
margin: 0;
padding: 8px 0;
list-style: none;
background-color: var(--color-primary);
border-radius: var(--border-radius-card);
box-shadow: 0 10px 28px rgba(23, 42, 56, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
z-index: 200;
}
/* Invisible bridge so hover doesn't drop when crossing the gap to the menu. */
.site-header__dropdown::before {
content: "";
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.site-header__nav-item--dropdown:hover .site-header__dropdown,
.site-header__nav-item--dropdown:focus-within .site-header__dropdown,
.site-header__nav-item--dropdown.is-open .site-header__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-header__nav-item--dropdown:hover .site-header__caret,
.site-header__nav-item--dropdown.is-open .site-header__caret {
transform: rotate(180deg);
}
.site-header__dropdown-item {
margin: 0;
}
.site-header__dropdown-link {
display: block;
padding: 9px 22px;
font-family: var(--font-body);
font-weight: var(--weight-body-medium);
font-size: 14px;
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
/* Subtle white-overlay highlight keeps the text white and the weight steady
(overriding the global lighter/colored a:hover) on the navy panel. */
.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible {
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-text-on-dark);
font-weight: var(--weight-body-medium);
opacity: 1;
}
/* Desktop nav appears once there's comfortable room for the four items + logo
(~890px minimum incl. the 100px side padding); below this, the hamburger +
fullscreen overlay take over. */
@media (min-width: 960px) {
.site-header__nav {
display: block;
}
.site-header__menu-trigger {
display: none;
}
}
/* Phone-width header bar: logo — call-to-action — hamburger. The button is
centred on the page (not between its neighbours: the logo is wider than the
hamburger, so space-between would sit it right of centre). A slightly smaller
variant of the nav button; hidden at desktop widths where the nav carries it. */
.site-header__inner {
position: relative;
}
.site-header__cta--bar {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 10px 14px;
font-size: 13px;
letter-spacing: 0.02em;
}
.site-header__cta--bar:active {
transform: translate(-50%, calc(-50% + 1px));
}
@media (min-width: 960px) {
.site-header__cta--bar {
display: none;
}
}
@media (max-width: 959px) {
.site-header__inner {
gap: 12px;
}
}
/* Very narrow phones: keep clear of the logo. */
@media (max-width: 360px) {
.site-header__cta--bar {
padding: 9px 11px;
font-size: 12px;
}
}
/* ============================================================================
was modules/banner.module/module.css
============================================================================ */
.banner {
width: 100%;
padding: var(--module-padding) var(--content-padding-x);
display: flex;
align-items: center;
justify-content: center;
}
.banner--navy { background-color: var(--color-primary); }
.banner--dark { background-color: var(--color-dark); }
.banner__inner {
max-width: var(--content-width);
width: 100%;
}
.banner__headline {
color: var(--color-text-on-dark);
margin: 0;
}
.banner[data-align="left"] .banner__headline { text-align: left; }
.banner[data-align="center"] .banner__headline { text-align: center; }
.banner[data-align="right"] .banner__headline { text-align: right; }
/* ============================================================================
was modules/contact-section.module/module.css
============================================================================ */
.contact-section {
background-color: var(--color-dark);
color: var(--color-text-on-dark);
padding: var(--module-padding) var(--content-padding-x);
}
.contact-section__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (dark variant), duplicated for module independence.
The flanking rule lines were removed 2026-06-26 per JP (they read as stray
separators, especially when the header text is blank). A larger contact-page
update is planned — revisit the header treatment then. === */
.contact-section .section-header-block {
text-align: center;
margin-bottom: var(--h2-spacing);
}
.contact-section .section-header-block__heading {
display: inline-block;
margin: 0;
color: var(--color-text-on-dark);
}
.contact-section__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-top: var(--h2-spacing);
}
@media (max-width: 800px) {
.contact-section__grid {
grid-template-columns: 1fr;
gap: 48px;
}
}
.contact-section__address {
font-style: normal;
font-size: var(--font-size-body);
color: var(--color-text-on-dark);
margin-bottom: var(--paragraph-spacing);
line-height: 1.6;
}
.contact-section__contact-line {
margin-bottom: 12px;
}
.contact-section__link {
color: var(--color-text-on-dark);
border-bottom: 1px solid currentColor;
}
.contact-section__link:hover {
opacity: 0.7;
}
.contact-section__map {
/* Google My Maps embeds always render a header bar (map title + the owner's
name and profile photo) with no option to hide it. We clip it off: the
iframe below is made taller than this wrapper and pulled up by the header
height, so only the map shows. Tune these two values if the header peeks
through (increase --map-header-clip) or too much map is lost (decrease it). */
--map-visible-height: 320px;
--map-header-clip: 72px;
margin-top: 24px;
border-radius: var(--border-radius-card);
overflow: hidden;
height: var(--map-visible-height);
}
.contact-section__map iframe {
display: block;
width: 100%;
height: calc(var(--map-visible-height) + var(--map-header-clip));
margin-top: calc(-1 * var(--map-header-clip));
border: 0;
}
.contact-section__form-wrap {
background-color: var(--color-background);
color: var(--color-primary);
padding: 24px;
border-radius: var(--border-radius-card);
}
/* === HubSpot form styling within the dark contact section === */
.contact-section__form-wrap form { color: var(--color-primary); }
.contact-section__form-wrap label {
color: var(--color-primary);
font-weight: var(--weight-body-regular);
font-size: var(--font-size-small);
display: block;
margin-bottom: 6px;
}
.contact-section__form-wrap input,
.contact-section__form-wrap textarea,
.contact-section__form-wrap select {
width: 100%;
padding: 12px;
border: 1px solid var(--color-light);
border-radius: 4px;
font-family: var(--font-body);
font-size: var(--font-size-body);
margin-bottom: 16px;
}
.contact-section__form-wrap input:focus,
.contact-section__form-wrap textarea:focus {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
.contact-section__form-wrap input[type="submit"] {
background-color: var(--color-emphasis);
color: var(--color-dark);
border: none;
font-weight: var(--weight-body-semibold);
cursor: pointer;
padding: 14px 28px;
width: auto;
margin-top: 8px;
}
.contact-section__form-wrap input[type="submit"]:hover { background-color: var(--color-emphasis-hover); opacity: 1; }
/* ============================================================================
was modules/home-hero.module/module.css
============================================================================ */
.home-hero {
position: relative;
width: 100%;
/* Constant clearance strip at the very top. The site header floats over the
hero (position:absolute), and this keeps the image's top a FIXED distance
below the page top so the nav never rides up onto the principals' faces.
Because it's a fixed strip — not a height floor — the image's top stays put
as the window resizes, so there's no vertical jump when crossing the 960px
nav breakpoint. Tunable via the "Top clearance" field (--hero-top-pad). */
padding-top: var(--hero-top-pad, 56px);
/* Cool studio-gray gradient sampled from the photo's backdrop so the seam is
near-invisible. It fills the clearance strip above and the left/right space
on very wide screens once the image caps at its max-height. */
background: linear-gradient(180deg, #c9d2da 0%, #d8e0e8 30%, #d4dce4 56%, #c6d0d8 100%);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Image keeps its natural aspect ratio, centered. max-width:100% lets it resize
down as the screen narrows; max-height (set inline from the field) caps it on
wide screens so the section shrink-wraps the image instead of leaving a gap. */
.home-hero__image {
display: block;
width: auto;
height: auto;
max-width: 100%;
/* Feather the left/right edges (so the photo's backdrop dissolves into the
side gradient, no hard vertical seam) AND the top edge (so it dissolves into
the gray band that appears above the bottom-pinned image on shorter windows,
no hard horizontal seam). The two gradients are INTERSECTED — a pixel shows
only where both keep it: middle-horizontal AND below the top fade. The top
fade ends at 8%, above the principals' heads on both crops, so faces are
never softened. Only the empty backdrop blends. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 8%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 8%);
mask-composite: intersect;
}
/* ============================================================================
was modules/insights-hero.module/module.css
============================================================================ */
.insights-hero {
position: relative;
background-color: var(--color-primary); /* solid navy */
color: var(--color-text-on-dark);
padding: calc(var(--module-padding) * 1.6) var(--content-padding-x);
overflow: hidden;
}
/* === Imaged variant: optional photo background sits under a navy overlay === */
.insights-hero--imaged {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.insights-hero__overlay {
position: absolute;
inset: 0;
background-color: rgba(39, 80, 116, 0.85);
z-index: 0;
}
.insights-hero__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.insights-hero__eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
color: var(--color-emphasis);
letter-spacing: 0.12em;
margin: 0 0 16px 0;
}
.insights-hero__headline {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h1);
color: var(--color-text-on-dark);
margin: 0 0 var(--paragraph-spacing) 0;
line-height: 1.1;
}
.insights-hero__tagline p {
font-size: var(--font-size-body);
color: var(--color-text-on-dark);
opacity: 0.9;
line-height: 1.7;
margin: 0;
}
@media (max-width: 767px) {
.insights-hero {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
was modules/news-list.module/module.css
============================================================================ */
.news-list-module {
width: 100%;
padding: var(--module-padding) var(--content-padding-x);
}
.news-list-module__inner {
max-width: var(--content-width);
margin: 0 auto;
}
.news-list__intro {
max-width: 70ch;
margin: 0 0 var(--module-margin);
font-family: var(--font-body);
font-size: var(--font-size-body);
color: var(--color-text-primary);
}
.news-list {
list-style: none;
margin: 0;
padding: 0;
}
/* === Item === */
.news-item {
padding: 36px 0;
border-bottom: 1px solid rgba(39, 80, 116, 0.12); /* navy at 12% */
}
.news-item:first-child {
padding-top: 0;
}
.news-item:last-child {
border-bottom: none;
}
/* Source / date meta line */
.news-item__meta {
margin: 0 0 10px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.news-item__sep {
margin: 0 8px;
}
/* Headline (links to the external article) */
.news-item__title {
margin: 0 0 10px;
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: clamp(20px, 2vw, 24px);
line-height: 1.3;
color: var(--color-primary);
}
.news-item__link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.news-item__link:hover,
.news-item__link:focus-visible {
border-bottom-color: var(--color-emphasis);
}
.news-item__desc {
margin: 0 0 14px;
max-width: 75ch;
font-family: var(--font-body);
font-weight: var(--weight-body-regular);
font-size: 17px;
line-height: 1.5;
color: var(--color-text-primary);
}
/* Read More */
.news-item__readmore {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 15px;
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.news-item__readmore:hover,
.news-item__readmore:focus-visible {
color: var(--color-emphasis);
}
.news-item__arrow {
transition: transform var(--transition-fast);
}
.news-item__readmore:hover .news-item__arrow {
transform: translateX(3px);
}
/* ============================================================================
was modules/pillar-hero.module/module.css
============================================================================ */
/* === GJ Pillar Hero ===
Navy banner page-title for long-form pillar pages. Left-aligned within the
content column for an editorial feel (vs. the centered .banner section used
for section transitions). Optional photo background sits under a dark-navy
overlay so the white headline stays legible. */
.pillar-hero {
position: relative;
background-color: var(--color-primary);
color: var(--color-text-on-dark);
padding: calc(var(--module-padding) * 1.6) var(--content-padding-x);
}
.pillar-hero--imaged {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.pillar-hero__overlay {
position: absolute;
inset: 0;
background-color: rgba(23, 42, 56, 0.78); /* --color-dark @ 78% */
z-index: 0;
}
.pillar-hero__inner {
position: relative;
z-index: 1;
max-width: var(--content-width);
margin: 0 auto;
}
.pillar-hero__kicker {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.12em;
color: var(--color-emphasis);
margin: 0 0 16px 0;
}
.pillar-hero__headline {
color: var(--color-text-on-dark);
font-size: clamp(40px, 5.2vw, 60px);
line-height: 1.05;
max-width: 22ch;
margin: 0;
}
.pillar-hero__dek {
margin-top: 24px;
max-width: 60ch;
}
.pillar-hero__dek p {
font-size: var(--font-size-body);
color: var(--color-text-on-dark);
opacity: 0.9;
margin: 0 0 var(--paragraph-spacing) 0;
}
.pillar-hero__dek p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
.pillar-hero {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
was modules/partner-bio.module/module.css
============================================================================ */
.partner-bio {
background-color: var(--color-background);
color: var(--color-primary);
padding: var(--module-padding) var(--content-padding-x);
}
.partner-bio__inner {
max-width: var(--content-width);
margin: 0 auto;
}
.partner-bio__layout {
display: grid;
grid-template-columns: 340px 1fr;
gap: 64px;
align-items: start;
}
@media (max-width: 800px) {
.partner-bio__layout {
grid-template-columns: 1fr;
gap: 40px;
}
.partner-bio__aside {
max-width: 340px;
}
}
.partner-bio__photo-wrap {
margin-bottom: 20px;
}
.partner-bio__photo {
width: 100%;
height: auto;
display: block;
}
.partner-bio__role {
font-style: italic;
color: var(--color-text-muted);
margin: 0 0 14px 0;
}
.partner-bio__connect {
display: flex;
align-items: center;
gap: 18px;
}
.partner-bio__email {
color: var(--color-primary);
border-bottom: 1px solid var(--color-emphasis);
}
/* LinkedIn glyph beside the email — same treatment the modals used. */
.partner-bio__linkedin {
display: inline-flex;
align-items: center;
color: var(--color-primary);
border-bottom: none;
transition: opacity var(--transition-fast);
}
.partner-bio__linkedin:hover,
.partner-bio__linkedin:focus-visible {
opacity: 0.7;
}
.partner-bio__body p {
font-size: var(--font-size-body);
line-height: 1.7;
margin-bottom: var(--paragraph-spacing);
}
/* ============================================================================
was modules/pillar-article.module/module.css
============================================================================ */
/* === GJ Pillar Article ===
Two-column reading layout: a sticky table-of-contents rail and the article
body. Collapses to a single column (TOC as a card on top) below 1024px. */
.pillar {
background-color: var(--color-background);
}
.pillar__layout {
max-width: var(--content-width);
margin: 0 auto;
padding: calc(var(--module-padding) * 1.4) var(--content-padding-x);
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--grid-gap);
align-items: start;
}
/* === Table of contents === */
/* Sticky lives on the grid item (the aside), not an inner wrapper. Its travel
range is bounded by the containing block — and for a sticky grid item that's
the grid container (.pillar__layout, full article height), so the rail tracks
the reader the whole way down. Putting sticky on the inner wrapper instead
fails: align-items:start collapses the aside to content height, leaving the
wrapper no room to travel. align-self:start keeps the rail top-anchored. */
.pillar__toc {
position: sticky;
top: calc(var(--site-header-offset) + 24px); /* clear the pinned header */
align-self: start;
}
/* On short windows the rail can be taller than the viewport, so the sticky box
is capped to the space below the pinned header and the LIST scrolls (the title
and the conversation button stay put). module.js keeps the active entry
scrolled into view as the reader moves through the article. */
.pillar__toc-sticky {
display: flex;
flex-direction: column;
max-height: calc(100vh - var(--site-header-offset) - 48px);
}
.pillar__toc-sticky nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c5cdd5 transparent;
overscroll-behavior: contain;
}
.pillar__toc-title {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin: 0 0 16px 0;
}
.pillar__toc-list {
list-style: none;
margin: 0;
padding: 0;
border-left: 2px solid #e3e9ef;
}
.pillar__toc-item {
margin: 0;
}
.pillar__toc-link {
display: block;
padding: 8px 0 8px 16px;
margin-left: -2px;
border-left: 2px solid transparent;
border-bottom: none;
color: var(--color-text-muted);
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--weight-body-medium);
line-height: 1.35;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pillar__toc-link:hover {
color: var(--color-primary);
opacity: 1;
}
.pillar__toc-link.is-active {
color: var(--color-primary);
border-left-color: var(--color-emphasis);
font-weight: var(--weight-body-semibold);
}
/* Conversation button at the foot of the sticky rail (desktop only; the rail is
a 240px column, so the label wraps to two centred lines). Same .button--primary
treatment as the closing band, sized for the column. */
.pillar__toc .pillar__toc-cta {
display: block;
width: 100%;
margin-top: 24px;
padding: 14px 16px;
font-size: 15px;
line-height: 1.3;
white-space: normal;
color: var(--color-dark);
background-color: var(--color-emphasis);
border: none;
}
.pillar__toc .pillar__toc-cta:hover,
.pillar__toc .pillar__toc-cta:focus-visible {
color: var(--color-dark);
background-color: var(--color-emphasis-hover);
border: none;
opacity: 1;
}
@media (max-width: 1024px) {
.pillar__toc .pillar__toc-cta {
display: none;
}
.pillar__toc-sticky {
display: block;
max-height: none;
}
.pillar__toc-sticky nav {
overflow: visible;
}
}
/* === Article body / prose === */
.pillar__body {
min-width: 0;
max-width: 760px;
}
.pillar__lead {
margin-bottom: 48px;
}
.pillar__lead p {
font-size: clamp(19px, 1.7vw, 23px);
line-height: 1.6;
color: var(--color-primary);
}
/* === At-a-glance summary panel ===
The page's key takeaway, dropped between the lead and the first section. A
navy-tinted panel with a gold eyebrow — distinct from the pull-quote callout
(which carries a quotation mark and a headshot) so the two don't read alike. */
.pillar__at-a-glance {
margin: 0 0 48px 0;
padding: 28px 32px;
background-color: #f5f8fb;
border: 1px solid #dde6ee;
border-top: 3px solid var(--color-emphasis);
border-radius: var(--border-radius-card);
}
.pillar__at-a-glance-label {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-primary);
margin: 0 0 12px 0;
}
.pillar__at-a-glance-body p {
margin: 0;
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.6;
color: var(--color-primary);
}
.pillar__section {
margin-bottom: 48px;
scroll-margin-top: calc(var(--site-header-offset) + 24px); /* clear the pinned header */ /* breathing room on anchor jumps */
}
.pillar__section:last-child {
margin-bottom: 0;
}
.pillar__section-heading {
font-size: clamp(28px, 3vw, 38px);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 var(--paragraph-spacing) 0;
}
.pillar__section-body h3 {
font-size: clamp(21px, 2vw, 26px);
color: var(--color-primary);
margin: 36px 0 12px 0;
}
.pillar__section-body p {
margin: 0 0 var(--paragraph-spacing) 0;
}
.pillar__section-body ul {
padding-left: 1.2em;
margin: 0 0 var(--paragraph-spacing) 0;
}
.pillar__section-body li {
margin-bottom: 12px;
line-height: 1.6;
}
/* === Data tables ===
These pages price firms, walk an EBITDA normalization, and compare paths —
the tables carry real argument, not decoration. Navy header band, quiet row
rules, slightly tighter type than body prose so dense tables stay readable.
Authored as plain HTML inside the section rich text. */
.pillar__section-body table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 var(--paragraph-spacing) 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
}
.pillar__section-body thead th {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
font-weight: var(--weight-body-semibold);
text-align: left;
vertical-align: bottom;
padding: 12px 16px;
}
.pillar__section-body tbody th,
.pillar__section-body tbody td {
padding: 12px 16px;
border-bottom: 1px solid #e3e9ef;
vertical-align: top;
}
/* Leading label column (the markdown's first ":----" column) reads as a row
header — give it the navy emphasis prose gets elsewhere. */
.pillar__section-body tbody th,
.pillar__section-body tbody td:first-child {
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
.pillar__section-body tbody tr:nth-child(even) {
background-color: #f7f9fb;
}
.pillar__section-body table p {
margin: 0;
}
/* Below the reading column's comfortable minimum, let wide multi-column tables
scroll horizontally rather than crushing every cell. */
@media (max-width: 600px) {
.pillar__section-body table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* === FAQ section ===
The closing FAQ gets a distinct gold-tinted panel so it reads as a separate,
scannable reference block rather than another prose section — a light, warm
tint of the brand gold (set off against the cool navy-tinted at-a-glance and
callout panels), a gold top rule, and each Q&A divided by a hairline. */
.pillar__section--faq {
margin-top: 64px;
padding: 40px 44px;
background-color: #fcf6e8;
border-top: 3px solid var(--color-emphasis);
border-radius: var(--border-radius-card);
}
.pillar__section--faq .pillar__section-heading {
margin-bottom: 6px;
}
.pillar-faq__item {
padding: 22px 0;
border-bottom: 1px solid rgba(238, 193, 88, 0.45);
}
.pillar-faq__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* Trailing paragraph/list margin would push the divider too low — zero it. */
.pillar-faq__item > :last-child {
margin-bottom: 0;
}
/* FAQ questions read as scannable prompts, not banners, so they take the body
font (Montserrat SemiBold) rather than the condensed display face, which turns
thin and cramped at this size. Reset the display line-height/tracking the
global heading rule applies. */
.pillar__section--faq .pillar-faq__question {
margin: 0 0 10px 0;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.4;
letter-spacing: normal;
color: var(--color-primary);
}
@media (max-width: 767px) {
.pillar__section--faq {
padding: 28px 24px;
}
}
/* Inline prose links: navy text + gold underline (the brand accent), shifting to
gold text on hover. The underline carries the gold at rest so we don't lean on
gold body text, which fails contrast on white (var(--color-emphasis) ~1.6:1). NOTE for JP:
the hover state does briefly drop the text to that same low-contrast gold —
that's the "gold on hover" experiment. If we'd rather not trade contrast for
it, the fallback is to keep the text navy on hover and just thicken the gold
underline (swap the two `color:` lines in the :hover rule for a border tweak). */
.pillar__body a {
color: var(--color-primary);
border-bottom: 1px solid var(--color-emphasis);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pillar__body a:hover {
color: var(--color-emphasis);
border-bottom-color: var(--color-emphasis);
opacity: 1;
}
/* Links inside the navy closing CTA band sit on a dark fill, so they carry the
gold as text (navy-on-navy would vanish); the underline stays gold to match. */
.pillar-cta__text a {
color: var(--color-emphasis);
border-bottom: 1px solid var(--color-emphasis);
opacity: 1;
}
.pillar-cta__text a:hover {
opacity: 0.85;
}
/* === Subject-matter-expert callout (pull quote) === */
/* A headshot + pull quote dropped between sections. Light navy tint with a gold
accent rule — the established GJ emphasis pairing — and a gold quotation mark.
Photo renders in original color (it sits on a light fill, not a dark band). */
.pillar-callout {
display: flex;
align-items: center;
gap: 28px;
margin: 48px 0;
padding: 32px 36px;
background-color: #f5f8fb;
border-left: 3px solid var(--color-emphasis);
border-radius: var(--border-radius-card);
}
.pillar-callout__media {
flex: 0 0 auto;
}
.pillar-callout__media img {
display: block;
width: 104px;
height: 104px;
border-radius: 50%;
object-fit: cover;
}
.pillar-callout__content {
min-width: 0;
}
.pillar-callout__quote {
margin: 0 0 14px 0;
font-family: var(--font-body);
font-size: clamp(18px, 1.6vw, 21px);
font-weight: var(--weight-body-medium);
line-height: 1.5;
color: var(--color-primary);
}
.pillar-callout__quote::before {
content: "\201C";
display: block;
margin-bottom: 4px;
font-family: var(--font-display);
font-size: 52px;
line-height: 0.5;
color: var(--color-emphasis);
}
.pillar-callout__attribution {
display: flex;
flex-direction: column;
font-style: normal; /* reset default italics */
}
.pillar-callout__name {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 16px;
color: var(--color-primary);
}
.pillar-callout__role {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-muted);
}
/* Client-testimonial variant — an approved client quote rather than an expert
callout: no headshot, and italics for the spoken client voice. */
.pillar-callout--client .pillar-callout__quote {
font-style: italic;
}
@media (max-width: 600px) {
.pillar-callout {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 28px 24px;
}
.pillar-callout__media img {
width: 84px;
height: 84px;
}
}
/* === Closing CTA band === */
/* Navy banner pattern + gold primary button (the established GJ hierarchy). */
.pillar-cta {
background-color: var(--color-primary);
padding: calc(var(--module-padding) * 1.2) var(--content-padding-x);
}
.pillar-cta__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.pillar-cta__heading {
color: var(--color-emphasis);
font-size: var(--font-size-h3);
margin: 0 0 16px 0;
}
.pillar-cta__text {
max-width: 60ch;
margin: 0 auto 28px auto;
}
.pillar-cta__text p {
color: var(--color-text-on-dark);
margin: 0;
}
/* Reaffirm the gold fill (inherits from .button--primary) and round it into a
pill with extra horizontal room so it reads unmistakably as the page's CTA,
not a flat slab. Scoped to the pillar closing band — other buttons keep the
theme's standard 4px radius. */
.pillar-cta__button {
margin-bottom: 0;
background-color: var(--color-emphasis);
color: var(--color-dark);
padding-left: 40px;
padding-right: 40px;
border-radius: 999px;
}
/* === Responsive === */
@media (max-width: 1024px) {
.pillar__layout {
grid-template-columns: 1fr;
gap: 32px;
}
.pillar__toc {
position: static;
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
background-color: #f7f9fb;
padding: 20px 24px;
}
.pillar__body {
max-width: none;
}
}
@media (max-width: 767px) {
.pillar__layout {
padding-left: 24px;
padding-right: 24px;
}
.pillar-cta {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
was modules/principal-card-grid.module/module.css
7 unscoped .section-header-block rules wrapped in :where(.page--who-we-are) (zero specificity) so they keep applying only where this module's CSS used to load
============================================================================ */
.principal-grid {
background-color: var(--color-background);
color: var(--color-primary);
padding: var(--module-padding) var(--content-padding-x);
}
.principal-grid__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header pattern (light variant) === */
:where(.page--who-we-are) .section-header-block {
text-align: center;
margin-bottom: var(--h2-spacing);
position: relative;
}
:where(.page--who-we-are) .section-header-block__heading {
display: inline-block;
padding: 0 24px;
position: relative;
margin: 0;
}
:where(.page--who-we-are) .section-header-block::before, :where(.page--who-we-are) .section-header-block::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - 200px);
height: 1px;
background-color: currentColor;
opacity: 0.4;
}
:where(.page--who-we-are) .section-header-block::before { left: 0; }
:where(.page--who-we-are) .section-header-block::after { right: 0; }
:where(.page--who-we-are) .section-header-block--light .section-header-block__heading {
color: var(--color-primary);
}
:where(.page--who-we-are) .section-header-block--dark .section-header-block__heading {
color: var(--color-text-on-dark);
}
/* === Intro === */
.principal-grid__intro {
max-width: 720px;
margin: 0 auto var(--h2-spacing) auto;
text-align: center;
}
.principal-grid__intro p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Cards === */
.principal-grid__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 48px;
margin-top: var(--h2-spacing);
}
.principal-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.principal-card__photo-wrap {
width: 100%;
margin-bottom: 24px;
overflow: hidden;
transition: transform var(--transition-base);
}
.principal-card:hover .principal-card__photo-wrap {
transform: translateY(-4px);
}
.principal-card__photo {
width: 100%;
height: auto;
display: block;
}
.principal-card__name {
font-size: clamp(24px, 2.2vw, 30px);
font-weight: var(--weight-display);
margin: 0 0 12px 0;
color: var(--color-primary);
}
.principal-card__bio {
font-size: var(--font-size-body);
margin: 0 0 16px 0;
flex-grow: 1;
}
.principal-card__open {
display: inline-block;
color: var(--color-primary);
text-decoration: none;
font-weight: var(--weight-body-semibold);
padding: 8px 0;
font-size: var(--font-size-body);
border-bottom: 1px solid currentColor;
transition: opacity var(--transition-fast);
}
.principal-card__open:hover {
opacity: 0.7;
}
/* === Teaser mode (homepage) === */
.principal-card__role {
font-family: var(--font-body);
font-style: italic;
font-size: 16px;
color: var(--color-text-muted);
margin: 0;
}
/* Teaser lead relocated below the headshots (above the CTA). */
.principal-grid__intro--below {
margin: var(--h2-spacing) auto 0;
}
.principal-grid__cta {
margin-top: 36px;
text-align: center;
}
/* ============================================================================
was modules/behind-the-name.module/module.css
============================================================================ */
.behind-the-name {
background-color: var(--color-background);
color: var(--color-primary);
padding: var(--module-padding) var(--content-padding-x);
}
.behind-the-name__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header pattern (light variant) — duplicated for module independence === */
.behind-the-name .section-header-block {
text-align: center;
margin-bottom: var(--h2-spacing);
position: relative;
}
.behind-the-name .section-header-block__heading {
display: inline-block;
padding: 0 24px;
position: relative;
margin: 0;
color: var(--color-primary);
}
.behind-the-name .section-header-block::before,
.behind-the-name .section-header-block::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - 200px);
height: 1px;
background-color: currentColor;
opacity: 0.4;
}
.behind-the-name .section-header-block::before { left: 0; }
.behind-the-name .section-header-block::after { right: 0; }
.behind-the-name__content {
display: grid;
grid-template-columns: 320px 1fr;
gap: 64px;
align-items: start;
margin-top: var(--h2-spacing);
}
.behind-the-name__illustration img {
width: 100%;
height: auto;
display: block;
}
.behind-the-name__story p {
font-size: var(--font-size-body);
line-height: 1.7;
margin-bottom: var(--paragraph-spacing);
}
@media (max-width: 800px) {
.behind-the-name__content {
grid-template-columns: 1fr;
gap: 32px;
}
.behind-the-name__illustration {
max-width: 240px;
margin: 0 auto;
}
}
/* ============================================================================
was modules/process-detail.module/module.css
============================================================================ */
/* === GJ Process Detail — numbered timeline === */
.process-detail {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.process-detail__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (centered, flanked by rules) — flexbox variant, duplicated
per module so the module stays portable. === */
.process-detail .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.process-detail .section-header-block::before,
.process-detail .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.35;
}
.process-detail .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
/* === Intro === */
.process-detail__intro {
max-width: 760px;
margin: 0 auto calc(var(--h2-spacing) * 1.2) auto;
text-align: center;
}
.process-detail__intro p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Timeline === */
.process-detail__timeline {
--marker-size: 56px;
--marker-col: 72px;
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1040px;
}
.process-detail__step {
position: relative;
display: grid;
grid-template-columns: var(--marker-col) minmax(0, 1fr);
column-gap: 36px;
align-items: start;
padding-bottom: 56px;
}
.process-detail__step:last-child {
padding-bottom: 0;
}
/* Connecting rail: a line from this node's centre down to the next node's centre.
The opaque marker sits on top (z-index) so the rail reads as the gap between
nodes. */
.process-detail__step:not(:last-child)::after {
content: "";
position: absolute;
top: calc(var(--marker-size) / 2);
left: calc(var(--marker-col) / 2 - 1px);
width: 2px;
height: 100%;
background-color: rgba(39, 80, 116, 0.18);
}
.process-detail__marker {
position: relative;
z-index: 1;
justify-self: center;
width: var(--marker-size);
height: var(--marker-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-background);
border: 2px solid var(--color-emphasis);
}
.process-detail__num {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 26px;
line-height: 1;
color: var(--color-primary);
}
/* === Step content === */
.process-detail__text {
max-width: 640px;
}
.process-detail__tagline {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 8px 0;
}
.process-detail__step-title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(26px, 2.6vw, 34px);
line-height: 1.08;
color: var(--color-primary);
margin: 0 0 16px 0;
}
.process-detail__step-body p {
font-size: var(--font-size-body);
line-height: 1.7;
margin: 0 0 var(--paragraph-spacing) 0;
color: var(--color-text-primary);
}
.process-detail__step-body p:last-child {
margin-bottom: 0;
}
/* === Optional per-step image === */
.process-detail__media {
grid-column: 2;
grid-row: 2;
margin-top: 24px;
}
.process-detail__media img {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius-card);
}
/* === Scroll reveal (progressive enhancement) === */
.process-detail__step {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
.process-detail__step.is-revealed {
opacity: 1;
transform: none;
}
/* === Wide screens: place a step image beside the text === */
@media (min-width: 1024px) {
.process-detail__step--has-media {
grid-template-columns: var(--marker-col) minmax(0, 1fr) minmax(0, 360px);
column-gap: 44px;
align-items: center;
}
.process-detail__step--has-media .process-detail__text {
max-width: none;
}
.process-detail__step--has-media .process-detail__media {
grid-column: 3;
grid-row: 1;
margin-top: 0;
align-self: center;
}
}
/* === Section link (recycled trust-band CTA) === */
/* The last timeline step has no bottom padding, so this margin is the whole
gap between the step text and the link. */
.process-detail__cta {
margin: 48px 0 0 0;
text-align: center;
}
.process-detail__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: var(--font-size-body);
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
text-decoration: none;
border-bottom: 2px solid var(--color-emphasis);
padding-bottom: 4px;
}
.process-detail__link:hover .process-detail__arrow {
transform: translateX(4px);
}
.process-detail__arrow {
display: inline-block;
transition: transform var(--transition-fast);
}
/* === Tablet / mobile === */
@media (max-width: 1024px) {
.process-detail {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.process-detail {
padding-left: 24px;
padding-right: 24px;
}
.process-detail__timeline {
--marker-size: 48px;
--marker-col: 56px;
}
.process-detail__step {
column-gap: 20px;
padding-bottom: 44px;
}
.process-detail__num {
font-size: 21px;
}
}
@media (prefers-reduced-motion: reduce) {
.process-detail__step {
opacity: 1;
transform: none;
transition: none;
}
.process-detail__arrow {
transition: none;
}
}
/* ============================================================================
was modules/responsibilities-split.module/module.css
============================================================================ */
/* === GJ Responsibilities Split === */
.responsibilities {
background-color: #f5f8fb;
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.responsibilities__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (centered, flanked by rules) — flexbox variant, duplicated
per module so the module stays portable. === */
.responsibilities .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.responsibilities .section-header-block::before,
.responsibilities .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.35;
}
.responsibilities .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
/* === Intro === */
.responsibilities__intro {
max-width: 760px;
margin: 0 auto var(--h2-spacing) auto;
text-align: center;
}
.responsibilities__intro p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Two-panel split === */
.responsibilities__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.responsibilities__col {
background-color: var(--color-background);
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
padding: 36px 36px 40px;
}
/* Color-coded top accent: gold for the work GJ leads, navy for what stays with
the owner. */
.responsibilities__col--lead {
border-top: 4px solid var(--color-emphasis);
}
.responsibilities__col--hold {
border-top: 4px solid var(--color-primary);
}
.responsibilities__col-title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 8px 0;
padding-bottom: 18px;
border-bottom: 1px solid #e3e9ef;
}
.responsibilities__list {
list-style: none;
margin: 0;
padding: 0;
}
.responsibilities__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #eef2f6;
}
.responsibilities__item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.responsibilities__item-text {
font-size: var(--font-size-body);
line-height: 1.5;
color: var(--color-text-primary);
}
/* === Markers (decorative — the column heading carries the meaning) === */
.responsibilities__marker {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.responsibilities__marker--lead {
border-radius: 50%;
background-color: var(--color-emphasis);
color: var(--color-dark);
}
.responsibilities__marker--hold::before {
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
background-color: var(--color-primary);
}
/* === Responsive === */
@media (max-width: 1024px) {
.responsibilities {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.responsibilities {
padding-left: 24px;
padding-right: 24px;
}
.responsibilities__split {
grid-template-columns: 1fr;
gap: 20px;
}
.responsibilities__col {
padding: 28px 24px 32px;
}
}
/* ============================================================================
was modules/testimonial.module/module.css
============================================================================ */
/* === GJ Testimonial ===
Quiet tinted strip with a large display-font quote and attribution. Single
quote renders static; 2+ quotes fade-rotate (module.js) with dot controls. */
.testimonial {
background-color: #f7f9fb;
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.6) var(--content-padding-x);
}
.testimonial__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.testimonial__eyebrow {
color: var(--color-text-muted);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.14em;
margin: 0 0 28px 0;
}
/* Unmistakable not-yet-real marker. */
.testimonial__placeholder-tag {
display: inline-block;
margin: 0 0 28px 0;
padding: 6px 14px;
border: 1px dashed var(--color-light);
border-radius: 999px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-light);
background-color: #ffffff;
}
.testimonial__track {
position: relative;
}
.testimonial__item {
margin: 0;
}
/* Rotating mode: stack slides and fade between them. */
[data-testimonial-rotate="true"] .testimonial__item {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-base);
}
[data-testimonial-rotate="true"] .testimonial__item.is-active {
position: relative;
opacity: 1;
visibility: visible;
}
.testimonial__quote {
position: relative;
margin: 0 0 28px 0;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(26px, 3vw, 38px);
line-height: 1.3;
color: var(--color-primary);
}
.testimonial__quote p {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.testimonial__quote::before {
content: "\201C";
display: block;
font-family: var(--font-display);
font-size: 4em;
line-height: 0.6;
color: var(--color-emphasis);
margin-bottom: 8px;
}
.testimonial__cite {
font-style: normal;
}
.testimonial__name {
display: block;
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: var(--font-size-body);
color: var(--color-primary);
}
.testimonial__role {
display: block;
margin-top: 4px;
font-size: var(--font-size-small);
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
/* === Rotation dots === */
.testimonial__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 32px;
}
.testimonial__dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 50%;
background-color: #c9d4de;
cursor: pointer;
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.testimonial__dot.is-active {
background-color: var(--color-emphasis);
transform: scale(1.2);
}
.testimonial__dot:hover {
background-color: var(--color-light);
}
/* === Responsive === */
@media (max-width: 1024px) {
.testimonial {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.testimonial {
padding-left: 24px;
padding-right: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
[data-testimonial-rotate="true"] .testimonial__item {
transition: none;
}
.testimonial__dot {
transition: none;
}
}
/* ============================================================================
was modules/insight-card-list.module/module.css
============================================================================ */
.insight-card-list {
/* Top padding separates the first card row from the navy hero above. */
padding: var(--module-padding) var(--content-padding-x) calc(var(--module-padding) * 2);
}
.insight-card-list__inner {
max-width: var(--content-width);
margin: 0 auto;
}
.insight-card-list__eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
color: var(--color-light);
letter-spacing: 0.12em;
margin: 0 0 24px 0;
}
/* Optional H2 above the grid (used on the principal bio pages, where the card
list reads as a sibling of the "Meet the Other Principals" strip). */
.insight-card-list__heading {
font-size: clamp(24px, 2.2vw, 30px);
color: var(--color-primary);
margin: 0 0 32px 0;
}
/* === Card grid === */
/* Card styles live here (module CSS) so the cards render identically wherever
the module is placed — the Insights index and the principal bio pages. */
.insights-grid {
display: grid;
/* minmax(320px) yields 3 columns at the 1300px content width; reflows to 2 / 1 on narrower screens. */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 36px;
}
/* Self-contained card: a navy header (topic / title / date) stacked over a white
body (excerpt / CTA), rounded and lightly raised. Cards in a row stretch to equal
height; the CTA is pinned to the bottom of the white body. */
.insights-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--color-background);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
/* Optional top image (no cards use one today; the navy header is the visual top).
Kept so a card image can be reintroduced later without restructuring. */
.insights-card__image-link {
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
border-bottom: none;
}
.insights-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Navy header — diagonal gradient from primary navy (top-left) into dark navy
(bottom-right), so it ties to the hero without flattening into one navy block.
Interim choice; a fuller redesign of this page is planned for a later session. */
.insights-card__header {
background-color: var(--color-primary); /* fallback if gradients unsupported */
background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
padding: 28px 28px 24px;
}
.insights-card__topic {
font-family: var(--font-body);
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
color: var(--color-emphasis);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 14px 0;
}
.insights-card__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(21px, 1.9vw, 25px);
line-height: 1.2;
margin: 0;
/* Reserve exactly 3 lines so every navy header is the same height; longer
titles truncate with an ellipsis (guardrail for over-long H1s). */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
min-height: calc(1.2em * 3);
}
.insights-card__title a {
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
transition: color var(--transition-base);
}
.insights-card__title a:hover {
color: var(--color-emphasis);
}
.insights-card__date {
margin: 12px 0 0 0;
font-family: var(--font-body);
font-size: var(--font-size-small);
color: rgba(255, 255, 255, 0.75);
}
/* Light-gray body — sits just off the white page background so each card reads
as a distinct surface. */
.insights-card__body {
display: flex;
flex-direction: column;
flex: 1;
background-color: var(--color-surface);
padding: 24px 28px 28px;
}
.insights-card__excerpt {
font-size: 16px;
line-height: 1.6;
margin: 0 0 22px 0;
color: var(--color-text-primary);
/* Reserve exactly 3 lines so every white body is the same height; longer
summaries truncate with an ellipsis (guardrail ~ meta-description length). */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
min-height: calc(1.6em * 3);
}
.insights-card__cta {
align-self: flex-start;
color: var(--color-primary);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 16px;
border-bottom: 2px solid var(--color-emphasis);
padding-bottom: 2px;
}
/* === Load More (featured_count) === */
/* Applied by the module's inline script (never server-rendered), so the full
grid is the no-JS/crawler default and hidden cards can't be stranded. */
.insights-card--collapsed {
display: none;
}
.insight-card-list__more {
text-align: center;
margin-top: 48px;
}
/* Secondary-tier navy pill, sibling of cta-band's gold primary. */
.insight-card-list__more-btn {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 16px;
letter-spacing: 0.04em;
border: none;
border-radius: 999px;
padding: 14px 44px;
cursor: pointer;
transition: background-color var(--transition-base);
}
/* Re-assert geometry + color: the generic button:hover / button:focus rule in
the element-defaults section swaps in its own radius, border, and colors at higher
specificity than this module's rest state — only the background may shift. */
.insight-card-list__more-btn:hover,
.insight-card-list__more-btn:focus {
background-color: var(--color-dark);
color: var(--color-text-on-dark);
border: none;
border-radius: 999px;
}
.insight-card-list__more-btn:focus-visible {
outline: 3px solid var(--color-emphasis);
outline-offset: 2px;
}
/* ============================================================================
was modules/partner-bio-others.module/module.css
============================================================================ */
.partner-bio-others {
background-color: var(--color-background);
color: var(--color-primary);
padding: 0 var(--content-padding-x) var(--module-padding);
}
.partner-bio-others__inner {
max-width: var(--content-width);
margin: 0 auto;
padding-top: var(--module-padding);
border-top: 1px solid rgba(39, 80, 116, 0.2);
}
.partner-bio-others__heading {
font-size: clamp(24px, 2.2vw, 30px);
margin: 0 0 32px 0;
}
.partner-bio-others__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
gap: 32px;
}
.partner-bio-others__card {
display: flex;
flex-direction: column;
gap: 6px;
border: 1px solid rgba(39, 80, 116, 0.2);
padding: 24px 28px;
text-decoration: none;
transition: border-color var(--transition-fast), transform var(--transition-base);
}
.partner-bio-others__card:hover {
border-color: var(--color-emphasis);
transform: translateY(-3px);
}
.partner-bio-others__name {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 26px;
color: var(--color-primary);
}
.partner-bio-others__role {
font-style: italic;
font-size: 16px;
color: var(--color-text-muted);
}
.partner-bio-others__read {
margin-top: 10px;
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
/* ============================================================================
was modules/testimonial-carousel.module/module.css
============================================================================ */
/* === GJ Testimonial Carousel ===
A bordered white deal tombstone on the left, the client's quote open on the
right (no enclosing card). Slides stack in one grid cell and crossfade, so the
stage holds the height of the tallest slide and nothing below it shifts.
Controls (bare arrows, dots) sit centered under the stage. */
.testimonial-carousel {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.testimonial-carousel__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (centered, flanked by rules) ===
Flexbox variant of the GJ section-header pattern, duplicated per module so the
module stays portable. */
.testimonial-carousel .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.testimonial-carousel .section-header-block::before,
.testimonial-carousel .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.35;
}
.testimonial-carousel .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
/* === Stage ===
Slightly narrower than the content column so the quote measures ~65 characters
per line at body size. */
.testimonial-carousel__stage {
max-width: 1180px;
margin: 0 auto;
}
/* The track is the stage: grid with every slide in cell 1/1 = height of the
tallest slide. It is also the swipe surface. */
.testimonial-carousel__track {
display: grid;
touch-action: pan-y; /* vertical page scroll keeps working over the swipe area */
}
/* === Slide: two panes, crossfading === */
.testimonial-slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(300px, 2fr) 3fr;
gap: 56px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 450ms ease, visibility 0s linear 450ms;
}
.testimonial-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 450ms ease, visibility 0s;
}
/* === Tombstone card (left) === */
.testimonial-slide__tombstone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 44px 40px;
background-color: var(--color-background);
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
}
.testimonial-slide__date {
margin: 0 0 20px 0;
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* White bordered chips normalize the mixed logo files (transparent PNGs, white
JPEGs, navy blocks) into consistent tiles, one per side of the deal. */
.testimonial-slide__logo-chip {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
max-width: 100%;
min-height: 92px;
padding: 14px 24px;
margin: 0;
background-color: var(--color-background);
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
}
.testimonial-slide__logo {
display: block;
max-height: 60px;
max-width: 100%;
width: auto;
height: auto;
}
/* Text fallback when a party has no logo. */
.testimonial-slide__party {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.1;
color: var(--color-primary);
margin: 0;
}
/* Transaction verb with short hairlines either side. */
.testimonial-slide__transaction-line {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
margin: 16px 0;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
line-height: 1.4;
color: var(--color-text-muted);
}
/* Long verbs ("received a minority investment from") wrap into a compact,
balanced two-line label so the hairlines keep hugging the text. */
.testimonial-slide__transaction-line span {
flex: 0 1 auto;
max-width: 26ch;
text-wrap: balance;
}
.testimonial-slide__transaction-line::before,
.testimonial-slide__transaction-line::after {
content: "";
flex: 0 0 22px;
height: 1px;
background-color: currentColor;
opacity: 0.5;
}
.testimonial-slide__meta {
margin: 16px 0 0 0;
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
.testimonial-slide__advisor {
margin: 20px 0 0 0;
max-width: 300px; /* same width as the logo chips above it */
font-size: var(--font-size-small);
line-height: 1.5;
color: var(--color-text-muted);
}
/* === Quote pane (right) === */
.testimonial-slide__quote-pane {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 24px 0;
}
/* Gold quotation-mark glyph — decorative; the quote carries the meaning. */
.testimonial-slide__quote-mark {
display: block;
margin-bottom: 18px;
color: var(--color-emphasis);
}
.testimonial-slide__quote {
margin: 0 0 28px 0;
padding: 0;
border: none;
}
.testimonial-slide__quote p {
margin: 0;
font-size: clamp(18px, 1.6vw, 22px);
font-style: italic;
line-height: 1.65;
color: var(--color-text-primary);
}
.testimonial-slide__quote p + p {
margin-top: 0.8em;
}
.testimonial-slide__attribution {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
font-size: var(--font-size-small);
line-height: 1.5;
}
.testimonial-slide__attribution-name {
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
.testimonial-slide__attribution-role {
color: var(--color-text-muted);
}
/* === Controls: previous / dots / next ===
Bare icon buttons. Every rule here resets the theme's global button styling
(padding, fill, border, hover/focus/active states) — these are quiet controls,
not CTAs. */
.testimonial-carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 28px;
}
.testimonial-carousel__controls[hidden] {
display: none;
}
/* Icon-only: the 40px box is an invisible hit target (round, so the focus ring
is round too). */
.testimonial-carousel__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
background-color: transparent;
color: var(--color-primary);
line-height: 1;
cursor: pointer;
transition: color var(--transition-fast);
}
.testimonial-carousel__arrow:hover,
.testimonial-carousel__arrow:focus,
.testimonial-carousel__arrow:active {
background-color: transparent;
border: none;
opacity: 1;
transform: none;
}
.testimonial-carousel__arrow:hover,
.testimonial-carousel__arrow:focus {
color: var(--color-light);
}
.testimonial-carousel__arrow:active {
color: var(--color-primary);
}
.testimonial-carousel__arrow:focus-visible,
.testimonial-carousel__dot:focus-visible {
outline: 2px solid var(--color-emphasis);
outline-offset: 3px;
}
.testimonial-carousel__dots {
display: flex;
align-items: center;
gap: 4px;
margin: 0 4px;
}
/* 24px hit target around a 9px dot (the dot itself is the pseudo-element). */
.testimonial-carousel__dot {
position: relative;
width: 24px;
height: 24px;
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
background-color: transparent;
cursor: pointer;
}
.testimonial-carousel__dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #c9d4de;
transform: translate(-50%, -50%);
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.testimonial-carousel__dot:hover,
.testimonial-carousel__dot:focus,
.testimonial-carousel__dot:active {
background-color: transparent;
opacity: 1;
transform: none;
}
.testimonial-carousel__dot:hover::before {
background-color: var(--color-light);
}
.testimonial-carousel__dot.is-active::before {
background-color: var(--color-emphasis);
transform: translate(-50%, -50%) scale(1.25);
}
/* === Responsive === */
@media (max-width: 1024px) {
.testimonial-carousel {
padding-left: 48px;
padding-right: 48px;
}
.testimonial-slide {
grid-template-columns: minmax(260px, 2fr) 3fr;
gap: 36px;
}
.testimonial-slide__tombstone {
padding: 36px 28px;
}
.testimonial-slide__quote-pane {
padding: 16px 0;
}
/* Narrow tombstone column: tighter verb tracking and shorter hairlines so the
long "received a minority investment from" stays to two or three lines. */
.testimonial-slide__transaction-line {
gap: 8px;
font-size: 12px;
letter-spacing: 0.08em;
}
.testimonial-slide__transaction-line::before,
.testimonial-slide__transaction-line::after {
flex-basis: 14px;
}
}
@media (max-width: 767px) {
.testimonial-carousel {
padding-left: 24px;
padding-right: 24px;
}
/* Stack: tombstone card on top, quote beneath. */
.testimonial-slide {
grid-template-columns: 1fr;
gap: 28px;
}
.testimonial-slide__tombstone {
padding: 28px 24px;
}
.testimonial-slide__logo-chip {
width: 240px;
min-height: 72px;
padding: 10px 20px;
}
.testimonial-slide__logo {
max-height: 44px;
}
.testimonial-slide__transaction-line {
margin: 12px 0;
}
.testimonial-slide__advisor {
margin-top: 16px;
}
.testimonial-slide__quote-pane {
padding: 0 4px 8px;
}
.testimonial-carousel__controls {
margin-top: 20px;
gap: 8px;
}
}
/* Reduced motion: instant swaps, no hover micro-motion. Auto-rotation itself is
disabled in module.js for these visitors. */
@media (prefers-reduced-motion: reduce) {
.testimonial-slide,
.testimonial-slide.is-active {
transition: none;
}
.testimonial-carousel__arrow,
.testimonial-carousel__dot::before {
transition: none;
}
}
/* ============================================================================
was modules/thesis-section.module/module.css
============================================================================ */
.thesis-section {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
padding: var(--module-padding) var(--content-padding-x);
}
/* Constrain the whole section to roughly the width of the partners hero image
above it (which caps around ~1000px on typical screens), so the headline and
callout sit under the photo rather than running the full content width. */
.thesis-section__inner {
max-width: 1080px;
margin: 0 auto;
}
.thesis-section__headline {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(40px, 5.4vw, 80px);
color: var(--color-text-on-dark);
text-align: center;
/* Uses the full constrained width and balances onto two centered lines. */
margin: 0 0 var(--module-margin);
line-height: 1.1;
text-wrap: balance;
}
/* Two columns: the "is this you?" arrow chevron points right into the body copy,
which fills the remaining width out to the right edge. The arrow is sized by
height (so it reads near the body-text height) and never resizes; the copy
column flexes to fill whatever's left. */
.thesis-section__callout {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 40px;
margin: 0;
}
.thesis-section__arrow {
flex: 0 0 auto;
}
.thesis-section__arrow-img {
display: block;
height: 240px;
width: auto;
/* Feather the left edge to transparent so the cropped chevron dissolves into
the navy panel instead of meeting it at a hard vertical seam (mirrors how
the original wider art faded, and the home-hero photo mask). The text lives
in the right ~50%, so fading the left 40% leaves it fully crisp. */
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
mask-image: linear-gradient(to right, transparent 0, #000 40%);
}
.thesis-section__content {
flex: 1 1 auto;
min-width: 0;
}
.thesis-section__body {
color: var(--color-text-on-dark);
}
.thesis-section__body p {
color: var(--color-text-on-dark);
margin-bottom: var(--paragraph-spacing);
}
.thesis-section__body p:last-child {
margin-bottom: 0;
}
.thesis-section__cta {
margin-top: var(--paragraph-spacing);
color: var(--color-text-on-dark);
}
.thesis-section__cta-link {
color: var(--color-emphasis);
font-weight: var(--weight-body-semibold);
border-bottom: 1px solid var(--color-emphasis);
}
.thesis-section__cta-link:hover {
opacity: 0.8;
}
/* Below this width the two columns get too tight, so the arrow drops out
entirely (rather than stacking) and the copy takes the full width. */
@media (max-width: 820px) {
.thesis-section__arrow {
display: none;
}
.thesis-section__content {
flex: 1 1 100%;
}
}
/* ============================================================================
was modules/as-featured-in.module/module.css
============================================================================ */
.featured {
width: 100%;
background-color: var(--color-background);
padding: var(--module-padding) 0;
overflow: hidden;
}
.featured__eyebrow {
margin: 0 0 36px;
text-align: center;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-light);
}
/* Soft fade at both edges so logos appear/disappear smoothly. */
.featured__marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.featured__track {
display: flex;
align-items: center;
width: max-content;
margin: 0;
padding: 0;
list-style: none;
animation: featured-scroll 45s linear infinite;
}
/* Pause when the visitor hovers, so they can read a logo. */
.featured__marquee:hover .featured__track {
animation-play-state: paused;
}
/* Even spacing via margin (not flex gap) so the two copies are exactly equal
width and translateX(-50%) loops seamlessly. */
.featured__item {
flex: 0 0 auto;
margin-right: 72px;
display: flex;
align-items: center;
}
.featured__link {
display: flex;
align-items: center;
border-bottom: none;
}
.featured__link:hover {
opacity: 1;
}
.featured__logo {
height: 34px;
width: auto;
display: block;
filter: grayscale(100%);
opacity: 0.55;
transition: opacity var(--transition-base), filter var(--transition-base);
}
.featured__name {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 18px;
letter-spacing: 0.01em;
white-space: nowrap;
color: var(--color-light);
opacity: 0.85;
transition: color var(--transition-base);
}
.featured__item:hover .featured__logo {
filter: grayscale(0);
opacity: 1;
}
.featured__item:hover .featured__name {
color: var(--color-primary);
}
@keyframes featured-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* No motion: drop the animation and lay the (single) set out as a centered,
wrapping row. */
@media (prefers-reduced-motion: reduce) {
.featured__track {
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
gap: 32px 56px;
}
.featured__item {
margin-right: 0;
}
.featured__item[aria-hidden="true"] {
display: none;
}
}
/* ============================================================================
was modules/press-feature.module/module.css
============================================================================ */
/* GJ Press Banner — a minimal "Recent Press" line below the As Featured In
marquee on the homepage. Transparent background, centered: a gold pipe accent,
then a navy bold prefix + colon, then the message in navy. The whole row is one
link; hover underlines it in gold. Shown on all breakpoints. Toggle/edit via
the module fields. */
.press-banner {
display: block;
background-color: transparent;
text-decoration: none;
/* Cancel the global bottom border — on this full-width block link it would
render as a full-width gold line under the banner. */
border-bottom: none;
margin: var(--module-margin) auto;
padding: 0 var(--content-padding-x);
}
.press-banner:hover,
.press-banner:focus-visible {
opacity: 1;
}
.press-banner__inner {
max-width: var(--content-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-body);
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.4;
}
.press-banner__divider {
flex: 0 0 auto;
width: 2px;
height: 16px;
background-color: var(--color-emphasis);
}
.press-banner__copy {
font-weight: var(--weight-body-medium);
color: var(--color-primary);
}
.press-banner__prefix {
font-weight: var(--weight-body-bold);
}
.press-banner:hover .press-banner__copy,
.press-banner:focus-visible .press-banner__copy {
text-decoration: underline;
text-decoration-color: var(--color-emphasis);
text-underline-offset: 3px;
}
@media (max-width: 600px) {
.press-banner {
padding: 0 24px;
}
}
/* ============================================================================
was modules/feature-split.module/module.css
============================================================================ */
.feature-split {
background-color: var(--color-background);
padding: var(--module-padding) var(--content-padding-x);
}
.feature-split__inner {
max-width: var(--content-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* Image position: when set to "right", move the media after the content. */
.feature-split--img-right .feature-split__media {
order: 2;
}
.feature-split__img {
display: block;
width: 100%;
height: auto;
border-radius: 2px;
}
.feature-split__heading {
/* Match the "How We Work With You" section header below it, which inherits the
base h2 size (the section-header-block heading sets no font-size of its own). */
font-size: var(--font-size-h2);
color: var(--color-primary);
margin: 0 0 24px 0;
line-height: 1.1;
}
.feature-split__body {
font-size: var(--font-size-body);
line-height: 1.7;
}
.feature-split__cta {
margin: 28px 0 0 0;
}
.feature-split__cta-link {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-body);
color: var(--color-primary);
border-bottom: 2px solid var(--color-emphasis);
padding-bottom: 2px;
transition: color 0.2s ease;
}
.feature-split__cta-link:hover {
color: var(--color-emphasis);
opacity: 1;
}
@media (max-width: 900px) {
.feature-split__inner {
grid-template-columns: 1fr;
gap: 32px;
}
/* On stacked layouts the image always leads, regardless of desktop position. */
.feature-split--img-right .feature-split__media {
order: 0;
}
}
@media (max-width: 600px) {
.feature-split {
padding: var(--module-padding) 24px;
}
}
/* ============================================================================
was modules/process-steps.module/module.css
============================================================================ */
.process-steps {
position: relative;
background-color: var(--color-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: var(--module-padding) var(--content-padding-x);
color: var(--color-text-on-dark);
overflow: hidden;
}
.process-steps__overlay {
position: absolute;
inset: 0;
background-color: rgba(39, 80, 116, 0.85);
z-index: 0;
}
.process-steps__inner {
position: relative;
z-index: 1;
max-width: var(--content-width);
margin: 0 auto;
text-align: center;
}
/* === Section header pattern (dark variant) — duplicated from principal-card-grid for module independence === */
/* Flex divider (instead of the absolute fixed-channel used elsewhere): the
lines flank the heading and fill from each edge inward, with a fixed gap to
the text. This keeps the text-to-line spacing consistent regardless of
heading length — the long "How We Work With You" heading overflowed the
400px center channel the other section headers reserve. */
.process-steps .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.process-steps .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
padding: 0;
color: var(--color-text-on-dark);
}
.process-steps .section-header-block::before,
.process-steps .section-header-block::after {
content: "";
flex: 1 1 auto;
height: 1px;
background-color: currentColor;
opacity: 0.4;
}
.process-steps__intro {
max-width: 720px;
margin: 0 auto var(--h2-spacing) auto;
}
.process-steps__intro p {
color: var(--color-text-on-dark);
font-size: var(--font-size-body);
line-height: 1.7;
}
.process-steps__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
margin-bottom: var(--h2-spacing);
}
.process-step {
padding: 0 16px;
border-left: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}
.process-step:first-child {
border-left: none;
}
.process-step__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h4);
color: var(--color-text-on-dark);
margin: 0 0 16px 0;
letter-spacing: 0.02em;
}
.process-step__body {
color: var(--color-text-on-dark);
font-size: var(--font-size-body);
line-height: 1.6;
margin: 0;
}
.process-steps__cta {
margin-top: var(--h2-spacing);
}
/* Force the gold primary treatment here. Plain .button--primary gets overridden by
the generic button colour in the element-defaults section (later in the cascade); this
higher-specificity rule wins regardless of load order, matching the CTA band. */
.process-steps__cta .button {
background-color: var(--color-emphasis);
color: var(--color-dark);
}
@media (max-width: 700px) {
.process-step {
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding: 24px 0 0 0;
}
.process-step:first-child {
border-top: none;
padding-top: 0;
}
}
/* === Teaser mode (homepage) — numbered step names, no descriptions === */
.process-steps__grid--teaser {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px 44px;
margin-bottom: var(--h2-spacing);
}
.process-step--teaser {
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
/* Gold vertical bar before each stage name (replaces the numbered list). */
.process-step__bar {
flex: 0 0 auto;
width: 3px;
height: 22px;
background-color: var(--color-emphasis);
border-radius: 1px;
}
.process-step--teaser .process-step__title {
margin: 0;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 18px;
text-transform: none;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* ============================================================================
was modules/owner-resources.module/module.css
============================================================================ */
.owner-resources {
background-color: var(--color-background);
padding: var(--module-padding) var(--content-padding-x);
}
.owner-resources__inner {
max-width: var(--content-width);
margin: 0 auto;
}
.owner-resources__header {
text-align: center;
margin-bottom: var(--h2-spacing);
}
/* Flanking divider lines, matching the "How We Work With You" header. The lines
are flex children of the heading itself (the text becomes the centered flex
item between them), so the optional intro below is unaffected and the
text-to-line gap stays fixed regardless of heading length. */
.owner-resources__heading {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
font-size: var(--font-size-h2);
color: var(--color-primary);
margin: 0;
}
.owner-resources__heading::before,
.owner-resources__heading::after {
content: "";
flex: 1 1 auto;
height: 1px;
background-color: currentColor;
opacity: 0.4;
}
.owner-resources__intro {
max-width: 640px;
margin: 16px auto 0 auto;
color: var(--color-text-primary);
}
.owner-resources__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.resource-card {
display: flex;
}
.resource-card__link {
display: flex;
flex-direction: column;
width: 100%;
padding: 32px 28px;
background-color: #f3f6f9;
/* Resets the global anchor border-bottom; doubles as the hover-outline base. */
border: 1px solid transparent;
border-radius: 3px;
color: var(--color-text-primary);
opacity: 1;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.resource-card__link:hover {
opacity: 1;
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(23, 42, 56, 0.12);
border-color: var(--color-emphasis);
}
.resource-card__scenario {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-light);
margin-bottom: 12px;
}
.resource-card__title {
font-size: var(--font-size-h3);
color: var(--color-primary);
margin: 0 0 12px 0;
line-height: 1.05;
}
.resource-card__text {
font-size: 16px;
line-height: 1.6;
color: var(--color-text-primary);
margin: 0 0 28px 0;
}
.resource-card__cta {
margin-top: auto;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-primary);
display: inline-flex;
align-items: center;
gap: 8px;
}
.resource-card__arrow {
transition: transform 0.2s ease;
}
.resource-card__link:hover .resource-card__arrow {
transform: translateX(4px);
}
@media (max-width: 1000px) {
.owner-resources__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.owner-resources {
padding: var(--module-padding) 24px;
}
.owner-resources__grid {
grid-template-columns: 1fr;
}
}
/* ============================================================================
was modules/cta-band.module/module.css
============================================================================ */
/* === GJ CTA Band — reusable closing call to action === */
.cta-band {
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.cta-band--dark {
background-color: var(--color-dark);
}
.cta-band--navy {
background-color: var(--color-primary);
}
.cta-band__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.cta-band__eyebrow {
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-emphasis);
margin: 0 0 18px 0;
}
.cta-band__heading {
color: var(--color-emphasis);
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.08;
margin: 0 0 20px 0;
}
.cta-band__body {
max-width: 60ch;
margin: 0 auto 32px auto;
}
.cta-band__body p {
color: var(--color-text-on-dark);
font-size: var(--font-size-body);
line-height: 1.65;
margin: 0;
}
/* Gold pill button — extra horizontal room and a full radius so it reads
unmistakably as the page's primary action. */
.cta-band__button {
margin: 0;
background-color: var(--color-emphasis);
color: var(--color-dark);
padding-left: 44px;
padding-right: 44px;
border-radius: 999px;
}
.cta-band__button:focus-visible {
outline: 3px solid var(--color-background);
outline-offset: 3px;
}
@media (max-width: 1024px) {
.cta-band {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.cta-band {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
was modules/valuation-calculator.module/module.css
============================================================================ */
/* GJ Valuation Calculator — tool internals.
Page-level layout (content column, zone rhythm, background) lives in the
"was css/templates/valuation-calculator.css" section earlier in this file. This
section owns the interactive components: inputs, segmented controls, slider,
result card, the narrowing confidence band, driver chips, the convert grid, and
the form card. Mobile-first; brand tokens from the :root block at the top. */
/* Screen-reader-only helper (chip direction announced to AT). */
.vc-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* === The tool card === */
.vc-tool {
background-color: #ffffff;
border: 1px solid #e3e6e9;
border-radius: var(--border-radius-card);
padding: 32px 24px;
box-shadow: 0 1px 3px rgba(23, 42, 56, 0.06);
}
.vc-tool__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
color: var(--color-primary);
margin: 0 0 24px;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.vc-inputs {
display: flex;
flex-direction: column;
gap: 28px;
}
/* === Fields === */
.vc-field {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
.vc-field__legend {
display: block;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 17px;
color: var(--color-primary);
margin: 0 0 4px;
padding: 0;
}
.vc-field__help {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.45;
color: var(--color-muted);
margin: 0 0 12px;
}
/* Numeric input with $ / M / % affixes */
.vc-number {
display: inline-flex;
align-items: center;
gap: 4px;
background-color: #ffffff;
border: 1px solid #c5cdd5;
border-radius: var(--border-radius-button);
padding: 0 14px;
max-width: 220px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.vc-number:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(39, 80, 116, 0.15);
}
.vc-number__prefix,
.vc-number__suffix {
font-family: var(--font-body);
font-weight: var(--weight-body-medium);
color: var(--color-muted);
}
.vc-number__input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 19px;
font-weight: var(--weight-body-medium);
color: var(--color-primary);
padding: 12px 0;
}
.vc-number__input:disabled {
color: #8b9aa8;
-webkit-text-fill-color: #8b9aa8;
}
/* Placeholder grey (matches the disabled revenue field's tone). */
.vc-number__input::placeholder {
color: #8b9aa8;
opacity: 1;
}
/* Slider */
.vc-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
margin-top: 16px;
border-radius: 999px;
background: #dce2e8;
cursor: pointer;
}
.vc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid #ffffff;
box-shadow: 0 1px 4px rgba(23, 42, 56, 0.3);
cursor: pointer;
}
.vc-slider::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid #ffffff;
box-shadow: 0 1px 4px rgba(23, 42, 56, 0.3);
cursor: pointer;
}
.vc-slider:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
}
/* Value stepper box — prominent current-value display with the − / + buttons
inside it, shown ABOVE the slider so it reads clearly as the current selection. */
.vc-stepbox {
display: inline-flex;
align-items: stretch;
margin-bottom: 12px;
border: 1px solid #c5cdd5;
border-radius: var(--border-radius-button);
overflow: hidden;
background: #ffffff;
}
.vc-stepbox__btn {
flex: 0 0 auto;
width: 46px;
border: 0;
background: #f4f7fa;
color: var(--color-primary);
font-size: 22px;
font-weight: var(--weight-body-medium);
line-height: 1;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.vc-stepbox__btn:hover {
background: #e7eef4;
}
.vc-stepbox__btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.vc-stepbox__value {
flex: 1 1 auto;
min-width: 104px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
font-family: var(--font-body);
font-size: 20px;
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
text-align: center;
}
/* Slider with its range limits labelled on either end. */
.vc-sliderline {
display: flex;
align-items: center;
gap: 12px;
}
.vc-sliderline .vc-slider {
margin-top: 0;
flex: 1 1 auto;
min-width: 80px;
}
.vc-sliderline__limit {
flex: 0 0 auto;
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--weight-body-medium);
color: #8b9aa8;
white-space: nowrap;
}
/* "Estimated from your firm's size" note under the margin control (until set). */
.vc-slider-note {
margin: 8px 0 0;
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--color-muted);
}
.vc-slider-note[hidden] {
display: none;
}
/* Estimate-from-AUM toggle */
.vc-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0 0 8px;
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--weight-body-medium);
color: var(--color-primary);
}
.vc-toggle__input {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
cursor: pointer;
}
/* === Segmented controls (accessible radio groups) === */
.vc-segments {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.vc-segment {
flex: 1 1 140px;
display: block;
cursor: pointer;
}
.vc-segment__input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.vc-segment__text {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 48px;
padding: 8px 14px;
border: 1px solid #c5cdd5;
border-radius: var(--border-radius-button);
background-color: #ffffff;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--weight-body-medium);
color: var(--color-primary);
line-height: 1.25;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.vc-segment:hover .vc-segment__text {
border-color: var(--color-primary);
background-color: #f4f7fa;
}
.vc-segment__input:checked + .vc-segment__text {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.vc-segment__input:focus-visible + .vc-segment__text {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* === "Tighten your estimate" progressive disclosure === */
.vc-tighten {
border-top: 1px solid #e3e6e9;
padding-top: 36px;
}
.vc-tighten__summary {
display: flex;
flex-direction: column;
gap: 4px;
cursor: pointer;
list-style: none;
}
.vc-tighten__summary::-webkit-details-marker {
display: none;
}
/* Matches .vc-tool__title ("Estimate your range") — same display font + size. */
.vc-tighten__label {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.01em;
}
.vc-tighten__label::before {
content: "+";
display: inline-block;
margin-right: 12px;
font-family: var(--font-body);
font-size: 22px;
font-weight: var(--weight-body-regular);
color: var(--color-light);
vertical-align: middle;
}
.vc-tighten[open] .vc-tighten__label::before {
content: "–";
}
.vc-tighten__hint {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
}
.vc-tighten__body {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 24px;
}
/* === Result === */
.vc-result {
margin-top: 28px;
padding: 28px 24px;
border: 1px solid #d9e0e6;
border-radius: var(--border-radius-card);
background-color: #f7f9fb;
}
.vc-result[data-vc-state="empty"] {
background-color: #f4f5f6;
}
.vc-result__prompt {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
color: var(--color-muted);
font-style: italic;
}
.vc-result__label {
margin: 0 0 4px;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--weight-body-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
}
.vc-result__range {
margin: 0;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(40px, 7vw, 64px);
line-height: 1.02;
color: var(--color-primary);
}
/* Confidence band */
.vc-band {
margin: 20px 0 4px;
}
.vc-band__track {
position: relative;
height: 10px;
border-radius: 999px;
background: #e3e9ef;
overflow: hidden;
}
.vc-band__fill {
position: absolute;
top: 0;
bottom: 0;
left: 14%;
width: 72%;
border-radius: 999px;
background: linear-gradient(90deg, var(--color-light), var(--color-primary));
}
@media (prefers-reduced-motion: no-preference) {
.vc-band__fill {
transition: left var(--transition-base), width var(--transition-base);
}
}
.vc-band__caption {
margin: 8px 0 0;
font-family: var(--font-body);
font-size: 13px;
color: var(--color-muted);
}
.vc-result__cash {
margin: 20px 0 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-dark);
}
.vc-result__book {
margin: 16px 0 0;
padding-left: 14px;
border-left: 3px solid var(--color-emphasis);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-dark);
}
/* Driver chips — "what's moving your range" */
.vc-drivers {
margin-top: 24px;
}
.vc-drivers__title {
margin: 0 0 12px;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--weight-body-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
}
.vc-drivers__empty {
margin: 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-dark);
}
.vc-chip {
display: grid;
grid-template-columns: 28px auto;
grid-template-areas:
"dir label"
"dir text";
column-gap: 12px;
row-gap: 2px;
padding: 14px 16px;
background: #ffffff;
border: 1px solid #e3e6e9;
border-left-width: 4px;
border-radius: 6px;
}
.vc-chip + .vc-chip {
margin-top: 10px;
}
.vc-chip--up {
border-left-color: var(--color-primary);
}
.vc-chip--down {
border-left-color: var(--color-light);
}
.vc-chip__dir {
grid-area: dir;
align-self: start;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 17px;
font-weight: var(--weight-body-bold);
line-height: 1;
}
.vc-chip--up .vc-chip__dir {
background: rgba(39, 80, 116, 0.12);
color: var(--color-primary);
}
.vc-chip--down .vc-chip__dir {
background: rgba(92, 127, 158, 0.16);
color: var(--color-light);
}
.vc-chip__label {
grid-area: label;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--weight-body-bold);
color: var(--color-primary);
}
.vc-chip__text {
grid-area: text;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-dark);
}
/* === Candor note (sits at the bottom of the tool frame, shrunk) === */
.vc-candor {
margin-top: 28px;
}
.vc-candor__inner {
border-left: 4px solid var(--color-emphasis);
background: #fbf8f1;
padding: 16px 20px;
border-radius: 0 6px 6px 0;
}
.vc-candor__inner p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--color-dark);
}
/* === Convert (CTA + form) === */
.vc-convert__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.vc-convert__heading {
margin: 0 0 16px;
}
.vc-cta-copy__variant p {
margin: 0 0 16px;
}
/* Legal disclaimer under the CTA copy — small, italic, muted (screenshot spec). */
.vc-disclaimer {
margin-top: 20px;
}
.vc-disclaimer p {
margin: 0 0 12px;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
font-style: italic;
color: var(--color-muted);
}
.vc-disclaimer p:last-child {
margin-bottom: 0;
}
.vc-convert__proof {
margin: 20px 0 0;
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
}
/* Form card */
.vc-form {
/* The embedded HubSpot form renders in a sandbox we can't restyle from here,
and it carries a fixed left inset the form editor won't zero out. So instead
of pulling the fields left, we push OUR text right to meet them. Nudge this
one value until the heading/subline/microcopy line up with the field labels. */
--vc-form-inset: 32px;
background: #f7f9fb;
border: 1px solid #d9e0e6;
border-radius: var(--border-radius-card);
padding: 28px 24px;
}
/* Align our own copy to the form fields' left edge (see --vc-form-inset above). */
.vc-form__heading,
.vc-form__subline,
.vc-form__microcopy {
padding-left: var(--vc-form-inset);
}
/* Montserrat (body font), not Big Shoulders — set apart from the Big Shoulders
CTA heading in the opposite column so the two don't read as competing display
headers. Uppercase + tracking gives it heading presence at a body weight. */
.vc-form__heading {
margin: 0 0 8px;
font-family: var(--font-body);
font-weight: var(--weight-body-bold);
font-size: 18px;
line-height: 1.25;
letter-spacing: 0.06em;
color: var(--color-primary);
text-transform: uppercase;
}
.vc-form__subline {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-muted);
}
.vc-form__microcopy {
margin: 8px 0 0;
font-family: var(--font-body);
font-size: 13px;
color: var(--color-muted);
}
.vc-form__placeholder {
margin: 0;
padding: 16px;
border: 1px dashed #c5cdd5;
border-radius: var(--border-radius-button);
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
}
/* Hide the embedded form's empty title element (.form-title, styled by the
element-defaults section); this module supplies its own heading. Scoped to the
embed wrapper. */
.vc-form__embed .form-title,
.vc-form__embed .hs-form-title {
display: none;
}
/* HubSpot's injected form stylesheet insets the whole form (labels, inputs,
button) with horizontal padding/margin our heading + subline don't have, so the
fields sit indented from the card's left edge. Zero that horizontal inset so
everything lines up flush-left with the text above. Scoped to the embed and
horizontal-only (+ !important to beat HubSpot's stylesheet), so the field-to-
field spacing set in the form editor stays untouched. */
.vc-form__embed .hs_cos_wrapper_type_form,
.vc-form__embed .hs-form,
.vc-form__embed form,
.vc-form__embed fieldset,
.vc-form__embed .hs-form-field,
.vc-form__embed .hs_submit,
.vc-form__embed .actions {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.vc-form__embed .hs-form,
.vc-form__embed form {
max-width: 100% !important;
}
.vc-form__embed .hs-form .input {
margin-right: 0 !important;
}
/* === Desktop refinements === */
@media (min-width: 768px) {
.vc-tool {
padding: 40px 40px;
}
.vc-result {
padding: 36px 40px;
}
.vc-convert__grid {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 48px;
}
}
/* ============================================================================
was modules/site-footer.module/module.css
============================================================================ */
.site-footer {
width: 100%;
background-color: var(--color-dark);
color: var(--color-text-on-dark);
padding: 64px var(--content-padding-x) 32px;
}
.site-footer__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Top: brand + columns === */
.site-footer__top {
display: grid;
/* Brand + three content columns: Our Company, Explore, Talk to Us. */
grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
gap: 48px;
padding-bottom: 48px;
}
/* Brand */
.site-footer__wordmark {
display: block;
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: 30px;
letter-spacing: 0.16em;
color: var(--color-text-on-dark);
}
.site-footer__logo {
display: block;
height: 56px;
width: auto;
}
.site-footer__tagline {
margin: 16px 0 0;
max-width: 34ch;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--color-light);
}
.site-footer__social {
margin-top: 22px;
display: flex;
gap: 16px;
}
.site-footer__social-link {
display: inline-flex;
align-items: center;
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
transition: color var(--transition-fast);
}
.site-footer__social-link:hover {
color: var(--color-emphasis);
}
.site-footer__social-icon {
width: 24px;
height: 24px;
display: block;
}
/* Columns */
.site-footer__heading {
margin: 0 0 18px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-light);
}
.site-footer__links {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__links li {
margin: 0 0 12px;
}
.site-footer__links a,
.site-footer__contact a {
font-family: var(--font-body);
font-size: 15px;
color: var(--color-text-on-dark);
text-decoration: none;
border-bottom: none;
transition: color var(--transition-fast);
}
.site-footer__links a:hover,
.site-footer__contact a:hover {
color: var(--color-emphasis);
}
/* Contact */
.site-footer__contact {
font-style: normal;
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__contact span {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--color-light);
}
/* Newsletter */
.site-footer__news-blurb {
margin: 0 0 18px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--color-light);
}
.site-footer__news-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.site-footer__news-input {
flex: 1 1 160px;
min-width: 0;
padding: 12px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--color-text-on-dark);
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--border-radius-button);
transition: border-color var(--transition-fast);
}
.site-footer__news-input::placeholder {
color: var(--color-light);
}
.site-footer__news-input:focus {
outline: none;
border-color: var(--color-emphasis);
}
.site-footer__news-btn {
flex: 0 0 auto;
padding: 12px 22px;
font-size: 15px;
}
/* === Bottom bar === */
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 24px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__copyright {
margin: 0;
font-family: var(--font-body);
font-size: 13px;
color: var(--color-light);
}
.site-footer__legal {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0;
padding: 0;
}
.site-footer__legal a {
font-family: var(--font-body);
font-size: 13px;
color: var(--color-light);
text-decoration: none;
border-bottom: none;
transition: color var(--transition-fast);
}
.site-footer__legal a:hover {
color: var(--color-emphasis);
}
/* === Responsive === */
@media (max-width: 980px) {
.site-footer__top {
/* Brand spans the full width; the three content columns share the row below. */
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.site-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 560px) {
.site-footer {
padding-top: 48px;
}
.site-footer__top {
grid-template-columns: 1fr;
gap: 36px;
}
.site-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================================
was modules/deal-tombstones.module/module.css
============================================================================ */
/* === GJ Deal Tombstones ===
Light section of centered, typographic tombstone cards. Tier 1 (gj) carries a
gold top accent; Tier 2 (prior) is muted. Portable: tokens/spacing only. */
.deal-tombstones {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.deal-tombstones__inner {
max-width: var(--content-width);
margin: 0 auto;
}
.deal-tombstones__eyebrow {
text-align: center;
color: var(--color-text-muted);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.14em;
margin: 0 0 14px 0;
}
/* Section header (centered, flanked by rules) — same pattern as value-pillars. */
.deal-tombstones .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin: 0;
}
.deal-tombstones .section-header-block::before,
.deal-tombstones .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.3;
}
.deal-tombstones .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
.deal-tombstones__intro {
max-width: 720px;
margin: 28px auto 0 auto;
text-align: center;
}
.deal-tombstones__intro p { line-height: 1.7; }
/* === Card grid === */
.deal-tombstones__grid {
list-style: none;
margin: var(--h2-spacing) 0 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.deal-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 0;
padding: 44px 28px 36px;
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
background-color: var(--color-background);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
/* Gold top accent marks the Tier 1 (Gorman Jones) cards. */
.deal-tombstones--gj .deal-card::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 3px;
background-color: var(--color-emphasis);
border-radius: 0 0 2px 2px;
}
.deal-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(23, 42, 56, 0.10);
}
.deal-card__logo-wrap { margin-bottom: 22px; }
.deal-card__logo {
max-height: 40px;
width: auto;
}
.deal-card__seller {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 8px 0;
}
.deal-card__meta {
font-size: var(--font-size-small);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
margin: 0 0 24px 0;
}
.deal-card__transaction {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 0 0 24px 0;
}
.deal-card__transaction-line {
font-size: var(--font-size-small);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-text-muted);
}
/* Hairlines flanking the transaction verb. */
.deal-card__transaction-line::before,
.deal-card__transaction-line::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
vertical-align: middle;
margin: 0 12px;
background-color: currentColor;
opacity: 0.5;
}
.deal-card__counterparty {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
line-height: 1.1;
color: var(--color-primary);
}
.deal-card__advisor {
max-width: 32ch;
margin: 0 auto 14px auto;
font-size: 15px;
line-height: 1.5;
color: var(--color-text-primary);
}
.deal-card__descriptor {
margin: 0 0 14px 0;
font-size: var(--font-size-small);
font-style: italic;
color: var(--color-text-muted);
}
.deal-card__date {
margin: 0;
font-size: var(--font-size-small);
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.deal-card__link {
display: inline-flex;
align-items: baseline;
gap: 8px;
margin-top: 20px;
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
color: var(--color-primary);
border-bottom: 1px solid var(--color-emphasis);
transition: gap var(--transition-base), opacity var(--transition-fast);
}
.deal-card__link:hover {
opacity: 1;
gap: 14px;
}
.deal-card__arrow { font-weight: var(--weight-body-regular); }
/* === Responsive === */
@media (max-width: 1024px) {
.deal-tombstones {
padding-left: 48px;
padding-right: 48px;
}
.deal-tombstones__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.deal-tombstones {
padding-left: 24px;
padding-right: 24px;
}
.deal-tombstones__grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.deal-card {
transition: none;
}
.deal-card:hover {
transform: none;
}
.deal-card__link {
transition: opacity var(--transition-fast);
}
.deal-card__link:hover {
gap: 8px;
}
}
/* ============================================================================
was modules/specialization-block.module/module.css
============================================================================ */
/* === GJ Specialization Block ===
Light section. A heading + lead, then a two-panel structural contrast
(many services vs. one), then a takeaway. Portable: spacing/tokens only. */
.specialization {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.specialization__inner {
max-width: var(--content-width);
margin: 0 auto;
text-align: center;
}
.specialization__eyebrow {
color: var(--color-text-muted);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.14em;
margin: 0 0 18px 0;
}
.specialization__heading {
font-size: clamp(32px, 4.2vw, 56px);
color: var(--color-primary);
max-width: 18ch;
margin: 0 auto 24px auto;
}
.specialization__lead {
max-width: 760px;
margin: 0 auto 48px auto;
}
.specialization__lead p {
line-height: 1.7;
}
/* === Two-panel contrast === */
.specialization__contrast {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
max-width: 900px;
margin: 0 auto;
text-align: left;
}
.contrast-panel {
border-radius: var(--border-radius-card);
padding: 36px 36px 30px;
}
.contrast-panel--many {
border: 1px solid #e3e9ef;
background-color: #f7f9fb;
}
.contrast-panel--one {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
box-shadow: 0 16px 36px rgba(23, 42, 56, 0.18);
}
.contrast-panel__label {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
line-height: 1.1;
margin: 0 0 22px 0;
}
.contrast-panel--many .contrast-panel__label { color: var(--color-primary); }
.contrast-panel--one .contrast-panel__label { color: var(--color-text-on-dark); }
.contrast-panel__items ul {
list-style: none;
margin: 0;
padding: 0;
}
.contrast-panel__items li {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.4;
}
.contrast-panel__items li:last-child { margin-bottom: 0; }
/* Quiet dash markers for the full-service list. */
.contrast-panel--many .contrast-panel__items li {
color: var(--color-text-muted);
}
.contrast-panel--many .contrast-panel__items li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 14px;
height: 1px;
background-color: var(--color-text-muted);
}
/* Single gold dot for the one-thing list. */
.contrast-panel--one .contrast-panel__items li {
color: var(--color-text-on-dark);
font-weight: var(--weight-body-medium);
}
.contrast-panel--one .contrast-panel__items li::before {
content: "";
position: absolute;
left: 0;
top: 0.4em;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--color-emphasis);
}
.contrast-panel__caption {
margin: 24px 0 0 0;
font-style: italic;
font-size: var(--font-size-small);
letter-spacing: 0.02em;
}
.contrast-panel--many .contrast-panel__caption { color: var(--color-text-muted); }
.contrast-panel--one .contrast-panel__caption { color: var(--color-emphasis); }
.specialization__takeaway {
max-width: 720px;
margin: 48px auto 0 auto;
}
.specialization__takeaway p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Responsive === */
@media (max-width: 1024px) {
.specialization {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.specialization {
padding-left: 24px;
padding-right: 24px;
}
.specialization__contrast {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ============================================================================
was modules/testimonial-flip-cards.module/module.css
============================================================================ */
/* === GJ Testimonial Flip Cards === */
.testimonial-flip {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.testimonial-flip__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (centered, flanked by rules) ===
Flexbox variant of the GJ section-header pattern: the rules flex to fill the
space on either side of the heading, so the heading can be any length without
the rules overlapping it. Duplicated per module so the module stays portable. */
.testimonial-flip .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.testimonial-flip .section-header-block::before,
.testimonial-flip .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.35;
}
.testimonial-flip .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
/* === Intro === */
.testimonial-flip__intro {
max-width: 760px;
margin: 0 auto var(--h2-spacing) auto;
text-align: center;
}
.testimonial-flip__intro p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Grid: 2x2 on desktop, single column on small screens === */
.testimonial-flip__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
align-items: stretch;
}
/* === Card shell — the 3D stage === */
.flip-card {
position: relative;
margin: 0;
perspective: 1400px;
}
.flip-card.flip-enabled {
cursor: pointer;
}
/* Both faces sit in the same grid cell of the rotating inner wrapper, so the
card's height is the taller of the two faces — no absolute positioning, no
clipped quotes. */
.flip-card__inner {
display: grid;
height: 100%;
transform-style: preserve-3d;
transition: transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.flip-card.is-flipped .flip-card__inner {
transform: rotateY(180deg);
}
.flip-card__face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
padding: 32px 32px 76px; /* bottom padding clears the flip control overlay */
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
background-color: var(--color-background);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Same white as the front so nothing shifts tone mid-flip. */
.flip-card__face--back {
transform: rotateY(180deg);
align-items: center;
justify-content: center;
text-align: center;
}
/* Lift on hover — same affordance as the value-pillar cards this section
replaces. */
.flip-card {
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.flip-card.flip-enabled:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(23, 42, 56, 0.10);
border-radius: var(--border-radius-card);
}
/* === Front face — the quote === */
/* Gold quotation-mark glyph — decorative; the quote carries the meaning. */
.flip-card__quote-mark {
display: block;
color: var(--color-emphasis);
flex: 0 0 auto;
}
/* Auto vertical margins center the quote between the glyph (top) and the
attribution (bottom), so short quotes don't leave a dead gap; the padding
keeps a minimum gap on the tallest card, where the autos collapse to zero. */
.flip-card__quote {
margin: auto 0;
padding: 20px 0 24px;
border: none;
}
.flip-card__quote p {
font-size: var(--font-size-body);
font-style: italic;
line-height: 1.6;
margin: 0;
color: var(--color-text-primary);
}
/* Attribution sits at the card bottom so it aligns across the row. */
.flip-card__attribution {
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
font-size: var(--font-size-small);
line-height: 1.5;
}
.flip-card__attribution-name {
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
.flip-card__attribution-role {
color: var(--color-text-muted);
}
/* === Back face — the deal tombstone === */
.flip-card__date {
margin: 0 0 18px 0;
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
color: var(--color-text-muted);
}
/* Bordered chip normalizes the mixed logo files (navy blocks, white JPEGs)
into consistent tiles — one for each side of the deal. Sized so two chips
plus the transaction line stack comfortably. */
.flip-card__logo-chip {
display: flex;
align-items: center;
justify-content: center;
width: 260px;
max-width: 100%;
min-height: 84px;
padding: 12px 24px;
margin: 0;
background-color: var(--color-background);
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
}
.flip-card__logo {
display: block;
max-height: 56px;
max-width: 200px;
width: auto;
height: auto;
}
/* Text fallback when a party has no logo — same display type as the tombstone
cards use. */
.flip-card__party {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(24px, 2.4vw, 30px);
line-height: 1.1;
color: var(--color-primary);
margin: 0;
}
.flip-card__transaction-line {
font-size: var(--font-size-small);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
margin: 14px 0;
}
.flip-card__meta {
margin: 14px 0 0 0;
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
}
.flip-card__advisor {
margin: 14px 0 0 0;
font-size: var(--font-size-small);
color: var(--color-text-muted);
max-width: 320px;
}
/* === Flip control — overlays both faces, never rotates === */
.flip-card__toggle {
position: absolute;
right: 16px;
bottom: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: none;
border-radius: var(--border-radius-button);
background: transparent;
font-family: var(--font-body);
font-size: var(--font-size-small);
font-weight: var(--weight-body-semibold);
color: var(--color-primary);
cursor: pointer;
}
.flip-card__toggle:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.flip-card__toggle:focus-visible {
outline: 2px solid var(--color-emphasis);
outline-offset: 2px;
}
.flip-card__toggle-icon {
flex: 0 0 auto;
}
/* === Responsive === */
@media (max-width: 1024px) {
.testimonial-flip {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.testimonial-flip {
padding-left: 24px;
padding-right: 24px;
}
.testimonial-flip__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Reduced motion: the flip becomes an instant swap, the hover lift goes still. */
@media (prefers-reduced-motion: reduce) {
.flip-card,
.flip-card__inner {
transition: none;
}
.flip-card.flip-enabled:hover {
transform: none;
}
}
/* ============================================================================
was modules/track-record-prior.module/module.css
============================================================================ */
/* === GJ Track Record — Tier 2 (prior to Gorman Jones) ===
Navy section: gold aggregate stats over a left-aligned narrative. The dark fill
cleanly separates Rush's prior record from the Tier 1 (light) engagement cards. */
.tr-prior {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
padding: calc(var(--module-padding) * 1.6) var(--content-padding-x);
}
.tr-prior__inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.tr-prior__eyebrow {
color: var(--color-emphasis);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-small);
letter-spacing: 0.14em;
margin: 0 0 18px 0;
}
.tr-prior__heading {
color: var(--color-text-on-dark);
font-size: clamp(32px, 4vw, 52px);
margin: 0 0 18px 0;
}
.tr-prior__attribution {
max-width: 760px;
margin: 0 auto 52px auto;
font-size: var(--font-size-body);
line-height: 1.6;
color: var(--color-text-on-dark);
opacity: 0.85;
}
/* === Aggregate stats === */
.tr-prior__stats {
list-style: none;
margin: 0 0 56px 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 36px 64px;
}
.tr-stat {
display: flex;
flex-direction: column;
align-items: center;
max-width: 220px;
}
.tr-stat__value {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: clamp(48px, 6vw, 76px);
line-height: 1;
color: var(--color-emphasis);
}
.tr-stat__label {
margin-top: 12px;
font-size: var(--font-size-small);
letter-spacing: 0.04em;
line-height: 1.45;
color: var(--color-text-on-dark);
opacity: 0.85;
}
/* === Narrative === */
.tr-prior__narrative {
max-width: 720px;
margin: 0 auto;
text-align: left;
}
.tr-prior__narrative p {
font-size: var(--font-size-body);
line-height: 1.7;
color: var(--color-text-on-dark);
}
.tr-prior__narrative p + p {
margin-top: var(--paragraph-spacing);
}
/* === Responsive === */
@media (max-width: 1024px) {
.tr-prior {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.tr-prior {
padding-left: 24px;
padding-right: 24px;
}
.tr-prior__stats {
gap: 32px;
}
}
/* ============================================================================
was modules/trust-band.module/module.css
============================================================================ */
/* === GJ Trust Band === */
.trust-band {
background-color: var(--color-primary);
color: var(--color-text-on-dark);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.trust-band__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
/* Short gold rule above the heading — a quiet brand accent. */
.trust-band__rule {
display: block;
width: 48px;
height: 3px;
margin: 0 auto 28px auto;
background-color: var(--color-emphasis);
border-radius: 2px;
}
.trust-band__heading {
color: var(--color-text-on-dark);
font-size: clamp(34px, 4vw, 54px);
margin: 0 0 28px 0;
}
.trust-band__body p {
color: var(--color-text-on-dark);
font-size: clamp(19px, 1.8vw, 23px);
line-height: 1.65;
margin: 0;
}
.trust-band__body em {
font-style: italic;
color: var(--color-emphasis);
}
.trust-band__cta {
margin: 32px 0 0 0;
}
.trust-band__link {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: var(--color-emphasis);
font-family: var(--font-body);
font-weight: var(--weight-body-semibold);
font-size: var(--font-size-body);
border-bottom: 1px solid var(--color-emphasis);
transition: gap var(--transition-base), opacity var(--transition-fast);
}
.trust-band__link:hover {
opacity: 1;
gap: 14px;
}
.trust-band__link:focus-visible {
outline: 2px solid var(--color-background);
outline-offset: 3px;
}
.trust-band__arrow {
font-weight: var(--weight-body-regular);
}
@media (prefers-reduced-motion: reduce) {
.trust-band__link {
transition: opacity var(--transition-fast);
}
.trust-band__link:hover {
gap: 8px;
}
}
@media (max-width: 1024px) {
.trust-band {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.trust-band {
padding-left: 24px;
padding-right: 24px;
}
}
/* ============================================================================
was modules/value-pillars.module/module.css
============================================================================ */
/* === GJ Value Pillars === */
.value-pillars {
background-color: var(--color-background);
color: var(--color-primary);
padding: calc(var(--module-padding) * 1.5) var(--content-padding-x);
}
.value-pillars__inner {
max-width: var(--content-width);
margin: 0 auto;
}
/* === Section header (centered, flanked by rules) ===
Flexbox variant of the GJ section-header pattern: the rules flex to fill the
space on either side of the heading, so the heading can be any length without
the rules overlapping it. Duplicated per module so the module stays portable. */
.value-pillars .section-header-block {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: var(--h2-spacing);
}
.value-pillars .section-header-block::before,
.value-pillars .section-header-block::after {
content: "";
flex: 1 1 auto;
min-width: 0;
height: 1px;
background-color: currentColor;
opacity: 0.35;
}
.value-pillars .section-header-block__heading {
flex: 0 1 auto;
margin: 0;
color: var(--color-primary);
font-size: clamp(30px, 3.6vw, 48px);
}
/* === Intro === */
.value-pillars__intro {
max-width: 760px;
margin: 0 auto var(--h2-spacing) auto;
text-align: center;
}
.value-pillars__intro p {
font-size: var(--font-size-body);
line-height: 1.7;
}
/* === Grid: 2x2 on desktop, single column on small screens === */
.value-pillars__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
.value-pillar {
margin: 0;
padding: 32px 32px 36px;
border: 1px solid #e3e9ef;
border-radius: var(--border-radius-card);
background-color: var(--color-background);
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.value-pillar:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px rgba(23, 42, 56, 0.10);
}
/* Gold check badge — gold fill + dark-navy mark (the primary-CTA pairing). The
mark is decorative; the title carries the meaning. */
.value-pillar__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 20px;
border-radius: 50%;
background-color: var(--color-emphasis);
color: var(--color-dark);
}
.value-pillar__title {
font-family: var(--font-display);
font-weight: var(--weight-display);
font-size: var(--font-size-h3);
line-height: 1.1;
color: var(--color-primary);
margin: 0 0 14px 0;
}
.value-pillar__body p {
font-size: var(--font-size-body);
line-height: 1.6;
margin: 0;
color: var(--color-text-primary);
}
/* === Responsive === */
@media (max-width: 1024px) {
.value-pillars {
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 767px) {
.value-pillars {
padding-left: 24px;
padding-right: 24px;
}
.value-pillars__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.value-pillar {
transition: none;
}
.value-pillar:hover {
transform: none;
}
}