.page-contact {
--kc-ink: var(--color-white);
--kc-ink-muted: rgb(255 255 255 / 0.72);
--kc-line: rgb(255 255 255 / 0.14);
--kc-accent: var(--color-blue-light);
background-color: var(--color-bg);
color: var(--color-gray);
color-scheme: light;
}
.page-contact :focus-visible {
outline-color: var(--color-blue-dark);
}
.page-contact .breadcrumbs__list {
gap: var(--space-3);
}
.page-contact .breadcrumbs__sep {
display: inline-flex;
align-items: center;
}
.page-contact .section-eyebrow {
color: var(--color-gray);
}
.page-contact .breadcrumbs,
.contact-main__grid,
.contact-location > .container {
padding-inline: var(--content-inset);
}
.contact-main {
padding-block: var(--space-5) var(--space-8);
}
.contact-main__grid {
display: grid;
gap: var(--space-6);
grid-template-areas:
"intro"
"form"
"aside";
}
.contact-intro { grid-area: intro; }
.contact-form-card { grid-area: form; }
.contact-aside { grid-area: aside; }
@media (min-width: 1024px) {
.contact-main__grid {
grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
grid-template-areas:
".     form"
"intro form"
"aside form"
".     form";
grid-template-rows: 1fr auto auto 1fr;
column-gap: clamp(2rem, 3vw, 3.5rem);
row-gap: var(--space-5);
align-items: start;
}
}
.contact-intro > * {
max-width: 34rem;
}
.contact-intro {
margin-bottom: var(--space-2);
}
.contact-intro h1 {
margin-top: 0;
font-size: clamp(2.25rem, 0.4rem + 3.7vw, 3.75rem);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
color: var(--kc-ink);
}
@media (min-width: 1024px) {
.contact-intro h1 {
font-size: clamp(1.625rem, 1rem + 1vw, 2rem);
max-width: none;
white-space: nowrap;
}
}
.contact-intro__lead {
margin-top: var(--space-3);
font-size: var(--font-size-base);
color: var(--kc-ink-muted);
-webkit-hyphens: none;
hyphens: none;
}
@media (prefers-reduced-motion: no-preference) {
.contact-intro > * {
animation: contact-intro-in var(--duration-slow) var(--easing-premium) backwards;
}
.contact-intro h1 { animation-delay: 60ms; }
.contact-intro__lead { animation-delay: 140ms; }
}
@keyframes contact-intro-in {
from {
opacity: 0;
transform: translateY(14px);
}
}
.contact-methods {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--kc-line);
}
.contact-methods li {
border-bottom: 1px solid var(--kc-line);
}
.contact-method {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-3);
padding-block: 0.625rem;
border-radius: var(--radius-sm);
color: inherit;
text-decoration: none;
transition: background-color var(--duration-base) var(--easing-standard);
}
.contact-method:hover {
background-color: rgb(255 255 255 / 0.05);
}
.contact-method:focus-visible {
outline: 2px solid var(--kc-accent);
outline-offset: 2px;
}
.contact-method__icon {
width: 1.125rem;
height: 1.125rem;
margin-top: 0.15rem;
fill: none;
stroke: var(--kc-accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-method__body {
display: flex;
flex-direction: column;
min-width: 0;
}
.contact-method__label {
font-size: 0.6875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kc-ink-muted);
}
.contact-method__value {
font-size: var(--font-size-base);
line-height: 1.35;
font-style: normal;
color: var(--kc-ink);
overflow-wrap: anywhere;
}
.contact-method__text {
margin-top: 0.1rem;
font-size: var(--font-size-sm);
line-height: 1.5;
color: var(--kc-ink-muted);
}
.contact-method__action {
margin-top: 0.1rem;
font-size: var(--font-size-sm);
color: var(--kc-accent);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.contact-method__arrow {
width: 1.5rem;
height: 1.5rem;
align-self: center;
flex-shrink: 0;
fill: none;
stroke: var(--kc-accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition:
transform var(--duration-base) var(--easing-standard),
stroke var(--duration-fast) var(--easing-standard);
}
.contact-method:hover .contact-method__arrow,
.contact-method:focus-visible .contact-method__arrow {
transform: rotate(45deg);
stroke: var(--kc-ink);
}
.contact-method__label,
.contact-method__text {
color: var(--kc-ink-muted);
}
@media (min-width: 768px) {
.contact-method {
padding-block: 1rem;
}
.contact-method__body {
gap: var(--space-1);
}
.contact-method__text {
margin-top: var(--space-1);
}
.contact-method__action {
margin-top: var(--space-2);
}
.contact-method__value {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: 1.3;
}
.contact-method--priority .contact-method__value {
font-size: 1.375rem;
}
.contact-method--priority .contact-method__text {
margin-top: var(--space-2);
}
}
.contact-form-card {
--color-link-hover: var(--color-logo-black);
background-color: var(--color-white);
border: 1px solid rgb(1 1 1 / 0.06);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.contact-form-card__title {
font-size: clamp(2rem, 1.4rem + 1.35vw, 2.3rem);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-heading);
color: var(--color-logo-black);
}
.contact-form-card__lede {
margin-top: var(--space-3);
color: rgb(59 73 86 / 0.75);
line-height: var(--line-height-base);
}
.contact-trust {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-5);
}
.contact-trust__seal {
height: 2.75rem;
width: auto;
}
.contact-trust__label {
padding-inline-start: var(--space-3);
border-inline-start: 1px solid rgb(255 255 255 / 0.3);
align-self: stretch;
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--kc-ink-muted);
-webkit-hyphens: none;
hyphens: none;
}
.contact-form-card .conversion__form {
margin-top: var(--space-6);
}
.contact-form {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
margin-top: var(--space-6);
}
@media (min-width: 640px) {
.contact-form {
grid-template-columns: 1fr 1fr;
}
}
.contact-form__field--full,
.contact-form > .form-checkbox,
.contact-form > .btn {
grid-column: 1 / -1;
}
.contact-form .form-field__label {
font-size: 0.75rem;
font-weight: var(--font-weight-regular);
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgb(59 73 86 / 0.75);
}
.contact-form .form-field__input,
.contact-form .form-field__textarea {
padding: var(--space-2) 0;
background-color: transparent;
border: none;
border-bottom: 1px solid rgb(59 73 86 / 0.25);
border-radius: 0;
color: var(--color-gray);
}
.contact-form .form-field__textarea {
min-height: 3.5rem;
max-height: 14rem;
field-sizing: content;
resize: vertical;
}
.contact-form .form-field__input:hover,
.contact-form .form-field__textarea:hover {
border-bottom-color: rgb(59 73 86 / 0.45);
}
.contact-form .form-field__input:focus-visible,
.contact-form .form-field__textarea:focus-visible {
outline: none;
border-bottom-color: var(--color-blue-dark);
border-bottom-width: 2px;
}
.contact-form .form-field__hint {
color: rgb(59 73 86 / 0.6);
}
.contact-form .form-checkbox__label {
color: var(--text-on-light-secondary);
text-wrap: balance;
}
.contact-form .form-checkbox__label a {
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.contact-form .form-checkbox__input {
accent-color: var(--color-blue-dark);
}
.contact-form__submit {
justify-self: start;
border-radius: var(--radius-pill);
margin-top: var(--space-2);
}
.contact-form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.pixel-seam {
position: relative;
z-index: 2;
height: 0;
overflow: visible;
}
.pixel-seam__band {
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--pixel-band-h);
display: grid;
grid-template-columns: repeat(var(--pixel-cols, 10), var(--pixel-tile-size, 24px));
grid-template-rows: repeat(var(--pixel-rows, 3), var(--pixel-tile-size, 24px));
pointer-events: none;
overflow: hidden;
}
.pixel-seam__tile {
background-color: var(--pixel-tile-color, var(--color-bg));
opacity: 1;
transition: opacity 0.5s var(--easing-standard);
}
.pixel-seam__tile.is-revealed {
opacity: 0;
}
.pixel-seam--white {
--pixel-tile-color: var(--color-white);
}
.pixel-seam + .contact-office {
padding-top: calc(var(--space-8) + 200px);
}
@media (max-width: 767.98px) {
.pixel-seam {
--pixel-band-h: 120px;
}
.pixel-seam + .contact-office {
padding-top: calc(var(--space-6) + 120px);
}
}
@media (max-width: 767.98px) {
.page-contact .breadcrumbs,
.contact-main__grid,
.contact-location > .container {
padding-inline: var(--space-2);
}
.contact-main {
padding-block: var(--space-4) var(--space-7);
}
.contact-method {
padding-block: var(--space-4);
}
.contact-method__text,
.contact-method__action {
font-size: 0.8125rem;
}
.contact-method__label {
font-size: 0.75rem;
}
.contact-form .form-field__label {
font-size: 0.8125rem;
letter-spacing: 0.06em;
}
.contact-form .form-field__input,
.contact-form .form-field__textarea {
font-size: 1rem;
min-height: 3rem;
padding-block: var(--space-3) var(--space-2);
}
.contact-form .form-field__textarea {
min-height: 4rem;
}
.contact-form .form-checkbox {
padding-block: var(--space-2);
}
.contact-form .form-checkbox__input {
width: 1.375rem;
height: 1.375rem;
}
.contact-form .form-checkbox__label a {
display: inline-block;
padding-block: 0.65rem;
}
.contact-form__submit {
justify-self: stretch;
width: 100%;
}
.contact-main__grid {
gap: var(--space-5);
}
.contact-form {
gap: var(--space-4);
margin-top: var(--space-5);
}
.contact-form-card {
padding: var(--space-5);
}
}
.contact-location {
background-color: var(--color-white);
}
.contact-location h2,
.contact-office h2 {
font-size: clamp(2.25rem, 0.4rem + 3.7vw, 3.75rem);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
color: var(--color-logo-black);
}
.contact-location__intro {
margin-inline: auto;
text-align: center;
}
.contact-location__intro h2 {
max-width: 20ch;
margin-inline: auto;
text-wrap: balance;
}
.contact-location__intro p {
margin-top: var(--space-3);
}
.contact-location__map-wrap {
isolation: isolate;
position: relative;
height: 360px;
border: 1px solid rgb(59 73 86 / 0.12);
border-radius: var(--radius-md);
overflow: hidden;
}
@media (min-width: 768px) {
.contact-location__map-wrap {
height: 440px;
}
}
@media (min-width: 1024px) {
.contact-location__map-wrap {
height: 520px;
}
}
.contact-location__map,
.contact-location__map.leaflet-container {
width: 100%;
height: 100%;
background-color: var(--color-logo-black);
}
.contact-location__fallback {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
margin: 0;
padding: var(--space-5);
text-align: center;
color: var(--color-white);
line-height: var(--line-height-base);
}
.contact-location__fallback a {
color: var(--color-blue-light);
}
.contact-marker__dot {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--color-accent);
border: 2px solid var(--color-white);
box-shadow: 0 1px 4px rgb(1 1 1 / 0.35);
}
.leaflet-tooltip.contact-marker__label {
padding: 6px 10px;
border: none !important;
border-radius: var(--radius-sm);
background-color: var(--color-white) !important;
box-shadow: 0 2px 10px rgb(1 1 1 / 0.14);
color: var(--color-logo-black);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
white-space: nowrap;
}
.leaflet-tooltip.contact-marker__label::before {
display: none;
}
.contact-location__map .leaflet-container {
font-family: var(--font-family-base);
}
@media (max-width: 767.98px) {
.contact-location__map-wrap {
height: 300px;
}
.contact-location h2,
.contact-office h2 {
font-size: 1.75rem;
}
.contact-location__fallback a {
display: inline-block;
padding-block: 0.6rem;
}
.contact-location {
padding-top: var(--space-6);
}
}
.contact-office {
background-color: var(--color-white);
padding-bottom: 0;
}
.contact-office__row li,
.contact-office__pair li {
margin: 0;
border: 1px solid rgb(59 73 86 / 0.12);
border-radius: var(--radius-md);
overflow: hidden;
}
.contact-office__row img,
.contact-office__pair img {
display: block;
width: 100%;
height: auto;
}
.contact-office__row,
.contact-office__pair {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
.contact-office__pair {
margin-top: var(--space-5);
}
@media (min-width: 900px) {
.contact-office__row {
grid-template-columns: 2.35fr 1fr;
align-items: start;
}
}
@media (min-width: 700px) {
.contact-office__pair {
grid-template-columns: 1fr 1fr;
}
}