:root {
--accent-50: #ebf3fe;
--accent-100: #d6e7fd;
--accent-200: #adcffb;
--accent-300: #79b0f6;
--accent-400: #3b8aec;
--accent-500: #0b6ede;
--accent-600: #0a60c2;
--accent-700: #084d9b;
--accent-800: #073a73;
--accent-900: #05264c;
--warm-50: #fffaeb;
--warm-100: #fef0c7;
--warm-200: #fedf89;
--warm-300: #fec84b;
--warm-400: #fdb022;
--warm-500: #f79009;
--warm-600: #dc6803;
--warm-700: #b54708;
--ink-900: #0e1726;
--ink-800: #182231;
--ink-700: #2b3648;
--ink-600: #4a5568;
--ink-500: #6b7688;
--ink-400: #94a0b4;
--ink-300: #c2cbda;
--ink-200: #dde4ef;
--ink-100: #edf1f7;
--ink-50: #f6f9fd;
--text-strong: var(--ink-900);
--text-body: var(--ink-600);
--text-muted: var(--ink-500);
--text-faint: var(--ink-400);
--white: #ffffff;
--bg-canvas: #ffffff;
--bg-subtle: #f6f9fd;
--bg-muted: #edf3fb;
--bg-dark: #0b1220;
--bg-hero: linear-gradient(180deg, #e9f2fe 0%, #f6fafe 55%, #f6f9fd 100%);
--bg-overlay: rgba(14, 23, 38, 0.48);
--scrim-hero: linear-gradient(
90deg,
rgba(11, 18, 32, 0.82) 0%,
rgba(11, 18, 32, 0.68) 36%,
rgba(11, 18, 32, 0.34) 60%,
rgba(11, 18, 32, 0.1) 100%
);
--scrim-hero-md: linear-gradient(
90deg,
rgba(11, 18, 32, 0.86) 0%,
rgba(11, 18, 32, 0.78) 40%,
rgba(11, 18, 32, 0.5) 68%,
rgba(11, 18, 32, 0.18) 100%
);
--scrim-callout: linear-gradient(
90deg,
rgba(11, 18, 32, 0.8) 0%,
rgba(11, 18, 32, 0.68) 45%,
rgba(11, 18, 32, 0.32) 100%
);
--scrim-hero-sm: linear-gradient(
180deg,
rgba(11, 18, 32, 0.66) 0%,
rgba(11, 18, 32, 0.74) 50%,
rgba(11, 18, 32, 0.82) 100%
);
--surface-on-dark: rgba(255, 255, 255, 0.14);
--text-on-dark: rgba(255, 255, 255, 0.82);
--text-on-dark-muted: rgba(255, 255, 255, 0.7);
--accent-on-dark: var(--accent-200);
--success-700: #05603a;
--success-500: #12b76a;
--success-50: #ecfdf3;
--danger-700: #912018;
--danger-500: #d92d20;
--danger-50: #fef3f2;
--warning-700: #b54708;
--warning-500: #f79009;
--warning-50: #fffaeb;
--font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fs-display: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);
--fs-h2: clamp(1.4375rem, 1.0875rem + 1.6vw, 2.1875rem);
--fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
--fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
--fs-h5: 1rem;
--fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--fs-body: 1rem;
--fs-sm: 0.9375rem;
--fs-xs: 0.875rem;
--fs-2xs: 0.8125rem;
--fs-3xs: 0.75rem;
--lh-display: 1.1;
--lh-h2: 1.2;
--lh-tight: 1.35;
--lh-ui: 1.5;
--lh-body: 1.7;
--ls-display: -0.02em;
--ls-h2: -0.015em;
--ls-tight: -0.01em;
--ls-eyebrow: 0.14em;
--ls-label: 0.06em;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
--sp-30: 120px;
--container-max: 1200px;
--container-narrow: 760px;
--container-pad: clamp(20px, 4vw, 24px);
--container-pad-sm: 30px;
--gutter: clamp(20px, 3vw, 32px);
--header-h: 84px;
--header-h-sm: 68px;
--section-py: clamp(64px, 2.5rem + 4vw, 96px);
--hero-py: clamp(48px, 1.5rem + 5vw, 88px);
--hero-min-h: clamp(540px, 68vh, 720px);
--hero-content-max: 620px;
--orbit-size: clamp(360px, 46vw, 560px);
--orbit-ring: calc(var(--orbit-size) * 0.82);
--orbit-photo: calc(var(--orbit-size) * 0.64);
--orbit-icon: 58px;
--about-stat-col: 12rem;
--quote-overlap: clamp(56px, 9vw, 130px);
--callout-min-h: clamp(240px, 22vw, 320px);
--reviews-h: clamp(460px, 74vh, 660px);
--review-w: clamp(272px, 76vw, 340px);
--dur-marquee: 70s;
--dur-marquee-alt: 88s;
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-2xl: 24px;
--r-pill: 999px;
--r-circle: 50%;
--border-w: 1px;
--border-w-accent: 4px;
--border-subtle: #edf1f7;
--border-default: #dde4ef;
--border-strong: #c2cbda;
--border-accent: #0b6ede;
--border-on-dark: rgba(255, 255, 255, 0.1);
--shadow-xs: 0 1px 2px rgba(14, 23, 38, 0.04);
--shadow-sm: 0 1px 3px rgba(14, 23, 38, 0.06), 0 1px 2px rgba(14, 23, 38, 0.04);
--shadow-md: 0 4px 12px rgba(14, 23, 38, 0.06), 0 2px 4px rgba(14, 23, 38, 0.04);
--shadow-lg: 0 12px 28px rgba(14, 23, 38, 0.08), 0 4px 10px rgba(14, 23, 38, 0.04);
--shadow-xl: 0 24px 48px rgba(14, 23, 38, 0.1), 0 8px 16px rgba(14, 23, 38, 0.04);
--shadow-accent: 0 6px 16px rgba(11, 110, 222, 0.24);
--shadow-accent-lg: 0 10px 28px rgba(11, 110, 222, 0.32);
--shadow-header: 0 1px 0 rgba(14, 23, 38, 0.06), 0 6px 20px rgba(14, 23, 38, 0.04);
--ring-accent: 0 0 0 4px rgba(11, 110, 222, 0.18);
--ring-danger: 0 0 0 4px rgba(217, 45, 32, 0.16);
--accordion-sign: 32px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 30px;
--dur-fast: 150ms;
--dur-base: 200ms;
--dur-slow: 300ms;
--dur-reveal: 600ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--lift: -4px;
--lift-btn: -1px;
--lift-card: -2px;
--lift-icon: -8px;
--z-sticky: 100;
--z-header: 200;
--z-drawer: 300;
}
@media (max-width: 640px) {
:root {
--container-pad: var(--container-pad-sm);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--text-body);
background-color: var(--bg-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.is-locked {
overflow: hidden;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
ul,
ol {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--text-strong);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
text-wrap: balance;
}
p {
text-wrap: pretty;
}
.h1,
h1 {
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
}
.h2,
h2 {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
}
.h3,
h3 {
font-size: var(--fs-h3);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
}
.h4,
h4 {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
}
h5 {
font-size: var(--fs-h5);
font-weight: var(--fw-semibold);
}
.eyebrow {
display: inline-block;
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
line-height: var(--lh-ui);
text-transform: uppercase;
letter-spacing: var(--ls-eyebrow);
color: var(--warm-300);
}
.eyebrow--on-dark {
color: var(--warm-300);
}
.lead {
font-size: var(--fs-lead);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--text-body);
}
.text-accent {
color: var(--accent-500);
}
.container {
width: 100%;
max-width: calc(var(--container-max) + 2 * var(--container-pad));
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: calc(var(--container-narrow) + 2 * var(--container-pad));
}
.section {
padding-block: var(--section-py);
}
.section--tight {
padding-block: calc(var(--section-py) * 0.66);
}
.section--subtle {
background-color: var(--bg-subtle);
}
.section--canvas {
background-color: var(--bg-canvas);
}
.section--dark {
background-color: var(--bg-dark);
}
.section-head {
max-width: var(--container-narrow);
margin-inline: auto;
margin-bottom: var(--sp-12);
text-align: center;
}
.section-head .eyebrow {
margin-bottom: var(--sp-3);
}
.section-head__text {
margin-top: var(--sp-4);
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-muted);
}
.grid {
display: grid;
gap: var(--gutter);
}
.grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1023px) {
.grid--3,
.grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 639px) {
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
}
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.skip-link {
position: absolute;
top: var(--sp-2);
left: var(--sp-2);
z-index: var(--z-drawer);
padding: var(--sp-2) var(--sp-4);
background-color: var(--accent-600);
color: var(--white);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
border-radius: var(--r-sm);
transform: translateY(-150%);
transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 2px solid var(--accent-500);
outline-offset: 3px;
border-radius: var(--r-xs);
}
@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;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
height: 48px;
padding-inline: var(--sp-6);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
border: var(--border-w) solid transparent;
border-radius: var(--r-pill);
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
.btn__icon {
width: var(--icon-md);
height: var(--icon-md);
flex-shrink: 0;
}
.btn--sm {
height: 40px;
padding-inline: var(--sp-5);
font-size: var(--fs-xs);
}
.btn--lg {
height: 56px;
padding-inline: var(--sp-8);
font-size: var(--fs-body);
}
.btn--block {
width: 100%;
}
.btn--primary {
background-color: var(--accent-500);
color: var(--white);
box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
background-color: var(--accent-600);
box-shadow: var(--shadow-accent-lg);
transform: translateY(var(--lift-btn));
}
.btn--primary:active {
background-color: var(--accent-700);
transform: translateY(0);
}
.btn--outline {
background-color: var(--bg-canvas);
border-color: var(--accent-200);
color: var(--accent-600);
}
.btn--outline:hover {
background-color: var(--accent-50);
border-color: var(--accent-500);
transform: translateY(var(--lift-btn));
}
.btn--outline:active {
background-color: var(--accent-100);
}
.btn--ghost {
background-color: transparent;
color: var(--text-body);
}
.btn--ghost:hover {
background-color: var(--bg-muted);
color: var(--text-strong);
}
.btn--light {
background-color: var(--bg-canvas);
color: var(--accent-600);
}
.btn--light:hover {
background-color: var(--accent-50);
transform: translateY(var(--lift-btn));
}
.btn--ghost-light {
background-color: transparent;
border-color: var(--border-on-dark);
color: var(--white);
}
.btn--ghost-light:hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.32);
}
.btn:disabled,
.btn[aria-disabled='true'] {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
pointer-events: none;
transform: none;
}
.btn.is-loading {
color: transparent;
position: relative;
pointer-events: none;
}
.btn.is-loading::after {
content: '';
position: absolute;
width: var(--icon-md);
height: var(--icon-md);
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: var(--r-circle);
animation: btn-spin 700ms linear infinite;
color: var(--white);
}
@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
color: var(--accent-600);
text-decoration: underline;
text-decoration-color: var(--accent-200);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--dur-base) var(--ease-standard),
text-decoration-color var(--dur-base) var(--ease-standard);
}
.link-arrow::after {
content: '→';
transition: transform var(--dur-base) var(--ease-standard);
}
.link-arrow:hover {
color: var(--accent-700);
text-decoration-color: var(--accent-500);
}
.link-arrow:hover::after {
transform: translateX(3px);
}
.link-plain {
color: var(--accent-600);
font-weight: var(--fw-medium);
}
.link-plain:hover {
text-decoration: underline;
}
.icon-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--r-circle);
background-color: var(--warm-50);
color: var(--warm-700);
flex-shrink: 0;
}
.icon-dot svg {
width: var(--icon-md);
height: var(--icon-md);
}
.card {
background-color: var(--bg-canvas);
border: var(--border-w) solid var(--border-subtle);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.card--feature {
padding: var(--sp-6);
transition: box-shadow var(--dur-slow) var(--ease-standard),
transform var(--dur-slow) var(--ease-standard),
border-color var(--dur-slow) var(--ease-standard);
}
.card--feature:hover {
box-shadow: var(--shadow-md);
border-color: var(--accent-200);
transform: translateY(var(--lift-card));
}
.card--feature .card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--sp-4);
border-radius: var(--r-lg);
background-color: var(--warm-50);
color: var(--warm-700);
transition: background-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.card--feature:hover .card__icon {
background-color: var(--warm-400);
color: var(--text-strong);
}
.card--feature .card__icon svg {
width: var(--icon-lg);
height: var(--icon-lg);
}
.card--service {
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--dur-slow) var(--ease-standard),
transform var(--dur-slow) var(--ease-standard),
border-color var(--dur-slow) var(--ease-standard);
}
.card--service .card__media {
aspect-ratio: 16 / 10;
background-color: var(--bg-muted);
overflow: hidden;
}
.card--service .card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-standard);
}
.card--service .card__body {
display: flex;
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-6) var(--sp-6);
flex: 1;
}
.card--service .card__text {
flex: 1;
}
.card--service:hover {
box-shadow: var(--shadow-lg);
transform: translateY(var(--lift));
border-color: var(--border-default);
}
.card--service:hover .card__media img {
transform: scale(1.04);
}
.card--quote {
position: relative;
overflow: hidden;
padding: var(--sp-6);
transition: box-shadow var(--dur-slow) var(--ease-standard),
border-color var(--dur-slow) var(--ease-standard);
}
.card--quote:hover {
box-shadow: var(--shadow-md);
border-color: var(--accent-200);
}
.card--quote .card__mark {
position: absolute;
top: 0;
right: var(--sp-4);
font-size: var(--fs-display);
font-weight: var(--fw-bold);
line-height: 1;
color: var(--accent-100);
user-select: none;
pointer-events: none;
}
.card--quote .card__quote {
font-style: italic;
font-size: var(--fs-xs);
line-height: var(--lh-body);
color: var(--text-body);
margin-bottom: var(--sp-4);
}
.card--quote .card__author {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.card--quote .card__avatar {
width: 40px;
height: 40px;
border-radius: var(--r-circle);
object-fit: cover;
background-color: var(--bg-muted);
}
.card--quote .card__author-name {
font-size: var(--fs-2xs);
font-weight: var(--fw-semibold);
color: var(--accent-600);
}
.card--quote .card__author-role {
font-size: var(--fs-2xs);
font-weight: var(--fw-regular);
color: var(--text-faint);
}
.card__stars {
display: inline-flex;
gap: 2px;
color: var(--warning-500);
}
.card__stars svg {
width: var(--icon-sm);
height: var(--icon-sm);
fill: currentColor;
}
.card--quote .card__stars {
margin-bottom: var(--sp-3);
}
.card--paint {
height: 100%;
padding: var(--sp-6);
text-align: center;
box-shadow: var(--shadow-md);
transition: box-shadow var(--dur-slow) var(--ease-standard),
border-color var(--dur-slow) var(--ease-standard),
transform var(--dur-slow) var(--ease-standard);
}
.card--paint:hover {
box-shadow: var(--shadow-lg);
border-color: var(--accent-200);
transform: translateY(var(--lift-card));
}
.card--paint .card__title {
margin-bottom: var(--sp-3);
}
.card--form {
padding: var(--sp-10);
border-radius: var(--r-2xl);
border-color: transparent;
box-shadow: var(--shadow-xl);
}
@media (max-width: 900px) {
.card--form {
padding: var(--sp-8);
}
}
@media (max-width: 479px) {
.card--form {
padding: var(--sp-6);
}
}
.card__title {
font-size: var(--fs-h4);
font-weight: var(--fw-semibold);
color: var(--text-strong);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
}
.card__text {
font-size: var(--fs-xs);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
color: var(--text-muted);
}
.form {
display: grid;
gap: var(--sp-5);
}
.field {
display: grid;
gap: var(--sp-2);
}
.field--split {
display: grid;
gap: var(--sp-5);
grid-template-columns: 1fr 1fr;
}
@media (max-width: 479px) {
.field--split {
grid-template-columns: 1fr;
}
}
.field__label {
font-size: var(--fs-3xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--ls-label);
color: var(--text-muted);
}
.field__label .req {
color: var(--accent-500);
}
.field__control {
height: 46px;
padding-inline: var(--sp-4);
background-color: var(--bg-canvas);
border: var(--border-w) solid var(--border-default);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
color: var(--text-strong);
transition: border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-fast) var(--ease-standard);
}
.field__control::placeholder {
color: var(--text-faint);
}
.field__control:hover {
border-color: var(--border-strong);
}
.field__control:focus {
outline: none;
border-color: var(--accent-500);
box-shadow: var(--ring-accent);
}
.field__control:disabled {
background-color: var(--bg-subtle);
color: var(--text-faint);
}
textarea.field__control {
height: auto;
min-height: 96px;
padding-block: var(--sp-3);
resize: vertical;
line-height: var(--lh-body);
}
.field.has-error .field__control {
border-color: var(--danger-500);
}
.field.has-error .field__control:focus {
box-shadow: var(--ring-danger);
}
.field__error {
display: none;
font-size: var(--fs-2xs);
color: var(--danger-500);
}
.field.has-error .field__error {
display: block;
}
.form__feedback {
display: none;
padding: var(--sp-4);
border-radius: var(--r-sm);
font-size: var(--fs-xs);
line-height: var(--lh-ui);
}
.form__feedback.is-visible {
display: block;
}
.form__feedback--success {
background-color: var(--success-50);
color: var(--success-700);
}
.form__feedback--error {
background-color: var(--danger-50);
color: var(--danger-700);
}
.accordion {
display: grid;
gap: var(--sp-4);
}
.accordion__item {
background-color: var(--bg-canvas);
border: var(--border-w) solid var(--border-subtle);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
transition: border-color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-slow) var(--ease-standard);
}
.accordion__item:hover {
box-shadow: var(--shadow-lg);
border-color: var(--accent-200);
}
.accordion__item.is-open {
border-color: var(--accent-200);
box-shadow: var(--shadow-lg);
}
.accordion__heading {
margin: 0;
}
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
width: 100%;
padding: var(--sp-6);
font-size: var(--fs-body);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
color: var(--text-strong);
}
.accordion__label {
flex: 1;
text-align: left;
}
.accordion__item.is-open .accordion__trigger,
.accordion__trigger:hover {
color: var(--accent-600);
}
.accordion__sign {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--accordion-sign);
height: var(--accordion-sign);
border-radius: var(--r-circle);
background-color: var(--accent-50);
color: var(--accent-600);
flex-shrink: 0;
transition: background-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard);
}
.accordion__item.is-open .accordion__sign {
background-color: var(--accent-500);
color: var(--white);
}
.accordion__sign::before,
.accordion__sign::after {
content: '';
position: absolute;
background-color: currentColor;
border-radius: var(--r-pill);
}
.accordion__sign::before {
width: 10px;
height: 2px;
}
.accordion__sign::after {
width: 2px;
height: 10px;
transition: transform var(--dur-base) var(--ease-standard);
}
.accordion__item.is-open .accordion__sign::after {
transform: scaleY(0);
}
.accordion__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-slow) var(--ease-standard);
}
.accordion__item.is-open .accordion__panel {
grid-template-rows: 1fr;
}
.accordion__panel-inner {
overflow: hidden;
}
.accordion__answer {
padding: 0 var(--sp-6) var(--sp-6);
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-muted);
}
.has-js .reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--dur-reveal) var(--ease-out),
transform var(--dur-reveal) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.has-js .reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.has-js .reveal {
opacity: 1;
transform: none;
transition: none;
}
}
.header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: var(--border-w) solid transparent;
transition: box-shadow var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard);
}
.header.is-stuck {
border-bottom-color: var(--border-subtle);
box-shadow: var(--shadow-header);
}
.header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--sp-6);
height: var(--header-h);
}
.header__inner > .logo {
grid-column: 1;
justify-self: start;
}
.header__inner > .nav {
grid-column: 2;
}
.header__inner > .header__actions {
grid-column: 3;
justify-self: end;
}
@media (max-width: 767px) {
.header__inner {
height: var(--header-h-sm);
}
}
.logo {
display: inline-flex;
align-items: center;
}
.logo__img {
width: auto;
height: 64px;
}
@media (max-width: 767px) {
.logo__img {
height: 48px;
}
}
.nav {
display: flex;
align-items: center;
gap: var(--sp-8);
}
.nav__link {
position: relative;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--text-body);
padding-block: var(--sp-2);
transition: color var(--dur-fast) var(--ease-standard);
}
.nav__link::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--accent-500);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover {
color: var(--text-strong);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after {
transform: scaleX(1);
}
.nav__link[aria-current='true'] {
color: var(--text-strong);
}
.header__actions {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.header__cta {
height: calc(40px + 2 * 3px);
}
.header__toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--r-md);
color: var(--text-strong);
}
.header__toggle svg {
width: var(--icon-lg);
height: var(--icon-lg);
}
.header__toggle .icon-close {
display: none;
}
.header__toggle[aria-expanded='true'] .icon-open {
display: none;
}
.header__toggle[aria-expanded='true'] .icon-close {
display: block;
}
@media (max-width: 1023px) {
.nav,
.header__cta {
display: none;
}
.header__toggle {
display: inline-flex;
}
}
.drawer {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
z-index: var(--z-drawer);
padding: var(--sp-6) var(--container-pad) var(--sp-8);
background-color: var(--bg-canvas);
box-shadow: var(--shadow-xl);
opacity: 0;
transform: translateY(-12px);
visibility: hidden;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
@media (max-width: 767px) {
.drawer {
top: var(--header-h-sm);
}
}
.drawer.is-open {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
.drawer__nav {
display: grid;
gap: var(--sp-2);
margin-bottom: var(--sp-6);
}
.drawer__link {
padding: var(--sp-3) var(--sp-2);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--text-body);
border-radius: var(--r-sm);
}
.drawer__link:hover {
background-color: var(--bg-muted);
color: var(--text-strong);
}
@media (min-width: 1024px) {
.drawer {
display: none;
}
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: var(--hero-min-h);
padding-block: var(--hero-py);
background-color: var(--bg-dark);
}
.hero__media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 74% center;
}
.hero__media::after {
content: '';
position: absolute;
inset: 0;
background: var(--scrim-hero);
}
.hero__inner {
position: relative;
}
.hero__content {
max-width: var(--hero-content-max);
}
.hero__title {
margin-bottom: var(--sp-5);
color: var(--white);
text-wrap: balance;
}
.hero__title .text-accent {
color: var(--warm-300);
}
.hero__lead {
max-width: 46ch;
margin-bottom: var(--sp-8);
color: var(--text-on-dark);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-8);
}
.hero__trust {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4) var(--sp-5);
}
.hero__trust-item {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--fs-xs);
color: var(--text-on-dark);
}
.hero__trust-item svg {
width: var(--icon-md);
height: var(--icon-md);
color: var(--warm-300);
flex-shrink: 0;
}
.hero__stat {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: var(--border-w) solid var(--border-on-dark);
color: var(--text-on-dark);
}
.hero__stat-num {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--white);
line-height: 1.1;
}
.hero__stat-label {
font-size: var(--fs-2xs);
color: var(--text-on-dark);
}
@media (max-width: 1200px) {
.hero__media img {
object-position: 62% center;
}
.hero__media::after {
background: var(--scrim-hero-md);
}
}
@media (max-width: 900px) {
.hero__media::after {
background: var(--scrim-hero-sm);
}
}
@media (max-width: 640px) {
.hero {
min-height: auto;
}
.hero__media img {
object-position: 58% center;
}
.hero__actions .btn {
width: 100%;
}
.hero__trust {
flex-direction: column;
gap: var(--sp-3);
}
}
.services__list {
display: grid;
gap: var(--sp-4);
margin-bottom: var(--sp-10);
list-style: none;
}
.services__tab {
display: flex;
align-items: center;
gap: var(--sp-4);
width: 100%;
padding: var(--sp-5);
border: var(--border-w) solid var(--border-default);
border-radius: var(--r-xl);
background-color: var(--bg-subtle);
color: var(--text-strong);
font-size: var(--fs-h5);
font-weight: var(--fw-semibold);
text-align: left;
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
color var(--dur-fast) var(--ease-standard),
transform var(--dur-base) var(--ease-standard);
}
.services__tab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--r-lg);
background-color: var(--accent-50);
color: var(--accent-600);
transition: background-color var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.services__tab-icon svg {
width: var(--icon-md);
height: var(--icon-md);
}
.services__tab-label {
flex: 1;
}
.services__tab-chevron {
width: var(--icon-md);
height: var(--icon-md);
flex-shrink: 0;
color: var(--text-faint);
transition: transform var(--dur-base) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.services__tab:hover {
border-color: var(--accent-200);
background-color: var(--accent-50);
}
.services__tab:hover .services__tab-chevron {
transform: translateX(3px);
color: var(--accent-600);
}
.services__panel {
padding: var(--sp-10);
margin-bottom: var(--sp-6);
border: var(--border-w) solid var(--border-subtle);
border-radius: var(--r-2xl);
background-color: var(--bg-canvas);
}
.services__panel-head {
padding-bottom: var(--sp-6);
margin-bottom: var(--sp-6);
border-bottom: var(--border-w) solid var(--border-subtle);
}
.services__panel-title {
margin-bottom: var(--sp-4);
}
.services__panel-text {
max-width: 62ch;
color: var(--text-body);
}
.services__panel-grid {
display: grid;
gap: var(--gutter);
align-items: start;
grid-template-columns: 0.75fr 1fr;
}
.services__features {
display: grid;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
list-style: none;
}
.services__features li {
position: relative;
padding-left: var(--sp-5);
font-size: var(--fs-xs);
color: var(--text-body);
}
.services__features li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: var(--sp-2);
height: var(--sp-2);
border-radius: var(--r-circle);
background-color: var(--accent-300);
}
.services__panel-cta {
font-size: var(--fs-sm);
}
.services__panel-media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r-xl);
background-color: var(--bg-muted);
}
.services.is-enhanced {
display: grid;
row-gap: var(--gutter);
column-gap: var(--sp-12);
align-items: start;
grid-template-columns: 0.8fr 1.2fr;
}
.services.is-enhanced .services__list {
margin-bottom: 0;
}
.services.is-enhanced .services__tab {
color: var(--text-body);
cursor: pointer;
}
.services.is-enhanced .services__tab-icon {
background-color: var(--bg-muted);
color: var(--text-muted);
}
.services.is-enhanced .services__tab:hover {
background-color: var(--accent-50);
border-color: var(--accent-100);
color: var(--text-strong);
}
.services.is-enhanced .services__tab[aria-selected='true'] {
background-color: var(--bg-canvas);
border-color: var(--accent-200);
color: var(--text-strong);
box-shadow: var(--shadow-md);
transform: translateX(var(--sp-2));
}
.services.is-enhanced .services__tab[aria-selected='true'] .services__tab-icon {
background-color: var(--accent-500);
color: var(--white);
}
.services.is-enhanced
.services__tab[aria-selected='true']
.services__tab-chevron {
color: var(--accent-500);
transform: translateX(3px);
}
.services.is-enhanced .services__panels {
position: relative;
}
.services.is-enhanced .services__panel {
margin-bottom: 0;
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.services.is-enhanced .services__panel[hidden] {
display: none;
}
.services.is-enhanced .services__panel:focus-visible {
outline: var(--border-w-accent) solid var(--accent-500);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.services.is-enhanced .services__panel:not([hidden]) {
animation: services-panel-in var(--dur-slow) var(--ease-out) both;
}
}
@keyframes services-panel-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
@media (max-width: 900px) {
.services__list {
display: none;
}
}
@media (max-width: 820px) {
.services__panel {
padding: var(--sp-8);
}
.services__panel-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.services__tab {
gap: var(--sp-3);
padding: var(--sp-4);
font-size: var(--fs-sm);
}
}
.quote {
padding-bottom: 0;
}
.quote__grid {
display: grid;
gap: var(--gutter);
align-items: start;
grid-template-columns: 1fr 1fr;
}
.quote__form-col {
position: relative;
margin-bottom: calc(var(--quote-overlap) * -1);
}
.quote__args-col {
padding-bottom: var(--section-py);
}
.quote__intro {
margin-bottom: var(--sp-8);
}
.quote__contacts {
display: grid;
gap: var(--sp-5);
margin-bottom: var(--sp-8);
list-style: none;
}
.quote__contact {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.quote__contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--r-lg);
background-color: var(--warm-50);
color: var(--warm-700);
}
.quote__contact-icon svg {
width: var(--icon-md);
height: var(--icon-md);
}
.quote__contact-body {
display: grid;
gap: var(--sp-1);
}
.quote__contact-label {
font-size: var(--fs-3xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-faint);
}
.quote__contact a,
.quote__contact-value {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--text-strong);
}
.quote__contact a:hover {
color: var(--accent-600);
}
.quote__rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
margin-top: var(--sp-5);
padding-top: var(--sp-5);
border-top: var(--border-w) solid var(--border-default);
}
.quote__rating-num {
font-size: var(--fs-h4);
font-weight: var(--fw-bold);
color: var(--text-strong);
line-height: 1;
}
.quote__rating-label {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.quote__intro .eyebrow {
margin-bottom: var(--sp-3);
}
.quote__intro .lead {
margin-top: var(--sp-4);
}
.quote__features {
display: grid;
gap: var(--sp-4);
}
@media (max-width: 900px) {
.quote {
padding-bottom: var(--section-py);
}
.quote__grid {
grid-template-columns: 1fr;
}
.quote__form-col {
order: -1;
margin-bottom: 0;
}
.quote__args-col {
padding-bottom: 0;
}
.footer {
padding-top: var(--sp-12);
}
}
.quote__form-head {
margin-bottom: var(--sp-6);
}
.quote__form-head .card__title {
margin-bottom: var(--sp-2);
}
.quote__form-sub {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.section-head--marked .eyebrow::before {
content: '';
display: block;
width: var(--sp-8);
height: var(--border-w-accent);
margin: 0 auto var(--sp-3);
border-radius: var(--r-pill);
background-color: var(--warm-300);
}
.about__grid {
display: grid;
gap: var(--gutter);
align-items: center;
grid-template-columns: 1fr 1fr;
}
.about__orbit {
position: relative;
display: grid;
place-items: center;
width: var(--orbit-size);
height: var(--orbit-size);
margin-inline: auto;
}
.about__orbit-ring {
position: absolute;
top: 50%;
left: 50%;
width: var(--orbit-ring);
height: var(--orbit-ring);
transform: translate(-50%, -50%);
border: var(--border-w) dashed var(--border-strong);
border-radius: var(--r-circle);
}
.about__orbit-ring--outer {
width: var(--orbit-size);
height: var(--orbit-size);
border-color: var(--border-default);
}
.about__orbit-photo {
position: relative;
width: var(--orbit-photo);
height: var(--orbit-photo);
}
.about__orbit-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 58% center;
border-radius: var(--r-circle);
box-shadow: var(--shadow-lg);
background-color: var(--bg-muted);
}
.about__orbit-icons {
position: absolute;
inset: 0;
list-style: none;
}
.about__orbit-icon {
position: absolute;
top: 50%;
left: 50%;
display: grid;
place-items: center;
width: var(--orbit-icon);
height: var(--orbit-icon);
margin: calc(var(--orbit-icon) / -2);
border-radius: var(--r-circle);
background-color: var(--accent-50);
border: var(--border-w) solid var(--accent-100);
box-shadow: var(--shadow-md);
color: var(--accent-600);
transform: rotate(var(--a))
translateY(calc(var(--orbit-ring) / -2))
rotate(calc(var(--a) * -1));
transition: background-color var(--dur-base) var(--ease-standard),
border-color var(--dur-base) var(--ease-standard),
color var(--dur-base) var(--ease-standard),
box-shadow var(--dur-base) var(--ease-standard),
transform var(--dur-slow) var(--ease-bounce);
}
.about__orbit-icon:hover {
background-color: var(--accent-500);
border-color: var(--accent-500);
color: var(--white);
box-shadow: var(--shadow-accent-lg);
transform: rotate(var(--a))
translateY(calc(var(--orbit-ring) / -2))
rotate(calc(var(--a) * -1))
translateY(var(--lift-icon));
}
.about__orbit-icon svg {
width: var(--icon-lg);
height: var(--icon-lg);
}
.about__orbit-icon:nth-child(1) {
--a: 0deg;
}
.about__orbit-icon:nth-child(2) {
--a: 72deg;
}
.about__orbit-icon:nth-child(3) {
--a: 144deg;
}
.about__orbit-icon:nth-child(4) {
--a: 216deg;
}
.about__orbit-icon:nth-child(5) {
--a: 288deg;
}
.about__subtitle {
position: relative;
margin-bottom: var(--sp-4);
padding-top: var(--sp-4);
font-size: var(--fs-h2);
}
.about__subtitle::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: var(--sp-8);
height: var(--border-w-accent);
border-radius: var(--r-pill);
background-color: var(--warm-300);
}
.about__text {
color: var(--text-body);
margin-bottom: var(--sp-5);
}
.about__stats {
margin-top: var(--sp-4);
margin-bottom: var(--sp-8);
list-style: none;
border-top: var(--border-w) solid var(--border-default);
}
.about__stat {
display: grid;
gap: var(--sp-4);
align-items: center;
grid-template-columns: minmax(0, var(--about-stat-col)) 1fr;
padding-block: var(--sp-5);
border-bottom: var(--border-w) solid var(--border-default);
}
.about__stat-figure {
display: flex;
align-items: baseline;
gap: var(--sp-2);
white-space: nowrap;
}
.about__stat-num {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
color: var(--text-strong);
line-height: 1.1;
white-space: nowrap;
}
.about__stat-unit {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.about__stat-text {
font-size: var(--fs-xs);
color: var(--text-muted);
}
@media (max-width: 900px) {
.about__grid {
grid-template-columns: 1fr;
gap: var(--sp-12);
}
.about__orbit {
order: -1;
}
}
@media (max-width: 600px) {
.about__orbit {
--orbit-icon: 42px;
}
.about__orbit-icon svg {
width: var(--icon-md);
height: var(--icon-md);
}
}
@media (max-width: 479px) {
.about__orbit-ring,
.about__orbit-icons {
display: none;
}
.about__orbit {
width: auto;
height: auto;
}
.about__orbit-photo {
width: 100%;
max-width: 380px;
height: auto;
aspect-ratio: 1;
}
.about__orbit-photo img {
border-radius: var(--r-2xl);
}
.about__stat {
grid-template-columns: 1fr;
gap: var(--sp-2);
}
}
.faq {
display: grid;
gap: var(--sp-4) var(--gutter);
align-items: start;
grid-template-columns: 1fr 1fr;
}
.faq__col {
display: grid;
gap: var(--sp-4);
align-content: start;
}
@media (max-width: 860px) {
.faq {
grid-template-columns: 1fr;
}
}
.paints__note {
max-width: 78ch;
margin-inline: auto;
margin-top: var(--sp-10);
padding-top: var(--sp-8);
border-top: var(--border-w) solid var(--border-default);
font-size: var(--fs-sm);
line-height: var(--lh-body);
color: var(--text-body);
text-align: center;
}
.paints__note strong {
color: var(--text-strong);
font-weight: var(--fw-semibold);
}
.reviews__grid {
display: grid;
gap: var(--sp-12) var(--gutter);
align-items: center;
grid-template-columns: 0.85fr 1.15fr;
}
.reviews__text {
margin-top: var(--sp-5);
color: var(--text-body);
}
.reviews__score {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-3);
margin-top: var(--sp-6);
padding-top: var(--sp-6);
border-top: var(--border-w) solid var(--border-default);
}
.reviews__score-num {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--text-strong);
line-height: 1;
}
.reviews__score-label {
font-size: var(--fs-2xs);
color: var(--text-muted);
}
.reviews__actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-8);
}
@media (max-width: 900px) {
.reviews__grid {
grid-template-columns: 1fr;
}
}
.reviews__body {
min-width: 0;
}
.reviews__group,
.reviews__item {
list-style: none;
}
.reviews__group {
display: grid;
gap: var(--gutter);
}
.reviews__marquee {
overflow: hidden;
}
.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track {
animation-play-state: paused;
}
.reviews__body.is-cols {
display: grid;
gap: var(--gutter);
grid-template-columns: 1fr 1fr;
}
.is-cols .reviews__marquee {
height: var(--reviews-h);
mask-image: linear-gradient(
180deg,
transparent 0%,
#000 12%,
#000 88%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
180deg,
transparent 0%,
#000 12%,
#000 88%,
transparent 100%
);
}
.is-cols .reviews__track {
display: grid;
gap: var(--gutter);
animation: reviews-scroll-y var(--dur-marquee) linear infinite;
}
.is-cols .reviews__marquee:nth-child(2) .reviews__track {
animation-duration: var(--dur-marquee-alt);
animation-direction: reverse;
}
@keyframes reviews-scroll-y {
from {
transform: translateY(0);
}
to {
transform: translateY(calc(-50% - var(--gutter) / 2));
}
}
.is-rail .reviews__marquee {
mask-image: linear-gradient(
90deg,
transparent 0%,
#000 6%,
#000 94%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
#000 6%,
#000 94%,
transparent 100%
);
}
.is-rail .reviews__track,
.is-rail .reviews__group {
display: flex;
gap: var(--gutter);
width: max-content;
}
.is-rail .reviews__track {
animation: reviews-scroll-x var(--dur-marquee) linear infinite;
}
.is-rail .reviews__item {
width: var(--review-w);
display: flex;
}
.is-rail .reviews__item .card {
width: 100%;
}
@keyframes reviews-scroll-x {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - var(--gutter) / 2));
}
}
@media (prefers-reduced-motion: reduce) {
.reviews__marquee {
height: auto;
overflow: visible;
mask-image: none;
-webkit-mask-image: none;
}
.reviews__track {
animation-name: none;
}
.reviews__group[aria-hidden='true'] {
display: none;
}
.is-rail .reviews__marquee {
overflow-x: auto;
}
}
.callout {
padding-top: 0;
}
.callout__card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: var(--callout-min-h);
padding: var(--sp-10) var(--sp-12);
border-radius: var(--r-2xl);
background-color: var(--bg-dark);
box-shadow: var(--shadow-xl);
}
.callout__media {
position: absolute;
inset: 0;
z-index: -1;
}
.callout__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.callout__media::after {
content: '';
position: absolute;
inset: 0;
background: var(--scrim-callout);
}
.callout__body {
display: grid;
gap: var(--gutter);
align-items: center;
grid-template-columns: 1fr 0.6fr;
width: 100%;
}
.callout__title {
color: var(--white);
margin-bottom: var(--sp-4);
text-wrap: balance;
}
.callout__text {
color: var(--text-on-dark);
max-width: 42ch;
}
.callout__panel {
display: flex;
flex-direction: column;
gap: var(--sp-4);
padding: var(--sp-4);
border-radius: var(--r-xl);
background-color: var(--surface-on-dark);
border: var(--border-w) solid var(--border-on-dark);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
@media (max-width: 900px) {
.callout__card {
padding: var(--sp-8);
}
.callout__body {
grid-template-columns: 1fr;
}
.callout__media img {
object-position: 40% center;
}
}
@media (max-width: 560px) {
.callout__card {
padding: var(--sp-6);
}
.callout__panel {
padding: var(--sp-3);
}
.callout__panel .btn {
white-space: normal;
height: auto;
min-height: 56px;
padding: var(--sp-3) var(--sp-5);
text-align: center;
}
}
.footer {
background-color: var(--bg-dark);
color: var(--text-on-dark-muted);
padding-top: calc(var(--section-py) + var(--quote-overlap));
padding-bottom: var(--sp-6);
}
.footer__cols {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--gutter);
padding-bottom: var(--sp-10);
}
@media (max-width: 900px) {
.footer__cols {
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-8);
}
}
@media (max-width: 479px) {
.footer__cols {
grid-template-columns: 1fr;
}
}
.footer__brand-img {
width: auto;
height: 64px;
margin-bottom: var(--sp-5);
filter: brightness(0) invert(1);
}
.footer__brand-text {
max-width: 34ch;
font-size: var(--fs-xs);
line-height: var(--lh-body);
color: var(--text-on-dark-muted);
margin-bottom: var(--sp-5);
}
.footer__social {
display: flex;
gap: var(--sp-3);
}
.footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--r-circle);
border: var(--border-w) solid var(--border-on-dark);
color: rgba(255, 255, 255, 0.72);
transition: color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.footer__social a:hover {
color: var(--white);
border-color: rgba(255, 255, 255, 0.32);
}
.footer__social svg {
width: var(--icon-md);
height: var(--icon-md);
}
.footer__col-title {
color: var(--white);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
margin-bottom: var(--sp-5);
}
.footer__list {
display: grid;
gap: var(--sp-3);
}
.footer__list a,
.footer__list span {
font-size: var(--fs-xs);
color: var(--text-on-dark-muted);
transition: color var(--dur-fast) var(--ease-standard);
}
.footer__list a:hover {
color: var(--white);
}
.footer__contact-item {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
}
.footer__contact-item svg {
width: var(--icon-md);
height: var(--icon-md);
color: var(--warm-300);
flex-shrink: 0;
margin-top: 2px;
}
.footer__phone {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--warm-300);
}
.footer__bottom {
padding-top: var(--sp-6);
border-top: var(--border-w) solid var(--border-on-dark);
text-align: center;
font-size: var(--fs-2xs);
color: var(--text-on-dark-muted);
}
@media (max-width: 767px) {
.footer {
padding-bottom: calc(var(--section-py) + 76px);
}
}
.callbar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-sticky);
gap: var(--sp-3);
padding: var(--sp-3) var(--container-pad);
padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: var(--border-w) solid var(--border-subtle);
transform: translateY(100%);
transition: transform var(--dur-slow) var(--ease-out);
}
.callbar.is-visible {
transform: translateY(0);
}
.callbar .btn {
flex: 1;
}
@media (max-width: 767px) {
.callbar {
display: flex;
}
}