html {
font-size: 16px;
}
body.payload-clone-shell {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
body.payload-clone-shell :is(input, textarea, select, [contenteditable='true'], [contenteditable=''], [contenteditable]) {
-webkit-user-select: text;
user-select: text;
}
body.payload-clone-shell img {
-webkit-user-drag: none;
}
.payload-clone-shell {
--shell-viewport-height: 100vh;
--shell-sidebar-width: 200px;
--payload-panel-width: 804px;
--payload-panel-pad-top: 70px;
--payload-panel-pad-x: clamp(24px, 5vw, 70px);
--payload-panel-pad-bottom: 64px;
--font-google-open-sans: 'Open Sans';
--font-google-birthstone: 'Birthstone';
--font-sans: var(--font-google-open-sans), 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
--font-birthstone: var(--font-google-birthstone), 'Birthstone', cursive;
--font-heading: var(--font-birthstone);
--text-sm: 0.875rem;
--text-md: 1rem;
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--leading-normal: 1.45;
--leading-relaxed: 1.7;
--theme-bg: #0f1115;
--theme-surface: #161b22;
--theme-text: #f5f5f5;
--theme-muted: #b2becc;
--theme-border: #55606d;
--theme-accent: #00548b;
--theme-focus: #1772ae;
--theme-contrast: #ffffff;
--theme-menu-bg: #0b0f14;
--theme-section-bg-standard: #0f1115;
--theme-section-bg-accent: #161b22;
--theme-heading-text: #f5f5f5;
--theme-subheading-text: #b2becc;
--theme-divider: #55606d;
--color-text: var(--theme-text);
--color-rich-text: var(--color-text);
--color-muted: var(--theme-muted);
--color-border: var(--theme-border);
--color-accent: var(--theme-accent);
--color-focus: var(--theme-focus);
--color-header-divider: var(--theme-divider);
--menu-bg: var(--theme-menu-bg);
--menu-text: var(--theme-text);
--menu-text-muted: color-mix(in srgb, var(--theme-muted) 88%, transparent);
--menu-border-muted: color-mix(in srgb, var(--theme-border) 68%, transparent);
--menu-border-strong: color-mix(in srgb, var(--theme-border) 90%, transparent);
--menu-toggle-bg: color-mix(in srgb, var(--theme-surface) 68%, transparent);
--menu-toggle-border: color-mix(in srgb, var(--theme-border) 68%, transparent);
--menu-toggle-bar: var(--theme-text);
--heading-title-font-family: var(--font-heading);
--heading-title-font-size: clamp(3rem, 5vw, 4.5rem);
--heading-title-font-weight: var(--weight-regular);
--heading-title-font-style: normal;
--heading-title-line-height: 1.08;
--heading-title-letter-spacing: 0;
--heading-title-text-transform: none;
--heading-title-color: var(--theme-heading-text);
--heading-subtitle-font-family: var(--font-sans);
--heading-subtitle-font-size: var(--text-md);
--heading-subtitle-font-weight: var(--weight-regular);
--heading-subtitle-font-style: normal;
--heading-subtitle-font-variant-caps: small-caps;
--heading-subtitle-line-height: var(--leading-normal);
--heading-subtitle-letter-spacing: 1px;
--heading-subtitle-text-transform: none;
--heading-subtitle-color: var(--theme-subheading-text);
--heading-divider-width: 72px;
--heading-divider-height: 2px;
--heading-divider-color: var(--color-accent);
--theme-portfolio-filter: var(--theme-accent);
--theme-portfolio-filter-hover: var(--theme-focus);
--theme-portfolio-filter-contrast: var(--theme-contrast);
--color-modal-background: #000000;
--portfolio-heading-font-family: var(--font-heading);
--portfolio-heading-font-size: clamp(3rem, 5vw, 4.5rem);
--portfolio-heading-font-weight: var(--weight-regular);
--portfolio-heading-font-style: normal;
--portfolio-heading-text-transform: none;
--portfolio-heading-color: var(--heading-title-color);
--portfolio-divider-width: 72px;
--portfolio-divider-height: 2px;
--portfolio-divider-color: var(--heading-divider-color);
--portfolio-intro-font-family: var(--heading-subtitle-font-family);
--portfolio-intro-font-size: var(--heading-subtitle-font-size);
--portfolio-intro-font-weight: var(--heading-subtitle-font-weight);
--portfolio-intro-font-style: var(--heading-subtitle-font-style);
--portfolio-intro-font-variant-caps: var(--heading-subtitle-font-variant-caps);
--portfolio-intro-line-height: var(--heading-subtitle-line-height);
--portfolio-intro-letter-spacing: var(--heading-subtitle-letter-spacing);
--portfolio-intro-text-transform: var(--heading-subtitle-text-transform);
--portfolio-intro-color: var(--heading-subtitle-color);
--portfolio-filter-gap: 10px;
--portfolio-filter-margin-bottom: 30px;
--portfolio-filter-font-family: var(--font-sans);
--portfolio-filter-font-size: 13px;
--portfolio-filter-font-weight: var(--weight-medium);
--portfolio-filter-font-style: normal;
--portfolio-filter-letter-spacing: 0.02em;
--portfolio-filter-text-transform: uppercase;
--portfolio-filter-padding-y: 8px;
--portfolio-filter-padding-x: 14px;
--portfolio-filter-border-width: 1px;
--portfolio-filter-border-radius: 0.375rem;
--portfolio-filter-transition-duration: 220ms;
--portfolio-filter-bg: transparent;
--portfolio-filter-border-color: var(--theme-portfolio-filter);
--portfolio-filter-text-color: var(--theme-portfolio-filter);
--portfolio-filter-hover-bg: var(--theme-portfolio-filter-hover);
--portfolio-filter-hover-border-color: var(--theme-portfolio-filter-hover);
--portfolio-filter-hover-text-color: var(--theme-portfolio-filter-contrast);
--portfolio-filter-active-bg: var(--theme-portfolio-filter);
--portfolio-filter-active-border-color: var(--theme-portfolio-filter);
--portfolio-filter-active-text-color: var(--theme-portfolio-filter-contrast);
--portfolio-grid-column-gap: 46px;
--portfolio-grid-row-gap: 35px;
--portfolio-card-max-width: 660px;
--portfolio-card-border-width: 1px;
--portfolio-card-border-color: color-mix(in srgb, var(--theme-accent) 68%, transparent);
--portfolio-card-border-radius: 6px;
--portfolio-card-bg: #09101a;
--portfolio-card-shadow: 0 0 0 rgba(0, 0, 0, 0);
--portfolio-card-hover-border-color: rgba(255, 255, 255, 0.78);
--portfolio-card-hover-shadow:
0 0 0 1px rgba(255, 255, 255, 0.36),
0 0 24px rgba(255, 255, 255, 0.2),
0 18px 34px rgba(0, 0, 0, 0.38);
--portfolio-card-transition-duration: 220ms;
--portfolio-card-media-aspect: 1 / 1;
--portfolio-card-overlay-bg: color-mix(in srgb, var(--color-accent) 85%, transparent);
--portfolio-card-overlay-opacity: 0;
--portfolio-card-overlay-hover-opacity: 1;
--portfolio-card-overlay-transition-duration: 220ms;
--portfolio-card-plus-size: 62px;
--portfolio-card-plus-margin-bottom: 30px;
--portfolio-card-overlay-content-padding-inline: 0px;
--portfolio-card-overlay-content-top-offset: 14px;
--portfolio-card-title-font-family: var(--font-sans);
--portfolio-card-title-font-size: 20px;
--portfolio-card-title-font-weight: var(--weight-medium);
--portfolio-card-title-font-style: normal;
--portfolio-card-title-text-transform: uppercase;
--portfolio-card-title-color: var(--heading-subtitle-color);
--portfolio-card-title-padding-bottom: 10px;
--portfolio-card-category-font-family: var(--font-sans);
--portfolio-card-category-font-size: 12px;
--portfolio-card-category-font-weight: var(--weight-regular);
--portfolio-card-category-font-style: normal;
--portfolio-card-category-text-transform: uppercase;
--portfolio-card-category-color: var(--theme-bg);
--portfolio-card-category-divider-color: var(--color-accent);
--portfolio-card-category-divider-width: 3px;
--portfolio-card-category-margin-bottom: 25px;
--portfolio-card-category-padding-bottom: 15px;
--portfolio-focus-ring-color: var(--color-focus);
--portfolio-focus-ring-width: 3px;
--portfolio-focus-ring-offset: 4px;
--portfolio-modal-overlay-bg: color-mix(in srgb, var(--color-modal-background) 85%, transparent);
--portfolio-modal-z-index: 2000;
--portfolio-modal-padding: 36px;
--portfolio-modal-inner-max-width: 900px;
--portfolio-modal-inner-bg: var(--theme-bg);
--portfolio-modal-inner-border-color: var(--theme-bg);
--portfolio-modal-inner-border-width: 40px;
--portfolio-modal-inner-radius: var(--toggle-radius);
--portfolio-modal-inner-min-height: 360px;
--portfolio-modal-inner-max-height: calc(100dvh - (var(--portfolio-modal-padding) * 2));
--portfolio-modal-inner-shadow: none;
--portfolio-modal-media-max-height: clamp(220px, calc(var(--portfolio-modal-inner-max-height) - 210px), 72dvh);
--portfolio-before-after-max-height: var(--portfolio-modal-media-max-height);
--portfolio-modal-sticky-top: 0px;
--portfolio-modal-sticky-z-index: 2;
--portfolio-modal-sticky-bg: var(--portfolio-modal-inner-bg);
--portfolio-modal-sticky-padding-top: 0px;
--portfolio-modal-sticky-padding-bottom: 6px;
--portfolio-modal-media-radius: 0px;
--portfolio-modal-iframe-min-height: 420px;
--portfolio-modal-title-font-family: var(--heading-title-font-family);
--portfolio-modal-title-font-size: var(--heading-title-font-size);
--portfolio-modal-title-font-weight: var(--heading-title-font-weight);
--portfolio-modal-title-font-style: var(--heading-title-font-style);
--portfolio-modal-title-line-height: var(--heading-title-line-height);
--portfolio-modal-title-letter-spacing: var(--heading-title-letter-spacing);
--portfolio-modal-title-text-transform: var(--heading-title-text-transform);
--portfolio-modal-title-color: var(--heading-title-color);
--portfolio-modal-category-font-family: var(--heading-subtitle-font-family);
--portfolio-modal-category-font-size: var(--heading-subtitle-font-size);
--portfolio-modal-category-font-weight: var(--heading-subtitle-font-weight);
--portfolio-modal-category-font-style: var(--heading-subtitle-font-style);
--portfolio-modal-category-font-variant-caps: var(--heading-subtitle-font-variant-caps);
--portfolio-modal-category-line-height: var(--heading-subtitle-line-height);
--portfolio-modal-category-letter-spacing: var(--heading-subtitle-letter-spacing);
--portfolio-modal-category-text-transform: var(--heading-subtitle-text-transform);
--portfolio-modal-category-color: var(--heading-subtitle-color);
--portfolio-modal-category-divider-color: var(--heading-divider-color);
--portfolio-modal-category-divider-width: 3px;
--portfolio-modal-category-divider-padding-bottom: 8px;
--portfolio-modal-body-font-family: var(--font-sans);
--portfolio-modal-body-font-size: var(--text-md);
--portfolio-modal-body-font-weight: var(--weight-regular);
--portfolio-modal-body-font-style: normal;
--portfolio-modal-body-color: var(--color-text);
--portfolio-modal-body-line-height: var(--leading-relaxed);
--portfolio-modal-control-z-index: 2010;
--portfolio-modal-control-bg: var(--toggle-bg);
--portfolio-modal-control-border-color: var(--toggle-border-color);
--portfolio-modal-control-border-width: var(--toggle-border-width);
--portfolio-modal-control-color: var(--menu-toggle-bar);
--portfolio-modal-control-hover-bg: var(--toggle-hover-bg);
--portfolio-modal-control-hover-border-color: var(--toggle-hover-border-color);
--portfolio-modal-control-hover-color: var(--toggle-sun-hover-color);
--portfolio-modal-control-radius: var(--toggle-radius);
--portfolio-modal-control-shadow: var(--toggle-shadow);
--portfolio-modal-control-font-size: 26px;
--portfolio-modal-close-size: 52px;
--portfolio-modal-nav-width: 52px;
--portfolio-modal-nav-height: 64px;
--portfolio-modal-nav-offset: 20px;
--portfolio-before-after-divider-color: rgba(255, 255, 255, 0.95);
--portfolio-before-after-divider-shadow-color: rgba(0, 0, 0, 0.35);
--services-card-title-color: rgba(245, 248, 252, 0.92);
--services-card-title-hover-color: #ffffff;
--services-card-overlay-bg: color-mix(in srgb, #02060b 52%, transparent);
--services-card-overlay-hover-bg: color-mix(in srgb, #02060b 22%, transparent);
--services-card-border-color: color-mix(in srgb, var(--theme-accent) 68%, transparent);
--services-card-hover-border-color: rgba(255, 255, 255, 0.78);
--services-card-shadow: 0 0 0 rgba(0, 0, 0, 0);
--services-card-hover-shadow:
0 0 0 1px rgba(255, 255, 255, 0.36),
0 0 24px rgba(255, 255, 255, 0.2),
0 18px 34px rgba(0, 0, 0, 0.38);
--services-modal-overlay-bg: color-mix(in srgb, #000000 85%, transparent);
--services-modal-panel-bg: var(--theme-menu-bg);
--services-modal-panel-border: var(--theme-menu-bg);
--services-modal-title-color: var(--heading-title-color);
--services-modal-text-color: var(--color-text);
--services-section-overlay-opacity: 0.12;
--faq-filter-gap: 10px;
--faq-filter-font-family: var(--font-sans);
--faq-filter-font-size: 13px;
--faq-filter-font-weight: var(--weight-medium);
--faq-filter-letter-spacing: 0.02em;
--faq-filter-text-transform: uppercase;
--faq-filter-padding-y: 8px;
--faq-filter-padding-x: 14px;
--faq-filter-border-width: 1px;
--faq-filter-border-radius: 0.375rem;
--faq-filter-bg: transparent;
--faq-filter-border-color: var(--theme-accent);
--faq-filter-text-color: var(--theme-accent);
--faq-filter-hover-bg: var(--theme-focus);
--faq-filter-hover-border-color: var(--theme-focus);
--faq-filter-hover-text-color: var(--theme-contrast);
--faq-filter-active-bg: var(--theme-accent);
--faq-filter-active-border-color: var(--theme-accent);
--faq-filter-active-text-color: var(--theme-contrast);
--faq-item-bg: color-mix(in srgb, var(--theme-surface) 56%, transparent);
--faq-item-bg-open: color-mix(in srgb, var(--theme-surface) 80%, transparent);
--faq-item-border-color: color-mix(in srgb, var(--theme-border) 68%, transparent);
--faq-question-color: var(--color-text);
--faq-answer-color: var(--color-text);
--contact-info-font-size: var(--text-md);
--contact-info-icon-size: 2.45rem;
--contact-info-icon-color: var(--color-accent);
--contact-social-size: 2rem;
--contact-social-icon-size: 0.9rem;
--contact-social-border-width: 1px;
--contact-social-radius: 0.375rem;
--contact-social-base: var(--theme-text);
--contact-social-border-color: var(--theme-text);
--contact-social-hover-foreground: var(--theme-contrast);
--contact-form-font-size: var(--text-md);
--contact-form-text-color: var(--color-text);
--contact-form-input-bg: transparent;
--contact-form-input-border-color: var(--color-border);
--contact-form-input-border-width: 1px;
--contact-form-input-border-radius: 0.375rem;
--contact-form-placeholder-color: color-mix(in srgb, var(--theme-muted) 82%, transparent);
--contact-form-button-bg: transparent;
--contact-form-button-border-color: var(--color-border);
--contact-form-button-border-width: 1px;
--contact-form-button-text-color: var(--color-text);
--contact-form-button-hover-bg: var(--color-accent);
--contact-form-button-hover-text-color: #ffffff;
--rt-ring-color: var(--color-text);
--rt-ring-font-family: var(--font-sans);
--rt-ring-font-size: 0.273rem;
--rt-ring-font-weight: var(--weight-regular);
--rt-ring-font-style: normal;
--rt-ring-font-variant-caps: small-caps;
--rt-ring-line-height: 1.05;
--rt-ring-letter-spacing: 1px;
--rt-ring-text-transform: none;
--rt-inline-spinning-ring-margin: 0.4rem 0.65rem;
--rt-inline-spinning-ring-font-size-mobile: 0.44rem;
--rt-inline-spinning-ring-letter-spacing-mobile: 0.8px;
--rt-inline-spinning-ring-margin-top-mobile: 2.15rem;
--rt-inline-spinning-ring-margin-bottom-mobile: 3.15rem;
--rt-inline-spinning-ring-margin-mobile: var(--rt-inline-spinning-ring-margin-top-mobile) 0
var(--rt-inline-spinning-ring-margin-bottom-mobile);
--closing-ring-color: var(--rt-ring-color, var(--color-text));
--hero-heading-font-family: var(--font-heading);
--hero-heading-font-size: clamp(3rem, 5vw, 4.5rem);
--hero-heading-font-weight: var(--weight-regular);
--hero-heading-font-style: normal;
--hero-heading-line-height: 1.11;
--hero-heading-text-transform: none;
--hero-heading-color: var(--theme-contrast);
--hero-heading-text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72), 0 0 16px rgba(255, 255, 255, 0.16);
--hero-subheading-font-family: var(--font-sans);
--hero-subheading-font-size: var(--text-md);
--hero-subheading-font-weight: var(--weight-regular);
--hero-subheading-font-style: normal;
--hero-subheading-font-variant-caps: small-caps;
--hero-subheading-line-height: var(--leading-normal);
--hero-subheading-letter-spacing: 1px;
--hero-subheading-text-transform: none;
--hero-subheading-color: var(--theme-contrast);
--hero-subheading-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.66), 0 0 10px rgba(255, 255, 255, 0.14);
--hero-subheading-divider-color: var(--color-accent);
--hero-subheading-divider-width: 250px;
--hero-subheading-divider-thickness: 2px;
--menu-bg-dark: #0b0f14;
--menu-bg-light: #eef2f6;
--menu-border-dark: rgba(85, 96, 109, 0.62);
--menu-border-light: rgba(147, 165, 185, 0.56);
--menu-link-dark: #f5f5f5;
--menu-link-light: #1b1f24;
--menu-link-hover-dark: #00548b;
--menu-link-hover-light: #00548b;
--menu-link-active-dark: #1772ae;
--menu-link-active-light: #1772ae;
--menu-link-divider-dark: #00548b;
--menu-link-divider-light: #00548b;
--menu-link-label-shift: 0.42rem;
--menu-link-font-family: var(--heading-subtitle-font-family, var(--font-sans));
--menu-link-font-size: var(--heading-subtitle-font-size, 0.875rem);
--menu-link-font-weight: var(--weight-medium);
--menu-link-font-style: var(--heading-subtitle-font-style, normal);
--menu-link-font-variant-caps: var(--heading-subtitle-font-variant-caps, normal);
--menu-link-line-height: var(--heading-subtitle-line-height, 1.2);
--menu-link-letter-spacing: clamp(
var(--heading-subtitle-letter-spacing, 1px),
0.08em,
0.12em
);
--menu-link-text-transform: var(--heading-subtitle-text-transform, uppercase);
--menu-link-divider-height: var(--heading-divider-height, 2px);
--menu-link-divider-width-collapsed: 2.5ch;
--menu-link-color: var(--menu-link-dark);
--menu-link-hover-color: var(--menu-link-hover-dark);
--menu-link-active-color: var(--menu-link-active-dark);
--menu-link-divider-color: var(--menu-link-divider-dark);
--menu-link-divider-active-color: var(--menu-link-active-dark);
--menu-button-padding-y: 8px;
--menu-button-padding-x: 14px;
--menu-link-divider-gap: 0.375rem;
--menu-logo-pad-top: 0;
--menu-logo-pad-x: 20px;
--menu-logo-pad-bottom: 30px;
--menu-logo-max-width: 156px;
--menu-nav-offset-top: 8px;
--menu-footer-pad-x: 30px;
--menu-footer-pad-bottom: 20px;
--menu-footer-gap: 12px;
--payload-social-icon-size: 2rem;
--payload-social-icon-glyph-size: var(--contact-social-icon-size, 0.9rem);
--payload-social-radius: 0.375rem;
--payload-social-border-width: 1px;
--payload-social-icon-inner-size: calc(var(--payload-social-icon-size) - (var(--payload-social-border-width) * 2));
--payload-social-base-dark: #ffffff;
--payload-social-base-light: #1772ae;
--toggle-border-color: var(--theme-text);
--toggle-border-width: 1px;
--toggle-bg: transparent;
--toggle-hover-bg: var(--theme-accent);
--toggle-hover-border-color: var(--theme-accent);
--toggle-focus-ring-color: var(--theme-contrast);
--toggle-focus-ring-width: 2px;
--toggle-sun-color: var(--theme-text);
--toggle-moon-color: var(--theme-text);
--toggle-sun-hover-color: var(--theme-contrast);
--toggle-moon-hover-color: var(--toggle-moon-color);
--toggle-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
--toggle-radius: 0.3125rem;
--toggle-icon-size: 22px;
--toggle-padding-x: 0.25rem;
--toggle-padding-y: 0.25rem;
--toggle-close-hover-color: var(--theme-contrast);
overflow: hidden;
}
@supports (height: 100svh) {
.payload-clone-shell {
--shell-viewport-height: 100svh;
}
}
.payload-clone-shell,
.payload-clone-shell #page-wrapper {
height: var(--shell-viewport-height);
min-height: var(--shell-viewport-height);
overflow: hidden;
background: #0f1115;
}
.payload-clone-shell #start {
display: none;
height: 0;
min-height: 0;
overflow: hidden;
}
.payload-shell {
display: flex;
height: var(--shell-viewport-height);
min-height: var(--shell-viewport-height);
overflow: hidden;
color: var(--theme-text);
background: var(--theme-bg);
font-family: var(--font-sans);
}
.payload-sidebar {
flex: 0 0 var(--shell-sidebar-width);
width: var(--shell-sidebar-width);
min-width: var(--shell-sidebar-width);
height: var(--shell-viewport-height);
background: var(--menu-bg-dark);
border-right: 1px solid var(--menu-border-dark);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
left: 0;
z-index: 20;
}
.payload-sidebar-head {
display: block;
}
.payload-logo {
display: block;
box-sizing: border-box;
margin-top: 30px;
padding: var(--menu-logo-pad-top) var(--menu-logo-pad-x) var(--menu-logo-pad-bottom);
text-align: center;
}
.payload-logo-image {
display: block;
width: min(var(--menu-logo-max-width), 100%);
max-width: 100%;
height: auto;
margin: 0 auto;
}
.payload-logo-image--desktop.payload-logo-image--theme-default {
display: none;
}
.payload-logo-image--desktop.payload-logo-image--theme-dark {
display: block;
}
.payload-logo-image--mobile {
display: none;
}
.payload-mobile-nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
width: 40px;
height: 40px;
border: 1px solid var(--menu-toggle-border);
border-radius: 0.375rem;
background: var(--menu-toggle-bg);
color: var(--menu-toggle-bar);
cursor: pointer;
padding: 0;
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.payload-mobile-nav-toggle-bar {
display: block;
width: 18px;
height: 2px;
border-radius: 999px;
background: currentColor;
transform-origin: center;
transition: transform 180ms ease, opacity 180ms ease;
}
.payload-sidebar.is-mobile-nav-open .payload-mobile-nav-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.payload-sidebar.is-mobile-nav-open .payload-mobile-nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.payload-sidebar.is-mobile-nav-open .payload-mobile-nav-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.payload-shell.is-mobile-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.payload-shell.is-mobile-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.payload-shell.is-mobile-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.payload-shell.is-mobile-modal-open .payload-mobile-nav-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.payload-shell.is-mobile-modal-open .payload-mobile-nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.payload-shell.is-mobile-modal-open .payload-mobile-nav-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
body.payload-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(1),
body.payload-portfolio-modal-open .payload-mobile-nav-toggle-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
body.payload-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(2),
body.payload-portfolio-modal-open .payload-mobile-nav-toggle-bar:nth-child(2) {
opacity: 0;
}
body.payload-service-modal-open .payload-mobile-nav-toggle-bar:nth-child(3),
body.payload-portfolio-modal-open .payload-mobile-nav-toggle-bar:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.payload-mobile-nav-toggle:hover,
.payload-mobile-nav-toggle:focus-visible {
background: var(--toggle-hover-bg);
border-color: var(--toggle-hover-border-color);
color: var(--toggle-close-hover-color, var(--theme-contrast));
}
.payload-theme-toggle--mobile {
display: none;
}
.payload-nav {
flex: 1 1 auto;
min-height: 8rem;
overflow-y: auto;
overflow-x: hidden;
padding-top: var(--menu-nav-offset-top);
padding-bottom: 0.5rem;
}
.payload-mobile-menu-gesture-surface {
display: none;
}
.payload-nav ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.payload-nav li {
margin: 0;
padding: 0;
}
.payload-nav-link,
.payload-nav-link:link,
.payload-nav-link:visited {
--menu-link-divider-width-expanded: calc(100% - (var(--menu-button-padding-x) * 2));
display: block;
margin: 0 30px;
padding: var(--menu-button-padding-y) var(--menu-button-padding-x) calc(var(--menu-button-padding-y) + var(--menu-link-divider-gap));
border: 0;
border-radius: 0;
background: transparent;
color: var(--menu-link-color);
font-family: var(--menu-link-font-family);
font-size: var(--menu-link-font-size);
font-weight: var(--menu-link-font-weight);
font-style: var(--menu-link-font-style);
font-variant-caps: var(--menu-link-font-variant-caps);
letter-spacing: var(--menu-link-letter-spacing);
line-height: var(--menu-link-line-height);
text-decoration: none;
text-transform: var(--menu-link-text-transform);
text-align: var(--menu-link-align-desktop, left);
position: relative;
transition: color 220ms ease;
}
.payload-nav-link::after {
content: '';
position: absolute;
left: var(--menu-button-padding-x);
bottom: var(--menu-button-padding-y);
height: var(--menu-link-divider-height);
width: var(--menu-link-divider-width-collapsed);
background: var(--menu-link-divider-color);
transition: width 220ms ease, background-color 220ms ease;
}
.payload-nav-link-label {
display: inline-block;
color: inherit;
transform: translateX(0);
transition: color 220ms ease, transform 220ms ease;
}
.payload-nav-link:hover,
.payload-nav-link:active {
color: var(--menu-link-hover-color);
}
.payload-nav-link:hover::after,
.payload-nav-link:active::after {
width: var(--menu-link-divider-width-expanded);
background: var(--menu-link-divider-color);
}
.payload-nav-link:hover .payload-nav-link-label,
.payload-nav-link:active .payload-nav-link-label {
color: var(--menu-link-hover-color);
transform: translateX(var(--menu-link-label-shift));
}
.payload-nav-link.is-active,
.payload-nav-link[aria-current='page'] {
color: var(--menu-link-active-color);
}
.payload-nav-link.is-active::after,
.payload-nav-link[aria-current='page']::after {
width: var(--menu-link-divider-width-expanded);
background: var(--menu-link-divider-active-color);
}
.payload-nav-link.is-active .payload-nav-link-label,
.payload-nav-link[aria-current='page'] .payload-nav-link-label {
color: var(--menu-link-active-color);
transform: translateX(var(--menu-link-label-shift));
}
.payload-sidebar-bottom {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-self: stretch;
align-items: center;
width: 100%;
box-sizing: border-box;
gap: var(--menu-footer-gap);
padding-left: var(--menu-footer-pad-x);
padding-right: var(--menu-footer-pad-x);
padding-bottom: var(--menu-footer-pad-bottom);
text-align: center;
}
.payload-socials {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
width: 100%;
}
.payload-social-link {
--payload-social-base: var(--payload-social-base-dark);
--payload-social-hover-bg: #ffffff;
--payload-social-glyph-scale: 1;
--payload-social-glyph-offset-y: 0;
width: var(--payload-social-icon-size);
height: var(--payload-social-icon-size);
display: inline-flex;
flex: 0 0 auto;
align-items: stretch;
justify-content: stretch;
border: var(--payload-social-border-width) solid var(--payload-social-base);
border-radius: var(--payload-social-radius);
background: transparent;
color: var(--payload-social-base);
text-decoration: none;
overflow: hidden;
position: relative;
cursor: pointer;
transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.payload-social-link-inner {
position: absolute;
top: var(--payload-social-border-width);
left: var(--payload-social-border-width);
width: calc(100% - (var(--payload-social-border-width) * 2));
height: calc(var(--payload-social-icon-inner-size) * 2);
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform 220ms ease;
will-change: transform;
}
.payload-social-link:hover .payload-social-link-inner,
.payload-social-link:focus-visible .payload-social-link-inner {
transform: translateY(calc(-1 * var(--payload-social-icon-inner-size)));
}
.payload-social-glyph {
flex: 0 0 var(--payload-social-icon-inner-size);
height: var(--payload-social-icon-inner-size);
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
position: relative;
line-height: 0;
color: var(--payload-social-base);
}
.payload-social-glyph--brand {
color: #ffffff;
}
.payload-social-glyph svg {
width: var(--payload-social-icon-glyph-size);
height: var(--payload-social-icon-glyph-size);
display: block;
margin: 0;
position: static;
transform: translateY(var(--payload-social-glyph-offset-y)) scale(var(--payload-social-glyph-scale));
transform-origin: center;
}
.payload-social-glyph i {
font-size: var(--payload-social-icon-glyph-size);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transform: translateY(var(--payload-social-glyph-offset-y)) scale(var(--payload-social-glyph-scale));
transform-origin: center;
}
.payload-social-glyph.fa {
font-size: var(--payload-social-icon-glyph-size);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transform: translateY(var(--payload-social-glyph-offset-y)) scale(var(--payload-social-glyph-scale));
transform-origin: center;
}
.payload-social-link:hover,
.payload-social-link:focus-visible {
border-color: var(--payload-social-base);
background: var(--payload-social-hover-bg);
color: var(--payload-social-base);
}
.payload-social-link--instagram {
--payload-social-hover-bg: #8a3ab9;
}
.payload-social-link--x {
--payload-social-hover-bg: #010101;
}
.payload-social-link--facebook {
--payload-social-hover-bg: #1877f2;
--payload-social-glyph-scale: 1.3;
--payload-social-glyph-offset-y: -0.04em;
}
.payload-social-link--linkedin {
--payload-social-hover-bg: #0a66c2;
--payload-social-glyph-scale: 1.12;
}
.payload-social-link--youtube {
--payload-social-hover-bg: #ff0000;
--payload-social-glyph-scale: 1.14;
}
.payload-social-link--tiktok {
--payload-social-hover-bg: #010101;
--payload-social-glyph-scale: 1.12;
}
.payload-social-link--threads {
--payload-social-hover-bg: #101010;
--payload-social-glyph-scale: 1.14;
}
.payload-sidebar-bottom p {
align-self: stretch;
margin: 0;
color: rgba(228, 236, 245, 0.85);
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 0.75rem;
font-weight: 300;
line-height: 1.28;
width: calc(var(--shell-sidebar-width) - (var(--menu-footer-pad-x) * 2));
max-width: calc(var(--shell-sidebar-width) - (var(--menu-footer-pad-x) * 2));
margin-left: auto;
margin-right: auto;
}
.payload-mobile-last-section-copyright {
display: none;
}
.payload-stage {
position: relative;
height: 100%;
min-height: 100%;
}
.payload-content-scroller {
flex: 1 1 auto;
min-width: 0;
height: var(--shell-viewport-height);
overflow: hidden;
position: relative;
}
.payload-content-wrapper {
column-gap: 0;
display: flex;
flex-direction: row;
gap: 0;
height: var(--shell-viewport-height);
margin: 0;
min-height: var(--shell-viewport-height);
overflow-x: auto;
overflow-y: hidden;
padding: 0;
position: relative;
row-gap: 0;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
width: 100%;
}
.payload-content-wrapper.is-drag-scrolling {
cursor: grabbing;
scroll-behavior: auto;
scroll-snap-type: none;
}
.payload-content-wrapper::-webkit-scrollbar,
.payload-section-inner::-webkit-scrollbar {
display: none;
}
.payload-section-shell {
flex: 0 0 var(--payload-panel-width);
height: var(--shell-viewport-height);
margin: 0;
max-width: var(--payload-panel-width);
min-height: var(--shell-viewport-height);
overflow: hidden;
padding: 0;
isolation: isolate;
position: relative;
scroll-snap-align: start;
width: var(--payload-panel-width);
}
.payload-section-shell--has-background-image::before {
background-image: var(--section-bg-image-url);
background-position: var(--section-bg-image-position, center);
background-repeat: var(--section-bg-image-repeat, no-repeat);
background-size: var(--section-bg-image-size, auto);
content: '';
inset: 0;
opacity: var(--section-bg-image-opacity, 1);
pointer-events: none;
position: absolute;
z-index: 0;
}
.payload-section-shell--has-background-image .payload-section-inner {
background: transparent;
}
.payload-section-shell--panel {
background: var(--section-bg-color, var(--theme-section-bg-standard));
color: var(--color-text);
}
.payload-section-shell--full-viewport {
flex-basis: calc(100vw - var(--shell-sidebar-width));
width: calc(100vw - var(--shell-sidebar-width));
max-width: calc(100vw - var(--shell-sidebar-width));
}
.payload-section-shell--closing .payload-section-inner {
padding: 0;
overflow: hidden;
}
.payload-section-shell--closing .section-shell-corner-slot,
.payload-section-shell--closing .section-shell-corner-slot__frame {
height: 100%;
}
.payload-section-inner {
box-sizing: border-box;
display: flow-root;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: var(--payload-panel-pad-top) var(--payload-panel-pad-x) var(--payload-panel-pad-bottom);
scrollbar-width: none;
color: var(--color-text);
position: relative;
z-index: 1;
}
.payload-floating-darkmode-toggle {
--toggle-icon-size: 24px;
--toggle-padding-x: 9px;
--toggle-padding-y: 9px;
--toggle-border-width: 1px;
--toggle-bg: var(--menu-toggle-bg);
--toggle-border-color: var(--menu-toggle-border);
--toggle-close-color: var(--menu-toggle-bar);
position: fixed;
top: max(12px, env(safe-area-inset-top));
right: max(12px, env(safe-area-inset-right));
z-index: 1301;
pointer-events: auto;
}
.payload-theme-toggle {
--toggle-sun-current: var(--toggle-sun-color);
--toggle-moon-current: var(--toggle-moon-color);
align-items: center;
appearance: none;
-webkit-appearance: none;
background: var(--toggle-bg);
border: var(--toggle-border-width) solid var(--toggle-border-color);
border-radius: var(--toggle-radius);
box-shadow: var(--toggle-shadow);
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
height: calc(var(--toggle-icon-size) + (var(--toggle-padding-y) * 2) + (var(--toggle-border-width) * 2));
justify-content: center;
line-height: 0;
margin: 0;
outline: none;
padding: var(--toggle-padding-y) var(--toggle-padding-x);
position: relative;
transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
width: calc(var(--toggle-icon-size) + (var(--toggle-padding-x) * 2) + (var(--toggle-border-width) * 2));
}
.payload-theme-toggle:hover {
background: var(--toggle-hover-bg);
border-color: var(--toggle-hover-border-color);
--toggle-sun-current: var(--toggle-sun-hover-color);
--toggle-moon-current: var(--toggle-moon-hover-color);
}
.payload-theme-toggle-icon {
position: absolute;
inset: 0;
width: var(--toggle-icon-size);
height: var(--toggle-icon-size);
margin: auto;
display: inline-flex;
align-items: center;
justify-content: center;
transform-origin: 50% 50%;
transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 0.65, 0.35, 1), color 150ms ease;
}
.payload-theme-toggle-icon svg {
width: var(--toggle-icon-size);
height: var(--toggle-icon-size);
display: block;
}
.payload-theme-toggle-icon--sun {
color: var(--toggle-sun-current);
opacity: 0;
transform: rotate(-150deg) scale(0.45);
}
.payload-theme-toggle-icon--moon {
color: var(--toggle-moon-current);
opacity: 1;
transform: rotate(0deg) scale(1);
}
.payload-theme-toggle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.payload-theme-toggle.is-light .payload-theme-toggle-icon--sun {
opacity: 1;
transform: rotate(0deg) scale(1.08);
}
.payload-theme-toggle.is-light .payload-theme-toggle-icon--moon {
opacity: 0;
transform: rotate(160deg) scale(0.4);
}
.payload-theme-toggle.is-dark .payload-theme-toggle-icon--sun {
opacity: 0;
transform: rotate(-150deg) scale(0.45);
}
.payload-theme-toggle.is-dark .payload-theme-toggle-icon--moon {
opacity: 1;
transform: rotate(-34deg) scale(1.14);
}
.payload-theme-toggle:focus-visible {
box-shadow: 0 0 0 var(--toggle-focus-ring-width) var(--toggle-focus-ring-color);
}
.payload-sidebar-bottom .payload-theme-toggle--mobile {
display: none;
}
@media (max-width: 768px) {
.payload-clone-shell {
--menu-footer-pad-x: 20px;
}
.payload-floating-darkmode-toggle {
display: none;
}
}
.payload-stage-media {
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
--payload-stage-media-fit: cover;
--payload-stage-overlay-color: #000000;
--payload-stage-overlay-opacity: 0.35;
--payload-stage-fade-transition-duration: 520ms;
--payload-stage-fade-transition-ease: cubic-bezier(0.32, 0.72, 0, 1);
--payload-stage-fade-out-duration: 500ms;
--payload-stage-fade-in-duration: var(--payload-stage-fade-transition-duration);
--payload-stage-fade-out-ease: var(--payload-stage-fade-transition-ease);
--payload-stage-fade-in-ease: var(--payload-stage-fade-transition-ease);
}
.payload-stage-viewport {
position: absolute;
inset: 0;
background: #0b1119;
overflow: hidden;
}
.payload-stage-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
}
.payload-stage-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.payload-stage-slide.is-leaving {
opacity: 1;
visibility: visible;
pointer-events: none;
z-index: 3;
}
.payload-stage-slide.is-leaving.is-leaving-active {
opacity: 0;
transition: opacity var(--payload-stage-fade-out-duration) var(--payload-stage-fade-out-ease);
}
.payload-stage-slide.is-entering {
opacity: 0;
visibility: visible;
pointer-events: none;
z-index: 4;
will-change: opacity;
}
.payload-stage-slide.is-entering.is-entering-active {
opacity: 1;
transition: opacity var(--payload-stage-fade-in-duration) var(--payload-stage-fade-in-ease);
}
.payload-stage-video,
.payload-stage-image {
width: 100%;
height: 100%;
object-fit: var(--payload-stage-media-fit, cover);
display: block;
}
.payload-stage-overlay {
position: absolute;
inset: 0;
pointer-events: none;
opacity: var(--payload-stage-overlay-opacity, 0.35);
}
.payload-stage-overlay--solid {
background: var(--payload-stage-overlay-color, #000000);
}
.payload-stage-overlay--gradient {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--payload-stage-overlay-color, #000000) 100%);
}
.payload-stage-overlay--gradient.payload-stage-overlay--dir-top {
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, var(--payload-stage-overlay-color, #000000) 100%);
}
.payload-stage-overlay--gradient.payload-stage-overlay--dir-left {
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, var(--payload-stage-overlay-color, #000000) 100%);
}
.payload-stage-overlay--gradient.payload-stage-overlay--dir-right {
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--payload-stage-overlay-color, #000000) 100%);
}
.payload-stage-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(8, 14, 24, 0.42);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 35;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.payload-stage-arrow:hover,
.payload-stage-arrow:focus-visible {
background: rgba(8, 14, 24, 0.68);
border-color: rgba(255, 255, 255, 0.86);
}
.payload-stage-arrow--prev {
left: 24px;
}
.payload-stage-arrow--next {
right: 24px;
}
.payload-stage-dots {
position: absolute;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 35;
}
.payload-stage-dot {
width: 10px;
height: 10px;
border-radius: 999px;
border: 0;
padding: 0;
margin: 0;
background: rgba(255, 255, 255, 0.42);
cursor: pointer;
transition: transform 160ms ease, background-color 160ms ease;
}
.payload-stage-dot:hover,
.payload-stage-dot:focus-visible {
background: rgba(255, 255, 255, 0.72);
}
.payload-stage-dot.is-active {
background: #fff;
transform: scale(1.22);
}
@media (prefers-reduced-motion: reduce) {
.payload-stage-slide.is-leaving.is-leaving-active,
.payload-stage-slide.is-entering.is-entering-active,
.payload-stage-arrow,
.payload-stage-dot {
transition: none !important;
}
}
.payload-copy {
position: absolute;
top: var(--payload-hero-copy-top, auto);
left: var(--payload-hero-copy-left, 48px);
bottom: var(--payload-hero-copy-bottom, 120px);
z-index: 25;
width: var(--payload-hero-copy-width, 50%);
max-width: var(--payload-hero-copy-max-width, 26rem);
}
.payload-copy h1 {
margin: 0 0 18px;
color: var(--hero-heading-color);
font-family: var(--hero-heading-font-family);
font-size: var(--hero-heading-font-size);
font-weight: var(--hero-heading-font-weight);
font-style: var(--hero-heading-font-style);
line-height: var(--hero-heading-line-height);
text-transform: var(--hero-heading-text-transform);
text-shadow: var(--hero-heading-text-shadow);
text-wrap: balance;
max-width: 100%;
}
.payload-copy p {
margin: 0;
display: inline-block;
padding: 6px 0 9px;
color: var(--hero-subheading-color);
font-family: var(--hero-subheading-font-family);
font-size: var(--hero-subheading-font-size);
font-weight: var(--hero-subheading-font-weight);
font-style: var(--hero-subheading-font-style);
font-variant-caps: var(--hero-subheading-font-variant-caps);
line-height: var(--hero-subheading-line-height);
letter-spacing: var(--hero-subheading-letter-spacing);
text-transform: var(--hero-subheading-text-transform);
text-shadow: var(--hero-subheading-text-shadow);
border-top: var(--hero-subheading-divider-thickness) solid var(--hero-subheading-divider-color);
border-bottom: var(--hero-subheading-divider-thickness) solid var(--hero-subheading-divider-color);
min-width: var(--hero-subheading-divider-width);
}
.payload-stage-missing {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
text-align: center;
color: #ffc4c4;
background: #111923;
font-size: 1rem;
}
.payload-stage-missing code {
color: #ffdcdc;
}
.payload-section-inner .modular-block {
width: 100%;
max-width: min(1100px, 100%);
margin-left: auto;
margin-right: auto;
}
.payload-section-inner .modular-heading {
margin: 0;
}
.payload-section-inner .modular-heading__header {
margin: 0;
}
.payload-section-inner .modular-heading__title {
margin: 0;
color: var(--heading-title-color);
font-family: var(--heading-title-font-family);
font-size: var(--heading-title-font-size);
font-weight: var(--heading-title-font-weight);
font-style: var(--heading-title-font-style);
line-height: var(--heading-title-line-height);
letter-spacing: var(--heading-title-letter-spacing);
text-transform: var(--heading-title-text-transform);
}
.payload-section-inner .modular-heading__divider {
width: var(--heading-divider-width);
height: var(--heading-divider-height);
margin: 0.75rem 0 0.85rem;
background: var(--heading-divider-color);
}
.payload-section-inner .modular-heading__subtitle {
margin: 0;
color: var(--heading-subtitle-color);
font-family: var(--heading-subtitle-font-family);
font-size: var(--heading-subtitle-font-size);
font-weight: var(--heading-subtitle-font-weight);
font-style: var(--heading-subtitle-font-style);
font-variant-caps: var(--heading-subtitle-font-variant-caps);
line-height: var(--heading-subtitle-line-height);
letter-spacing: var(--heading-subtitle-letter-spacing);
text-transform: var(--heading-subtitle-text-transform);
}
.payload-section-inner .modular-rich-content {
margin-top: 32px;
}
.payload-section-inner .modular-rich-content__content {
width: 100%;
max-width: 100%;
min-width: 0;
color: var(--color-rich-text);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.payload-section-inner .modular-rich-content__content--wide {
max-width: min(1100px, 100%);
}
.payload-section-inner .modular-rich-content__content--narrow-right {
max-width: min(56ch, 100%);
margin-left: auto;
margin-right: 0;
}
.payload-section-inner .modular-rich-content__content--narrow-left {
max-width: min(56ch, 100%);
margin-left: 0;
margin-right: auto;
}
.payload-section-shell--about .modular-rich-content__content--narrow-left {
max-width: min(74ch, 100%);
}
.payload-section-inner .rich-text,
.payload-section-inner .rich-text * {
-webkit-user-select: inherit;
user-select: inherit;
}
.payload-section-inner .modular-rich-content__content p,
.payload-section-inner .modular-rich-content__content li,
.payload-section-inner .modular-rich-content__content blockquote {
color: inherit;
overflow-wrap: anywhere;
}
.payload-section-inner .modular-rich-content__content p {
margin: 0 0 1em;
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.payload-section-inner .modular-rich-content__content :where(h1, h2, h3, h4, h5, h6) {
border: 0;
color: var(--heading-subtitle-color);
font-family: var(--heading-subtitle-font-family);
font-style: normal;
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.75em;
padding: 0;
text-transform: none;
}
.payload-section-inner .rtInlineImage {
--rt-inline-image-width: 50%;
display: inline-block;
float: left;
margin: 0.4rem 1rem 0.9rem 0;
max-width: min(100%, var(--rt-inline-image-width));
width: min(100%, var(--rt-inline-image-width));
}
.payload-section-inner .rtInlineImage--right {
float: right;
margin: 0.4rem 0 0.9rem 1rem;
}
.payload-section-inner .rtInlineImage--none {
float: none;
margin: 0.6rem 0 0.9rem;
}
.payload-section-inner .rtInlineImage img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.payload-section-inner .about-profile-layout {
display: block;
}
.payload-section-inner .about-profile-layout::after {
content: '';
display: block;
clear: both;
}
.payload-section-inner .about-profile-image {
float: left;
display: inline-block;
width: min(100%, var(--rt-inline-image-width, 42%));
max-width: min(100%, var(--rt-inline-image-width, 42%));
margin: 0.35rem 1rem 0.9rem 0;
}
.payload-section-inner .rtSpinningLogoRing {
display: none;
width: var(--rt-ring-size, 500px);
max-width: 100%;
aspect-ratio: 1;
margin: var(--rt-inline-spinning-ring-margin, 0.4rem 0.65rem);
}
.payload-section-inner .rtSpinningLogoRing__svg {
display: block;
width: 100%;
height: 100%;
}
.payload-section-inner .rtSpinningLogoRing__svg--mobile {
display: none;
}
.payload-section-inner .rtSpinningLogoRing__spin {
transform-box: fill-box;
transform-origin: 50% 50%;
--closing-ring-start-angle: var(--rt-ring-start-angle, 0deg);
animation: payload-closing-ring-spin var(--rt-ring-speed, 10s) linear infinite;
animation-direction: var(--rt-ring-direction, normal);
}
.payload-section-inner .rtSpinningLogoRing__text {
fill: var(--rt-ring-color, var(--color-text));
font-family: var(--rt-ring-font-family, var(--heading-subtitle-font-family, var(--font-sans)));
font-size: var(--rt-ring-font-size-current, var(--rt-ring-font-size, 0.273rem));
font-weight: var(--rt-ring-font-weight, var(--weight-regular));
font-style: var(--rt-ring-font-style, normal);
font-variant-caps: var(--rt-ring-font-variant-caps, small-caps);
line-height: var(--rt-ring-line-height, 1.05);
letter-spacing: var(--rt-ring-letter-spacing-current, var(--rt-ring-letter-spacing, 1px));
text-transform: var(--rt-ring-text-transform, none);
text-rendering: geometricPrecision;
font-kerning: normal;
}
.payload-section-inner .rtSpinningLogoRing__text textPath {
text-rendering: geometricPrecision;
font-kerning: normal;
}
.payload-section-inner .rtSpinningLogoRing__logo {
pointer-events: none;
}
.payload-section-inner .modular-rich-content__content p.about-profile-intro {
margin-top: 0;
margin-bottom: 1em;
color: var(--color-rich-text);
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-regular);
font-style: normal;
font-variant-caps: normal;
line-height: var(--leading-relaxed);
letter-spacing: normal;
text-transform: none;
}
.payload-section-inner .modular-rich-content__content p.about-profile-body {
clear: none;
color: var(--color-rich-text);
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-regular);
font-style: normal;
font-variant-caps: normal;
line-height: var(--leading-relaxed);
letter-spacing: normal;
text-transform: none;
}
.payload-section-inner .section-shell-faq {
margin-top: 0;
}
.payload-section-inner .section-shell-faq__header {
margin: 0 0 1rem;
}
.payload-section-inner .section-shell-faq__header--center {
text-align: center;
}
.payload-section-inner .section-shell-faq__header--right {
text-align: right;
}
.payload-section-inner .section-shell-faq__heading {
margin: 0;
color: var(--heading-title-color);
font-family: var(--heading-title-font-family);
font-size: var(--heading-title-font-size);
font-weight: var(--heading-title-font-weight);
font-style: var(--heading-title-font-style);
line-height: var(--heading-title-line-height);
letter-spacing: var(--heading-title-letter-spacing);
text-transform: var(--heading-title-text-transform);
}
.payload-section-inner .section-shell-faq__heading-divider {
width: var(--heading-divider-width);
height: var(--heading-divider-height);
margin: 0.75rem 0 0.85rem;
background: var(--heading-divider-color);
}
.payload-section-inner .section-shell-faq__header--center .section-shell-faq__heading-divider {
margin-left: auto;
margin-right: auto;
}
.payload-section-inner .section-shell-faq__header--right .section-shell-faq__heading-divider {
margin-left: auto;
margin-right: 0;
}
.payload-section-inner .section-shell-faq__filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--faq-filter-gap);
margin: 0 0 30px;
}
.payload-section-inner .section-shell-faq__filter-btn {
background: var(--faq-filter-bg);
border: var(--faq-filter-border-width) solid var(--faq-filter-border-color);
border-radius: var(--faq-filter-border-radius);
color: var(--faq-filter-text-color);
cursor: pointer;
font-family: var(--faq-filter-font-family);
font-size: var(--faq-filter-font-size);
font-weight: var(--faq-filter-font-weight);
letter-spacing: var(--faq-filter-letter-spacing);
line-height: 1.2;
padding: var(--faq-filter-padding-y) var(--faq-filter-padding-x);
text-transform: var(--faq-filter-text-transform);
transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.payload-section-inner .section-shell-faq__filter-btn:hover,
.payload-section-inner .section-shell-faq__filter-btn:focus-visible {
background: var(--faq-filter-hover-bg);
border-color: var(--faq-filter-hover-border-color);
color: var(--faq-filter-hover-text-color);
}
.payload-section-inner .section-shell-faq__filter-btn.is-active {
background: var(--faq-filter-active-bg);
border-color: var(--faq-filter-active-border-color);
color: var(--faq-filter-active-text-color);
}
.payload-section-inner .section-shell-faq__items {
display: grid;
gap: 14px;
}
.payload-section-inner .section-shell-faq__item {
background: var(--faq-item-bg);
border: 1px solid var(--faq-item-border-color);
border-radius: 6px;
overflow: hidden;
transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
}
.payload-section-inner .section-shell-faq__item[data-open='true'] {
background: var(--faq-item-bg-open);
}
.payload-section-inner .section-shell-faq__question-heading {
margin: 0;
}
.payload-section-inner .section-shell-faq__question-button {
align-items: center;
background: none;
border: 0;
color: var(--faq-question-color);
cursor: pointer;
display: flex;
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-medium);
justify-content: space-between;
letter-spacing: 0.01em;
line-height: 1.35;
padding: 0.9rem 1rem;
text-align: left;
width: 100%;
}
.payload-section-inner .section-shell-faq__question-button:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: -2px;
}
.payload-section-inner .section-shell-faq__question-text {
margin-right: 0.8rem;
}
.payload-section-inner .section-shell-faq__icon {
color: var(--heading-subtitle-color);
font-size: 1.25rem;
line-height: 1;
min-width: 1.2rem;
transition: transform 180ms ease;
}
.payload-section-inner .section-shell-faq__item[data-open='true'] .section-shell-faq__icon {
transform: rotate(180deg);
}
.payload-section-inner .section-shell-faq__answer-panel {
border-top: 1px solid var(--faq-item-border-color);
}
.payload-section-inner .section-shell-faq__answer-content {
color: var(--faq-answer-color);
font-family: var(--font-sans);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
padding: 0.95rem 1rem 1.05rem;
}
.payload-section-inner .section-shell-faq__answer-content p {
margin: 0 0 0.8rem;
}
.payload-section-inner .section-shell-faq__answer-content p:last-child {
margin-bottom: 0;
}
.payload-section-inner .section-shell-faq__answer-content ul {
margin: 0.45rem 0 0.85rem 1.2rem;
padding: 0;
}
.payload-section-inner .section-shell-faq__answer-content li {
margin: 0.22rem 0;
}
.payload-section-inner .section-shell-contact-info {
margin: 0;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--contact-info-font-size);
line-height: var(--leading-normal);
}
.payload-section-inner .section-shell-contact-info__header {
margin: 0 0 0.85rem;
}
.payload-section-inner .section-shell-contact-info__heading {
margin: 0;
color: var(--heading-subtitle-color);
font-family: var(--heading-subtitle-font-family);
font-size: var(--heading-subtitle-font-size);
font-weight: var(--heading-subtitle-font-weight);
font-style: var(--heading-subtitle-font-style);
font-variant-caps: var(--heading-subtitle-font-variant-caps);
line-height: var(--heading-subtitle-line-height);
letter-spacing: var(--heading-subtitle-letter-spacing);
text-transform: var(--heading-subtitle-text-transform);
}
.payload-section-inner .section-shell-contact-info__heading-divider {
width: var(--heading-divider-width);
height: var(--heading-divider-height);
margin: 0.75rem 0 0.85rem;
background: var(--heading-divider-color);
}
.payload-section-inner .section-shell-contact-info__grid {
display: grid;
grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.05fr);
gap: 1.5rem;
align-items: start;
}
.payload-section-inner .section-shell-contact-info__grid.section-shell-contact-info__grid--single {
grid-template-columns: minmax(0, 1fr);
}
.payload-section-inner .section-shell-contact-info__left {
display: grid;
gap: 1rem;
}
.payload-section-inner .section-shell-contact-info__item {
display: grid;
grid-template-columns: var(--contact-info-icon-size) minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
}
.payload-section-inner .section-shell-contact-info__icon {
color: var(--contact-info-icon-color);
display: grid;
width: var(--contact-info-icon-size);
height: var(--contact-info-icon-size);
place-items: center;
transition: color 180ms ease, transform 180ms ease;
}
.payload-section-inner .section-shell-contact-info__icon i {
color: inherit;
font-size: calc(var(--contact-info-icon-size) * 0.92);
line-height: 1;
}
.payload-section-inner .section-shell-contact-info__icon-glyph {
display: block;
}
.payload-section-inner .section-shell-contact-info__item-content strong {
display: block;
margin-bottom: 0.2rem;
}
.payload-section-inner .section-shell-contact-info__item-content p {
margin: 0.1rem 0;
color: inherit;
}
.payload-section-inner .section-shell-contact-info__item-content a {
color: inherit;
}
.payload-section-inner .section-shell-contact-info__item:hover .section-shell-contact-info__icon,
.payload-section-inner .section-shell-contact-info__item:focus-within .section-shell-contact-info__icon {
color: var(--color-focus);
transform: translateY(-1px);
}
.payload-section-inner .section-shell-contact-info__item:hover .section-shell-contact-info__item-content a,
.payload-section-inner .section-shell-contact-info__item:focus-within .section-shell-contact-info__item-content a {
color: var(--color-focus);
}
.payload-section-inner .section-shell-contact-info__socials {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 0.6rem;
}
.payload-section-inner .section-shell-contact-info__social-link {
--payload-social-icon-size: var(--contact-social-size);
--payload-social-border-width: var(--contact-social-border-width);
--payload-social-radius: var(--contact-social-radius);
--payload-social-icon-glyph-size: var(--contact-social-icon-size);
}
.payload-section-inner .section-shell-contact-info__social-link .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.payload-section-inner .section-shell-inline-map {
border: 1px solid var(--color-border);
border-radius: 0.625rem;
width: min(100%, var(--contact-inline-map-width, 100%));
overflow: hidden;
}
.payload-section-inner .section-shell-inline-map__tabs {
background: var(--theme-bg);
border-bottom: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.4rem;
}
.payload-section-inner .section-shell-inline-map__tab {
background: var(--theme-bg);
border: 1px solid var(--color-border);
border-radius: 999px;
color: var(--color-text);
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.75rem;
line-height: 1.1;
margin: 0;
padding: 0.28rem 0.62rem;
text-transform: uppercase;
}
.payload-section-inner .section-shell-inline-map__tab.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--theme-contrast);
}
.payload-section-inner .section-shell-inline-map__frame-wrap {
min-height: var(--contact-inline-map-height, 240px);
}
.payload-section-inner .section-shell-inline-map__frame {
border: 0;
display: block;
width: 100%;
height: var(--contact-inline-map-height, 240px);
}
.payload-section-inner .section-shell-contact-form {
margin: 0;
color: var(--contact-form-text-color);
}
.payload-section-inner .section-shell-contact-form__card {
margin: 0;
}
.payload-section-inner .section-shell-contact-form__heading {
margin: 0 0 0.55rem;
}
.payload-section-inner .section-shell-contact-form__intro {
margin: 0 0 1rem;
}
.payload-section-inner .section-shell-contact-form__form {
display: grid;
gap: 0.8rem;
}
.payload-section-inner .section-shell-contact-form__field,
.payload-section-inner .section-shell-contact-form__captcha-wrap {
display: grid;
gap: 0.36rem;
}
.payload-section-inner .section-shell-contact-form__honeypot {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.payload-section-inner .section-shell-contact-form__input,
.payload-section-inner .section-shell-contact-form__textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
background: var(--contact-form-input-bg);
color: var(--contact-form-text-color);
border: var(--contact-form-input-border-width) solid var(--contact-form-input-border-color);
border-radius: var(--contact-form-input-border-radius);
padding: 0.72rem 0.86rem;
font-family: var(--font-sans);
font-size: var(--contact-form-font-size);
font-weight: var(--weight-regular);
}
.payload-section-inner .section-shell-contact-form__input::placeholder,
.payload-section-inner .section-shell-contact-form__textarea::placeholder {
color: var(--contact-form-placeholder-color);
}
.payload-section-inner .section-shell-contact-form__textarea {
min-height: 140px;
resize: vertical;
}
.payload-section-inner .section-shell-contact-form__input.is-invalid,
.payload-section-inner .section-shell-contact-form__textarea.is-invalid {
border-color: var(--color-error, #b42318);
}
.payload-section-inner .section-shell-contact-form__input:focus,
.payload-section-inner .section-shell-contact-form__input:focus-visible,
.payload-section-inner .section-shell-contact-form__textarea:focus,
.payload-section-inner .section-shell-contact-form__textarea:focus-visible {
border-color: var(--color-focus);
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.payload-section-inner .section-shell-contact-form__submit {
justify-self: start;
appearance: none;
background: var(--contact-form-button-bg);
border: var(--contact-form-button-border-width) solid var(--contact-form-button-border-color);
border-radius: var(--contact-form-input-border-radius);
color: var(--contact-form-button-text-color);
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--contact-form-font-size);
font-weight: var(--weight-medium);
letter-spacing: 0.04em;
line-height: 1.2;
padding: 0.6rem 1rem;
text-transform: uppercase;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.payload-section-inner .section-shell-contact-form__submit:hover,
.payload-section-inner .section-shell-contact-form__submit:focus-visible {
background: var(--contact-form-button-hover-bg);
border-color: var(--contact-form-button-hover-bg);
color: var(--contact-form-button-hover-text-color);
}
.payload-section-inner .section-shell-contact-form__submit[disabled] {
opacity: 0.7;
cursor: wait;
}
.payload-section-inner .section-shell-contact-form__captcha {
justify-self: start;
}
.payload-section-inner .section-shell-contact-form__field-error {
margin: 0;
min-height: 1rem;
color: var(--color-error, #b42318);
font-family: var(--font-sans);
font-size: calc(var(--contact-form-font-size) * 0.88);
line-height: 1.35;
}
.payload-section-inner .section-shell-contact-form__field-error:empty {
min-height: 0;
}
.payload-section-inner .section-shell-contact-form__status {
min-height: 1.2rem;
margin: 0;
}
.payload-section-inner .section-shell-contact-form__status.is-error {
color: var(--color-error, #b42318);
}
.payload-section-inner .section-shell-contact-form__status.is-success {
color: var(--color-accent);
}
.payload-section-inner .section-shell-corner-slot {
margin: 0;
max-width: 100%;
}
.payload-section-inner .section-shell-corner-slot__frame {
position: relative;
}
.payload-section-inner .section-shell-corner-slot--sm .section-shell-corner-slot__frame {
min-height: 220px;
}
.payload-section-inner .section-shell-corner-slot--md .section-shell-corner-slot__frame {
min-height: 320px;
}
.payload-section-inner .section-shell-corner-slot--lg .section-shell-corner-slot__frame {
min-height: 460px;
}
.payload-section-inner .section-shell-corner-slot--full .section-shell-corner-slot__frame {
min-height: min(720px, 100vh);
}
.payload-section-inner .section-shell-corner-slot__slot {
position: absolute;
max-width: min(100%, 92vw);
}
.payload-section-inner .section-shell-corner-slot--bottomLeft .section-shell-corner-slot__slot {
left: var(--corner-slot-offset-x, 0px);
bottom: var(--corner-slot-offset-y, 0px);
}
.payload-section-inner .section-shell-corner-slot--bottomRight .section-shell-corner-slot__slot {
right: var(--corner-slot-offset-x, 0px);
bottom: var(--corner-slot-offset-y, 0px);
}
.payload-section-inner .section-shell-corner-slot--topLeft .section-shell-corner-slot__slot {
left: var(--corner-slot-offset-x, 0px);
top: var(--corner-slot-offset-y, 0px);
}
.payload-section-inner .section-shell-corner-slot--topRight .section-shell-corner-slot__slot {
right: var(--corner-slot-offset-x, 0px);
top: var(--corner-slot-offset-y, 0px);
}
.payload-section-shell--closing .payload-section-inner .section-shell-corner-slot__slot {
left: clamp(20px, 5vw, 84px);
right: auto;
top: 50%;
bottom: auto;
transform: translateY(-50%);
max-width: min(calc(100% - clamp(32px, 7vw, 120px)), 900px);
}
.payload-section-inner .section-shell-closing-ring {
display: inline-block;
width: clamp(560px, 62vw, var(--closing-ring-size, 860px));
aspect-ratio: 1;
}
.payload-section-inner .section-shell-closing-ring__svg {
display: block;
width: 100%;
height: 100%;
}
.payload-section-inner .section-shell-closing-ring__svg--mobile {
display: none;
}
.payload-section-inner .section-shell-closing-ring__spin {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: payload-closing-ring-spin var(--closing-ring-speed, 18s) linear infinite;
animation-direction: var(--closing-ring-direction, normal);
}
.payload-section-inner .section-shell-closing-ring__text {
fill: var(--closing-ring-color, var(--color-text));
font-family: var(--rt-ring-font-family, var(--font-sans));
font-size: var(--rt-ring-font-size-current, var(--rt-ring-font-size, 0.273rem));
font-weight: var(--rt-ring-font-weight, var(--weight-regular));
font-style: var(--rt-ring-font-style, normal);
font-variant-caps: var(--rt-ring-font-variant-caps, small-caps);
line-height: var(--rt-ring-line-height, 1.05);
letter-spacing: var(--rt-ring-letter-spacing-current, var(--rt-ring-letter-spacing, 1px));
text-transform: var(--rt-ring-text-transform, none);
text-rendering: geometricPrecision;
font-kerning: normal;
}
.payload-section-inner .section-shell-closing-ring__text textPath {
text-rendering: geometricPrecision;
font-kerning: normal;
}
.payload-section-inner .section-shell-closing-ring__logo {
pointer-events: none;
}
@keyframes payload-closing-ring-spin {
from {
transform: rotate(var(--closing-ring-start-angle, 0deg));
}
to {
transform: rotate(calc(var(--closing-ring-start-angle, 0deg) + 360deg));
}
}
.payload-section-shell--services .modular-rich-content {
margin-top: 0;
}
.payload-section-shell--services .modular-heading__header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
}
.payload-section-shell--services .modular-heading__title {
order: 1;
margin: 0;
padding-bottom: 0;
}
.payload-section-shell--services .modular-heading__title::after {
content: '';
display: block;
width: var(--heading-divider-width);
height: var(--heading-divider-height);
margin-top: 15px;
margin-bottom: 15px;
background: var(--heading-divider-color);
}
.payload-section-shell--services .modular-heading__subtitle {
order: 2;
margin: 0;
font-size: var(--text-md);
}
.payload-section-shell--services .modular-heading__divider {
order: 3;
width: var(--heading-divider-width);
height: var(--heading-divider-height);
margin-top: 15px;
margin-bottom: 100px;
margin-left: 0;
margin-right: auto;
}
.payload-section-inner .services-layout {
width: 100%;
}
.payload-section-inner .services-cards {
position: relative;
width: min(620px, 100%);
margin-left: 0;
margin-right: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.payload-section-inner .services-cards::before {
content: none;
}
.payload-section-inner .services-card-divider {
width: 50%;
height: 1px;
margin: 50px auto;
background: var(--heading-divider-color);
}
.payload-section-inner .services-card {
position: relative;
overflow: hidden;
border: 1px solid var(--services-card-border-color);
border-radius: 6px;
background: #09101a;
box-shadow: var(--services-card-shadow);
cursor: pointer;
outline: none;
transform: translateY(0);
transition:
border-color 220ms ease,
box-shadow 220ms ease,
transform 220ms ease;
}
.payload-section-inner .services-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--services-card-overlay-bg) 0%, color-mix(in srgb, var(--services-card-overlay-bg) 80%, transparent) 100%);
pointer-events: none;
transition: background 220ms ease;
}
.payload-section-inner .services-card img {
display: block;
width: 100%;
height: clamp(165px, 21vw, 232px);
object-fit: cover;
transform: scale(1);
transition: transform 360ms ease;
}
.payload-section-inner .services-card h3 {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--services-card-title-color);
font-family: var(--font-heading);
font-size: clamp(3rem, 5vw, 4.6rem);
font-weight: var(--weight-regular);
line-height: 1;
white-space: nowrap;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
z-index: 1;
transition: color 220ms ease;
}
.payload-section-inner .services-card--weight-loss h3 {
font-size: clamp(2.05rem, 4vw, 3.25rem);
}
.payload-section-inner .services-card:hover,
.payload-section-inner .services-card:focus-visible {
border-color: var(--services-card-hover-border-color);
box-shadow: var(--services-card-hover-shadow);
transform: translateY(-2px);
}
.payload-section-inner .services-card:hover::before,
.payload-section-inner .services-card:focus-visible::before {
background: linear-gradient(135deg, var(--services-card-overlay-hover-bg) 0%, color-mix(in srgb, var(--services-card-overlay-hover-bg) 76%, transparent) 100%);
}
.payload-section-inner .services-card:hover img,
.payload-section-inner .services-card:focus-visible img {
transform: scale(1.035);
}
.payload-section-inner .services-card:hover h3,
.payload-section-inner .services-card:focus-visible h3 {
color: var(--services-card-title-hover-color);
}
.payload-section-inner .services-card:focus-visible {
outline: var(--toggle-focus-ring-width) solid var(--toggle-focus-ring-color);
outline-offset: 2px;
}
.payload-section-shell--gallery .modular-portfolio {
margin-top: 0;
}
.payload-section-inner .section-shell-portfolio-block {
max-width: 100%;
overflow-x: hidden;
}
.payload-section-inner .section-shell-portfolio-block > h3 {
margin: 0;
color: var(--portfolio-heading-color);
font-family: var(--portfolio-heading-font-family);
font-size: var(--portfolio-heading-font-size);
font-weight: var(--portfolio-heading-font-weight);
font-style: var(--portfolio-heading-font-style);
text-transform: var(--portfolio-heading-text-transform);
}
.payload-section-inner .section-shell-portfolio-block .section-shell-portfolio-block__divider {
width: var(--portfolio-divider-width);
height: var(--portfolio-divider-height);
margin: 0.75rem 0 0.85rem;
background: var(--portfolio-divider-color);
}
.payload-section-inner .section-shell-portfolio-block .section-shell-portfolio-block__intro {
margin: 0 0 1.5rem;
color: var(--heading-subtitle-color);
font-family: var(--heading-subtitle-font-family);
font-size: var(--heading-subtitle-font-size);
font-weight: var(--heading-subtitle-font-weight);
font-style: var(--heading-subtitle-font-style);
font-variant-caps: var(--heading-subtitle-font-variant-caps);
line-height: var(--heading-subtitle-line-height);
letter-spacing: var(--heading-subtitle-letter-spacing);
text-transform: var(--heading-subtitle-text-transform);
}
.payload-section-inner .portfolio-con {
margin-top: 0;
max-width: 100%;
}
.payload-section-inner .grid-gallery {
height: auto;
max-width: 100%;
}
.payload-section-inner .section-shell-portfolio-block .portfolio-con {
margin-left: auto;
margin-right: auto;
max-width: min(100%, var(--portfolio-grid-max-width, 100%));
width: min(100%, var(--portfolio-grid-max-width, 100%));
}
.payload-section-inner .portfolio-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--portfolio-filter-gap);
margin: 0 0 var(--portfolio-filter-margin-bottom);
max-width: 100%;
}
.payload-section-inner .portfolio-filter-button {
background: var(--portfolio-filter-bg);
border: var(--portfolio-filter-border-width) solid var(--portfolio-filter-border-color);
border-radius: var(--portfolio-filter-border-radius);
color: var(--portfolio-filter-text-color);
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
font-family: var(--portfolio-filter-font-family);
font-size: var(--portfolio-filter-font-size);
font-weight: var(--portfolio-filter-font-weight);
font-style: var(--portfolio-filter-font-style);
letter-spacing: var(--portfolio-filter-letter-spacing);
line-height: 1;
padding: var(--portfolio-filter-padding-y) var(--portfolio-filter-padding-x);
text-transform: var(--portfolio-filter-text-transform);
transition:
border-color var(--portfolio-filter-transition-duration) ease,
color var(--portfolio-filter-transition-duration) ease;
}
.payload-section-inner .portfolio-filter-button::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--portfolio-filter-hover-bg);
transform: translateY(calc(100% + 2px));
transition: transform var(--portfolio-filter-transition-duration) ease;
will-change: transform;
}
.payload-section-inner .portfolio-filter-button:hover,
.payload-section-inner .portfolio-filter-button:focus-visible {
border-color: var(--portfolio-filter-hover-border-color);
color: var(--portfolio-filter-hover-text-color);
}
.payload-section-inner .portfolio-filter-button:hover::before,
.payload-section-inner .portfolio-filter-button:focus-visible::before {
transform: translateY(0);
}
.payload-section-inner .portfolio-filter-button.is-active {
border-color: var(--portfolio-filter-active-border-color);
color: var(--portfolio-filter-active-text-color);
}
.payload-section-inner .portfolio-filter-button.is-active::before {
background: var(--portfolio-filter-active-bg);
transform: translateY(0);
}
.payload-section-inner .masonry-grid {
display: grid;
grid-template-columns: repeat(var(--portfolio-column-count, 2), minmax(0, 1fr));
column-gap: var(--portfolio-grid-column-gap);
row-gap: var(--portfolio-grid-row-gap);
width: 100%;
}
.payload-section-inner .portfolio-grid-item {
margin: 0;
max-width: var(--portfolio-card-max-width);
width: 100%;
}
.payload-section-inner .portfolio-grid-item[hidden] {
display: none !important;
}
.payload-section-inner .portfolio-item-trigger {
background: transparent;
border: 0;
cursor: pointer;
display: block;
padding: 0;
text-align: left;
width: 100%;
}
.payload-section-inner .portfolio-item-trigger figure {
display: block;
margin: 0;
width: 100%;
position: relative;
overflow: hidden;
aspect-ratio: var(--portfolio-card-media-aspect);
border: var(--portfolio-card-border-width) solid var(--portfolio-card-border-color);
border-radius: var(--portfolio-card-border-radius);
background: var(--portfolio-card-bg);
box-shadow: var(--portfolio-card-shadow);
transition:
border-color var(--portfolio-card-transition-duration) ease,
box-shadow var(--portfolio-card-transition-duration) ease;
}
.payload-section-inner .portfolio-item-trigger figure > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.payload-section-inner .portfolio-item-trigger figcaption {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: var(--portfolio-card-overlay-bg);
opacity: var(--portfolio-card-overlay-opacity);
transition: opacity var(--portfolio-card-overlay-transition-duration) ease;
}
.payload-section-inner .portfolio-grid-item:hover figcaption,
.payload-section-inner .portfolio-item-trigger:focus-visible figcaption {
opacity: var(--portfolio-card-overlay-hover-opacity);
}
.payload-section-inner .portfolio-grid-item:hover .portfolio-item-trigger figure,
.payload-section-inner .portfolio-item-trigger:focus-visible figure,
.payload-section-inner .portfolio-item-trigger:focus-within figure {
border-color: var(--portfolio-card-hover-border-color);
box-shadow: var(--portfolio-card-hover-shadow);
}
.payload-section-inner .portfolio-item-trigger:focus-visible {
outline: var(--portfolio-focus-ring-width) solid var(--portfolio-focus-ring-color);
outline-offset: var(--portfolio-focus-ring-offset);
}
.payload-section-inner .figcaption-details {
position: absolute;
left: 0;
width: 100%;
padding-inline: var(--portfolio-card-overlay-content-padding-inline);
text-align: center;
}
.payload-section-inner .figcaption-details--middle {
top: 50%;
transform: translateY(-50%);
}
.payload-section-inner .figcaption-details--top {
top: var(--portfolio-card-overlay-content-top-offset);
transform: none;
}
.payload-section-inner .portfolio-card-plus {
width: var(--portfolio-card-plus-size) !important;
height: var(--portfolio-card-plus-size) !important;
display: inline !important;
margin: 0 0 var(--portfolio-card-plus-margin-bottom);
object-fit: contain;
}
.payload-section-inner .grid-gallery .figcaption-details h3 {
margin: 0;
padding: 0 0 var(--portfolio-card-title-padding-bottom);
color: var(--portfolio-card-title-color);
font-family: var(--portfolio-card-title-font-family);
font-size: var(--portfolio-card-title-font-size);
font-weight: var(--portfolio-card-title-font-weight);
font-style: var(--portfolio-card-title-font-style);
text-transform: var(--portfolio-card-title-text-transform);
}
.payload-section-inner .grid-gallery .figcaption-details span {
border-bottom: var(--portfolio-card-category-divider-width) solid var(--portfolio-card-category-divider-color);
color: var(--portfolio-card-category-color);
display: inline-block;
font-family: var(--portfolio-card-category-font-family);
font-size: var(--portfolio-card-category-font-size);
font-weight: var(--portfolio-card-category-font-weight);
font-style: var(--portfolio-card-category-font-style);
margin: 0 0 var(--portfolio-card-category-margin-bottom);
padding: 0 0 var(--portfolio-card-category-padding-bottom);
text-transform: var(--portfolio-card-category-text-transform);
}
.portfolio-lightbox {
align-items: center;
background: var(--portfolio-modal-overlay-bg);
display: flex;
inset: 0;
justify-content: center;
opacity: 0;
padding: var(--portfolio-modal-padding);
position: fixed;
visibility: hidden;
z-index: var(--portfolio-modal-z-index);
}
.portfolio-lightbox[hidden] {
display: none;
}
.portfolio-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.portfolio-lightbox-inner {
background: var(--portfolio-modal-inner-bg);
border: var(--portfolio-modal-inner-border-width) solid var(--portfolio-modal-inner-border-color);
border-radius: var(--portfolio-modal-inner-radius);
box-shadow: var(--portfolio-modal-inner-shadow);
min-height: var(--portfolio-modal-inner-min-height);
max-height: min(var(--portfolio-modal-inner-max-height), 100%);
max-width: var(--portfolio-modal-inner-max-width);
overflow: hidden;
position: relative;
width: 100%;
}
.portfolio-lightbox-figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
max-height: 100%;
min-height: 0;
overflow: hidden;
}
.portfolio-lightbox-caption-sticky {
position: sticky;
top: var(--portfolio-modal-sticky-top);
z-index: var(--portfolio-modal-sticky-z-index);
background: var(--portfolio-modal-sticky-bg);
padding-top: var(--portfolio-modal-sticky-padding-top);
padding-bottom: var(--portfolio-modal-sticky-padding-bottom);
}
.portfolio-lightbox-caption-sticky h3 {
margin: 0 0 10px;
color: var(--portfolio-modal-title-color);
font-family: var(--portfolio-modal-title-font-family);
font-size: var(--portfolio-modal-title-font-size);
font-weight: var(--portfolio-modal-title-font-weight);
font-style: var(--portfolio-modal-title-font-style);
line-height: var(--portfolio-modal-title-line-height);
letter-spacing: var(--portfolio-modal-title-letter-spacing);
text-transform: var(--portfolio-modal-title-text-transform);
}
.portfolio-lightbox-caption-sticky span {
display: block;
margin: 0 0 14px;
border-bottom: var(--portfolio-modal-category-divider-width) solid var(--portfolio-modal-category-divider-color);
color: var(--portfolio-modal-category-color);
font-family: var(--portfolio-modal-category-font-family);
font-size: var(--portfolio-modal-category-font-size);
font-weight: var(--portfolio-modal-category-font-weight);
font-style: var(--portfolio-modal-category-font-style);
font-variant-caps: var(--portfolio-modal-category-font-variant-caps);
line-height: var(--portfolio-modal-category-line-height);
letter-spacing: var(--portfolio-modal-category-letter-spacing);
padding: 0 0 var(--portfolio-modal-category-divider-padding-bottom);
text-transform: var(--portfolio-modal-category-text-transform);
}
.portfolio-lightbox-caption-sticky span[hidden] {
display: none;
}
.portfolio-lightbox-caption-body p {
margin: 0 0 16px;
color: var(--portfolio-modal-body-color);
font-family: var(--portfolio-modal-body-font-family);
font-size: var(--portfolio-modal-body-font-size);
font-weight: var(--portfolio-modal-body-font-weight);
font-style: var(--portfolio-modal-body-font-style);
line-height: var(--portfolio-modal-body-line-height);
}
.portfolio-lightbox-media,
.portfolio-lightbox-figure > .before-after-compare,
.portfolio-lightbox-figure > img,
.portfolio-lightbox-figure > iframe,
.portfolio-lightbox-figure > video {
max-height: var(--portfolio-modal-media-max-height, 60dvh);
width: 100%;
}
.portfolio-lightbox-media img,
.portfolio-lightbox-figure img,
.portfolio-lightbox-figure iframe,
.portfolio-lightbox-figure video {
border-radius: var(--portfolio-modal-media-radius);
}
.portfolio-lightbox-figure iframe {
min-height: 0;
height: min(var(--portfolio-modal-iframe-min-height), var(--portfolio-modal-media-max-height, 60dvh));
width: 100%;
}
.portfolio-lightbox__media-missing {
margin: 0;
color: var(--portfolio-modal-body-color);
font-family: var(--portfolio-modal-body-font-family);
font-size: var(--portfolio-modal-body-font-size);
font-weight: var(--portfolio-modal-body-font-weight);
font-style: var(--portfolio-modal-body-font-style);
line-height: var(--portfolio-modal-body-line-height);
}
.portfolio-modal-gallery {
position: relative;
}
.portfolio-modal-gallery > img {
display: block;
width: 100%;
max-height: var(--portfolio-modal-media-max-height, 60dvh);
object-fit: contain;
}
.portfolio-modal-gallery-controls {
position: absolute;
inset: auto 12px 12px auto;
display: flex;
gap: 8px;
}
.portfolio-modal-gallery-control {
width: 34px;
height: 34px;
border: 1px solid var(--menu-toggle-border, var(--portfolio-modal-control-border-color));
border-radius: var(--toggle-radius);
background: var(--menu-toggle-bg, var(--portfolio-modal-control-bg));
color: var(--menu-toggle-bar, var(--portfolio-modal-control-color));
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.portfolio-lightbox-prev,
.portfolio-lightbox-next {
--modal-control-bg: var(--menu-toggle-bg, var(--portfolio-modal-control-bg));
--modal-control-border-color: var(--menu-toggle-border, var(--portfolio-modal-control-border-color));
--modal-control-border-width: 1px;
--modal-control-color: var(--menu-toggle-bar, var(--portfolio-modal-control-color));
--modal-control-hover-bg: var(--toggle-hover-bg, var(--portfolio-modal-control-hover-bg));
--modal-control-hover-border-color: var(--toggle-hover-border-color, var(--portfolio-modal-control-hover-border-color));
--modal-control-hover-color: var(--toggle-close-hover-color, var(--portfolio-modal-control-hover-color));
--modal-control-radius: var(--toggle-radius, var(--portfolio-modal-control-radius));
--modal-control-shadow: none;
align-items: center;
background: var(--modal-control-bg);
border: var(--modal-control-border-width) solid var(--modal-control-border-color);
border-radius: var(--modal-control-radius);
box-shadow: var(--modal-control-shadow);
color: var(--modal-control-color);
cursor: pointer;
display: inline-flex;
font-size: var(--portfolio-modal-control-font-size);
justify-content: center;
line-height: 1;
position: fixed;
pointer-events: auto;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
z-index: var(--portfolio-modal-control-z-index);
}
.portfolio-lightbox-prev,
.portfolio-lightbox-next {
top: 50%;
width: var(--portfolio-modal-nav-width);
height: var(--portfolio-modal-nav-height);
transform: translateY(-50%);
}
.portfolio-lightbox-prev {
left: var(--portfolio-modal-nav-offset);
}
.portfolio-lightbox-next {
right: var(--portfolio-modal-nav-offset);
}
.portfolio-lightbox-prev:hover,
.portfolio-lightbox-next:hover,
.portfolio-lightbox-prev:focus-visible,
.portfolio-lightbox-next:focus-visible {
background: var(--modal-control-hover-bg);
border-color: var(--modal-control-hover-border-color);
color: var(--modal-control-hover-color);
}
.portfolio-lightbox .portfolio-lightbox-prev i,
.portfolio-lightbox .portfolio-lightbox-next i,
.portfolio-lightbox .portfolio-lightbox-prev .fa,
.portfolio-lightbox .portfolio-lightbox-next .fa {
color: inherit !important;
pointer-events: none;
}
.portfolio-lightbox .payload-service-modal__close {
position: absolute;
top: 10px;
right: 10px;
z-index: calc(var(--portfolio-modal-sticky-z-index) + 1);
}
.before-after-compare {
--reveal: 50%;
--before-after-aspect: 1.6;
display: grid;
gap: 12px;
max-width: 100%;
width: 100%;
justify-items: center;
}
.before-after-compare__stage {
aspect-ratio: var(--before-after-aspect, 16 / 10);
position: relative;
width: min(100%, calc(var(--portfolio-before-after-max-height, 60dvh) * var(--before-after-aspect, 1.6)));
max-width: 100%;
max-height: var(--portfolio-before-after-max-height, 60dvh);
overflow: hidden;
user-select: none;
touch-action: none;
background: transparent;
cursor: ew-resize;
}
.before-after-compare__stage.is-dragging {
cursor: ew-resize;
}
.before-after-compare__stage--swap {
cursor: pointer;
touch-action: manipulation;
}
.before-after-compare__stage--swap .before-after-compare__divider {
display: none;
}
.before-after-compare__stage--swap:focus-visible {
outline: 2px solid var(--color-focus, #1772ae);
outline-offset: 2px;
}
.before-after-compare__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.before-after-compare__after {
position: absolute;
inset: 0;
height: 100%;
overflow: hidden;
pointer-events: none;
clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}
.before-after-compare__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--reveal);
width: 2px;
transform: translateX(-50%);
background: var(--portfolio-before-after-divider-color, rgba(255, 255, 255, 0.95));
box-shadow: 0 0 0 1px var(--portfolio-before-after-divider-shadow-color, rgba(0, 0, 0, 0.35));
pointer-events: none;
}
.before-after-compare__handle {
position: absolute;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
border: 2px solid rgba(255, 255, 255, 0.98);
border-radius: 999px;
background: rgba(0, 0, 0, 0.5);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 3px 12px rgba(0, 0, 0, 0.3);
}
.before-after-compare__range {
width: 100%;
margin: 0;
}
.before-after-compare__range:focus-visible {
outline: 2px solid var(--color-focus, #1772ae);
outline-offset: 2px;
}
.before-after-compare:focus-within .before-after-compare__handle {
box-shadow:
0 0 0 2px var(--color-focus, #1772ae),
0 0 0 4px rgba(0, 0, 0, 0.25);
}
.payload-portfolio-modal-open {
overflow: hidden;
}
.payload-service-modal {
position: fixed;
inset: 0;
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms ease, visibility 220ms ease;
}
.payload-service-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.payload-service-modal__backdrop {
position: absolute;
inset: 0;
background: var(--services-modal-overlay-bg);
}
.payload-service-modal__dialog {
position: relative;
z-index: 1;
width: min(980px, 100%);
max-height: calc(100dvh - 48px);
overflow: auto;
background: var(--services-modal-panel-bg);
border: 1px solid var(--services-modal-panel-border);
border-radius: var(--toggle-radius);
box-shadow: none;
}
.payload-service-modal__media {
display: none;
margin: 0;
}
.payload-service-modal__dialog.has-media .payload-service-modal__media {
display: block;
}
.payload-service-modal__media img {
display: block;
width: 100%;
height: clamp(220px, 40vh, 360px);
object-fit: cover;
}
.payload-service-modal__content {
padding: clamp(30px, 4vw, 58px);
}
.payload-service-modal__content h3 {
margin: 0;
color: var(--services-modal-title-color);
font-family: var(--heading-title-font-family);
font-size: var(--heading-title-font-size);
font-weight: var(--weight-regular);
line-height: var(--heading-title-line-height);
letter-spacing: var(--heading-title-letter-spacing);
text-transform: var(--heading-title-text-transform);
}
.payload-service-modal__subtitle {
display: inline-block;
margin: 10px 0 18px;
padding: 0 0 10px;
border-bottom: 3px solid var(--heading-divider-color);
color: var(--heading-subtitle-color);
font-family: var(--heading-subtitle-font-family);
font-size: var(--heading-subtitle-font-size);
font-weight: var(--heading-subtitle-font-weight);
font-style: var(--heading-subtitle-font-style);
font-variant-caps: var(--heading-subtitle-font-variant-caps);
line-height: var(--heading-subtitle-line-height);
letter-spacing: var(--heading-subtitle-letter-spacing);
text-transform: none;
}
.payload-service-modal__subtitle[hidden] {
display: none;
}
.payload-service-modal__body p {
margin: 0 0 16px;
color: var(--services-modal-text-color);
font-family: var(--portfolio-modal-body-font-family, var(--font-sans));
font-size: var(--text-md);
font-weight: var(--portfolio-modal-body-font-weight, var(--weight-regular));
line-height: var(--portfolio-modal-body-line-height, var(--leading-relaxed));
}
.payload-service-modal__body p:last-child {
margin-bottom: 0;
}
.payload-service-modal__close {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
width: 40px;
height: 40px;
border: var(--toggle-border-width) solid var(--menu-toggle-border, var(--toggle-border-color));
border-radius: var(--toggle-radius);
background: var(--menu-toggle-bg, var(--toggle-bg));
color: var(--menu-toggle-bar, var(--toggle-close-color, var(--theme-text)));
cursor: pointer;
font-size: 2rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.payload-service-modal__close:hover,
.payload-service-modal__close:focus-visible {
background: var(--toggle-hover-bg);
border-color: var(--toggle-hover-border-color);
color: var(--toggle-close-hover-color, var(--menu-toggle-bar, var(--theme-contrast)));
}
.payload-service-modal-open {
overflow: hidden;
}
.payload-section-inner .modular-divider {
width: 100%;
}
.payload-section-inner .modular-divider__rule {
border-top-width: 1px;
border-top-color: var(--heading-divider-color);
border-top-style: solid;
background: var(--heading-divider-color);
}
.payload-section-inner .modular-divider__rule--left {
margin-left: 0;
margin-right: auto;
}
.payload-section-inner .modular-divider__rule--center {
margin-left: auto;
margin-right: auto;
}
.payload-section-inner .modular-divider__rule--right {
margin-left: auto;
margin-right: 0;
}
.payload-section-inner .modular-marquee {
position: relative;
margin: 18px auto 0;
width: 100%;
min-width: 0;
--marquee-height: 74px;
--marquee-gap: 18px;
--marquee-duration: 30s;
--marquee-padding-top: 0px;
--marquee-padding-bottom: 0px;
padding-top: var(--marquee-padding-top);
padding-bottom: var(--marquee-padding-bottom);
}
.payload-section-inner .modular-marquee__viewport {
position: relative;
overflow: hidden;
width: 100%;
height: var(--marquee-height);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.payload-section-inner .modular-marquee__track {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
flex: 0 0 auto;
width: max-content;
min-width: max-content;
will-change: transform;
animation: payload-marquee-scroll-ltr var(--marquee-duration) linear infinite;
}
.payload-section-inner .modular-marquee__viewport:hover .modular-marquee__track {
animation-play-state: paused;
}
.payload-section-inner .modular-marquee__item {
flex: 0 0 auto;
height: var(--marquee-height);
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-end: var(--marquee-gap);
}
.payload-section-inner .modular-marquee__item img {
display: block;
width: auto;
max-width: clamp(120px, 22vw, 240px);
height: 100%;
object-fit: contain;
}
@keyframes payload-marquee-scroll-ltr {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0%);
}
}
@media (max-width: 768px) {
.payload-section-inner {
height: auto;
overflow: visible;
padding: 56px 20px 48px;
}
.payload-section-inner .modular-heading__title {
font-size: clamp(2.45rem, 11vw, 3.35rem);
}
.payload-section-inner .modular-rich-content__content--narrow-left,
.payload-section-inner .modular-rich-content__content--narrow-right {
max-width: 100%;
}
.payload-section-inner .rtInlineImage,
.payload-section-inner .rtInlineImage--right,
.payload-section-inner .rtInlineImage--none {
float: none;
margin: 0.75rem 0;
max-width: 100%;
width: 100%;
}
.payload-section-inner .about-profile-layout {
display: block;
}
.payload-section-shell--about .about-profile-image {
display: none;
}
.payload-section-shell--about .rtSpinningLogoRing {
display: block;
float: none;
clear: both;
width: min(100%, var(--rt-ring-mobile-size, var(--rt-ring-size, 400px)));
max-width: 400px;
margin: 0.75rem auto 1rem;
--rt-ring-font-size-current: var(
--rt-inline-spinning-ring-font-size-mobile,
var(--rt-ring-mobile-font-size, var(--rt-ring-font-size, 0.273rem))
);
--rt-ring-letter-spacing-current: var(
--rt-inline-spinning-ring-letter-spacing-mobile,
var(--rt-ring-mobile-letter-spacing, var(--rt-ring-letter-spacing, 1px))
);
}
.payload-section-shell--about .rtSpinningLogoRing__svg--desktop {
display: none;
}
.payload-section-shell--about .rtSpinningLogoRing__svg--mobile {
display: block;
}
.payload-section-inner .about-profile-image {
margin: 0.75rem 0;
}
.payload-section-inner .modular-rich-content__content p.about-profile-intro,
.payload-section-inner .modular-rich-content__content p.about-profile-body {
margin-bottom: 1rem;
}
.payload-section-inner .services-cards {
width: 100%;
gap: 0;
}
.payload-section-inner .services-cards::before {
content: none;
}
.payload-section-shell--services .modular-heading__divider {
margin-bottom: 52px;
}
.payload-section-inner .services-card-divider {
width: 60%;
margin: 28px auto;
}
.payload-section-inner .services-card img {
height: clamp(145px, 45vw, 205px);
}
.payload-section-inner .services-card h3 {
font-size: clamp(2.2rem, 10vw, 3.4rem);
}
.payload-service-modal {
padding: 14px;
}
.payload-service-modal__dialog {
max-height: calc(100dvh - 28px);
}
.payload-service-modal__content {
padding: 20px;
}
.payload-section-inner .modular-marquee {
--marquee-height: 56px;
--marquee-gap: 14px;
}
}
.payload-shell[data-theme='light'] {
--theme-bg: #ffffff;
--theme-surface: #f4f6f8;
--theme-text: #1b1f24;
--theme-muted: #55606d;
--theme-border: #d4dbe3;
--theme-accent: #00548b;
--theme-focus: #1772ae;
--theme-contrast: #ffffff;
--theme-menu-bg: #eef2f6;
--theme-section-bg-standard: #ffffff;
--theme-section-bg-accent: #f4f6f8;
--theme-heading-text: #111111;
--theme-subheading-text: #1b1f24;
--theme-divider: #d4dbe3;
--menu-toggle-bg: color-mix(in srgb, #ffffff 60%, transparent);
--menu-toggle-border: color-mix(in srgb, var(--theme-border) 52%, transparent);
--toggle-shadow: 0 10px 24px rgba(31, 42, 55, 0.06);
--toggle-sun-color: #1b1f24;
--toggle-moon-color: #1b1f24;
--toggle-sun-hover-color: #ffffff;
--toggle-moon-hover-color: #ffffff;
--toggle-close-hover-color: #1b1f24;
--menu-link-color: var(--menu-link-light);
--menu-link-hover-color: var(--menu-link-hover-light);
--menu-link-active-color: var(--menu-link-active-light);
--menu-link-divider-color: var(--menu-link-divider-light);
--menu-link-divider-active-color: var(--menu-link-active-light);
--services-card-title-color: rgba(16, 19, 24, 0.88);
--services-card-title-hover-color: #101318;
--services-card-overlay-bg: color-mix(in srgb, #ffffff 20%, transparent);
--services-card-overlay-hover-bg: color-mix(in srgb, #ffffff 4%, transparent);
--services-card-border-color: color-mix(in srgb, var(--theme-accent) 62%, transparent);
--services-card-hover-border-color: var(--theme-accent);
--services-card-shadow: 0 0 0 rgba(0, 0, 0, 0);
--services-card-hover-shadow:
0 0 0 1px color-mix(in srgb, var(--theme-accent) 34%, transparent),
0 0 14px color-mix(in srgb, var(--theme-accent) 18%, transparent),
0 14px 26px rgba(15, 28, 44, 0.17);
--services-modal-overlay-bg: color-mix(in srgb, #000000 85%, transparent);
--services-modal-panel-bg: var(--theme-menu-bg);
--services-modal-panel-border: var(--theme-menu-bg);
--services-modal-title-color: #12161b;
--services-modal-text-color: #1b1f24;
--services-section-overlay-opacity: 0.04;
--theme-portfolio-filter: var(--theme-accent);
--theme-portfolio-filter-hover: var(--theme-focus);
--theme-portfolio-filter-contrast: var(--theme-contrast);
--portfolio-modal-inner-bg: var(--theme-menu-bg);
--portfolio-modal-inner-border-color: var(--theme-menu-bg);
--color-text: var(--theme-text);
--color-rich-text: var(--color-text);
--color-muted: var(--theme-muted);
--color-border: var(--theme-border);
--color-accent: var(--theme-accent);
--color-focus: var(--theme-focus);
--color-header-divider: var(--theme-divider);
--heading-title-color: var(--theme-heading-text, var(--theme-text));
--heading-subtitle-color: var(--theme-subheading-text, var(--theme-muted));
--heading-divider-color: var(--color-accent);
--rt-ring-color: #000000;
--contact-form-text-color: var(--theme-text);
--contact-form-input-border-color: color-mix(in srgb, var(--theme-border) 92%, transparent);
--contact-form-placeholder-color: color-mix(in srgb, var(--theme-muted) 96%, transparent);
--contact-form-button-border-color: color-mix(in srgb, var(--theme-border) 95%, transparent);
--contact-form-button-text-color: var(--theme-text);
color: var(--theme-text);
background: var(--theme-bg);
}
.payload-shell[data-theme='light'] .payload-sidebar {
background: var(--menu-bg-light);
border-right-color: var(--menu-border-light);
}
.payload-shell[data-theme='light'] .payload-logo-image--desktop.payload-logo-image--theme-default {
display: block;
}
.payload-shell[data-theme='light'] .payload-logo-image--desktop.payload-logo-image--theme-dark {
display: none;
}
.payload-shell[data-theme='light'] .payload-nav-link,
.payload-shell[data-theme='light'] .payload-nav-link:link,
.payload-shell[data-theme='light'] .payload-nav-link:visited {
color: var(--menu-link-light);
}
.payload-shell[data-theme='light'] .payload-service-modal__close {
color: var(--theme-text);
}
.payload-shell[data-theme='light'] .payload-service-modal__close:hover,
.payload-shell[data-theme='light'] .payload-service-modal__close:focus-visible {
color: #ffffff;
}
.payload-shell[data-theme='light'] .payload-nav-link::after {
background: var(--menu-link-divider-light);
}
.payload-shell[data-theme='light'] .payload-nav-link:hover,
.payload-shell[data-theme='light'] .payload-nav-link:active {
color: var(--menu-link-hover-light);
}
.payload-shell[data-theme='light'] .payload-nav-link:hover .payload-nav-link-label,
.payload-shell[data-theme='light'] .payload-nav-link:active .payload-nav-link-label {
color: var(--menu-link-hover-light);
}
.payload-shell[data-theme='light'] .payload-nav-link:hover::after,
.payload-shell[data-theme='light'] .payload-nav-link:active::after {
background: var(--menu-link-divider-light);
}
.payload-shell[data-theme='light'] .payload-nav-link.is-active,
.payload-shell[data-theme='light'] .payload-nav-link[aria-current='page'] {
color: var(--menu-link-active-light);
}
.payload-shell[data-theme='light'] .payload-nav-link.is-active::after,
.payload-shell[data-theme='light'] .payload-nav-link[aria-current='page']::after {
background: var(--menu-link-active-light);
}
.payload-shell[data-theme='light'] .payload-nav-link.is-active .payload-nav-link-label,
.payload-shell[data-theme='light'] .payload-nav-link[aria-current='page'] .payload-nav-link-label {
color: var(--menu-link-active-light);
}
.payload-shell[data-theme='light'] .payload-sidebar-bottom p {
color: rgba(27, 55, 84, 0.82);
}
.payload-shell[data-theme='light'] .payload-section-shell--panel,
.payload-shell[data-theme='light'] .payload-section-inner {
background: var(--theme-section-bg-standard);
color: var(--color-text);
}
.payload-shell[data-theme='light'] .payload-section-shell--has-background-image .payload-section-inner {
background: transparent;
}
.payload-shell[data-theme='light'] .payload-section-inner .modular-heading__title {
color: var(--heading-title-color);
}
.payload-shell[data-theme='light'] .payload-section-inner .modular-heading__subtitle,
.payload-shell[data-theme='light'] .payload-section-inner .modular-rich-content__content {
color: var(--color-rich-text);
}
.payload-shell[data-theme='light'] .payload-section-inner .modular-heading__subtitle {
color: var(--heading-subtitle-color);
}
.payload-shell[data-theme='light'] .payload-section-inner .modular-rich-content__content :where(p, li, blockquote) {
color: var(--color-rich-text);
}
.payload-shell[data-theme='light'] .payload-section-inner .modular-heading__divider,
.payload-shell[data-theme='light'] .payload-section-inner .modular-divider__rule {
background: var(--heading-divider-color);
border-top-color: var(--heading-divider-color);
}
.payload-shell[data-theme='light'] .payload-section-inner .section-shell-closing-ring__text {
fill: #000000;
}
.payload-shell[data-theme='light'] .payload-section-inner .rtSpinningLogoRing__text {
fill: #000000;
}
.payload-shell[data-theme='light'] .payload-social-link {
--payload-social-base: var(--payload-social-base-light);
}
.payload-shell[data-theme='light'] .payload-section-inner .section-shell-contact-form__input::placeholder,
.payload-shell[data-theme='light'] .payload-section-inner .section-shell-contact-form__textarea::placeholder {
opacity: 1;
}
@media (max-width: 960px) {
body.payload-mobile-menu-open {
overflow: hidden;
}
.payload-clone-shell,
.payload-clone-shell #page-wrapper {
height: auto;
min-height: var(--shell-viewport-height);
overflow: visible;
}
.payload-clone-shell #start {
display: none;
height: 0;
min-height: 0;
}
.payload-shell {
--payload-mobile-logo-top: max(24px, calc(env(safe-area-inset-top) + 8px));
--payload-mobile-logo-visual-height: clamp(108px, 29vw, 136px);
--payload-mobile-logo-nav-gap: clamp(14px, 3vw, 22px);
--payload-mobile-nav-top: calc(
var(--payload-mobile-logo-top) + var(--payload-mobile-logo-visual-height) + var(--payload-mobile-logo-nav-gap)
);
--payload-mobile-nav-bottom-reserve: max(148px, calc(env(safe-area-inset-bottom) + 128px));
--payload-mobile-menu-offset-x: 0px;
--payload-mobile-menu-offset-y: -100dvh;
--payload-mobile-menu-drag-offset: 0px;
--payload-mobile-menu-transition-duration: 280ms;
--payload-mobile-menu-transition-ease: cubic-bezier(0.22, 1, 0.36, 1);
display: block;
height: auto;
min-height: var(--shell-viewport-height);
overflow: visible;
position: relative;
}
.payload-shell.payload-shell--mobile-mode-left {
--payload-mobile-menu-offset-x: calc(-1 * min(320px, 86vw));
--payload-mobile-menu-offset-y: 0px;
}
.payload-sidebar {
position: fixed;
inset: 0;
width: 100%;
min-width: 0;
height: 100dvh;
border: 0;
padding: 0;
z-index: 1600;
background: transparent;
pointer-events: none;
transform: translate3d(
var(--payload-mobile-menu-offset-x),
calc(var(--payload-mobile-menu-offset-y) + var(--payload-mobile-menu-drag-offset)),
0
);
transition:
transform var(--payload-mobile-menu-transition-duration) var(--payload-mobile-menu-transition-ease),
background-color 220ms ease,
border-color 220ms ease;
will-change: transform;
}
.payload-mobile-menu-gesture-surface {
display: block;
position: absolute;
inset: 0;
z-index: 1600;
background: transparent;
pointer-events: none;
}
.payload-sidebar.is-mobile-menu-dragging {
transition:
background-color 220ms ease,
border-color 220ms ease;
}
.payload-sidebar.is-mobile-menu-gesture-closing {
pointer-events: none;
}
.payload-shell.payload-shell--mobile-mode-top .payload-sidebar.is-mobile-menu-gesture-active {
touch-action: none;
overscroll-behavior: none;
}
.payload-shell.payload-shell--mobile-mode-top.is-mobile-menu-open .payload-mobile-menu-gesture-surface {
pointer-events: auto;
touch-action: none;
overscroll-behavior: none;
}
.payload-shell.payload-shell--mobile-mode-top.is-mobile-menu-open .payload-sidebar {
touch-action: none;
overscroll-behavior: none;
}
.payload-shell[data-theme='light'] .payload-sidebar {
background: transparent;
border-right-color: transparent;
}
.payload-sidebar-head {
position: fixed;
top: max(14px, env(safe-area-inset-top));
left: 0;
right: 0;
width: 100%;
z-index: 1602;
pointer-events: none;
display: block;
transform: translate3d(
calc(-1 * var(--payload-mobile-menu-offset-x)),
calc(-1 * (var(--payload-mobile-menu-offset-y) + var(--payload-mobile-menu-drag-offset))),
0
);
transition: transform var(--payload-mobile-menu-transition-duration) var(--payload-mobile-menu-transition-ease);
will-change: transform;
}
.payload-sidebar.is-mobile-menu-dragging .payload-sidebar-head {
transition: none;
}
.payload-mobile-nav-toggle {
display: inline-flex;
position: absolute;
top: 0;
right: max(14px, env(safe-area-inset-right));
width: 44px;
height: 44px;
border-color: var(--menu-toggle-border);
background: var(--menu-toggle-bg);
color: var(--menu-toggle-bar);
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.payload-logo {
display: none;
margin: 0;
padding: 0;
text-align: center;
}
.payload-logo-image {
width: min(250px, 78vw);
margin: 0 auto;
}
.payload-nav {
display: none;
min-height: 0;
overflow: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 0 40px 10px;
padding-top: 0;
position: absolute;
top: var(--payload-mobile-nav-top);
bottom: var(--payload-mobile-nav-bottom-reserve);
left: 0;
right: 0;
z-index: 1601;
background: transparent;
border: 0;
box-shadow: none;
opacity: 0;
pointer-events: none;
transform: translateY(-12px);
transition: opacity 220ms ease, transform 220ms ease;
}
.payload-sidebar.is-mobile-nav-open .payload-nav {
display: block;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.payload-nav ul {
display: block;
gap: 10px;
}
.payload-nav li + li {
margin-top: 8px;
}
.payload-nav-link,
.payload-nav-link:link,
.payload-nav-link:visited {
margin: 0 auto;
display: block;
width: min(240px, 84vw);
padding: 8px 0 12px;
text-align: var(--menu-link-align-mobile, center);
font-size: 1.05rem;
color: var(--menu-link-color);
}
.payload-nav-link::after {
left: 0;
right: 0;
margin: 0 auto;
width: clamp(72px, 46%, 112px);
background: var(--menu-link-divider-color);
}
.payload-nav-link:hover::after,
.payload-nav-link:active::after {
width: clamp(72px, 46%, 112px);
}
.payload-nav-link:hover,
.payload-nav-link:active,
.payload-nav-link.is-active,
.payload-nav-link[aria-current='page'] {
color: var(--menu-link-active-color);
}
.payload-nav-link:hover .payload-nav-link-label,
.payload-nav-link:active .payload-nav-link-label,
.payload-nav-link.is-active .payload-nav-link-label,
.payload-nav-link[aria-current='page'] .payload-nav-link-label {
transform: none;
color: inherit;
}
.payload-nav-link.is-active::after,
.payload-nav-link[aria-current='page']::after {
background: var(--menu-link-divider-active-color);
width: 100%;
}
.payload-shell.is-mobile-menu-open .payload-sidebar {
--payload-mobile-menu-offset-x: 0px;
--payload-mobile-menu-offset-y: 0px;
pointer-events: auto;
background: var(--theme-menu-bg);
}
.payload-shell.payload-shell--mobile-mode-left .payload-sidebar {
inset: 0 auto 0 0;
width: min(320px, 86vw);
}
.payload-shell.payload-shell--mobile-mode-left.is-mobile-menu-open .payload-sidebar {
border-right: 1px solid var(--theme-border);
}
.payload-shell.payload-shell--mobile-mode-left .payload-sidebar-head {
left: 0;
right: auto;
width: min(320px, 86vw);
}
.payload-shell.payload-shell--mobile-mode-left .payload-mobile-nav-toggle {
left: max(14px, env(safe-area-inset-left));
right: auto;
}
.payload-shell.payload-shell--mobile-mode-left .payload-logo {
left: 50%;
transform: translateX(-50%);
width: min(220px, calc(86vw - 48px));
}
.payload-shell.payload-shell--mobile-mode-left .payload-nav {
left: 0;
right: auto;
width: min(320px, 86vw);
padding-left: 24px;
padding-right: 24px;
top: calc(var(--payload-mobile-nav-top) - 14px);
}
.payload-shell.payload-shell--mobile-mode-left .payload-sidebar-bottom {
left: 0;
right: auto;
width: min(320px, 86vw);
}
body.payload-service-modal-open .payload-sidebar,
body.payload-portfolio-modal-open .payload-sidebar {
z-index: 2100;
}
body.payload-service-modal-open .payload-sidebar-head,
body.payload-portfolio-modal-open .payload-sidebar-head {
z-index: 2102;
}
body.payload-service-modal-open .payload-mobile-nav-toggle,
body.payload-portfolio-modal-open .payload-mobile-nav-toggle {
z-index: 2103;
pointer-events: auto;
}
.payload-shell.is-mobile-menu-open .payload-logo {
display: block;
position: absolute;
top: var(--payload-mobile-logo-top);
left: 50%;
transform: translateX(-50%);
width: min(240px, calc(100vw - 72px));
z-index: 1601;
pointer-events: auto;
}
.payload-shell.is-mobile-menu-open .payload-logo-image--desktop.payload-logo-image--theme-default,
.payload-shell.is-mobile-menu-open .payload-logo-image--desktop.payload-logo-image--theme-dark {
display: none;
}
.payload-shell.is-mobile-menu-open .payload-logo-image--mobile.payload-logo-image--theme-default {
display: block;
}
.payload-shell.is-mobile-menu-open .payload-logo-image--mobile.payload-logo-image--theme-dark {
display: none;
}
html[data-scheme='dark'] .payload-shell.is-mobile-menu-open .payload-logo-image--mobile.payload-logo-image--theme-default {
display: none;
}
html[data-scheme='dark'] .payload-shell.is-mobile-menu-open .payload-logo-image--mobile.payload-logo-image--theme-dark {
display: block;
}
.payload-content-scroller {
height: auto;
overflow: visible;
}
.payload-service-modal__close {
display: none;
}
.payload-service-modal__close:hover,
.payload-service-modal__close:focus-visible,
.payload-service-modal__close:active {
background: var(--menu-toggle-bg, var(--toggle-bg));
border-color: var(--menu-toggle-border, var(--toggle-border-color));
color: var(--menu-toggle-bar, var(--toggle-close-color, var(--theme-text)));
}
.payload-content-wrapper {
display: block;
height: auto;
min-height: 0;
overflow-x: hidden;
overflow-y: visible;
scroll-snap-type: none;
}
.payload-section-shell,
.payload-section-shell--full-viewport {
width: 100%;
max-width: 100%;
min-height: auto;
height: auto;
scroll-snap-align: none;
}
.payload-section-shell--hide-mobile {
display: none !important;
}
.payload-sidebar-bottom {
display: none;
position: absolute;
left: 0;
right: 0;
bottom: max(26px, calc(env(safe-area-inset-bottom) + 12px));
z-index: 1601;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity 220ms ease, transform 220ms ease;
}
.payload-shell.is-mobile-menu-open .payload-sidebar-bottom {
display: flex;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.payload-sidebar-bottom p {
display: none;
}
.payload-mobile-last-section-copyright {
--payload-mobile-copyright-pad-y: clamp(14px, 4vw, 20px);
--payload-mobile-copyright-bottom-buffer: max(12px, env(safe-area-inset-bottom));
display: block;
margin: clamp(20px, 5vw, 30px) calc(-1 * var(--payload-panel-pad-x)) calc(-1 * var(--payload-panel-pad-bottom));
padding: var(--payload-mobile-copyright-pad-y) var(--payload-panel-pad-x)
calc(var(--payload-mobile-copyright-pad-y) + var(--payload-mobile-copyright-bottom-buffer));
background: var(--theme-menu-bg);
border-top: 1px solid var(--theme-border);
text-align: center;
}
.payload-mobile-last-section-copyright p {
margin: 0;
color: var(--theme-text);
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: var(--weight-regular);
line-height: 1.45;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.payload-shell.is-mobile-menu-open .payload-social-link {
--payload-social-base: var(--payload-social-base-dark);
}
.payload-shell.is-mobile-menu-open[data-theme='light'] .payload-social-link {
--payload-social-base: var(--payload-social-base-light);
}
.payload-shell.is-mobile-menu-open .payload-theme-toggle--mobile {
display: inline-flex;
--payload-mobile-toggle-base: var(--payload-social-base-dark);
--toggle-icon-size: 1.05rem;
--toggle-padding-x: calc((var(--payload-social-icon-size) - var(--toggle-icon-size) - (var(--payload-social-border-width) * 2)) / 2);
--toggle-padding-y: calc((var(--payload-social-icon-size) - var(--toggle-icon-size) - (var(--payload-social-border-width) * 2)) / 2);
--toggle-border-width: var(--payload-social-border-width);
--toggle-radius: var(--payload-social-radius);
--toggle-bg: transparent;
--toggle-border-color: var(--payload-mobile-toggle-base);
--toggle-sun-color: var(--payload-mobile-toggle-base);
--toggle-moon-color: var(--payload-mobile-toggle-base);
--toggle-sun-hover-color: var(--toggle-close-hover-color, var(--payload-mobile-toggle-base));
--toggle-moon-hover-color: var(--toggle-close-hover-color, var(--payload-mobile-toggle-base));
--toggle-hover-bg: var(--menu-toggle-bg);
--toggle-hover-border-color: var(--payload-mobile-toggle-base);
--toggle-shadow: none;
}
.payload-shell.is-mobile-menu-open[data-theme='light'] .payload-theme-toggle--mobile {
--payload-mobile-toggle-base: var(--payload-social-base-light);
}
.payload-shell[data-theme='light'] .payload-mobile-nav-toggle {
color: #1b1f24;
}
html[data-scheme='light'] .payload-mobile-nav-toggle {
color: #1b1f24;
}
.payload-mobile-nav-toggle:hover,
.payload-mobile-nav-toggle:focus-visible,
.payload-mobile-nav-toggle:active {
background: var(--menu-toggle-bg);
border-color: var(--menu-toggle-border);
}
.payload-mobile-nav-toggle:focus-visible {
outline: 2px solid color-mix(in srgb, currentColor 28%, transparent);
outline-offset: 2px;
}
.payload-shell[data-theme='light'] .payload-mobile-nav-toggle:hover,
.payload-shell[data-theme='light'] .payload-mobile-nav-toggle:focus-visible,
.payload-shell[data-theme='light'] .payload-mobile-nav-toggle:active,
html[data-scheme='light'] .payload-mobile-nav-toggle:hover,
html[data-scheme='light'] .payload-mobile-nav-toggle:focus-visible,
html[data-scheme='light'] .payload-mobile-nav-toggle:active {
color: #1b1f24;
}
.payload-shell[data-theme='dark'] .payload-mobile-nav-toggle,
html[data-scheme='dark'] .payload-mobile-nav-toggle {
color: #f5f5f5;
}
.payload-shell[data-theme='dark'] .payload-mobile-nav-toggle:hover,
.payload-shell[data-theme='dark'] .payload-mobile-nav-toggle:focus-visible,
.payload-shell[data-theme='dark'] .payload-mobile-nav-toggle:active,
html[data-scheme='dark'] .payload-mobile-nav-toggle:hover,
html[data-scheme='dark'] .payload-mobile-nav-toggle:focus-visible,
html[data-scheme='dark'] .payload-mobile-nav-toggle:active {
color: #f5f5f5;
}
.payload-floating-darkmode-toggle {
display: none;
}
.payload-stage {
min-height: var(--shell-viewport-height);
height: var(--shell-viewport-height);
}
.payload-stage-media {
height: var(--shell-viewport-height);
min-height: var(--shell-viewport-height);
}
.payload-copy {
left: 20px;
right: 20px;
bottom: 26px;
width: auto;
max-width: none;
}
.payload-section-inner .masonry-grid {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 24px;
}
.payload-section-inner .section-shell-contact-info__grid {
grid-template-columns: 1fr;
}
.payload-section-inner .section-shell-corner-slot__frame {
min-height: 0;
}
.payload-section-inner .section-shell-corner-slot__slot {
position: static;
max-width: 100%;
transform: none;
}
.payload-section-inner .section-shell-closing-ring {
width: var(--closing-ring-mobile-size, var(--closing-ring-size, 220px));
}
.payload-section-inner .section-shell-closing-ring__svg--desktop {
display: none;
}
.payload-section-inner .section-shell-closing-ring__svg--mobile {
display: block;
}
.payload-section-inner .portfolio-grid-item {
margin-left: auto;
margin-right: auto;
}
.portfolio-lightbox {
padding: 16px;
}
.portfolio-lightbox-inner {
border-width: 20px;
}
.portfolio-lightbox-prev,
.portfolio-lightbox-next {
width: 40px;
height: 48px;
}
.portfolio-lightbox-prev {
left: 4px;
}
.portfolio-lightbox-next {
right: 4px;
}
.before-after-compare__handle {
width: 30px;
height: 30px;
}
}