/* =================================================================
BREAKPOINTS REFERENCE
=================================================================
Mobile: 768px (max-width: 768px for mobile, min-width: 769px for desktop)
Tablet: 1024px (for intermediate layouts where needed)
Desktop: 1280px (for wide/container layouts where needed)
These values are hardcoded in @media queries throughout this file
and in footer.php / custom.js. Update all locations if changed.
================================================================= */
/**
* D20 Starter Theme
*
* Fonts | Tokens | Base | Components
*/
/* =================================================================
FONTS
Avenir LT Pro is served by Adobe Fonts (kit efw0jtk), enqueued in
inc/assets.php. Weights: 400 Roman, 500 Medium, 700 Heavy-ish, 800 Heavy.
================================================================= */
/* =================================================================
TOKENS — PLF Art Services Design Kit (Figma variables, verbatim)
================================================================= */
:root {
/* primary (PLF Green) */
--color-primary-50: #F1FAEE;
--color-primary-100: #CFEBC7;
--color-primary-200: #ADDC9E;
--color-primary-300: #8ACC75;
--color-primary-400: #65BC46;
--color-primary-500: #4E9932;
--color-primary-600: #38771F;
--color-primary-700: #23570B;
--color-primary-800: #113900;
--color-primary-900: #051C00;
/* secondary (PLF Purple) */
--color-secondary-50: #FBF4FE;
--color-secondary-100: #DCC6E5;
--color-secondary-200: #BE99CB;
--color-secondary-300: #A06DB2;
--color-secondary-400: #824098;
--color-secondary-500: #6D3480;
--color-secondary-600: #592969;
--color-secondary-700: #461E53;
--color-secondary-800: #33133E;
--color-secondary-900: #22092A;
/* accent */
--color-accent-50: #FFEAE6;
--color-accent-100: #FFC1B3;
--color-accent-200: #FE9880;
--color-accent-300: #FE6F4D;
--color-accent-400: #FE461B;
--color-accent-500: #E42C01;
--color-accent-600: #B22201;
--color-accent-700: #7F1901;
--color-accent-800: #4C0F00;
--color-accent-900: #190500;
/* neutral (PLF Black) */
--color-neutral-50: #F7F6F7;
--color-neutral-100: #DAD8D9;
--color-neutral-200: #BEBBBC;
--color-neutral-300: #A39FA0;
--color-neutral-400: #888384;
--color-neutral-500: #6E686A;
--color-neutral-600: #564F51;
--color-neutral-700: #3E3739;
--color-neutral-800: #282122;
--color-neutral-900: #130C0E;
/* error */
--color-error-50: #F7F2F2;
--color-error-100: #F0DBDB;
--color-error-200: #E6B2B2;
--color-error-300: #DF7B7B;
--color-error-400: #DB3E3E;
--color-error-500: #DC2626;
--color-error-600: #AF1A1A;
--color-error-700: #851515;
--color-error-800: #591313;
--color-error-900: #390F0F;
/* Figma variable aliases (same names as the Design Kit) */
--primary-50: var(--color-primary-50); --primary-100: var(--color-primary-100); --primary-200: var(--color-primary-200);
--primary-300: var(--color-primary-300); --primary-400: var(--color-primary-400); --primary-500: var(--color-primary-500);
--primary-600: var(--color-primary-600); --primary-700: var(--color-primary-700); --primary-800: var(--color-primary-800); --primary-900: var(--color-primary-900);
--secondary-50: var(--color-secondary-50); --secondary-100: var(--color-secondary-100); --secondary-200: var(--color-secondary-200);
--secondary-300: var(--color-secondary-300); --secondary-400: var(--color-secondary-400); --secondary-500: var(--color-secondary-500);
--secondary-600: var(--color-secondary-600); --secondary-700: var(--color-secondary-700); --secondary-800: var(--color-secondary-800); --secondary-900: var(--color-secondary-900);
--neutral-50: var(--color-neutral-50); --neutral-100: var(--color-neutral-100); --neutral-200: var(--color-neutral-200);
--neutral-300: var(--color-neutral-300); --neutral-400: var(--color-neutral-400); --neutral-500: var(--color-neutral-500);
--neutral-600: var(--color-neutral-600); --neutral-700: var(--color-neutral-700); --neutral-800: var(--color-neutral-800); --neutral-900: var(--color-neutral-900);
/* Gradients ("Purple Gradient" style + service card green) */
--gradient-purple: linear-gradient(94deg, var(--color-secondary-700) 0%, var(--color-secondary-400) 100%);
--gradient-green: linear-gradient(107deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
/* Brand aliases */
--color-brand: var(--color-primary-400);
--color-brand-dark: var(--color-primary-500);
--color-brand-light: var(--color-primary-100);
--color-brand-rgb: 101, 188, 70;
/* Layout aliases */
--color-bg-light: var(--color-primary-50);
--color-bg-dark: var(--color-neutral-900);
--color-bg-footer: var(--color-neutral-900);
--color-text: var(--color-neutral-900);
--color-text-muted: var(--color-neutral-600);
--color-text-on-dark: var(--color-neutral-50);
/* Typography — Avenir (Design Kit: body-font-family / heading-font-family) */
--body-font-family: "avenir-lt-pro", "Avenir", "Avenir Next", system-ui, -apple-system, sans-serif;
--heading-font-family: "avenir-lt-pro", "Avenir", "Avenir Next", system-ui, -apple-system, sans-serif;
--font-sans: var(--body-font-family);
--font-heading: var(--heading-font-family);
--weight-roman: 400;
--weight-medium: 500;
--weight-heavy: 700; /* Avenir LT Pro 85 Heavy = 700 on Adobe Fonts (95 Black = 800) */
/* Text styles (Design Kit names): size / line-height / tracking */
--text-xs: 12px; --leading-xs: 16px; /* text-xs: Medium */
--text-sm: 16px; --leading-sm: 24px; /* text-sm: Medium, text-sm-bold: Heavy */
--text-base: 24px; --leading-base: 1.5; /* text-base: Roman, text-base-bold: Heavy */
--text-2xl: 32px; --leading-2xl: 1.5; /* Heavy */
--text-3xl: 40px; --leading-3xl: 1.5; /* Heavy */
--text-4xl: 52px; --leading-4xl: 1.2; --tracking-4xl: -0.02em; /* Heavy */
--text-5xl: 64px; --leading-5xl: 1.1; /* Heavy */
--text-large-quote: 40px; --leading-large-quote: 1.2; --tracking-large-quote: -0.02em; /* Medium */
/* Legacy sizes used by blog/archive templates */
--text-lg: 20px;
--text-xl: 24px;
--leading-tight: 1.2;
--leading-normal: 1.5;
--leading-relaxed: 1.625;
/* Spacing */
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--section-y: 96px;
/* Layout — 1200px content column (1680 frame with 240px margins) */
--container-max: 1200px;
--gutter: clamp(20px, 5vw, 240px);
/* Misc */
--radius: 16px;
--radius-sm: 12px;
--radius-lg: 32px;
--radius-pill: 999px;
--shadow: 0 4px 6px -1px rgb(19 12 14 / 0.1);
--shadow-lg: 0 18.162px 36.324px 0 rgba(19, 12, 14, 0.14);
--transition: 200ms ease;
}
@media (max-width: 1280px) {
:root {
--text-5xl: 56px;
--text-4xl: 46px;
--text-3xl: 36px;
--text-large-quote: 36px;
--text-base: 22px;
}
}
@media (max-width: 1024px) {
:root {
--text-5xl: 48px;
--text-4xl: 40px;
--text-3xl: 32px;
--text-2xl: 28px;
--text-large-quote: 32px;
--text-base: 20px;
--section-y: 72px;
}
}
@media (max-width: 767px) {
:root {
--text-5xl: 40px;
--text-4xl: 34px;
--text-3xl: 28px;
--text-2xl: 24px;
--text-large-quote: 26px;
--text-base: 18px;
--text-lg: 18px;
--text-xl: 20px;
--section-y: 56px;
}
}
/* =================================================================
BASE
================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--body-font-family);
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-roman);
color: var(--color-neutral-900);
background: #fff;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
/* Animate on scroll */
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
/* Background image utility for components */
[class*="--bg-image"] {
position: relative;
background: var(--color-bg-dark) center/cover no-repeat;
color: #fff;
}
[class*="--bg-image"] .eyebrow { color: var(--color-brand-light); }
[class*="--bg-image"] > .container,
[class*="--bg-image"] > [class*="__inner"] { position: relative; z-index: 1; }
[class*="__overlay"] { position: absolute; inset: 0; }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--space-md);
font-family: var(--heading-font-family);
font-weight: var(--weight-heavy);
line-height: var(--leading-tight);
}
p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }
a { color: var(--color-brand); }
/* =================================================================
ACCESSIBILITY
================================================================= */
/* Skip link */
.skip-link {
position: absolute;
left: -9999px;
top: var(--space-sm);
background: var(--color-brand);
color: #fff;
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius);
font-weight: 600;
text-decoration: none;
z-index: 9999;
}
.skip-link:focus {
left: var(--space-sm);
outline: 2px solid var(--color-brand-dark);
outline-offset: 2px;
}
/* Screen reader only (visually hidden) */
.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;
}
/* Focus visible states */
:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* Focus on dark backgrounds */
[class*="--bg-dark"] :focus-visible,
[class*="--bg-brand"] :focus-visible,
[class*="--bg-image"] :focus-visible,
.site-footer :focus-visible {
outline-color: #fff;
}
/* Minimum tap target size */
button,
.btn,
input[type="submit"],
input[type="button"],
a.btn {
min-height: 44px;
}
/* Text overflow handling */
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h1 { font-size: var(--text-5xl); line-height: var(--leading-5xl); }
h2 { font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); }
h3 { font-size: var(--text-3xl); line-height: var(--leading-3xl); }
h4 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
p { margin: 0 0 var(--space-lg); }
p:last-child { margin-bottom: 0; }
/* Prevent iOS text resize issues */
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Keep elements visible without animation */
.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
}
}
/* Container */
.container {
width: 100%;
max-width: calc(var(--container-max) + 2 * var(--gutter));
margin: 0 auto;
padding: 0 var(--gutter);
}
.container--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.container--wide { max-width: calc(1400px + 2 * var(--gutter)); }
/* Prose (WYSIWYG content) */
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: var(--space-lg); }
.prose li { margin-bottom: var(--space-xs); }
.prose a { color: var(--color-brand); text-decoration: underline; }
/* Eyebrow / Subhead */
.eyebrow {
margin-bottom: var(--space-sm);
font-size: var(--text-sm);
font-weight: var(--weight-heavy);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-brand);
}
.subhead {
font-size: var(--text-lg);
color: var(--color-neutral-600);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 28px;
font-family: var(--body-font-family);
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
text-decoration: none;
border-radius: var(--radius-pill);
border: 0;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--color-primary-400); color: var(--color-neutral-900); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--color-primary-300); color: var(--color-neutral-900); }
.btn--secondary { background: var(--color-secondary-700); color: #fff; }
.btn--secondary:hover,
.btn--secondary:focus-visible { background: var(--color-secondary-800); color: #fff; }
.btn--white { background: #fff; color: var(--color-secondary-700); }
.btn--white:hover,
.btn--white:focus-visible { background: var(--color-secondary-50); }
.btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); }
.btn--outline-light:hover,
.btn--outline-light:focus-visible { background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 2px #fff; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-weight: var(--weight-heavy);
color: var(--color-secondary-500);
text-decoration: none;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(4px); }
/* Icons */
svg { width: 24px; height: 24px; flex-shrink: 0; }
/* =================================================================
HEADER — C90 Header
================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-neutral-900);
border-bottom: 1px solid var(--color-neutral-100);
color: #fff;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 28px;
padding-bottom: 28px;
}
.site-header__logo {
display: block;
line-height: 0;
color: #fff;
text-decoration: none;
font-family: var(--font-heading);
font-weight: var(--weight-heavy);
}
.site-header__logo img { width: 200px; height: auto; display: block; }
body.scrolled .site-header { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); }
/* Hamburger */
.site-header__toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--space-sm);
background: none;
border: none;
cursor: pointer;
}
.site-header__toggle span,
.site-header__toggle::before,
.site-header__toggle::after {
content: '';
display: block;
width: 24px;
height: 2px;
background: #fff;
transition: var(--transition);
}
.site-header__toggle[aria-expanded="true"] {
position: fixed;
top: 2rem;
right: 1rem;
padding-right: 0;
z-index: 9999;
}
.site-header__toggle[aria-expanded="true"] span { opacity: 0; transform: scaleX(0); }
.site-header__toggle[aria-expanded="true"]::before,
.site-header__toggle[aria-expanded="true"]::after { width: 32px; }
.site-header__toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
/* Primary nav */
.site-nav__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 28px;
}
.site-nav__menu a {
display: inline-flex;
align-items: center;
padding: 8px 0;
font-family: var(--body-font-family);
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
color: #fff;
text-decoration: none;
white-space: nowrap;
transition: color var(--transition);
}
.site-nav__menu a:hover,
.site-nav__menu a:focus-visible { color: var(--color-primary-300); }
/* Parent items: caret (Figma "caret" asset, stroke secondary-200) */
.site-nav__menu > .menu-item-has-children { position: relative; }
.site-nav__menu > .menu-item-has-children > a { gap: 6px; }
.site-nav__menu > .menu-item-has-children > a::after {
content: '';
display: block;
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23BE99CB' stroke-width='1.45833' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
transition: transform var(--transition);
}
/* Desktop dropdown */
@media (min-width: 782px) {
.site-nav__menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
list-style: none;
margin: 0;
padding: 12px 0;
background: #fff;
border: 1px solid var(--color-neutral-100);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
z-index: 20;
}
.site-nav__menu > .menu-item-has-children:hover > .sub-menu,
.site-nav__menu > .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-nav__menu > .menu-item-has-children:hover > a::after { transform: rotate(180deg); }
.site-nav__menu .sub-menu a {
display: block;
padding: 10px 20px;
font-weight: var(--weight-medium);
color: var(--color-neutral-900);
white-space: normal;
}
.site-nav__menu .sub-menu a:hover,
.site-nav__menu .sub-menu a:focus-visible {
background: var(--color-secondary-50);
color: var(--color-secondary-500);
}
}
/* Header actions (phone + CTA) */
.site-nav__actions {
display: flex;
align-items: center;
gap: 28px;
margin-left: 28px;
}
.site-nav__phone {
display: inline-flex;
align-items: center;
padding: 8px 0;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
color: var(--color-primary-400);
text-decoration: none;
white-space: nowrap;
}
.site-nav__phone:hover { color: var(--color-primary-300); }
.site-nav__phone svg { display: none; }
/* Mobile nav */
@media (max-width: 781px) {
.site-header__inner { padding-top: 16px; padding-bottom: 16px; }
.site-header__logo img { width: 132px; }
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-neutral-900);
padding: 5rem 5% var(--space-xl);
transform: translateX(100%);
transition: transform var(--transition);
overflow-y: auto;
z-index: 200;
}
.site-nav.is-open { transform: translateX(0); }
body.nav-open { overflow: hidden; }
.site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
.site-nav__menu > li {
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid var(--color-neutral-700);
}
.site-nav__menu > li > a {
flex: 1;
display: block;
padding: 1.25rem 0;
font-size: 20px;
}
.site-nav__menu > .menu-item-has-children > a::after { display: none; }
.submenu-toggle {
background: none;
border: none;
padding: 1rem;
cursor: pointer;
color: inherit;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.submenu-toggle::before {
content: '';
border: solid var(--color-secondary-200);
border-width: 0 2px 2px 0;
padding: 7px;
transform: rotate(45deg);
margin-top: -6px;
transition: all var(--transition);
display: block;
}
.site-nav__menu > .menu-item-has-children.is-open > .submenu-toggle::before { transform: rotate(-135deg); margin-top: 2px; }
.site-nav__menu .sub-menu {
flex-basis: 100%;
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: all var(--transition);
}
.site-nav__menu > .menu-item-has-children.is-open > .sub-menu { max-height: 600px; padding-bottom: var(--space-sm); }
.site-nav__menu .sub-menu a {
display: block;
padding: 0.75rem 0;
font-weight: var(--weight-medium);
color: var(--color-neutral-100);
}
.site-nav__actions {
flex-wrap: wrap;
gap: var(--space-md);
margin: var(--space-lg) 0 0;
}
.site-nav__actions > a { flex-basis: 100%; justify-content: center; }
.site-nav__phone { font-size: 20px; }
}
@media (min-width: 782px) {
.site-nav { display: flex; align-items: center; }
.site-header__toggle,
.site-nav__menu > li.mobile-show,
button.submenu-toggle { display: none !important; }
}
@media (max-width: 1180px) and (min-width: 782px) {
.site-nav__menu, .site-nav__actions { gap: 16px; }
.site-nav__actions { margin-left: 16px; }
.site-header__logo img { width: 150px; }
}
body.nav-open { overflow: hidden; }
/* Small button variant (header CTA) */
.btn--sm {
padding: 14px 20px;
gap: 8px;
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
.btn--sm svg { width: 18.675px; height: 18.457px; }
/* =================================================================
MEGA MENU
================================================================= */
.c-mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: #fff;
border-top: 1px solid var(--color-neutral-200);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
pointer-events: none;
}
.c-mega-menu.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.c-mega-menu__inner {
padding: var(--space-xl) var(--gutter);
}
.c-mega-menu__columns {
display: flex;
gap: var(--space-lg);
}
.c-mega-menu__col {
min-width: 0;
}
.c-mega-menu__col-title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
margin-bottom: var(--space-sm);
color: var(--color-text);
}
.c-mega-menu__menu {
list-style: none;
padding: 0;
margin: 0;
}
.c-mega-menu__menu li {
margin-bottom: var(--space-xs);
}
.c-mega-menu__menu a {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition);
}
.c-mega-menu__menu a:hover {
color: var(--color-brand);
}
.c-mega-menu__menu .sub-menu {
list-style: none;
padding: 0;
margin: var(--space-sm) 0 var(--space-sm) var(--space-sm);
}
.c-mega-menu__menu .sub-menu a {
font-size: var(--text-sm);
}
.c-mega-menu__text {
color: var(--color-text);
}
.c-mega-menu__image {
max-width: 100%;
height: auto;
border-radius: var(--radius);
}
.c-mega-menu__contact-info p {
display: flex;
align-items: flex-start;
gap: var(--space-xs);
margin-bottom: var(--space-xs);
}
@media (max-width: 768px) {
.c-mega-menu {
display: none !important;
}
}
/* =================================================================
FOOTER — C91 Footer
================================================================= */
.site-footer {
background: var(--color-bg-footer);
color: #fff;
padding: 80px 0 40px;
font-family: var(--body-font-family);
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
}
.site-footer__inner {
display: flex;
align-items: flex-start;
gap: 64px;
padding-bottom: 56px;
border-bottom: 1px solid var(--color-neutral-700);
}
.site-footer__brand {
flex: 0 0 400px;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.site-footer__logo { display: block; line-height: 0; }
.site-footer__logo img { width: 127px; height: auto; margin: 0; }
.site-footer__tagline {
margin: 0;
max-width: 340px;
color: var(--color-neutral-300);
}
.site-footer__social { display: flex; gap: 10px; }
.site-footer__social a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
border: 1px solid var(--color-neutral-700);
background: transparent;
color: #fff;
transition: background var(--transition), border-color var(--transition);
}
.site-footer__social a span { display: flex; align-items: center; justify-content: center; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible { background: var(--color-neutral-800); border-color: var(--color-neutral-500); }
.site-footer__social svg { width: auto; height: 16px; }
.site-footer__social-icon { width: 18px; height: 16px; object-fit: contain; }
.site-footer__columns {
flex: 1;
min-width: 0;
display: flex;
gap: 64px;
padding: 0;
}
.site-footer__col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.site-footer__col-title {
margin: 0;
font-family: var(--body-font-family);
font-size: var(--text-xs);
line-height: var(--leading-xs);
font-weight: var(--weight-medium);
color: var(--color-neutral-400);
}
.site-footer__col-title a { color: inherit; text-decoration: none; transition: color var(--transition); }
.site-footer__col-title a:hover, .site-footer__col-title a:focus-visible { color: var(--color-primary-300); }
.site-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__menu li { margin: 0; }
.site-footer__menu a {
color: var(--color-neutral-100);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition);
}
.site-footer__menu a:hover,
.site-footer__menu a:focus-visible { color: #fff; }
.site-footer__menu .sub-menu { list-style: none; padding: 0; margin: 0 0 0 var(--space-sm); }
/* Contact block (Studio column) */
.site-footer__contact {
padding-top: 12px;
color: var(--color-neutral-300);
}
.site-footer__contact p { margin: 0; white-space: nowrap; }
.site-footer__contact strong { font-weight: var(--weight-heavy); color: var(--color-neutral-50); }
.site-footer__contact a { color: inherit; text-decoration: none; }
.site-footer__contact a:hover { color: #fff; }
/* Legacy column types */
.site-footer__contact-info p { display: flex; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xs); color: var(--color-neutral-300); }
.site-footer__contact-info a { color: var(--color-neutral-300); text-decoration: none; }
.site-footer__contact-info a:hover { color: #fff; }
.site-footer__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.site-footer__text { color: var(--color-neutral-300); }
.site-footer__image { max-width: 100%; height: auto; }
/* Legal row */
.site-footer__bottom {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: var(--space-sm) var(--space-lg);
font-size: var(--text-xs);
line-height: var(--leading-xs);
color: var(--color-neutral-400);
}
.site-footer__bottom-left,
.site-footer__bottom-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) 30px;
}
.site-footer__copyright { margin: 0; }
.site-footer__bottom-nav { display: flex; align-items: center; }
.site-footer__bottom-menu { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-footer__bottom-menu a,
.site-footer__credits a {
color: var(--color-neutral-400);
text-decoration: none;
transition: color var(--transition);
}
.site-footer__bottom-menu a:hover,
.site-footer__bottom-menu a:focus-visible,
.site-footer__credits a:hover,
.site-footer__credits a:focus-visible { color: var(--color-neutral-100); }
.site-footer__credits { margin: 0; }
@media (max-width: 1024px) {
.site-footer__inner { flex-wrap: wrap; gap: 48px; }
.site-footer__brand { flex-basis: 100%; max-width: 100%; }
.site-footer__columns { flex-basis: 100%; gap: 40px; }
}
@media (max-width: 768px) {
.site-footer { padding: 56px 0 32px; }
.site-footer__columns { flex-direction: column; gap: 32px; }
.site-footer__col { flex-basis: 100% !important; max-width: 100% !important; }
.site-footer__menu a, .site-footer__contact p { white-space: normal; }
.site-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* =================================================================
COMPONENTS
================================================================= */
/* Adjacent same-background components: collapse top padding */
[class*="--bg-white"] + [class*="--bg-white"],
[class*="--bg-light"] + [class*="--bg-light"],
[class*="--bg-gray"] + [class*="--bg-gray"],
[class*="--bg-dark"] + [class*="--bg-dark"],
[class*="--bg-brand"] + [class*="--bg-brand"] {
padding-top: 0;
}
/* ----------------------- UNDER CONSTRUCTION ----------------------- */
.c-under-construction {
padding: var(--space-3xl) 0;
min-height: 50vh;
display: flex;
align-items: center;
background: var(--color-bg-light);
}
.c-under-construction h1 {
font-size: var(--text-3xl);
margin-bottom: var(--space-md);
color: var(--color-neutral-700);
}
.c-under-construction p {
color: var(--color-neutral-500);
font-size: var(--text-lg);
}
/* ----------------------- HERO ----------------------- */
.c-hero {
position: relative;
display: flex;
align-items: center;
padding: var(--space-3xl) 0;
background: var(--color-bg-dark) center/cover no-repeat;
color: #fff;
overflow: hidden;
}
.c-hero--h-full { min-height: 100vh; }
.c-hero--h-large { min-height: 80vh; }
.c-hero--h-medium { min-height: 60vh; }
.c-hero--h-small { min-height: 40vh; }
.c-hero__overlay {
position: absolute;
inset: 0;
background: #000;
}
.c-hero__inner {
position: relative;
z-index: 1;
}
.c-hero__content { max-width: 700px; }
.c-hero--center { text-align: center; }
.c-hero--center .c-hero__inner { display: flex; flex-direction: column; align-items: center; }
.c-hero--center .c-hero__content { margin: 0 auto; }
.c-hero__eyebrow { opacity: 0.8; color: inherit; }
.c-hero__headline { font-size: var(--text-5xl); margin-bottom: var(--space-md); }
.c-hero__subhead { font-size: var(--text-xl); opacity: 0.9; margin-bottom: var(--space-lg); }
.c-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.c-hero--center .c-hero__buttons { justify-content: center; }
/* Split layout */
.c-hero--split { background: var(--color-bg-dark); }
.c-hero--split .c-hero__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
max-width: none;
}
.c-hero--split .c-hero__content { max-width: none; }
.c-hero--split .c-hero__media { order: 1; }
.c-hero--split-left .c-hero__media { order: -1; }
.c-hero--split .c-hero__image {
width: 100%;
height: auto;
border-radius: var(--radius);
}
@media (max-width: 768px) {
.c-hero--split .c-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
.c-hero--split .c-hero__media { order: -1; }
.c-hero--split .c-hero__buttons { justify-content: center; }
}
/* Minimal layout */
.c-hero--minimal {
background: #fff;
color: var(--color-neutral-900);
min-height: auto;
padding: var(--space-xl) 0;
border-bottom: 1px solid var(--color-neutral-200);
}
.c-hero--minimal .c-hero__headline {
font-size: var(--text-3xl);
margin-bottom: 0;
}
/* Parallax */
.c-hero__parallax {
position: absolute;
inset: -20%;
background: center/cover no-repeat;
will-change: transform;
}
.c-hero--parallax {
background: transparent;
}
@media (max-width: 768px) {
.c-hero { padding: var(--space-2xl) 0; }
.c-hero__headline { font-size: var(--text-3xl); }
.c-hero--minimal .c-hero__headline { font-size: var(--text-2xl); }
}
.c-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Breadcrumbs */
.breadcrumbs { margin-bottom: var(--space-sm); }
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--text-sm);
}
.breadcrumbs__item { display: flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs__link { color: var(--color-neutral-500); text-decoration: none; }
.breadcrumbs__link:hover { color: var(--color-brand); }
.breadcrumbs__sep { color: var(--color-neutral-300); }
.breadcrumbs__current { color: var(--color-neutral-700); }
/* ----------------------- CARDS ----------------------- */
.c-cards { padding: var(--space-3xl) 0; }
.c-cards__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-cards__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 769px) {
.c-cards--cols-2 .c-cards__grid,
.c-cards--cols-3 .c-cards__grid,
.c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.c-cards--cols-3 .c-cards__grid { grid-template-columns: repeat(3, 1fr); }
.c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(4, 1fr); }
}
.c-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform var(--transition), box-shadow var(--transition);
}
a.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.c-card__image { margin: 0; }
.c-card__image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.c-card__content { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.c-card__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.c-card__desc { color: var(--color-neutral-600); flex: 1; }
.c-card__link { margin-top: var(--space-md); font-weight: 600; color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-xs); }
.c-card__link svg { width: 1em; height: 1em; transition: transform var(--transition); }
a.c-card:hover .c-card__link svg { transform: translateX(4px); }
/* Card Style: Horizontal */
.c-cards--style-horizontal .c-card { flex-direction: row; }
.c-cards--style-horizontal .c-card__image { flex: 0 0 40%; max-width: 40%; }
.c-cards--style-horizontal .c-card__image img { aspect-ratio: 1/1; height: 100%; }
.c-cards--style-horizontal .c-card__content { justify-content: center; }
@media (max-width: 768px) {
.c-cards--style-horizontal .c-card { flex-direction: column; }
.c-cards--style-horizontal .c-card__image { flex: none; max-width: 100%; }
.c-cards--style-horizontal .c-card__image img { aspect-ratio: 16/9; height: auto; }
}
/* Card Style: Overlay */
.c-cards--style-overlay .c-card { position: relative; min-height: 280px; }
.c-cards--style-overlay .c-card__image { position: absolute; inset: 0; }
.c-cards--style-overlay .c-card__image img { aspect-ratio: auto; height: 100%; }
.c-cards--style-overlay .c-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.c-cards--style-overlay .c-card__content {
position: relative;
z-index: 1;
justify-content: flex-end;
color: #fff;
}
.c-cards--style-overlay .c-card__desc { color: var(--color-neutral-200); }
.c-cards--style-overlay .c-card__link { color: #fff; }
a.c-cards--style-overlay .c-card:hover .c-card__image img { transform: scale(1.05); }
.c-cards--style-overlay .c-card__image img { transition: transform var(--transition); }
/* Card Style: Minimal */
.c-cards--style-minimal .c-card {
flex-direction: row;
box-shadow: none;
border: 1px solid var(--color-neutral-200);
}
.c-cards--style-minimal .c-card__image {
order: 2;
flex: 0 0 auto;
width: 80px;
height: 80px;
margin: var(--space-lg);
margin-left: 0;
border-radius: 50%;
overflow: hidden;
}
.c-cards--style-minimal .c-card__image img {
aspect-ratio: 1/1;
height: 100%;
width: 100%;
}
.c-cards--style-minimal .c-card__content {
padding: var(--space-xl);
flex: 1;
}
a.c-cards--style-minimal .c-card:hover {
transform: none;
box-shadow: none;
border-color: var(--color-brand);
}
.c-cards--bg-white { background: #fff; }
.c-cards--bg-light { background: var(--color-bg-light); }
.c-cards--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-cards--bg-dark .c-card { background: var(--color-neutral-800); }
.c-cards--bg-dark .c-card__desc { color: var(--color-neutral-300); }
.c-cards--bg-dark.c-cards--style-minimal .c-card { border-color: var(--color-neutral-700); }
.c-cards--bg-dark.c-cards--style-minimal a.c-card:hover { border-color: var(--color-brand-light); }
/* ----------------------- CTA (C92 Global CTA Band) ----------------------- */
.c-cta { padding: var(--section-y) 0; background: #fff; }
.c-cta--global { padding-top: 0; }
.c-cta__band {
display: flex;
align-items: flex-start;
gap: 64px;
padding: 80px 60px;
border-radius: var(--radius-lg);
background: var(--color-primary-50);
border: 1px solid var(--color-primary-100);
color: var(--color-neutral-900);
}
.c-cta__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.c-cta__headline {
margin: 0;
font-size: var(--text-4xl);
line-height: var(--leading-4xl);
letter-spacing: var(--tracking-4xl);
font-weight: var(--weight-heavy);
}
.c-cta__subhead { font-size: var(--text-base); line-height: var(--leading-base); }
.c-cta__subhead p { margin: 0; }
.c-cta__actions {
flex: 0 0 460px;
max-width: 460px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.c-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.c-cta__note {
margin: 0;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
color: var(--color-neutral-600);
}
.c-cta__form { width: 100%; }
.c-cta__form .gform_wrapper { margin: 0; }
.c-cta__form .gfield { margin-bottom: var(--space-md); }
.c-cta__form input:not([type="submit"]),
.c-cta__form textarea,
.c-cta__form select {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-neutral-100);
border-radius: var(--radius-sm);
background: #fff;
font-size: var(--text-sm);
font-family: inherit;
}
.gform-footer.gform_footer { margin-top: 0 !important; }
div#gform_fields_1 { row-gap: var(--space-md); }
div.gform-theme--framework .gform-field-label>.gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
color: var(--color-error-500);
}
.c-cta__form .gform_button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 28px;
font-family: var(--body-font-family);
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
border-radius: var(--radius-pill);
border: 0;
cursor: pointer;
background: var(--color-primary-400);
color: var(--color-neutral-900);
transition: background var(--transition);
}
.c-cta__form .gform_button:hover { background: var(--color-primary-300); }
.grecaptcha-badge {
position: relative !important;
bottom: auto !important;
right: auto !important;
margin-bottom: var(--space-lg) !important;
}
.gform_wrapper .gfield.gfield--type-captcha.gfield--captcha-invisible {
position: relative;
display: block;
block-size: auto;
inline-size: auto;
min-block-size: auto;
min-height: 60px;
}
/* Band color variants */
.c-cta--bg-brand .c-cta__band { background: var(--gradient-purple); border-color: transparent; color: #fff; }
.c-cta--bg-brand .c-cta__note { color: var(--color-secondary-100); }
.c-cta--bg-dark .c-cta__band { background: var(--color-neutral-900); border-color: var(--color-neutral-700); color: #fff; }
.c-cta--bg-dark .c-cta__note { color: var(--color-neutral-300); }
.c-cta--bg-dark form label, .c-cta--bg-dark form legend, .c-cta--bg-dark .gfield_description,
.c-cta--bg-brand form label, .c-cta--bg-brand form legend, .c-cta--bg-brand .gfield_description { color: var(--color-neutral-50) !important; }
/* Page-builder CTA (centered / split) reuses the band */
.c-cta--center .c-cta__band { flex-direction: column; align-items: center; text-align: center; }
.c-cta--center .c-cta__actions { flex-basis: auto; max-width: none; align-items: center; }
.c-cta--center .c-cta__buttons { justify-content: center; }
@media (max-width: 1024px) {
.c-cta__band { flex-direction: column; gap: 32px; padding: 48px 32px; }
.c-cta__actions { flex-basis: auto; max-width: none; }
}
@media (max-width: 767px) {
.c-cta__band { padding: 32px 20px; border-radius: 20px; }
}
/* ----------------------- TESTIMONIALS ----------------------- */
.c-testimonials { padding: var(--space-3xl) 0; }
.c-testimonials__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-testimonial { text-align: center; max-width: 800px; margin: 0 auto; }
.c-testimonial__icon { width: 48px; height: 48px; margin: 0 auto var(--space-lg); color: var(--color-brand); opacity: 0.3; }
.c-testimonial__quote { font-size: var(--text-xl); font-style: italic; line-height: var(--leading-relaxed); margin-bottom: var(--space-lg); }
.c-testimonial--featured .c-testimonial__quote { font-size: var(--text-2xl); }
.c-testimonial__author { display: flex; align-items: center; justify-content: center; gap: var(--space-md); text-align: left; }
.c-testimonial__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.c-testimonial__author cite { display: block; font-style: normal; font-weight: 600; }
.c-testimonial__author span { font-size: var(--text-sm); color: var(--color-neutral-500); }
/* Slider nav */
.c-testimonials__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }
.c-testimonials__prev,
.c-testimonials__next {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.c-testimonials__prev:hover,
.c-testimonials__next:hover { border-color: var(--color-neutral-500); }
.c-testimonials__prev svg,
.c-testimonials__next svg { width: 20px; height: 20px; }
.c-testimonials__dots { display: flex; gap: var(--space-xs); }
.c-testimonials__dot {
width: 10px;
height: 10px;
background: var(--color-neutral-300);
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.c-testimonials__dot:hover,
.c-testimonials__dot.is-active { background: var(--color-brand); }
/* Grid layout */
.c-testimonials--grid .c-testimonials__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) {
.c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
.c-testimonials--grid .c-testimonial { text-align: left; background: #fff; padding: var(--space-lg); border-radius: var(--radius); box-shadow: var(--shadow); }
.c-testimonials--grid .c-testimonial__author { justify-content: flex-start; }
.c-testimonials--grid .c-testimonial__icon { width: 32px; height: 32px; margin: 0 0 var(--space-md); }
.c-testimonials--grid .c-testimonial__quote { font-size: var(--text-base); }
.c-testimonials--bg-white { background: #fff; }
.c-testimonials--bg-light { background: var(--color-bg-light); }
.c-testimonials--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-testimonials--bg-dark .c-testimonial__author span { color: var(--color-neutral-400); }
/* ----------------------- ACCORDION ----------------------- */
.c-accordion { padding: var(--space-3xl) 0; }
.c-accordion__header { text-align: center; margin-bottom: var(--space-2xl); }
.c-accordion__items { border-top: 1px solid var(--color-neutral-200); }
.c-accordion__item { border-bottom: 1px solid var(--color-neutral-200); }
.c-accordion__item h3 { margin: 0; font-size: var(--text-base); }
.c-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
width: 100%;
padding: var(--space-lg) 0;
font: inherit;
font-weight: 600;
text-align: left;
background: none;
border: none;
cursor: pointer;
}
.c-accordion__trigger:hover { color: var(--color-brand); }
.c-accordion__icon { width: 20px; height: 20px; transition: transform var(--transition); }
.c-accordion__item.is-open .c-accordion__icon { transform: rotate(180deg); }
.c-accordion__content { padding-bottom: var(--space-lg); color: var(--color-neutral-600); }
.c-accordion--bg-white { background: #fff; }
.c-accordion--bg-light { background: var(--color-bg-light); }
/* ----------------------- STATS ----------------------- */
.c-stats { padding: var(--space-3xl) 0; }
.c-stats__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-stats__grid { display: grid; gap: var(--space-xl); text-align: center; }
@media (min-width: 769px) {
.c-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.c-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.c-stat__number { font-size: var(--text-4xl); font-weight: 700; color: var(--color-brand); line-height: 1; }
.c-stat__label { margin-top: var(--space-sm); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500); }
.c-stats--bg-white { background: #fff; }
.c-stats--bg-light { background: var(--color-bg-light); }
.c-stats--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-stats--bg-dark .c-stat__number { color: var(--color-brand-light); }
.c-stats--bg-dark .c-stat__label { color: var(--color-neutral-400); }
.c-stats--bg-brand { background: var(--color-brand); color: #fff; }
.c-stats--bg-brand .c-stat__number { color: #fff; }
.c-stats--bg-brand .c-stat__label { color: rgba(255,255,255,0.8); }
/* ----------------------- LOGO GRID ----------------------- */
.c-logos { padding: var(--space-2xl) 0; }
.c-logos__header { text-align: center; margin-bottom: var(--space-xl); }
.c-logos__header h2 { font-size: var(--text-lg); font-weight: 500; }
.c-logos__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg) var(--space-xl); }
.c-logos__item { max-width: 140px; height: 48px; display: flex; align-items: center; }
.c-logos__item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter var(--transition), opacity var(--transition); }
.c-logos--gray .c-logos__item img { filter: grayscale(100%); opacity: 0.6; }
.c-logos--gray .c-logos__item:hover img { filter: grayscale(0); opacity: 1; }
.c-logos--bg-white { background: #fff; }
.c-logos--bg-light { background: var(--color-bg-light); }
/* ----------------------- FORM SECTION ----------------------- */
.c-form-section { padding: var(--space-3xl) 0; }
.c-form-section--center .c-form-section__inner { max-width: 600px; margin: 0 auto; }
.c-form-section--center .c-form-section__content { text-align: center; margin-bottom: var(--space-xl); }
@media (min-width: 768px) {
.c-form-section--split .c-form-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
}
.c-form-section__form { background: #fff; padding: var(--space-xl); border-radius: var(--radius); box-shadow: var(--shadow); }
.c-form-section--bg-white { background: #fff; }
.c-form-section--bg-light { background: var(--color-bg-light); }
.c-form-section--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-form-section--bg-dark .eyebrow { color: var(--color-brand-light); }
.iti__selected-country{
display:none!important;
}
.gform_body input,
.gform_body textarea {
font-size:var(--text-xl)!important;
padding:1.25rem 1rem!important;
display:block!important;
min-height:50px!important;
border-radius:0!important;
border-color:var(--color-neutral-200);
box-shadow:none!important;
}
.gform_body fieldset,
.gform-theme--foundation .gform-grid-row{
margin:0!important;
}
.gform-theme--foundation .gform_fields,
.gform-theme--foundation .gform-grid-row{
gap:1.75rem!important;
}
.gform-theme--foundation .gform-grid-col{
padding:0!important;
}
.gform_body input::placeholder,
.gform_body textarea::placeholder {
color:var(--color-neutral-600);
}
.gform-theme--foundation .gform_footer{
margin-block-start:0!important;
margin-top:1.75rem!important;
}
.gfield_required_text,
.gform_validation_error_link,
.gfield_validation_message,
.gform_submission_error{
color:var(--color-error-700)!important;
}
.gform-icon--circle-error{
display:none!important;
}
.gform_validation_errors ol{
padding:0!important;
}
.gform_validation_errors li{
list-style-type:none;
font-size:.875rem!important;
}
@media (max-width:1140px) {
.gform-theme--foundation .gform-grid-row{
flex-direction:column!important;
align-items:flex-start!important;
}
.gform-theme--foundation .gform-grid-col.gform-grid-col--size-auto{
flex-basis:100%!important;
inline-size:100%!important;
}
.gform-theme--foundation .gfield--width-half{
grid-column:span 12!important;
}
.gform-theme--foundation .gform_fields,
.gform-theme--foundation .gform-grid-row{
gap:var(--space-sm)!important;
}
}
/* ----------------------- TEXT BLOCK ----------------------- */
.c-text-block { padding: var(--space-3xl) 0; }
.c-text-block h2 { margin-bottom: var(--space-lg); }
.c-text-block--bg-white { background: #fff; }
.c-text-block--bg-light { background: var(--color-bg-light); }
/* ----------------------- GALLERY ----------------------- */
.c-gallery { padding: var(--space-3xl) 0; }
.c-gallery__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-gallery__subhead { color: var(--color-neutral-600); margin-top: var(--space-sm); }
.c-gallery__grid {
display: grid;
gap: var(--space-md);
}
.c-gallery--cols-2 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-3 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 769px) {
.c-gallery--cols-3 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(4, 1fr); }
.c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(5, 1fr); }
}
.c-gallery__item {
margin: 0;
overflow: hidden;
border-radius: var(--radius);
cursor: pointer;
}
.c-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.c-gallery__item:hover img {
transform: scale(1.05);
}
/* Aspect ratios */
.c-gallery--square .c-gallery__item { aspect-ratio: 1/1; }
.c-gallery--landscape .c-gallery__item { aspect-ratio: 4/3; }
.c-gallery--portrait .c-gallery__item { aspect-ratio: 3/4; }
.c-gallery--wide .c-gallery__item { aspect-ratio: 16/9; }
/* Masonry layout */
.c-gallery--masonry .c-gallery__grid {
display: block;
column-gap: var(--space-md);
}
.c-gallery--masonry.c-gallery--cols-2 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 2; }
@media (min-width: 768px) {
.c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 3; }
.c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 3; }
.c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 3; }
}
@media (min-width: 1024px) {
.c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 4; }
.c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 5; }
}
.c-gallery--masonry .c-gallery__item {
break-inside: avoid;
margin-bottom: var(--space-md);
aspect-ratio: auto;
}
.c-gallery--masonry .c-gallery__item img {
height: auto;
}
/* Carousel layout */
.c-gallery__carousel {
position: relative;
}
.c-gallery__track {
display: flex;
gap: var(--space-md);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: var(--space-sm);
}
.c-gallery__track::-webkit-scrollbar { display: none; }
.c-gallery__slide {
flex: 0 0 auto;
width: 300px;
scroll-snap-align: start;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
cursor: pointer;
}
@media (min-width: 768px) {
.c-gallery__slide { width: 400px; }
}
.c-gallery__slide img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform var(--transition);
}
@media (min-width: 768px) {
.c-gallery__slide img { height: 300px; }
}
.c-gallery__slide:hover img {
transform: scale(1.05);
}
.c-gallery__prev,
.c-gallery__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: none;
border-radius: 50%;
box-shadow: var(--shadow);
cursor: pointer;
transition: background var(--transition);
z-index: 2;
}
.c-gallery__prev:hover,
.c-gallery__next:hover { background: var(--color-neutral-100); }
.c-gallery__prev { left: var(--space-sm); }
.c-gallery__next { right: var(--space-sm); }
.c-gallery__prev svg,
.c-gallery__next svg { width: 20px; height: 20px; }
/* Backgrounds */
.c-gallery--bg-white { background: #fff; }
.c-gallery--bg-light { background: var(--color-bg-light); }
.c-gallery--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-gallery--bg-dark .eyebrow { color: var(--color-brand-light); }
.c-gallery--bg-dark .c-gallery__subhead { color: var(--color-neutral-400); }
/* ----------------------- LIGHTBOX ----------------------- */
.c-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.c-lightbox.is-open {
opacity: 1;
pointer-events: auto;
}
.c-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.95);
}
.c-lightbox__content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
}
.c-lightbox__close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
opacity: 0.7;
transition: opacity var(--transition);
}
.c-lightbox__close:hover { opacity: 1; }
.c-lightbox__close svg { width: 28px; height: 28px; }
.c-lightbox__prev,
.c-lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
color: #fff;
cursor: pointer;
transition: background var(--transition);
}
.c-lightbox__prev:hover,
.c-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }
.c-lightbox__prev { left: var(--space-md); }
.c-lightbox__next { right: var(--space-md); }
.c-lightbox__prev svg,
.c-lightbox__next svg { width: 24px; height: 24px; }
.c-lightbox__figure {
max-width: 90vw;
max-height: 80vh;
margin: 0;
text-align: center;
}
.c-lightbox__image {
max-width: 100%;
max-height: 75vh;
object-fit: contain;
}
.c-lightbox__caption {
color: var(--color-neutral-400);
font-size: var(--text-sm);
margin-top: var(--space-md);
}
.c-lightbox__counter {
position: absolute;
bottom: var(--space-md);
left: 50%;
transform: translateX(-50%);
color: var(--color-neutral-400);
font-size: var(--text-sm);
}
@media (max-width: 768px) {
.c-lightbox__prev,
.c-lightbox__next {
width: 40px;
height: 40px;
bottom: var(--space-3xl);
top: auto;
transform: none;
}
.c-lightbox__prev { left: var(--space-xl); }
.c-lightbox__next { right: var(--space-xl); }
}
/* ----------------------- STICKY CTA ----------------------- */
.c-sticky-cta {
display: none;
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
z-index: 999999;
align-items: center;
height: 56px;
background: var(--color-brand);
border-radius: 28px;
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: background var(--transition);
}
@media (max-width: 900px) {
.c-sticky-cta {
display: flex;
}
}
.c-sticky-cta__toggle {
display: flex;
align-items: center;
height: 56px;
padding: 0;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
}
.c-sticky-cta__toggle:active {
transform: scale(0.98);
}
.c-sticky-cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.c-sticky-cta__icon svg {
width: 24px;
height: 24px;
}
.c-sticky-cta__number {
display: block;
max-width: 0;
overflow: hidden;
white-space: nowrap;
font-weight: 600;
font-size: var(--text-base);
color: #fff;
text-decoration: none;
transition: max-width 0.3s ease, padding 0.3s ease;
padding: 0;
}
.c-sticky-cta__close {
display: flex;
align-items: center;
justify-content: center;
width: 0;
overflow: hidden;
flex-shrink: 0;
transition: width 0.3s ease, padding 0.3s ease;
padding: 0;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
}
.c-sticky-cta__close svg {
width: 20px;
height: 20px;
opacity: 0.8;
}
/* Expanded state */
.c-sticky-cta.is-open {
background: var(--color-brand-dark);
}
.c-sticky-cta.is-open .c-sticky-cta__number {
max-width: 200px;
padding-right: var(--space-xs);
}
.c-sticky-cta.is-open .c-sticky-cta__close {
width: 44px;
padding-right: var(--space-sm);
}
/* =================================================================
ICON CARDS
================================================================= */
.c-icon-cards { padding: var(--space-3xl) 0; position: relative; }
.c-icon-cards--bg-light { background: var(--color-bg-light); }
.c-icon-cards--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-icon-cards--bg-dark h2, .c-icon-cards--bg-dark h3, .c-icon-cards--bg-dark h4 { color: #fff; }
.c-icon-cards--bg-brand { background: var(--color-brand); color: #fff; }
.c-icon-cards--bg-brand h2, .c-icon-cards--bg-brand h3, .c-icon-cards--bg-brand h4 { color: #fff; }
.c-icon-cards__inner { position: relative; z-index: 1; }
.c-icon-cards__header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-2xl);
}
.c-icon-cards__header h2, .c-icon-cards__header h3, .c-icon-cards__header h4 {
font-size: var(--text-3xl);
margin-bottom: var(--space-md);
}
.c-icon-cards__header .subhead {
font-size: var(--text-lg);
color: var(--color-neutral-600);
}
.c-icon-cards--bg-dark .c-icon-cards__header .subhead,
.c-icon-cards--bg-brand .c-icon-cards__header .subhead,
.c-icon-cards--bg-image .c-icon-cards__header .subhead { color: rgba(255,255,255,0.8); }
.c-icon-cards__grid {
display: grid;
gap: var(--space-xl);
}
.c-icon-cards--cols-2 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
.c-icon-cards--cols-3 .c-icon-cards__grid { grid-template-columns: repeat(3, 1fr); }
.c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.c-icon-cards--cols-3 .c-icon-cards__grid,
.c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.c-icon-cards__grid { grid-template-columns: 1fr !important; }
}
/* Card base */
.c-icon-card {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Icon positioning */
.c-icon-cards--top .c-icon-card { text-align: center; align-items: center; }
.c-icon-cards--left .c-icon-card { flex-direction: row; align-items: flex-start; }
/* Card styles */
.c-icon-cards--boxed .c-icon-card {
background: #fff;
padding: var(--space-xl);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.c-icon-cards--bg-dark.c-icon-cards--boxed .c-icon-card,
.c-icon-cards--bg-brand.c-icon-cards--boxed .c-icon-card,
.c-icon-cards--bg-image.c-icon-cards--boxed .c-icon-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
}
.c-icon-cards--bordered .c-icon-card {
border: 1px solid var(--color-neutral-200);
padding: var(--space-xl);
border-radius: var(--radius);
}
.c-icon-cards--bg-dark.c-icon-cards--bordered .c-icon-card,
.c-icon-cards--bg-brand.c-icon-cards--bordered .c-icon-card,
.c-icon-cards--bg-image.c-icon-cards--bordered .c-icon-card {
border-color: rgba(255,255,255,0.2);
}
/* Icon */
.c-icon-card__icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-brand-light);
border-radius: var(--radius);
color: var(--color-brand-dark);
}
.c-icon-card__icon svg {
width: 28px;
height: 28px;
}
.c-icon-card__img {
width: 100%;
height: 100%;
object-fit: contain;
}
.c-icon-cards--bg-dark .c-icon-card__icon,
.c-icon-cards--bg-brand .c-icon-card__icon,
.c-icon-cards--bg-image .c-icon-card__icon {
background: rgba(255,255,255,0.15);
color: #fff;
}
/* Content */
.c-icon-card__content { flex: 1; }
.c-icon-card__title {
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: var(--space-xs);
}
.c-icon-card__desc {
font-size: var(--text-base);
color: var(--color-neutral-600);
margin-bottom: var(--space-sm);
}
.c-icon-cards--bg-dark .c-icon-card__desc,
.c-icon-cards--bg-brand .c-icon-card__desc,
.c-icon-cards--bg-image .c-icon-card__desc { color: rgba(255,255,255,0.8); }
.c-icon-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-weight: 600;
color: var(--color-brand);
text-decoration: none;
transition: gap 0.2s ease;
}
.c-icon-card__link:hover { gap: var(--space-sm); }
.c-icon-card__link svg { width: 16px; height: 16px; }
.c-icon-cards--bg-dark .c-icon-card__link,
.c-icon-cards--bg-brand .c-icon-card__link,
.c-icon-cards--bg-image .c-icon-card__link { color: #fff; }
/* =================================================================
MAP EMBED
================================================================= */
.c-map { padding: var(--space-3xl) 0; position: relative; }
.c-map--bg-light { background: var(--color-bg-light); }
.c-map--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-map--bg-dark h2, .c-map--bg-dark h3, .c-map--bg-dark h4 { color: #fff; }
.c-map--bg-brand { background: var(--color-brand); color: #fff; }
.c-map--bg-brand h2, .c-map--bg-brand h3, .c-map--bg-brand h4 { color: #fff; }
.c-map__inner { position: relative; z-index: 1; }
.c-map__header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-2xl);
}
.c-map__header h2, .c-map__header h3, .c-map__header h4 {
font-size: var(--text-3xl);
margin-bottom: var(--space-md);
}
.c-map__header .subhead {
font-size: var(--text-lg);
color: var(--color-neutral-600);
}
.c-map--bg-dark .c-map__header .subhead,
.c-map--bg-brand .c-map__header .subhead,
.c-map--bg-image .c-map__header .subhead { color: rgba(255,255,255,0.8); }
.c-map__embed {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.c-map__embed iframe {
display: block;
width: 100%;
border: 0;
}
/* Height variants */
.c-map--h-small .c-map__embed iframe { height: 300px; }
.c-map--h-medium .c-map__embed iframe { height: 450px; }
.c-map--h-large .c-map__embed iframe { height: 600px; }
@media (max-width: 767px) {
.c-map--h-small .c-map__embed iframe { height: 250px; }
.c-map--h-medium .c-map__embed iframe { height: 350px; }
.c-map--h-large .c-map__embed iframe { height: 450px; }
}
/* =================================================================
CONTACT INFO BLOCK
================================================================= */
.c-contact-info { padding: var(--space-3xl) 0; position: relative; }
.c-contact-info--bg-light { background: var(--color-bg-light); }
.c-contact-info--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-contact-info--bg-dark h2, .c-contact-info--bg-dark h3, .c-contact-info--bg-dark h4 { color: #fff; }
.c-contact-info--bg-brand { background: var(--color-brand); color: #fff; }
.c-contact-info--bg-brand h2, .c-contact-info--bg-brand h3, .c-contact-info--bg-brand h4 { color: #fff; }
.c-contact-info__inner { position: relative; z-index: 1; }
.c-contact-info__header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--space-2xl);
}
.c-contact-info__header h2, .c-contact-info__header h3, .c-contact-info__header h4 {
font-size: var(--text-3xl);
margin-bottom: var(--space-md);
}
.c-contact-info__header .subhead {
font-size: var(--text-lg);
color: var(--color-neutral-600);
}
.c-contact-info--bg-dark .c-contact-info__header .subhead,
.c-contact-info--bg-brand .c-contact-info__header .subhead,
.c-contact-info--bg-image .c-contact-info__header .subhead { color: rgba(255,255,255,0.8); }
/* Items layout */
.c-contact-info__items {
display: flex;
flex-wrap: wrap;
gap: var(--space-xl);
}
/* Stacked layout (default) */
.c-contact-info--stacked .c-contact-info__items {
flex-direction: column;
align-items: center;
max-width: 500px;
margin: 0 auto;
}
.c-contact-info--stacked .c-contact-info__item {
text-align: center;
flex-direction: column;
}
.c-contact-info--stacked .c-contact-info__icon { margin-bottom: var(--space-sm); }
/* Inline layout */
.c-contact-info--inline .c-contact-info__items {
justify-content: center;
}
@media (max-width: 1024px) {
.c-contact-info--inline .c-contact-info__items {
flex-direction: column;
align-items: center;
}
}
/* Individual item */
.c-contact-info__item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.c-contact-info__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-brand);
border-radius: 50%;
color: #fff;
}
.c-contact-info__icon svg {
width: 22px;
height: 22px;
}
.c-contact-info--bg-dark .c-contact-info__icon,
.c-contact-info--bg-brand .c-contact-info__icon,
.c-contact-info--bg-image .c-contact-info__icon {
background: rgba(255,255,255,0.2);
}
.c-contact-info__content { flex: 1; }
.c-contact-info__label {
font-size: var(--text-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-neutral-500);
margin-bottom: var(--space-xs);
}
.c-contact-info--bg-dark .c-contact-info__label,
.c-contact-info--bg-brand .c-contact-info__label,
.c-contact-info--bg-image .c-contact-info__label { color: rgba(255,255,255,0.6); }
.c-contact-info__value {
font-size: var(--text-lg);
color: var(--color-neutral-800);
}
.c-contact-info--bg-dark .c-contact-info__value,
.c-contact-info--bg-brand .c-contact-info__value,
.c-contact-info--bg-image .c-contact-info__value { color: #fff; }
.c-contact-info__link {
color: var(--color-brand);
text-decoration: none;
transition: color 0.2s ease;
}
.c-contact-info__link:hover {
text-decoration: underline;
}
.c-contact-info--bg-dark .c-contact-info__link,
.c-contact-info--bg-brand .c-contact-info__link,
.c-contact-info--bg-image .c-contact-info__link { color: #fff; }
.c-contact-info__empty {
text-align: center;
color: var(--color-neutral-500);
font-style: italic;
}
/* =================================================================
ARCHIVE
================================================================= */
.archive-page { padding: var(--space-3xl) 0; }
.archive-page__header {
margin-bottom: var(--space-2xl);
}
.archive-page__title {
font-size: var(--text-4xl);
margin-bottom: var(--space-sm);
}
.archive-page__description {
font-size: var(--text-lg);
color: var(--color-neutral-600);
max-width: 700px;
}
.archive-page__description p:last-child { margin-bottom: 0; }
/* Archive grid */
.archive-page__grid {
display: grid;
gap: var(--space-xl);
}
.archive-page--grid.archive-page--cols-2 .archive-page__grid {
grid-template-columns: repeat(2, 1fr);
}
.archive-page--grid.archive-page--cols-3 .archive-page__grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.archive-page--grid.archive-page--cols-3 .archive-page__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.archive-page__grid { grid-template-columns: 1fr !important; }
}
/* List layout */
.archive-page--list .archive-page__grid {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.archive-page--list .archive-card {
flex-direction: row;
align-items: flex-start;
}
.archive-page--list .archive-card__image {
width: 280px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.archive-page--list .archive-card {
flex-direction: column;
}
.archive-page--list .archive-card__image {
width: 100%;
}
}
/* Archive card */
.archive-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.archive-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.archive-card__image {
display: block;
overflow: hidden;
}
.archive-card__image img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
transition: transform 0.3s ease;
}
.archive-card:hover .archive-card__image img {
transform: scale(1.03);
}
.archive-card__content {
padding: var(--space-lg);
flex: 1;
display: flex;
flex-direction: column;
}
.archive-card__header { margin-bottom: var(--space-sm); }
.archive-card__title {
font-size: var(--text-xl);
line-height: var(--leading-tight);
margin-bottom: var(--space-xs);
}
.archive-card__title a {
color: inherit;
text-decoration: none;
}
.archive-card__title a:hover {
color: var(--color-brand);
}
.archive-card__meta {
font-size: var(--text-sm);
color: var(--color-neutral-500);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.archive-card__sep { opacity: 0.5; }
.archive-card__excerpt {
color: var(--color-neutral-600);
flex: 1;
}
.archive-card__excerpt p { margin: 0; }
/* Empty state */
.archive-page__empty {
text-align: center;
padding: var(--space-3xl) var(--space-xl);
color: var(--color-neutral-500);
}
/* Pagination */
.pagination {
margin-top: var(--space-2xl);
display: flex;
justify-content: center;
}
.pagination__list {
display: flex;
gap: var(--space-xs);
list-style: none;
padding: 0;
margin: 0;
}
.pagination__item a,
.pagination__item span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-sm);
border-radius: var(--radius);
text-decoration: none;
font-weight: 500;
transition: background 0.2s ease, color 0.2s ease;
}
.pagination__item a {
color: var(--color-neutral-700);
background: var(--color-neutral-100);
}
.pagination__item a:hover {
background: var(--color-brand);
color: #fff;
}
.pagination__item--current span {
background: var(--color-brand);
color: #fff;
}
/* =================================================================
SINGLE POST
================================================================= */
.single-page { padding: var(--space-3xl) 0; }
/* Post article */
.single-post { margin-bottom: var(--space-2xl); }
.single-post__header {
margin-bottom: var(--space-xl);
}
.single-post__title {
font-size: var(--text-4xl);
line-height: var(--leading-tight);
margin-bottom: var(--space-sm);
}
.single-post__meta {
font-size: var(--text-sm);
color: var(--color-neutral-500);
}
.single-post__image {
margin-bottom: var(--space-xl);
border-radius: var(--radius);
overflow: hidden;
}
.single-post__image img {
width: 100%;
height: auto;
}
.single-post__content {
margin-bottom: var(--space-xl);
}
.single-post__footer {
padding-top: var(--space-lg);
border-top: 1px solid var(--color-neutral-200);
}
.single-post__taxonomies {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
align-items: center;
margin-bottom: var(--space-sm);
}
.single-post__taxonomies:last-child { margin-bottom: 0; }
.single-post__tax-label {
font-weight: 600;
color: var(--color-neutral-600);
margin-right: var(--space-xs);
}
.single-post__taxonomies a {
color: var(--color-brand);
text-decoration: none;
}
.single-post__taxonomies a:hover {
text-decoration: underline;
}
/* Author box */
.author-box {
display: flex;
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--color-neutral-50);
border-radius: var(--radius);
margin-bottom: var(--space-2xl);
}
@media (max-width: 600px) {
.author-box {
flex-direction: column;
text-align: center;
}
}
.author-box__avatar { flex-shrink: 0; }
.author-box__img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.author-box__content { flex: 1; }
.author-box__name {
font-size: var(--text-lg);
margin-bottom: var(--space-xs);
}
.author-box__name a {
color: inherit;
text-decoration: none;
}
.author-box__name a:hover {
color: var(--color-brand);
}
.author-box__bio {
color: var(--color-neutral-600);
margin-bottom: var(--space-sm);
}
.author-box__bio p:last-child { margin-bottom: 0; }
.author-box__link {
color: var(--color-brand);
text-decoration: none;
font-weight: 500;
}
.author-box__link:hover {
text-decoration: underline;
}
/* Related posts */
.related-posts {
margin-bottom: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-neutral-200);
}
.related-posts__title {
font-size: var(--text-2xl);
margin-bottom: var(--space-lg);
}
.related-posts__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
@media (max-width: 767px) {
.related-posts__grid {
grid-template-columns: 1fr;
}
}
.related-posts__item {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.related-posts__image {
display: block;
overflow: hidden;
}
.related-posts__image img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
transition: transform 0.3s ease;
}
.related-posts__item:hover .related-posts__image img {
transform: scale(1.03);
}
.related-posts__item-title {
font-size: var(--text-base);
padding: var(--space-md);
padding-bottom: var(--space-xs);
}
.related-posts__item-title a {
color: inherit;
text-decoration: none;
}
.related-posts__item-title a:hover {
color: var(--color-brand);
}
.related-posts__date {
display: block;
padding: 0 var(--space-md) var(--space-md);
font-size: var(--text-sm);
color: var(--color-neutral-500);
}
/* Post navigation */
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
padding-top: var(--space-xl);
border-top: 1px solid var(--color-neutral-200);
}
@media (max-width: 600px) {
.post-nav {
grid-template-columns: 1fr;
}
}
.post-nav__link {
display: flex;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-lg);
background: var(--color-neutral-50);
border-radius: var(--radius);
text-decoration: none;
transition: background 0.2s ease;
}
.post-nav__link:hover {
background: var(--color-neutral-100);
}
.post-nav__link--empty {
opacity: 0;
pointer-events: none;
}
.post-nav__link--next {
text-align: right;
}
.post-nav__label {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-neutral-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.post-nav__link--next .post-nav__label {
justify-content: flex-end;
}
.post-nav__label svg {
width: 16px;
height: 16px;
}
.post-nav__title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-neutral-800);
line-height: var(--leading-tight);
}
/* Search form */
.search-form-wrap {
margin-bottom: var(--space-2xl);
}
.search-form {
display: flex;
gap: var(--space-sm);
max-width: 500px;
}
.search-form label {
flex: 1;
}
.search-form .search-field {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius);
font-size: var(--text-base);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-form .search-field:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-form .search-submit {
padding: var(--space-sm) var(--space-lg);
background: var(--color-brand);
color: #fff;
border: none;
border-radius: var(--radius);
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.search-form .search-submit:hover {
background: var(--color-brand-dark);
}
/* =================================================================
404 PAGE
================================================================= */
.error-404 {
padding: var(--space-3xl) 0;
min-height: 60vh;
display: flex;
align-items: center;
text-align: center;
background: none;
}
.error-404 .container { width: 100%; max-width: 600px; }
.error-404__code {
font-family: var(--font-heading);
font-size: clamp(6rem, 20vw, 12rem);
font-weight: 700;
line-height: 1;
color: var(--color-primary-400);
margin-bottom: var(--space-md);
}
.error-404 h1 {
font-size: var(--text-3xl);
color: var(--color-neutral-800);
margin-bottom: var(--space-md);
}
.error-404__content {
color: var(--color-neutral-600);
margin-bottom: var(--space-xl);
}
.error-404__content p { margin-bottom: var(--space-md); }
.error-404__content p:last-child { margin-bottom: 0; }
.error-404__actions {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.page-content { padding: var(--space-3xl) 0; }
.page-content h1 { margin-bottom: var(--space-xl); }
/* =================================================================
PRINT STYLES
================================================================= */
@media print {
/* Page setup */
@page {
margin: 0.75in;
size: letter;
}
/* Reset colors for print */
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Typography adjustments */
body {
font-size: 12pt;
line-height: 1.5;
}
h1 { font-size: 24pt; }
h2 { font-size: 20pt; }
h3 { font-size: 16pt; }
h4, h5, h6 { font-size: 14pt; }
/* Hide non-printable elements */
.site-header,
.site-footer,
.site-nav,
.mobile-nav-toggle,
.skip-link,
.c-sticky-cta,
.btn,
.btn--primary,
.btn--secondary,
.c-hero__buttons,
.c-cta__buttons,
.c-content-media__buttons,
.c-cards .c-card__link,
.search-form,
.post-nav,
.pagination,
.gform_wrapper,
.c-form-section,
.global-cta,
video,
iframe,
.c-gallery[data-layout="carousel"],
.c-testimonials__nav,
.c-testimonials__dots,
noscript {
display: none !important;
}
/* Show main content area */
.site-main,
main {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Container adjustments */
.container {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Component spacing for print */
.component {
padding: 0.5in 0 !important;
margin: 0 !important;
page-break-inside: avoid;
}
/* Hero - simplified */
.c-hero {
min-height: auto !important;
height: auto !important;
padding: 0.25in 0 !important;
background: none !important;
}
.c-hero::before { display: none !important; }
.c-hero__content {
position: static !important;
transform: none !important;
}
.c-hero__eyebrow { color: #666 !important; }
.c-hero__headline { font-size: 28pt !important; }
/* Content + Media - stack vertically */
.c-content-media__inner {
display: block !important;
}
.c-content-media__media {
max-width: 100% !important;
margin-bottom: 0.25in !important;
}
.c-content-media__media img {
max-width: 4in !important;
height: auto !important;
}
/* Cards - grid for print */
.c-cards__grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.25in !important;
}
.c-card {
border: 1px solid #ccc !important;
padding: 0.15in !important;
page-break-inside: avoid;
}
.c-card__image {
max-height: 1.5in !important;
overflow: hidden;
}
/* Testimonials - show all */
.c-testimonials__slider {
display: block !important;
overflow: visible !important;
}
.c-testimonials__slider .c-testimonial {
display: block !important;
width: 100% !important;
margin-bottom: 0.25in !important;
border: 1px solid #ccc !important;
padding: 0.15in !important;
page-break-inside: avoid;
}
.c-testimonials__slider .c-testimonial[hidden] {
display: block !important;
}
/* Accordion - expand all for print */
.c-accordion__content {
display: block !important;
max-height: none !important;
overflow: visible !important;
padding: 0.1in 0 !important;
}
.c-accordion__item {
border: 1px solid #ccc !important;
margin-bottom: 0.1in !important;
padding: 0.1in !important;
page-break-inside: avoid;
}
.c-accordion__icon { display: none !important; }
/* Stats */
.c-stats__grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.25in !important;
}
.c-stat {
flex: 1 1 30% !important;
text-align: center;
}
/* Logo grid */
.c-logos__grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.15in !important;
}
.c-logos__item {
width: 1in !important;
filter: none !important;
}
.c-logos__item img {
max-width: 100% !important;
max-height: 0.75in !important;
}
/* Gallery - grid only */
.c-gallery__grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.1in !important;
}
.c-gallery__item img {
max-height: 1.5in !important;
}
/* Icon cards */
.c-icon-cards__grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.2in !important;
}
.c-icon-card {
border: 1px solid #ccc !important;
padding: 0.1in !important;
page-break-inside: avoid;
}
/* Contact info */
.c-contact-info__items {
display: block !important;
}
.c-contact-info__item {
margin-bottom: 0.1in !important;
}
/* Map - show placeholder text */
.c-map__embed {
border: 1px solid #ccc !important;
padding: 0.25in !important;
text-align: center;
}
.c-map__embed::after {
content: "[Map - See website for interactive version]";
display: block;
font-style: italic;
color: #666 !important;
}
/* Images */
img {
max-width: 100% !important;
height: auto !important;
page-break-inside: avoid;
}
/* Links - show URLs */
a[href^="http"]:after,
a[href^="https"]:after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #666 !important;
word-break: break-all;
}
/* Don't show URL for buttons or images */
a.btn:after,
a.c-card:after,
a > img:after,
.c-logos__item a:after {
content: none !important;
}
/* Page break hints */
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
page-break-inside: avoid;
}
p, blockquote, ul, ol, dl, table, figure {
page-break-inside: avoid;
}
/* Orphan/widow control */
p {
orphans: 3;
widows: 3;
}
/* Archive/blog posts */
.archive-page__grid {
display: block !important;
}
.archive-card {
display: flex !important;
gap: 0.2in !important;
border-bottom: 1px solid #ccc !important;
padding: 0.15in 0 !important;
page-break-inside: avoid;
}
.archive-card__image {
width: 1.5in !important;
flex-shrink: 0;
}
/* Single post */
.single-post__featured {
max-height: 3in !important;
overflow: hidden;
}
.author-box {
border: 1px solid #ccc !important;
padding: 0.15in !important;
margin: 0.25in 0 !important;
}
/* Prose content */
.prose {
max-width: 100% !important;
}
.prose a:after {
content: none !important; /* Too noisy in body text */
}
/* CTA section - text only */
.c-cta {
border: 2px solid #000 !important;
padding: 0.25in !important;
text-align: center;
}
/* Background sections - add border for visual separation */
.bg--dark,
.bg--brand,
.bg--light {
border: 1px solid #ccc !important;
padding: 0.2in !important;
margin: 0.1in 0 !important;
}
}
/* =================================================================
PLF ART SERVICES — FIGMA HOMEPAGE COMPONENTS
C01 Hero / home · C15 Proof Strip · C03 Service Card Grid ·
C02 Text + Image · C06 Image Gallery / grid · C05 Pull Quote ·
C14 Service Areas Block
================================================================= */
/* Shared type helpers */
.t-4xl {
font-family: var(--heading-font-family);
font-size: var(--text-4xl);
line-height: var(--leading-4xl);
letter-spacing: var(--tracking-4xl);
font-weight: var(--weight-heavy);
}
.t-base { font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); }
/* ----------------------- C01 STANDARD HERO / home ----------------------- */
.c-hero--home {
display: block;
min-height: 0;
padding: 96px 0 112px;
background: #fff;
color: var(--color-neutral-900);
overflow: visible;
}
.c-hero--home .c-hero__inner {
display: flex;
align-items: center;
gap: 64px;
}
.c-hero--home .c-hero__content {
flex: 0 0 637px;
max-width: 637px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.c-hero--home .c-hero__titles { display: flex; flex-direction: column; width: 100%; }
.c-hero--home .c-hero__headline {
margin: 0;
font-family: var(--heading-font-family);
font-size: var(--text-5xl);
line-height: var(--leading-5xl);
font-weight: var(--weight-heavy);
color: var(--color-primary-500);
overflow-wrap: normal;
}
.c-hero--home .c-hero__subtitle {
margin: 0;
font-family: var(--heading-font-family);
font-size: var(--text-3xl);
line-height: var(--leading-3xl);
font-weight: var(--weight-heavy);
color: var(--color-neutral-900);
white-space: nowrap;
}
.c-hero__chips { display: flex; flex-wrap: wrap; gap: 16px; }
.btn--chip {
padding: 12px 18px;
gap: 8px;
background: var(--color-secondary-50);
color: var(--color-secondary-500);
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
border-radius: var(--radius-pill);
min-height: 0;
}
.btn--chip:hover,
.btn--chip:focus-visible { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.btn--chip svg { width: 18px; height: 18px; }
.btn--chip img { width: 18px; height: 18px; object-fit: contain; }
.c-hero--home .c-hero__text { width: 100%; }
.c-hero--home .c-hero__text p { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); }
.c-hero--home .c-hero__text p + p { margin-top: 16px; }
.c-hero--home .c-hero__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.c-hero--home .c-hero__media {
position: relative;
flex: 0 0 499px;
width: 499px;
height: 520px;
}
.c-hero__dot {
position: absolute;
left: 411px;
top: -24px;
width: 112px;
height: 112px;
border-radius: 50%;
background: var(--color-primary-400);
opacity: 0.9;
}
.c-hero__slideshow {
position: absolute;
inset: 0;
border-radius: 16px;
overflow: hidden;
background: var(--color-neutral-50);
}
.c-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 400ms ease;
}
.c-hero__slide.is-active { opacity: 1; }
.c-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 0; }
.c-hero__arc {
position: absolute;
left: -48px;
top: 479px;
width: 95.27px;
height: 69.39px;
color: var(--color-secondary-400);
}
.c-hero__arc svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1280px) {
.c-hero--home .c-hero__inner { gap: 40px; }
.c-hero--home .c-hero__content { flex-basis: 0; flex-grow: 1; max-width: none; }
.c-hero--home .c-hero__media { flex-basis: 420px; width: 420px; height: 438px; }
.c-hero__dot { left: 340px; }
.c-hero__arc { top: 400px; }
.c-hero--home .c-hero__subtitle { white-space: normal; }
}
@media (max-width: 1024px) {
.c-hero--home { padding: var(--section-y) 0; }
.c-hero--home .c-hero__inner { flex-direction: column; align-items: flex-start; gap: 56px; }
.c-hero--home .c-hero__media { flex-basis: auto; width: 100%; max-width: 499px; height: auto; aspect-ratio: 499 / 520; margin-left: 48px; }
.c-hero__dot { left: auto; right: -24px; width: 90px; height: 90px; }
.c-hero__arc { top: auto; bottom: -26px; }
}
@media (max-width: 767px) {
.c-hero--home .c-hero__media { margin-left: 24px; max-width: calc(100% - 24px); }
.c-hero__arc { left: -24px; width: 60px; height: 44px; bottom: -14px; }
.c-hero__dot { width: 64px; height: 64px; top: -16px; right: -12px; }
}
/* ----------------------- C15 PROOF STRIP ----------------------- */
.c-proof { background: #fff; }
.c-proof__strip {
position: relative;
height: 233px;
border-radius: 16px;
background: var(--gradient-purple);
color: #fff;
}
.c-proof__copy {
position: absolute;
left: 40px;
top: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.c-proof__stars { display: flex; gap: 4px; color: var(--color-primary-300); }
.c-proof__stars svg { width: 37px; height: 38px; }
.c-proof__eyebrow {
margin: 0;
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-roman);
color: var(--color-secondary-100);
white-space: nowrap;
}
.c-proof__headline {
margin: 0;
font-family: var(--heading-font-family);
font-size: var(--text-3xl);
line-height: var(--leading-3xl);
font-weight: var(--weight-heavy);
color: var(--color-neutral-50);
white-space: nowrap;
}
.c-proof__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 8px;
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-roman);
color: var(--color-secondary-100);
text-decoration: none;
white-space: nowrap;
transition: color var(--transition);
}
.c-proof__link:hover,
.c-proof__link:focus-visible { color: #fff; }
.c-proof__link svg { width: 16px; height: 16px; }
.c-proof__cutout {
position: absolute;
left: 294.6px;
bottom: 0;
height: 312.93px;
width: auto;
max-width: none;
pointer-events: none;
}
.c-proof__badges {
position: absolute;
left: 705px;
top: 24px;
width: 459px;
display: flex;
flex-direction: column;
gap: 12px;
}
.c-proof__badge {
display: flex;
align-items: center;
gap: 12px;
padding: 7px 18px 7px 10px;
border-radius: var(--radius-pill);
background: var(--color-secondary-700);
color: #fff;
font-size: 20px;
line-height: 1.5;
font-weight: var(--weight-heavy);
text-decoration: none;
white-space: nowrap;
}
a.c-proof__badge:hover,
a.c-proof__badge:focus-visible { background: var(--color-secondary-800); }
.c-proof__badge-logo {
flex: 0 0 40px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-neutral-50);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.c-proof__badge-logo img { width: var(--logo-size, 29px); height: var(--logo-size, 29px); object-fit: cover; }
@media (max-width: 1280px) {
.c-proof__strip { height: auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 32px 40px; }
.c-proof__copy, .c-proof__badges { position: static; width: auto; }
.c-proof__cutout { display: none; }
}
@media (max-width: 767px) {
.c-proof__strip { grid-template-columns: 1fr; padding: 24px 20px; }
.c-proof__badge { font-size: 16px; white-space: normal; }
.c-proof__eyebrow, .c-proof__headline, .c-proof__link { white-space: normal; }
}
/* ----------------------- C03 SERVICE CARD GRID ----------------------- */
.c-services { padding: var(--section-y) 0; background: #fff; }
.c-services__inner { display: flex; flex-direction: column; gap: 24px; }
.c-services__headline { margin: 0; color: var(--color-secondary-400); }
.c-services__cards { display: flex; gap: 64px; align-items: stretch; }
.c-service-card {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
--card-gradient: var(--gradient-green);
--card-icon-bg: var(--color-primary-400);
--card-body-bg: var(--color-primary-50);
--card-border: var(--color-primary-400);
--card-rule: var(--color-primary-100);
}
.c-service-card--purple {
--card-gradient: var(--gradient-purple);
--card-icon-bg: var(--color-secondary-300);
--card-body-bg: var(--color-secondary-50);
--card-border: var(--color-secondary-400);
--card-rule: var(--color-secondary-100);
}
.c-service-card__head {
position: relative;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 16px;
overflow: hidden;
background: var(--card-gradient);
color: #fff;
text-decoration: none;
}
.c-service-card__texture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: soft-light;
opacity: 0.15;
pointer-events: none;
}
.c-service-card__icon {
position: relative;
flex: 0 0 80px;
width: 80px;
height: 81px;
border-radius: 12px;
background: var(--card-icon-bg);
display: flex;
align-items: center;
justify-content: center;
}
.c-service-card__icon svg { width: 56px; height: 56px; }
.c-service-card__icon img { width: 56px; height: 56px; object-fit: contain; }
.c-service-card__title {
position: relative;
margin: 0;
font-family: var(--heading-font-family);
font-size: var(--text-3xl);
line-height: var(--leading-3xl);
font-weight: var(--weight-heavy);
color: #fff;
white-space: nowrap;
}
.c-service-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 32px 20px;
border-radius: 16px;
background: var(--card-body-bg);
border: 2px solid var(--card-border);
}
.c-service-card__desc { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); color: var(--color-neutral-900); }
.c-service-card__desc p { margin: 0; }
.c-service-card__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.c-service-card__link {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 0;
border-bottom: 1px solid var(--card-rule);
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
color: var(--color-neutral-900);
text-decoration: none;
transition: color var(--transition);
}
.c-service-card__links li:last-child .c-service-card__link { border-bottom: 0; padding-bottom: 0; }
.c-service-card__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
.c-service-card__link:hover,
.c-service-card__link:focus-visible { color: var(--color-secondary-500); }
.c-service-card__link:hover svg { transform: translateX(4px); }
@media (max-width: 1280px) {
.c-services__cards { gap: 32px; }
.c-service-card__title { white-space: normal; }
}
@media (max-width: 900px) {
.c-services__cards { flex-direction: column; }
}
/* ----------------------- C02 TEXT + IMAGE ----------------------- */
.c-content-media {
padding: var(--section-y) 0;
background: #fff;
color: var(--color-neutral-900);
overflow: visible;
}
.c-content-media__inner { display: flex; align-items: center; gap: 80px; }
.c-content-media__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.c-content-media__headline { margin: 0; color: var(--color-secondary-400); }
.c-content-media__text { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.c-content-media__text p { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); }
.c-content-media__text ul, .c-content-media__text ol { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); }
.c-content-media__buttons { display: flex; flex-wrap: wrap; gap: 16px; }
.c-content-media--media-left .c-content-media__media { order: -1; }
/* Single image */
.c-content-media__media { flex: 0 0 560px; max-width: 560px; }
.c-content-media__media > img { width: 100%; height: auto; border-radius: 16px; }
.c-content-media__embed { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; }
.c-content-media__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Image pair (printed piece + photograph, with dot + arc) */
.c-content-media__pair { position: relative; width: 560px; height: 618px; flex: 0 0 560px; }
.c-content-media__dot {
position: absolute;
left: 493.77px;
top: 430.01px;
width: 84.757px;
height: 84.757px;
border-radius: 50%;
background: var(--color-primary-400);
opacity: 0.9;
}
.c-content-media__print,
.c-content-media__photo {
position: absolute;
width: 350px;
height: 527px;
border-radius: 12.108px;
border: 0.757px solid var(--color-neutral-100);
background: var(--color-neutral-50);
overflow: hidden;
}
.c-content-media__print { left: 210px; top: 0.14px; }
.c-content-media__photo { left: 0; top: 91.42px; box-shadow: var(--shadow-lg); }
.c-content-media__print img,
.c-content-media__photo img { width: 100%; height: 100%; object-fit: cover; }
.c-content-media__arc {
position: absolute;
left: 152.86px;
top: 58.74px;
width: 72.094px;
height: 52.508px;
color: var(--color-secondary-400);
}
.c-content-media__arc svg { width: 100%; height: 100%; display: block; }
/* Vertical clip (social reel) — overhangs the section by 20.82px top and bottom */
.c-content-media__clip { position: relative; flex: 0 0 352px; width: 352px; height: 352px; }
.c-content-media__clip-media {
position: absolute;
left: 0;
top: -116.82px;
width: 329.549px;
height: 585.635px;
border-radius: 16px;
overflow: hidden;
background: var(--color-neutral-900);
z-index: 2;
}
.c-content-media__clip-media img,
.c-content-media__clip-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Backgrounds */
.c-content-media--bg-light { background: var(--color-primary-50); }
.c-content-media--bg-dark { background: var(--color-neutral-900); color: #fff; }
.c-content-media--bg-dark .c-content-media__headline { color: #fff; }
.c-content-media--bg-brand { background: var(--gradient-purple); color: #fff; }
.c-content-media--bg-brand .c-content-media__headline { color: #fff; }
.c-content-media--bg-brand .c-content-media__text a { color: var(--color-secondary-100); }
@media (max-width: 1280px) {
.c-content-media__inner { gap: 48px; }
.c-content-media__pair { transform: scale(0.8); transform-origin: right center; margin-left: -112px; }
.c-content-media--media-left .c-content-media__pair { transform-origin: left center; margin-left: 0; margin-right: -112px; }
}
@media (max-width: 1024px) {
.c-content-media__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
.c-content-media__pair { transform: none; margin: 0; width: 100%; max-width: 560px; height: auto; aspect-ratio: 560 / 618; }
.c-content-media__print, .c-content-media__photo { width: 62.5%; height: 85.3%; }
.c-content-media__print { left: 37.5%; }
.c-content-media__photo { top: 14.8%; }
.c-content-media__dot { left: auto; right: -3%; top: 69.6%; }
.c-content-media__arc { left: 27.3%; top: 9.5%; }
.c-content-media__media { flex-basis: auto; width: 100%; }
.c-content-media__clip { width: 100%; max-width: 352px; height: auto; }
.c-content-media__clip-media { position: relative; top: 0; width: 100%; height: auto; aspect-ratio: 329.549 / 585.635; }
.c-content-media--media-left .c-content-media__media,
.c-content-media--media-left .c-content-media__clip,
.c-content-media--media-left .c-content-media__pair { order: 0; }
}
/* ----------------------- C06 IMAGE GALLERY / grid ----------------------- */
.c-image-grid { padding: var(--section-y) 0; background: var(--color-primary-50); }
.c-image-grid__inner { display: flex; flex-direction: column; gap: 40px; }
.c-image-grid__headline { margin: 0; color: var(--color-neutral-900); }
.c-image-grid__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.c-image-grid__item {
position: relative;
margin: 0;
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
height: auto;
min-height:280px;
aspect-ratio:1;
padding: 20px;
border: 1px solid var(--color-neutral-100);
border-radius: 16px;
background: #fff;
overflow: hidden;
text-decoration: none;
}
.c-image-grid__item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 400ms ease;
}
a.c-image-grid__item:hover img { transform: scale(1.03); }
.c-image-grid__label {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 6px;
background: var(--color-secondary-700);
color: #fff;
font-size: var(--text-xs);
line-height: var(--leading-xs);
font-weight: var(--weight-medium);
text-transform: uppercase;
text-align: right;
white-space: nowrap;
}
@media (max-width: 1024px) {
.c-image-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 600px) {
.c-image-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.c-image-grid__item { height: auto; aspect-ratio: 373 / 284; padding: 10px; border-radius: 12px; }
.c-image-grid__label { font-size: 10px; line-height: 14px; padding: 3px 8px; }
}
/* ----------------------- C05 PULL QUOTE ----------------------- */
.c-pull-quote {
padding: var(--section-y) 0;
background: var(--color-secondary-50);
border-top: 1px solid var(--color-secondary-100);
border-bottom: 1px solid var(--color-secondary-100);
}
.c-pull-quote__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.c-pull-quote__mark { width: 56px; height: 6px; border-radius: 3px; background: var(--color-secondary-400); }
.c-pull-quote__slides { width: 100%; }
.c-pull-quote__slide { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.c-pull-quote__slide[hidden] { display: none; }
.c-pull-quote__quote {
margin: 0;
max-width: 960px;
font-family: var(--body-font-family);
font-size: var(--text-large-quote);
line-height: var(--leading-large-quote);
letter-spacing: var(--tracking-large-quote);
font-weight: var(--weight-medium);
color: var(--color-secondary-900);
}
.c-pull-quote__quote p { margin: 0; }
.c-pull-quote__author {
margin: 0;
font-style: normal;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
color: var(--color-secondary-700);
}
.c-pull-quote__nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.c-pull-quote__dots { display: flex; align-items: center; gap: 12px; }
.c-pull-quote__dot {
width: 25.765px;
height: 6px;
padding: 0;
border: 0;
border-radius: 3px;
background: #CCBDD6;
cursor: pointer;
transition: width var(--transition), background var(--transition);
}
.c-pull-quote__dot.is-active { width: 51.53px; background: var(--color-secondary-400); }
.c-pull-quote__arrows { display: flex; align-items: center; gap: 24px; height: 40px; }
.c-pull-quote__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 35px;
padding: 0;
border: 0;
background: none;
color: var(--color-secondary-300);
cursor: pointer;
transition: color var(--transition);
}
.c-pull-quote__arrow svg { width: 25.5px; height: 35.765px; overflow: visible; }
.c-pull-quote__arrow:hover,
.c-pull-quote__arrow:focus-visible { color: var(--color-secondary-500); }
/* ----------------------- C14 SERVICE AREAS BLOCK ----------------------- */
.c-service-areas { padding: var(--section-y) 0; background: #fff; }
.c-service-areas__panel {
display: flex;
flex-direction: column;
gap: 64px;
padding: 96px 60px;
border-radius: var(--radius-lg);
background: var(--gradient-purple);
color: var(--color-neutral-50);
}
.c-service-areas__head { display: flex; align-items: flex-start; gap: 64px; }
.c-service-areas__headline { flex: 1 1 0; min-width: 0; margin: 0; color: var(--color-neutral-50); }
.c-service-areas__intro { flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); }
.c-service-areas__intro p { margin: 0; }
.c-service-areas__list { display: flex; gap: 40px; margin: 0; padding: 0; list-style: none; }
.c-service-areas__list li { flex: 1 1 0; min-width: 0; }
.c-service-areas__area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var(--color-secondary-200);
font-family: var(--heading-font-family);
font-size: var(--text-2xl);
line-height: var(--leading-2xl);
font-weight: var(--weight-heavy);
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.c-service-areas__area svg { width: 24px; height: 24px; color: var(--color-secondary-200); transition: transform var(--transition), color var(--transition); }
a.c-service-areas__area:hover svg,
a.c-service-areas__area:focus-visible svg { transform: translateX(4px); color: #fff; }
.c-service-areas__note {
margin: 0;
max-width: 760px;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
color: var(--color-secondary-100);
}
@media (max-width: 1024px) {
.c-service-areas__panel { padding: 56px 40px; gap: 40px; }
.c-service-areas__head { flex-direction: column; gap: 24px; }
.c-service-areas__list { flex-wrap: wrap; gap: 24px; }
.c-service-areas__list li { flex-basis: calc(50% - 12px); }
}
@media (max-width: 600px) {
.c-service-areas__panel { padding: 40px 24px; border-radius: 20px; }
.c-service-areas__list li { flex-basis: 100%; }
}
/* Reduced motion: no slideshow fade */
@media (prefers-reduced-motion: reduce) {
.c-hero__slide { transition: none; }
}
/* ----------------------- PLF fixes: list/figure/button resets ----------------------- */
.c-hero__chips,
.c-proof__badges,
.c-service-card__links,
.c-service-areas__list { list-style: none; margin: 0; padding: 0; }
.c-hero__chips li,
.c-proof__badges li { margin: 0; padding: 0; }
.c-hero__slide,
.c-pull-quote__slide,
.c-content-media__print,
.c-content-media__photo { margin: 0; }
.c-hero__slide img {
/* position: absolute;
top: -5%;
left: -15.62%;
width: 131.24%;
height: 109.33%; */
/* max-width: none;
object-fit: fill;
object-fit:cover; */
}
.c-pull-quote__dot,
.c-pull-quote__arrow { min-height: 0; min-width: 0; }
.c-pull-quote__dot { height: 6px; }
/* Imagify wraps ![]()
in and moves the class onto the wrapper */
picture.c-proof__cutout { display: block; line-height: 0; }
.c-proof__cutout img { height: 312.93px; width: auto; max-width: none; }
picture.c-service-card__texture,
.c-service-card__texture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
picture.c-service-card__texture img { mix-blend-mode: normal; opacity: 1; }
.c-hero__slide picture,
.c-content-media__print picture,
.c-content-media__photo picture,
.c-image-grid__item picture { position: absolute; inset: 0; display: block; }
.c-proof__badge-logo picture,
.btn--chip picture,
.c-service-card__icon picture { display: flex; align-items: center; justify-content: center; }
.c-proof__cutout img { width: 366.41px; height: 312.93px; object-fit: cover; object-position: center; }
@media (min-width: 1281px) {
.c-hero__chips { flex-wrap: nowrap; }
}
/* Footer rule spans the 1200px content column, not the gutters */
.site-footer__inner {
border-bottom: 0;
background: linear-gradient(var(--color-neutral-700), var(--color-neutral-700)) center bottom / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
/* Off-canvas nav must not create horizontal scroll (clip keeps sticky header working) */
html, body { overflow-x: clip; }
/* Minimal hero (interior placeholder pages) */
.c-hero--minimal { min-height: 0; padding: 64px 0 40px; background: #fff; color: var(--color-neutral-900); border-bottom: 1px solid var(--color-neutral-100); }
.c-hero--minimal .c-hero__headline { color: var(--color-secondary-400); margin: 0; }
.c-hero--minimal .breadcrumbs { margin-bottom: var(--space-md); font-size: var(--text-sm); }
/* ----------------------- Round 2 fixes ----------------------- */
/* C02 clip / image pair honour media-left; clip overhang paints above the next section */
.c-content-media--media-left .c-content-media__clip,
.c-content-media--media-left .c-content-media__pair { order: -1; }
.c-content-media--clip { position: relative; z-index: 3; }
/* Header: logo shrinks smoothly on scroll (both directions) */
.site-header__inner { transition: padding 320ms cubic-bezier(.4,0,.2,1); }
.site-header__logo img { transition: width 320ms cubic-bezier(.4,0,.2,1); will-change: width; }
@media (min-width: 782px) {
body.scrolled .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
body.scrolled .site-header__logo img { width: 128px; }
}
/* C15 Proof Strip: match Figma text boxes (fixed heights, line boxes overflow) */
.c-proof__copy { top: 24px; }
.c-proof__stars { height: 38px; }
.c-proof__eyebrow { height: 30.393px; line-height: 36px; }
.c-proof__headline { height: 46.162px; line-height: 60px; }
.c-proof__link { height: 35px; padding-top: 8px; line-height: 36px; }
.c-proof__badge > span:last-child { line-height: 30px; }
/* C01 chips: 44.16px tall in Figma (text box 20.156px) */
.btn--chip > span:last-child { display: block; height: 20.156px; line-height: 24px; }
.btn__icon { display: flex; align-items: center; }
.btn--chip .btn__icon { height: 18px; }
/* C03 service card head: hover / focus state when it links to the hub page */
a.c-service-card__head {
transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms cubic-bezier(.4,0,.2,1);
}
a.c-service-card__head::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0);
transition: background 240ms ease;
pointer-events: none;
}
a.c-service-card__head .c-service-card__texture { transition: opacity 240ms ease; }
a.c-service-card__head .c-service-card__icon {
transition: background 240ms ease, transform 240ms cubic-bezier(.4,0,.2,1);
}
a.c-service-card__head .c-service-card__icon svg { transition: transform 240ms cubic-bezier(.4,0,.2,1); }
a.c-service-card__head:hover,
a.c-service-card__head:focus-visible {
transform: translateY(-3px);
box-shadow: 0 14px 28px -10px rgba(19, 12, 14, 0.35);
outline: none;
}
a.c-service-card__head:hover::after,
a.c-service-card__head:focus-visible::after { background: rgba(255, 255, 255, 0.08); }
a.c-service-card__head:hover .c-service-card__texture,
a.c-service-card__head:focus-visible .c-service-card__texture { opacity: 0.28; }
a.c-service-card__head:hover .c-service-card__icon,
a.c-service-card__head:focus-visible .c-service-card__icon { background: var(--color-primary-300); transform: rotate(-6deg); }
.c-service-card--purple a.c-service-card__head:hover .c-service-card__icon,
.c-service-card--purple a.c-service-card__head:focus-visible .c-service-card__icon { background: var(--color-secondary-200); }
a.c-service-card__head:hover .c-service-card__icon svg,
a.c-service-card__head:focus-visible .c-service-card__icon svg { transform: scale(1.08); }
a.c-service-card__head:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-secondary-400); }
@media (prefers-reduced-motion: reduce) {
a.c-service-card__head, a.c-service-card__head:hover { transform: none; }
a.c-service-card__head .c-service-card__icon, a.c-service-card__head:hover .c-service-card__icon { transform: none; }
}
/* =================================================================
PLF ART SERVICES — INTERIOR PAGE COMPONENTS
C01 service/simple hero · C02 extra media types · C03 cards ·
C04 process steps · C06 gallery · C07 stat row · C08 FAQ ·
C09 portfolio · C12 contact · C13 legal · icon cards · chip row
================================================================= */
/* ---------- C01 Hero: service / city / portrait / simple ---------- */
.c-hero--service { padding: 96px 0; }
.c-hero--service .c-hero__content { flex: 1 1 0; max-width: 637px; }
.c-hero--service .c-hero__eyebrow {
margin: 0;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary-500);
opacity: 1;
}
.c-hero--service .c-hero__headline { font-size: var(--text-5xl); overflow-wrap: anywhere; }
.c-hero--service .c-hero__scope {
margin: 12px 0 0;
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
color: var(--color-neutral-900);
}
.c-hero--service .c-hero__buttons { align-items: center; gap: 24px; }
.c-hero__textlink {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
color: var(--color-secondary-500);
text-decoration: none;
}
.c-hero__textlink svg { width: 22px; height: 22px; }
.c-hero__textlink:hover, .c-hero__textlink:focus-visible { color: var(--color-secondary-700); }
.c-hero--service .c-hero__slide--cover img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.c-hero--service .c-hero__slide--cover picture { position: absolute; inset: 0; }
.c-hero--service .c-hero__media .c-hero__slideshow { background: transparent; }
.c-hero--simple { padding: 80px 0 64px; border-bottom: 1px solid var(--color-neutral-100); }
.c-hero--simple .c-hero__content { max-width: 800px; }
.c-hero--no-image .c-hero__content { max-width: 800px; }
@media (max-width: 1024px) {
.c-hero--service { padding: var(--section-y) 0; }
.c-hero--service .c-hero__content { max-width: none; }
}
/* ---------- C02 extra media types ---------- */
.c-content-media--none .c-content-media__inner { display: block; }
.c-content-media--none .c-content-media__content { max-width: 800px; }
.c-content-media--logos .c-content-media__inner { display: block; }
.c-content-media--logos .c-content-media__content { max-width: 960px; }
.c-content-media__logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 40px;
margin: 8px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--color-neutral-100);
list-style: none;
width: 100%;
}
.c-content-media__logo { display: flex; align-items: center; }
.c-content-media__logo img { height: 32px; width: auto; filter: grayscale(1); opacity: 0.75; }
.c-content-media__wordmark {
font-family: var(--heading-font-family);
font-size: var(--text-2xl);
line-height: 1.2;
font-weight: var(--weight-heavy);
letter-spacing: -0.01em;
color: var(--color-neutral-300);
white-space: nowrap;
}
.c-content-media__text ul { padding-left: 1.25em; }
.c-content-media__text li { margin: 0 0 8px; }
.c-content-media__text li::marker { color: var(--color-primary-500); }
.c-content-media__text a { color: var(--color-secondary-500); font-weight: var(--weight-heavy); }
.c-content-media__caption {
margin: 12px 0 0;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-medium);
color: var(--color-neutral-500);
}
.c-content-media__media--html { flex: 0 0 560px; max-width: 560px; }
.c-content-media__widget {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: var(--color-neutral-50);
border: 1px solid var(--color-neutral-100);
}
.c-content-media__widget iframe { display: block; width: 100%; min-height: 500px; border: 0; }
.c-content-media__compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
flex: 0 0 560px;
max-width: 560px;
}
.c-content-media__compare-item { margin: 0; }
.c-content-media__compare-item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; border: 1px solid var(--color-neutral-100); background: #fff; }
.c-content-media__compare-item figcaption {
margin-top: 10px;
font-size: var(--text-xs);
line-height: var(--leading-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-neutral-500);
}
@media (max-width: 1024px) {
.c-content-media__media--html, .c-content-media__compare { flex-basis: auto; max-width: none; width: 100%; }
}
/* ---------- C03 Service Card Grid (generic cards) ---------- */
.c-cards { padding: var(--section-y) 0; background: #fff; }
.c-cards--bg-light { background: var(--color-primary-50); }
.c-cards__header { max-width: 800px; margin: 0 0 40px; text-align: left; }
.c-cards__header h2 { margin: 0; color: var(--color-secondary-400); }
.c-cards__header .subhead { margin-top: 16px; font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-neutral-900); }
.c-cards__header .subhead p { margin: 0; }
.c-cards__grid { display: grid; gap: 32px; }
.c-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid var(--color-neutral-100);
border-radius: 16px;
overflow: hidden;
color: var(--color-neutral-900);
text-decoration: none;
box-shadow: none;
transition: transform 240ms cubic-bezier(.4,0,.2,1), border-color 240ms ease, box-shadow 240ms ease;
}
.c-card__image { margin: 0; }
.c-card__image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.c-cards--cols-3 .c-card__image img { aspect-ratio: 3 / 4; }
.c-card__content { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; }
.c-card__title {
margin: 0;
font-family: var(--heading-font-family);
font-size: var(--text-2xl);
line-height: 1.3;
font-weight: var(--weight-heavy);
color: var(--color-neutral-900);
}
.c-card__desc { font-size: 20px; line-height: 1.5; color: var(--color-neutral-600); }
.c-card__desc p { margin: 0; }
.c-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 8px;
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
color: var(--color-secondary-500);
}
.c-card__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
a.c-card { border-color: var(--color-secondary-100); }
a.c-card:hover, a.c-card:focus-visible {
transform: translateY(-3px);
border-color: var(--color-secondary-400);
box-shadow: 0 18px 32px -16px rgba(19, 12, 14, 0.3);
}
a.c-card:hover .c-card__link svg { transform: translateX(4px); }
.c-cards--style-minimal .c-card { background: var(--color-primary-50); border-color: var(--color-primary-100); }
.c-cards--style-minimal a.c-card { background: var(--color-secondary-50); border-color: var(--color-secondary-100); }
@media (min-width: 769px) {
.c-cards--cols-2 .c-cards__grid { grid-template-columns: repeat(2, 1fr); }
.c-cards--cols-3 .c-cards__grid { grid-template-columns: repeat(3, 1fr); }
.c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
.c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.c-cards--cols-4 .c-card__title { font-size: 24px; }
.c-cards--cols-4 .c-card__desc { font-size: 18px; }
}
/* ---------- Icon cards ---------- */
.c-icon-cards { padding: var(--section-y) 0; background: #fff; }
.c-icon-cards--bg-light { background: var(--color-primary-50); }
.c-icon-cards__header { max-width: 800px; margin: 0 0 40px; text-align: left; }
.c-icon-cards__header h2, .c-icon-cards__header h3 { margin: 0; color: var(--color-secondary-400); font-size: var(--text-4xl); line-height: var(--leading-4xl); letter-spacing: var(--tracking-4xl); }
.c-icon-cards__header .subhead { margin-top: 16px; font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-neutral-900); }
.c-icon-cards__grid { display: grid; gap: 24px; }
@media (min-width: 769px) { .c-icon-cards--cols-2 .c-icon-cards__grid, .c-icon-cards--cols-3 .c-icon-cards__grid, .c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .c-icon-cards--cols-3 .c-icon-cards__grid { grid-template-columns: repeat(3, 1fr); } .c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(4, 1fr); } }
.c-icon-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px 24px;
background: var(--color-secondary-50);
border: 1px solid var(--color-secondary-100);
border-radius: 16px;
text-align: left;
}
.c-icon-cards--minimal .c-icon-card { background: transparent; border-color: transparent; padding: 0; }
.c-icon-cards--left .c-icon-card { flex-direction: row; align-items: flex-start; }
.c-icon-card__icon {
flex: 0 0 56px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--color-primary-400);
color: var(--color-neutral-900);
}
.c-icon-card__icon svg { width: 28px; height: 28px; }
.c-icon-card__img { width: 28px; height: 28px; object-fit: contain; }
.c-icon-card__content { display: flex; flex-direction: column; gap: 8px; }
.c-icon-card__title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: var(--weight-heavy); }
.c-icon-card__desc { font-size: 18px; line-height: 1.5; color: var(--color-neutral-600); }
.c-icon-card__desc p { margin: 0; }
.c-icon-card__link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: var(--weight-heavy); color: var(--color-secondary-500); text-decoration: none; }
.c-icon-card__link svg { width: 16px; height: 16px; }
/* ---------- C04 Process Steps ---------- */
.c-steps { padding: var(--section-y) 0; background: #fff; }
.c-steps--bg-light { background: var(--color-primary-50); }
.c-steps__header { max-width: 800px; margin-bottom: 48px; }
.c-steps__headline { margin: 0; color: var(--color-secondary-400); }
.c-steps__intro { margin: 16px 0 0; font-size: var(--text-base); line-height: var(--leading-base); }
.c-steps__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 48px 40px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.c-steps--count-4 .c-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.c-steps__item { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--color-secondary-100); }
.c-steps__marker { display: flex; align-items: center; height: 56px; color: var(--color-primary-500); }
.c-steps__num {
font-family: var(--heading-font-family);
font-size: 56px;
line-height: 1;
font-weight: var(--weight-heavy);
letter-spacing: -0.02em;
color: var(--color-primary-400);
}
.c-steps--icon .c-steps__marker {
width: 56px;
justify-content: center;
border-radius: 12px;
background: var(--color-primary-400);
color: var(--color-neutral-900);
}
.c-steps--icon .c-steps__marker svg { width: 28px; height: 28px; }
.c-steps__label { margin: 0; font-size: 24px; line-height: 1.3; font-weight: var(--weight-heavy); }
.c-steps__text { margin: 0; font-size: 20px; line-height: 1.5; color: var(--color-neutral-600); }
@media (max-width: 1024px) {
.c-steps__list, .c-steps--count-4 .c-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.c-steps__list, .c-steps--count-4 .c-steps__list { grid-template-columns: 1fr; }
}
/* ---------- C06 Image Gallery (generic) ---------- */
.c-gallery { padding: var(--section-y) 0; }
.c-gallery--bg-white { background: #fff; }
.c-gallery--bg-light { background: var(--color-primary-50); }
.c-gallery__header { max-width: 800px; margin: 0 0 40px; text-align: left; }
.c-gallery__header h2 { margin: 0; color: var(--color-secondary-400); }
.c-gallery__subhead { margin: 16px 0 0; font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-neutral-900); }
.c-gallery__grid { display: grid; gap: 24px; }
.c-gallery--cols-2 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-3 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
.c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.c-gallery__item { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--color-neutral-100); cursor: zoom-in; }
.c-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.c-gallery__item:hover img { transform: scale(1.03); }
.c-gallery--square .c-gallery__item img { aspect-ratio: 1 / 1; }
.c-gallery--portrait .c-gallery__item img { aspect-ratio: 3 / 4; }
.c-gallery--landscape .c-gallery__item img { aspect-ratio: 4 / 3; }
.c-gallery--wide .c-gallery__item img { aspect-ratio: 16 / 9; }
@media (max-width: 1024px) { .c-gallery--cols-3 .c-gallery__grid, .c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .c-gallery__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } }
/* ---------- C07 Stat Row ---------- */
.c-stats { padding: 64px 0; background: #fff; }
.c-stats--bg-light { background: var(--color-primary-50); }
.c-stats--bg-white { background: #fff; }
.c-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: left; border-top: 1px solid var(--color-neutral-100); border-bottom: 1px solid var(--color-neutral-100); }
.c-stat { padding: 40px 32px; border-left: 1px solid var(--color-neutral-100); }
.c-stat:first-child { border-left: 0; padding-left: 0; }
.c-stat__number {
font-family: var(--heading-font-family);
font-size: 64px;
line-height: 1.1;
font-weight: var(--weight-heavy);
letter-spacing: -0.02em;
color: var(--color-primary-500);
}
.c-stat__label { margin-top: 8px; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); color: var(--color-neutral-600); max-width: 180px; }
@media (max-width: 1024px) {
.c-stats__grid { grid-template-columns: repeat(2, 1fr); }
.c-stat:nth-child(3) { border-left: 0; padding-left: 0; }
.c-stat { padding: 32px 24px; }
.c-stat__number { font-size: 48px; }
}
/* ---------- C08 FAQ ---------- */
.c-accordion { padding: var(--section-y) 0; background: #fff; }
.c-accordion--bg-light { background: var(--color-primary-50); }
.c-accordion__inner.container--narrow { max-width: calc(960px + 2 * var(--gutter)); }
.c-accordion__header { text-align: left; margin-bottom: 40px; }
.c-accordion__header h2 { margin: 0; color: var(--color-secondary-400); }
.c-accordion__items { border-top: 1px solid var(--color-secondary-100); }
.c-accordion__item { border-bottom: 1px solid var(--color-secondary-100); }
.c-accordion__item h3 { margin: 0; font-size: inherit; }
.c-accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 24px 0;
font-family: var(--heading-font-family);
font-size: var(--text-2xl);
line-height: 1.3;
font-weight: var(--weight-heavy);
color: var(--color-neutral-900);
text-align: left;
background: none;
border: none;
cursor: pointer;
}
.c-accordion__trigger:hover { color: var(--color-secondary-500); }
.c-accordion__icon { width: 28px; height: 28px; flex: 0 0 28px; color: var(--color-secondary-300); transition: transform var(--transition); }
.c-accordion__item.is-open .c-accordion__icon { transform: rotate(180deg); }
.c-accordion__content { padding: 0 0 28px; max-width: 800px; font-size: 20px; line-height: 1.6; color: var(--color-neutral-700); }
.c-accordion__content p { margin: 0 0 12px; }
.c-accordion + script + script + .c-proof,
.c-accordion + .c-proof{
padding-top:0!important;
}
@media (max-width:600px) {
.c-accordion__trigger {
font-size:1.25rem;
}
}
/* ---------- C09 Portfolio Highlight ---------- */
.c-portfolio { padding: var(--section-y) 0; background: #fff; }
.c-portfolio--bg-light { background: var(--color-primary-50); }
.c-portfolio__header { max-width: 800px; margin-bottom: 40px; }
.c-portfolio__headline { margin: 0; color: var(--color-secondary-400); }
.c-portfolio__intro { margin: 16px 0 0; font-size: var(--text-base); line-height: var(--leading-base); }
.c-portfolio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.c-portfolio--cols-2 .c-portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.c-portfolio__item { display: flex; flex-direction: column; gap: 20px; }
.c-portfolio__image { margin: 0; border-radius: 16px; overflow: hidden; background: var(--color-neutral-50); border: 1px solid var(--color-neutral-100); }
.c-portfolio__image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.c-portfolio--cols-2 .c-portfolio__image img { aspect-ratio: 4 / 3; }
.c-portfolio__caption { display: flex; flex-direction: column; gap: 6px; }
.c-portfolio__client { margin: 0; font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-500); }
.c-portfolio__label { margin: 0; font-size: 24px; line-height: 1.3; font-weight: var(--weight-heavy); }
.c-portfolio__text { margin: 4px 0 0; font-size: 18px; line-height: 1.55; color: var(--color-neutral-600); }
@media (max-width: 1024px) { .c-portfolio__grid, .c-portfolio--cols-2 .c-portfolio__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 600px) { .c-portfolio__grid, .c-portfolio--cols-2 .c-portfolio__grid { grid-template-columns: 1fr; gap: 56px 0; } }
/* ---------- Chip Row ---------- */
.c-chip-row { padding: 0 0 var(--section-y); background: #fff; }
.c-chip-row--bg-light { background: var(--color-primary-50); }
.c-cards + .c-chip-row { margin-top: calc(-1 * var(--section-y) + 40px); }
.c-chip-row__headline { margin: 0 0 12px; font-size: var(--text-2xl); line-height: 1.3; color: var(--color-neutral-900); }
.c-chip-row__intro { margin: 0 0 20px; font-size: 20px; line-height: 1.5; color: var(--color-neutral-600); }
.c-chip-row__list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-chip {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border-radius: var(--radius-pill);
background: var(--color-secondary-50);
border: 1px solid var(--color-secondary-100);
font-size: var(--text-sm);
line-height: var(--leading-sm);
font-weight: var(--weight-heavy);
color: var(--color-secondary-500);
text-decoration: none;
}
.c-chip--static { background: var(--color-neutral-50); border-color: var(--color-neutral-100); color: var(--color-neutral-600); font-weight: var(--weight-medium); }
a.c-chip:hover { background: var(--color-secondary-100); }
/* ---------- C12 Contact (form section split) ---------- */
.c-form-section { padding: var(--section-y) 0; background: #fff; }
.c-form-section--bg-light { background: var(--color-primary-50); }
.c-form-section--split .c-form-section__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.c-form-section__content h2 { margin: 0 0 16px; color: var(--color-secondary-400); }
.c-form-section__content .subhead { margin: 0 0 24px; font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-neutral-900); }
.c-form-section__content .prose { font-size: 20px; line-height: 1.5; }
.c-form-section__content .prose p { margin: 0 0 12px; }
.c-form-section__content .prose strong { font-weight: var(--weight-heavy); }
.c-form-section__content .prose a { color: var(--color-secondary-500); text-decoration: none; font-weight: var(--weight-heavy); }
.c-form-section__form { background: var(--color-primary-50); border: 1px solid var(--color-primary-100); border-radius: 24px; padding: 40px; }
.c-form-section__form .gform_wrapper { margin: 0; }
.c-form-section__form .gform_wrapper .gform_title { display: none; }
.c-form-section__form .gform_wrapper .gfield_label { font-size: var(--text-sm); font-weight: var(--weight-heavy); color: var(--color-neutral-900); }
.c-form-section__form .gform_wrapper input:not([type="submit"]),
.c-form-section__form .gform_wrapper textarea,
.c-form-section__form .gform_wrapper select {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--color-neutral-100);
border-radius: 12px;
background: #fff;
font-family: inherit;
font-size: var(--text-sm);
line-height: var(--leading-sm);
}
.c-form-section__form .gform_wrapper .gform_button,
.c-form-section__form .gform_wrapper input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 28px;
min-height: 0;
font-family: var(--body-font-family);
font-size: var(--text-base);
line-height: var(--leading-base);
font-weight: var(--weight-heavy);
border-radius: var(--radius-pill);
border: 0;
cursor: pointer;
background: var(--color-primary-400);
color: var(--color-neutral-900);
transition: background var(--transition);
}
.c-form-section__form .gform_wrapper .gform_button:hover { background: var(--color-primary-300); }
@media (max-width: 1024px) {
.c-form-section--split .c-form-section__inner { grid-template-columns: 1fr; gap: 40px; }
.c-form-section__form { padding: 28px 20px; }
}
/* ---------- C13 Legal body / text block ---------- */
.c-text-block { padding: var(--section-y) 0; background: #fff; }
.c-text-block--bg-light { background: var(--color-primary-50); }
.c-text-block__inner.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }
.c-text-block h2 { margin: 0 0 24px; color: var(--color-secondary-400); }
.c-text-block .prose { font-size: 20px; line-height: 1.65; color: var(--color-neutral-800); }
.c-text-block .prose p { margin: 0 0 20px; }
.c-text-block .prose h3 { margin: 40px 0 12px; font-size: var(--text-2xl); line-height: 1.3; color: var(--color-neutral-900); }
.c-text-block .prose h3:first-child { margin-top: 0; }
.c-text-block .prose a { color: var(--color-secondary-500); font-weight: var(--weight-heavy); }
/* ---------- C15 Proof strip without cutout (interior pages) ---------- */
.c-proof--no-cutout .c-proof__strip { height: auto; min-height: 253px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px; }
.c-proof--no-cutout .c-proof__copy, .c-proof--no-cutout .c-proof__badges { position: static; }
.c-proof--no-cutout .c-proof__badges { width: 459px; flex: 0 0 459px; }
.c-proof--no-cutout .c-proof__headline { height: auto; line-height: 1.2; white-space: normal; }
.c-proof__body { margin: 0; font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-roman); color: var(--color-secondary-100); max-width: 520px; }
.c-proof { padding: 0 0 var(--section-y); }
.c-proof + .c-service-areas { padding-top: 0; }
@media (max-width: 1024px) {
.c-proof--no-cutout .c-proof__strip { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
.c-proof--no-cutout .c-proof__badges { width: 100%; flex-basis: auto; }
}
/* Section rhythm on interior pages: collapse doubled padding between white sections */
.c-hero--service + .c-content-media--bg-white { padding-top: 0; }
.c-content-media--bg-white + .c-cards, .c-cards + .c-portfolio, .c-portfolio + .c-content-media--bg-white,
.c-cards + .c-content-media--bg-white, .c-content-media--bg-white + .c-portfolio, .c-steps + .c-content-media--bg-white,
.c-content-media--bg-white + .c-steps, .c-content-media--bg-white + .c-content-media--bg-white, .c-portfolio + .c-accordion,
.c-content-media--bg-white + .c-accordion, .c-accordion + .c-proof, .c-content-media--bg-white + .c-proof, .c-cards + .c-proof,
.c-stats + .c-content-media--bg-white, .c-content-media--bg-white + .c-stats, .c-pull-quote + .c-content-media--bg-white,
.c-gallery--bg-white + .c-cards, .c-cards + .c-pull-quote, .c-steps + .c-gallery, .c-cards + .c-accordion, .c-chip-row + .c-content-media--bg-white,
.c-content-media--bg-white + .c-gallery--bg-white, .c-cards + .c-service-areas, .c-content-media--bg-white + .c-service-areas { padding-top: 0; }
.c-hero--simple + .c-cards, .c-hero--simple + .c-form-section, .c-hero--simple + .c-text-block { padding-top: 64px; }
/* About hero: portrait sits in the frame uncropped */
.c-hero--portrait .c-hero__slide--cover img { object-fit: contain; background: transparent; padding: 24px; }
/* Platform icon cards (product photography): title-only row */
.c-icon-cards--platforms { padding-top: 0; }
.c-icon-cards--platforms .c-icon-card { padding: 20px 24px; align-items: center; }
.c-icon-cards--platforms .c-icon-card__title { font-size: 20px; }
/* Stat labels: sentence case (design brief), Gravity Forms button in brand green */
.c-stat__label { text-transform: none; letter-spacing: 0; }
.c-form-section__form .gform_wrapper {
--gf-color-primary: #65BC46;
--gf-color-primary-contrast: #130C0E;
--gf-color-primary-darker: #4E9932;
--gf-color-primary-lighter: #8ACC75;
--gf-ctrl-border-color: #DAD8D9;
--gf-ctrl-radius: 12px;
--gf-form-gap-y: 24px;
}
.c-form-section__form .gform_wrapper .gform_footer input[type="submit"],
.c-form-section__form .gform_wrapper .gform_footer button {
background: #65BC46 !important;
color: #130C0E !important;
border: 0 !important;
border-radius: 999px !important;
padding: 16px 28px !important;
font-family: var(--body-font-family) !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.5 !important;
}
.c-form-section__form .gform_wrapper .gform_footer input[type="submit"]:hover,
.c-form-section__form .gform_wrapper .gform_footer button:hover { background: #8ACC75 !important; }
/* ----------------------- Round 3: responsive header, stacked media, proof strip ----------------------- */
/* Header: nav type steps down before the mobile breakpoint so it never crowds the logo */
@media (max-width: 1400px) and (min-width: 782px) {
.site-nav__menu, .site-nav__actions { gap: 20px; }
.site-nav__actions { margin-left: 20px; }
.site-nav__menu a, .site-nav__phone { font-size: 15px; }
.btn--sm { padding: 12px 16px; font-size: 15px; }
.site-header__logo img { width: 168px; }
}
@media (max-width: 1180px) and (min-width: 782px) {
.site-nav__menu, .site-nav__actions { gap: 14px; }
.site-nav__actions { margin-left: 14px; }
.site-nav__menu a, .site-nav__phone { font-size: 14px; }
.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn--sm svg { width: 16px; height: 16px; }
.site-header__logo { margin-right: 24px; }
.site-header__logo img { width: 140px; }
.site-header__inner { padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 960px) and (min-width: 782px) {
.site-nav__menu > .menu-item-has-children > a::after { display: none; }
.site-nav__menu > .menu-item-has-children > a { gap: 0; }
.site-nav__menu a, .site-nav__phone { font-size: 13px; }
.site-nav__menu, .site-nav__actions { gap: 12px; }
.site-header__logo img { width: 120px; }
}
/* C02: media stacks above the copy on tablet and phone, every media type */
@media (max-width: 1024px) {
.c-content-media__inner { flex-direction: column; align-items: flex-start; }
.c-content-media__media,
.c-content-media__pair,
.c-content-media__clip,
.c-content-media__compare,
.c-content-media--media-left .c-content-media__media,
.c-content-media--media-left .c-content-media__clip,
.c-content-media--media-left .c-content-media__pair { order: -1; }
.c-content-media__content { order: 1; }
}
/* C15 Proof strip: keep Patti in frame and clear of the badges at every width */
@media (max-width: 1367px) {
.c-proof__strip {
height: auto;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 360px);
grid-template-areas: "copy cutout badges";
align-items: end;
column-gap: 24px;
padding: 32px 32px 0 32px;
}
.c-proof__copy { grid-area: copy; position: static; padding-bottom: 32px; }
.c-proof__badges { grid-area: badges; position: static; width: 100%; padding-bottom: 32px; }
.c-proof__badge { font-size: 16px; white-space: normal; }
picture.c-proof__cutout, .c-proof__cutout { grid-area: cutout; position: static; display: block; align-self: end; margin-top: -48px; line-height: 0; }
.c-proof__cutout img { height: 240px; width: auto; max-width: none; object-fit: contain; object-position: bottom; }
.c-proof__eyebrow, .c-proof__headline, .c-proof__link { white-space: normal; height: auto; }
.c-proof__headline { line-height: 1.2; }
.c-proof__eyebrow { line-height: 1.4; }
.c-proof__link { line-height: 1.4; padding-top: 4px; }
}
@media (max-width: 1100px) {
.c-proof__strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy cutout" "badges badges"; }
.c-proof__badges { padding-bottom: 32px; }
.c-proof__cutout img { height: 220px; }
}
@media (max-width: 781px) {
.c-proof__strip { padding: 24px 20px 0; column-gap: 12px; }
.c-proof__copy { padding-bottom: 20px; }
.c-proof__stars svg { width: 28px; height: 29px; }
.c-proof__eyebrow, .c-proof__link { font-size: 18px; }
.c-proof__headline { font-size: 28px; }
.c-proof__cutout img { height: 170px; }
picture.c-proof__cutout, .c-proof__cutout { margin-top: -36px; margin-right: -8px; }
.c-proof__badges { padding-bottom: 24px; gap: 10px; }
.c-proof__badge { font-size: 15px; padding: 8px 14px 8px 8px; gap: 10px; }
.c-proof__badge-logo { flex-basis: 34px; width: 34px; height: 34px; }
.c-proof__badge-logo img { width: 24px; height: 24px; }
}
@media (max-width: 420px) {
.c-proof__cutout img { height: 140px; }
.c-proof__eyebrow, .c-proof__link { font-size: 16px; }
.c-proof__headline { font-size: 24px; }
}
@media (max-width: 1367px) {
picture.c-proof__cutout, .c-proof__cutout { height: auto; width: auto; bottom: auto; left: auto; }
.c-proof__cutout img { display: block; }
}
/* Global Proof Strip with cutout on interior pages: clearance for the portrait rising above the strip
(the homepage hero already provides this with its own bottom padding) */
:not(.c-hero) + .c-proof:not(.c-proof--no-cutout) { padding-top: 72px; }
/* =================================================================
UNIFORM SECTION BACKGROUNDS — white · light · brand · dark · image
Every non-hero component exposes the same five choices.
================================================================= */
.c-bg-overlay { position: absolute; inset: 0; pointer-events: none; }
section[class*="--bg-image"] { position: relative; background-size: cover; background-position: center; color: #fff; }
section[class*="--bg-image"] > [class*="__inner"] { position: relative; z-index: 1; }
/* Surfaces */
section[class*="--bg-white"] { background: #fff; }
section[class*="--bg-gray"] { background: var(--color-neutral-50); }
section[class*="--bg-light"] { background: var(--color-primary-50); }
section[class*="--bg-brand"] { background: var(--gradient-purple); color: #fff; }
section[class*="--bg-dark"] { background: var(--color-neutral-900); color: #fff; }
section.c-pull-quote--bg-light { background: var(--color-secondary-50); }
.c-pull-quote--bg-white { border-color: var(--color-neutral-100); }
.c-pull-quote--bg-brand, .c-pull-quote--bg-dark, .c-pull-quote--bg-image { border-color: rgba(255,255,255,0.15); }
/* Headings and body copy on brand, dark and image grounds */
section[class*="--bg-brand"] :is(h2, h3, .t-4xl, .c-cards__header h2, .c-icon-cards__header h2, .c-icon-cards__header h3, .c-gallery__header h2, .c-accordion__header h2, .c-form-section__content h2, .c-text-block h2, .c-services__headline, .c-image-grid__headline, .c-steps__headline, .c-portfolio__headline, .c-chip-row__headline, .c-content-media__headline, .c-stat__number, .c-pull-quote__quote, .c-testimonials__header h2, .c-stats__header h2, .c-logos__header h2, .c-map__header h2, .c-contact-info__header h2):not(.c-card *):not(.c-icon-card *):not(.c-service-card *):not(.c-proof__strip *):not(.c-service-areas__panel *):not(.c-cta__band *),
section[class*="--bg-dark"] :is(h2, h3, .t-4xl, .c-cards__header h2, .c-icon-cards__header h2, .c-icon-cards__header h3, .c-gallery__header h2, .c-accordion__header h2, .c-form-section__content h2, .c-text-block h2, .c-services__headline, .c-image-grid__headline, .c-steps__headline, .c-portfolio__headline, .c-chip-row__headline, .c-content-media__headline, .c-stat__number, .c-pull-quote__quote, .c-testimonials__header h2, .c-stats__header h2, .c-logos__header h2, .c-map__header h2, .c-contact-info__header h2):not(.c-card *):not(.c-icon-card *):not(.c-service-card *):not(.c-proof__strip *):not(.c-service-areas__panel *):not(.c-cta__band *),
section[class*="--bg-image"] :is(h2, h3, .t-4xl):not(.c-card *):not(.c-icon-card *):not(.c-service-card *):not(.c-proof__strip *):not(.c-service-areas__panel *):not(.c-cta__band *) { color: #fff; }
section[class*="--bg-brand"] :is(.c-cards__header .subhead, .c-icon-cards__header .subhead, .c-gallery__subhead, .c-steps__intro, .c-steps__text, .c-portfolio__intro, .c-portfolio__text, .c-portfolio__label, .c-chip-row__intro, .c-stat__label, .c-accordion__content, .c-text-block .prose, .c-form-section__content .subhead, .c-form-section__content .prose, .c-content-media__text, .c-content-media__caption, .c-pull-quote__author, .c-testimonial__quote, .c-testimonial__author cite, .c-testimonial__author span, .c-map__subhead, .c-contact-info__subhead, .subhead, .eyebrow),
section[class*="--bg-dark"] :is(.c-cards__header .subhead, .c-icon-cards__header .subhead, .c-gallery__subhead, .c-steps__intro, .c-steps__text, .c-portfolio__intro, .c-portfolio__text, .c-portfolio__label, .c-chip-row__intro, .c-stat__label, .c-accordion__content, .c-text-block .prose, .c-form-section__content .subhead, .c-form-section__content .prose, .c-content-media__text, .c-content-media__caption, .c-pull-quote__author, .c-testimonial__quote, .c-testimonial__author cite, .c-testimonial__author span, .c-map__subhead, .c-contact-info__subhead, .subhead, .eyebrow),
section[class*="--bg-image"] :is(.subhead, .eyebrow, .c-steps__text, .c-steps__intro, .c-portfolio__text, .c-stat__label, .c-content-media__text, .c-accordion__content) { color: rgba(255,255,255,0.88); }
section[class*="--bg-brand"] .c-portfolio__client, section[class*="--bg-brand"] .eyebrow { color: var(--color-secondary-100); }
section[class*="--bg-dark"] .c-portfolio__client, section[class*="--bg-dark"] .eyebrow { color: var(--color-primary-300); }
section[class*="--bg-brand"] .c-stat__number, section[class*="--bg-dark"] .c-stat__number { color: var(--color-primary-300); }
/* Accordion and process steps on dark grounds */
section[class*="--bg-brand"] :is(.c-accordion__trigger, .c-steps__label, .c-chip-row__headline),
section[class*="--bg-dark"] :is(.c-accordion__trigger, .c-steps__label, .c-chip-row__headline),
section[class*="--bg-image"] :is(.c-accordion__trigger, .c-steps__label) { color: #fff; }
section[class*="--bg-brand"] .c-accordion__trigger:hover, section[class*="--bg-dark"] .c-accordion__trigger:hover { color: var(--color-primary-300); }
section[class*="--bg-brand"] :is(.c-accordion__items, .c-accordion__item, .c-steps__item, .c-stats__grid, .c-stat, .c-content-media__logos),
section[class*="--bg-dark"] :is(.c-accordion__items, .c-accordion__item, .c-steps__item, .c-stats__grid, .c-stat, .c-content-media__logos),
section[class*="--bg-image"] :is(.c-accordion__items, .c-accordion__item, .c-steps__item, .c-stats__grid, .c-stat) { border-color: rgba(255,255,255,0.22); }
section[class*="--bg-brand"] .c-accordion__icon, section[class*="--bg-dark"] .c-accordion__icon { color: var(--color-secondary-200); }
section[class*="--bg-brand"] .c-content-media__wordmark, section[class*="--bg-dark"] .c-content-media__wordmark { color: rgba(255,255,255,0.55); }
section[class*="--bg-brand"] .c-pull-quote__mark { background: var(--color-primary-300); }
section[class*="--bg-dark"] .c-pull-quote__mark { background: var(--color-primary-400); }
section[class*="--bg-brand"] .c-pull-quote__dot, section[class*="--bg-dark"] .c-pull-quote__dot { background: rgba(255,255,255,0.3); }
section[class*="--bg-brand"] .c-pull-quote__dot.is-active, section[class*="--bg-dark"] .c-pull-quote__dot.is-active { background: var(--color-primary-300); }
section[class*="--bg-brand"] .c-pull-quote__arrow, section[class*="--bg-dark"] .c-pull-quote__arrow { color: var(--color-secondary-100); }
section[class*="--bg-brand"] .c-content-media__text a, section[class*="--bg-dark"] .c-content-media__text a,
section[class*="--bg-brand"] .link-arrow, section[class*="--bg-dark"] .link-arrow { color: var(--color-primary-300); }
section[class*="--bg-brand"] .btn--primary, section[class*="--bg-dark"] .btn--primary { background: var(--color-primary-400); color: var(--color-neutral-900); }
/* Cards and icon cards keep their own surface; on brand/dark they read as light tiles */
section[class*="--bg-brand"] .c-card, section[class*="--bg-dark"] .c-card { background: #fff; color: var(--color-neutral-900); border-color: transparent; }
section[class*="--bg-dark"] .c-card__desc, section[class*="--bg-brand"] .c-card__desc { color: var(--color-neutral-600); }
section[class*="--bg-brand"] .c-icon-card, section[class*="--bg-dark"] .c-icon-card { background: #fff; border-color: transparent; color: var(--color-neutral-900); }
section[class*="--bg-brand"] .c-icon-card__title, section[class*="--bg-dark"] .c-icon-card__title { color: var(--color-neutral-900); }
section[class*="--bg-brand"] .c-chip--static, section[class*="--bg-dark"] .c-chip--static { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
section[class*="--bg-brand"] .c-form-section__form, section[class*="--bg-dark"] .c-form-section__form { background: #fff; border-color: transparent; }
/* Rhythm: consecutive sections on the same ground collapse their shared gap */
section[class*="--bg-brand"] + section[class*="--bg-brand"], section[class*="--bg-dark"] + section[class*="--bg-dark"] { padding-top: 0; }
/* Cards on brand / dark grounds: translucent white tiles, white text, green CTA text */
section[class*="--bg-brand"] .c-card, section[class*="--bg-dark"] .c-card, section[class*="--bg-image"] .c-card {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
section[class*="--bg-brand"] .c-card__title, section[class*="--bg-dark"] .c-card__title, section[class*="--bg-image"] .c-card__title { color: #fff; }
section[class*="--bg-brand"] .c-card__desc, section[class*="--bg-dark"] .c-card__desc, section[class*="--bg-image"] .c-card__desc { color: rgba(255, 255, 255, 0.82); }
section[class*="--bg-brand"] .c-card__link, section[class*="--bg-dark"] .c-card__link, section[class*="--bg-image"] .c-card__link { color: var(--color-primary-400); }
section[class*="--bg-brand"] a.c-card:hover, section[class*="--bg-dark"] a.c-card:hover, section[class*="--bg-image"] a.c-card:hover,
section[class*="--bg-brand"] a.c-card:focus-visible, section[class*="--bg-dark"] a.c-card:focus-visible {
background: rgba(255, 255, 255, 0.15);
border-color: var(--color-primary-400);
box-shadow: 0 18px 32px -16px rgba(0, 0, 0, 0.45);
}
section[class*="--bg-brand"] .c-cards--style-minimal .c-card, section[class*="--bg-dark"] .c-cards--style-minimal .c-card { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.2); }
/* Icon cards follow the same treatment */
section[class*="--bg-brand"] .c-icon-card, section[class*="--bg-dark"] .c-icon-card {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
section[class*="--bg-brand"] .c-icon-card__title, section[class*="--bg-dark"] .c-icon-card__title { color: #fff; }
section[class*="--bg-brand"] .c-icon-card__desc, section[class*="--bg-dark"] .c-icon-card__desc { color: rgba(255, 255, 255, 0.82); }
section[class*="--bg-brand"] .c-icon-card__link, section[class*="--bg-dark"] .c-icon-card__link { color: var(--color-primary-400); }
/* A white / light section after a brand, dark or image section keeps its full top padding */
section[class*="--bg-brand"] + section[class*="--bg-white"], section[class*="--bg-dark"] + section[class*="--bg-white"], section[class*="--bg-image"] + section[class*="--bg-white"],
section[class*="--bg-brand"] + section[class*="--bg-light"], section[class*="--bg-dark"] + section[class*="--bg-light"], section[class*="--bg-image"] + section[class*="--bg-light"],
section[class*="--bg-brand"] + .c-cards, section[class*="--bg-dark"] + .c-cards,
section[class*="--bg-brand"] + .c-portfolio, section[class*="--bg-dark"] + .c-portfolio,
section[class*="--bg-brand"] + .c-accordion, section[class*="--bg-dark"] + .c-accordion,
section[class*="--bg-brand"] + .c-steps, section[class*="--bg-dark"] + .c-steps,
section[class*="--bg-brand"] + .c-content-media, section[class*="--bg-dark"] + .c-content-media,
section[class*="--bg-brand"] + .c-proof, section[class*="--bg-dark"] + .c-proof,
section[class*="--bg-brand"] + .c-service-areas, section[class*="--bg-dark"] + .c-service-areas,
section[class*="--bg-brand"] + .c-gallery, section[class*="--bg-dark"] + .c-gallery,
section[class*="--bg-brand"] + .c-stats, section[class*="--bg-dark"] + .c-stats,
section[class*="--bg-brand"] + .c-pull-quote, section[class*="--bg-dark"] + .c-pull-quote,
section[class*="--bg-brand"] + .c-icon-cards, section[class*="--bg-dark"] + .c-icon-cards,
section[class*="--bg-brand"] + .c-chip-row, section[class*="--bg-dark"] + .c-chip-row,
section[class*="--bg-brand"] + .c-services, section[class*="--bg-dark"] + .c-services,
section[class*="--bg-brand"] + .c-image-grid, section[class*="--bg-dark"] + .c-image-grid,
section[class*="--bg-brand"] + .c-text-block, section[class*="--bg-dark"] + .c-text-block,
section[class*="--bg-brand"] + .c-form-section, section[class*="--bg-dark"] + .c-form-section { padding-top: var(--section-y); }
/* ...except when the next section shares the same ground */
section[class*="--bg-brand"] + section[class*="--bg-brand"], section[class*="--bg-dark"] + section[class*="--bg-dark"] { padding-top: 0; }
/* Proof strip with the cutout still needs the extra rise room after a colored section */
section[class*="--bg-brand"] + .c-proof:not(.c-proof--no-cutout), section[class*="--bg-dark"] + .c-proof:not(.c-proof--no-cutout) { padding-top: calc(var(--section-y) + 24px); }
/* Any change of ground between neighbouring sections keeps the full section rhythm.
The name-based collapse rules above only apply when both sections share a background. */
section[class*="--bg-"]:not([class*="--bg-white"]) + section[class*="--bg-white"]:not(.c-proof:not(.c-proof--no-cutout)),
section[class*="--bg-"]:not([class*="--bg-light"]) + section[class*="--bg-light"]:not(.c-proof:not(.c-proof--no-cutout)),
section[class*="--bg-"]:not([class*="--bg-gray"]) + section[class*="--bg-gray"]:not(.c-proof:not(.c-proof--no-cutout)),
section[class*="--bg-"]:not([class*="--bg-brand"]) + section[class*="--bg-brand"]:not(.c-proof:not(.c-proof--no-cutout)),
section[class*="--bg-"]:not([class*="--bg-dark"]) + section[class*="--bg-dark"]:not(.c-proof:not(.c-proof--no-cutout)),
section[class*="--bg-"]:not([class*="--bg-image"]) + section[class*="--bg-image"]:not(.c-proof:not(.c-proof--no-cutout)) { padding-top: var(--section-y); }
/* Proof strip with cutout after a light/image ground: same rise room as after brand/dark */
section[class*="--bg-light"] + .c-proof:not(.c-proof--no-cutout), section[class*="--bg-gray"] + .c-proof:not(.c-proof--no-cutout), section[class*="--bg-image"] + .c-proof:not(.c-proof--no-cutout) { padding-top: calc(var(--section-y) + 24px); }
/* Global CTA band renders on white; give it top padding when the section above is not white */
main:has(> section:last-of-type[class*="--bg-"]:not([class*="--bg-white"])) + .c-cta--global { padding-top: var(--section-y); }
/* Cards on the brand (purple) ground: translucent black tint for stronger contrast with the green CTA text.
Dark ground keeps the translucent white tiles. */
section[class*="--bg-brand"] .c-card,
section[class*="--bg-brand"] .c-cards--style-minimal .c-card,
section[class*="--bg-brand"] .c-icon-card {
background: rgba(19, 12, 14, 0.28);
border-color: rgba(19, 12, 14, 0.35);
}
section[class*="--bg-brand"] a.c-card:hover,
section[class*="--bg-brand"] a.c-card:focus-visible {
background: rgba(19, 12, 14, 0.4);
border-color: var(--color-primary-400);
}
section[class*="--bg-brand"] .c-card__desc,
section[class*="--bg-brand"] .c-icon-card__desc { color: rgba(255, 255, 255, 0.86); }
/* Lightbox affordance on image grid and portfolio images */
.c-image-grid__item { cursor: zoom-in; }
.c-image-grid__item picture { position: absolute; inset: 0; }
.c-image-grid__label { position: relative; z-index: 1; text-decoration: none; }
a.c-image-grid__label:hover { background: var(--color-secondary-500); }
.c-portfolio__image { cursor: zoom-in; }
.c-portfolio__image img { transition: transform 400ms ease; }
.c-portfolio__image:hover img { transform: scale(1.03); }
.c-lightbox__image { max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; background: #fff; }
.c-lightbox__caption { font-family: var(--body-font-family); font-size: var(--text-sm); color: rgba(255,255,255,0.85); margin-top: 12px; }
/* CTA sections always sit on white; the Background choice colors the band inside, not the section */
section.c-cta, section.c-cta[class*="--bg-"] { background: #fff; color: var(--color-neutral-900); }
section.c-cta[class*="--bg-brand"] .c-cta__band, section.c-cta[class*="--bg-dark"] .c-cta__band { color: #fff; }
/* Icon cards: left-aligned like the other cards, whole card clickable when linked */
.c-icon-cards--top .c-icon-card, .c-icon-cards .c-icon-card { align-items: flex-start; text-align: left; }
.c-icon-card__icon { margin: 0; }
.c-icon-card__content { align-items: flex-start; text-align: left; }
a.c-icon-card {
text-decoration: none;
color: inherit;
transition: transform 240ms cubic-bezier(.4,0,.2,1), border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
a.c-icon-card:hover, a.c-icon-card:focus-visible {
transform: translateY(-3px);
border-color: var(--color-secondary-400);
box-shadow: 0 18px 32px -16px rgba(19, 12, 14, 0.3);
}
a.c-icon-card .c-icon-card__link svg { transition: transform var(--transition); }
a.c-icon-card:hover .c-icon-card__link svg { transform: translateX(4px); }
.c-icon-card__link { margin-top: auto; padding-top: 8px; }
section[class*="--bg-dark"] a.c-icon-card:hover, section[class*="--bg-brand"] a.c-icon-card:hover { border-color: var(--color-primary-400); background: rgba(255,255,255,0.15); }
section[class*="--bg-brand"] a.c-icon-card:hover { background: rgba(19, 12, 14, 0.4); }
section[class*="--bg-dark"] .c-icon-card__icon, section[class*="--bg-brand"] .c-icon-card__icon { background: var(--color-primary-400); color: var(--color-neutral-900); }
/* Platform cards (product photography): icon and title on one centred row, primary-50 tile */
.c-icon-cards--platforms .c-icon-card { align-items: center; background: var(--color-primary-50); border-color: var(--color-primary-100); }
.c-icon-cards--platforms .c-icon-card__content { justify-content: center; align-self: stretch; }
.c-icon-cards--platforms a.c-icon-card:hover, .c-icon-cards--platforms a.c-icon-card:focus-visible { background: var(--color-primary-100); }
/* Sticky header: stop Chrome's scroll anchoring from re-adjusting scrollTop when the header shrinks/grows */
html { overflow-anchor: none; }
/* Global CTA note: phone number is a tel link */
.c-cta__note a { color: inherit; font-weight: var(--weight-heavy); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primary-400); }
.c-cta__note a:hover { color: var(--color-primary-600); }
/* Gallery on phones: two full-width columns, tighter rhythm */
@media (max-width: 600px) {
.c-gallery__header { margin-bottom: 24px; }
.c-gallery__grid { gap: 10px; }
.c-gallery__item { border-radius: 10px; }
}
/* Hero eyebrow sits tight to the H1 (12px) instead of the full 32px content gap */
.c-hero__content > .c-hero__eyebrow { margin-bottom: -20px; }
/* Text section with a matching-ground card row directly beneath: cards read as part of the section */
.c-content-media[class*="--bg-white"]:has(+ .c-icon-cards[class*="--bg-white"]),
.c-content-media[class*="--bg-light"]:has(+ .c-icon-cards[class*="--bg-light"]),
.c-content-media[class*="--bg-gray"]:has(+ .c-icon-cards[class*="--bg-gray"]),
.c-content-media[class*="--bg-brand"]:has(+ .c-icon-cards[class*="--bg-brand"]),
.c-content-media[class*="--bg-dark"]:has(+ .c-icon-cards[class*="--bg-dark"]) { padding-bottom: 40px; }
/* Icon cards with a full-width intro (add class c-icon-cards--wide on the instance) */
.c-icon-cards--wide .c-icon-cards__header { max-width: none; }
.c-icon-cards__header .subhead p { margin: 0 0 1em; }
.c-icon-cards__header .subhead p:last-child { margin-bottom: 0; }
/* Six-step process: two columns of three, read top-to-bottom per column */
.c-steps--count-6 .c-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 40px 64px; }
@media (max-width: 600px) {
.c-steps--count-6 .c-steps__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
/* Text-only Content + Media runs the full content column */
.c-content-media--none .c-content-media__content { max-width: none; }
/* Cards: optional chip row rendered inside the same section, under the grid */
.c-cards__chips { margin-top: 32px; }
/* Stats: contained variant (add class c-stats--contained) — rounded brand-green panel inside the content column */
.c-stats--contained .c-stats__grid { background: var(--color-primary-400); border: 0; border-radius: 24px; padding: 8px 16px; }
.c-stats--contained .c-stat { border-left-color: rgba(19, 12, 14, 0.18); }
.c-stats--contained .c-stat:first-child { padding-left: 32px; }
.c-stats--contained .c-stat__number { color: var(--color-neutral-900); }
.c-stats--contained .c-stat__label { color: var(--color-neutral-800); }
@media (max-width: 767px) {
.c-stats--contained .c-stats__grid { padding: 8px 0; }
.c-stats--contained .c-stat { border-left: 0; padding: 24px 24px; }
}
@media (max-width: 600px) {
.c-stats--contained .c-stats__grid{
display:block;
}
}
/* Contained stats directly after a hero read as part of the hero */
.c-hero:has(+ .c-stats--contained) { padding-bottom: 80px; }
.c-hero + .c-stats--contained { padding-top: 0; }
/* Text section feeding straight into the proof strip: the cutout already rises 72px, so trim the text section's bottom */
.c-content-media:has(+ .c-proof:not(.c-proof--no-cutout)) { padding-bottom: 16px; }
/* Stacked hero (tablet/phone): image sits flush with the content column; the arc hangs off its bottom-left corner into the gutter */
@media (max-width: 1024px) {
.c-hero--home .c-hero__media { margin-left: 0; max-width: 499px; }
.c-hero__arc { left: -28px; }
}
@media (max-width: 767px) {
.c-hero--home .c-hero__media { margin-left: 0; max-width: 100%; }
.c-hero__arc { left: -10px; bottom: -14px; }
}
/* Content + Media images: 16px corners like the hero image (covers Imagify wrappers, image pairs, and compare pairs) */
.c-content-media__media > img,
.c-content-media__media > picture,
.c-content-media__media > picture > img { display: block; width: 100%; height: auto; border-radius: 16px; overflow: hidden; }
.c-content-media__print, .c-content-media__photo { border-radius: 16px; overflow: hidden; }
.c-content-media__compare-item img { border-radius: 16px; }
/* Content + Media directly after a hero: when stacked, copy first, image second */
@media (max-width: 1024px) {
.c-hero + .c-content-media .c-content-media__content { order: 0; }
.c-hero + .c-content-media .c-content-media__media,
.c-hero + .c-content-media .c-content-media__pair,
.c-hero + .c-content-media .c-content-media__clip { order: 1; }
}