/* ==========================================================================
Wilmington Awning, Shutter & Shade — Modern Brand Design System
--------------------------------------------------------------------------
Brand identity preserved:
- Royal blue #2e59a5 primary, white background, light gray accents
- Open Sans (brand body) + Sora (modern display)
- Dual-bar header with floating white logo card
- Centered uppercase blue section titles
Modern web language layered on top:
- Asymmetric hero with floating accent cards
- Bento-grid service tiles with refined hover
- Stats counter band, partner marquee
- Modern soft shadows, gradient blue accents, smooth motion
========================================================================== */
/* 1. TOKENS ================================================================ */
:root {
--blue: #2e59a5;
--blue-dark: #1a3568;
--blue-deep: #0f2247;
--blue-bright: #3d7cd8;
--blue-soft: #e8eef9;
--blue-tint: #f4f7fc;
--gray-bar: #e6e6e6;
--gray-light: #f7f8fa;
--gray-rule: #e5e7eb;
--ink: #1a1d23;
--muted: #5b6471;
--white: #ffffff;
--accent: #f4a83a;
--sand: #f3efe7;
--rule: #e5e7eb;
--container: 1280px;
--section-y: clamp(72px, 9vw, 128px);
--font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--display: "Sora", "Open Sans", system-ui, sans-serif;
--grad-blue: linear-gradient(135deg, #2e59a5 0%, #1a3568 100%);
--grad-soft: linear-gradient(180deg, #f4f7fc 0%, #ffffff 100%);
--grad-mesh: radial-gradient(at 30% 20%, rgba(46,89,165,0.10), transparent 50%),
radial-gradient(at 70% 80%, rgba(61,124,216,0.08), transparent 50%);
--shadow-soft: 0 1px 2px rgba(15,34,71,0.04), 0 4px 12px -4px rgba(15,34,71,0.06);
--shadow-card: 0 4px 16px -4px rgba(15,34,71,0.08), 0 12px 36px -12px rgba(15,34,71,0.12);
--shadow-lift: 0 20px 50px -16px rgba(46,89,165,0.25);
--shadow-blue: 0 18px 40px -14px rgba(46,89,165,0.45);
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--r-xl: 32px;
--ease: cubic-bezier(.22, .61, .36, 1);
--t: 280ms;
--top-bar-h: 52px;
--nav-bar-h: 72px;
}
/* 2. RESET / BASE ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
font-weight: 400;
line-height: 1.65;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--blue); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: var(--blue-bright); }
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--display);
font-weight: 600;
line-height: 1.12;
color: var(--ink);
letter-spacing: -0.015em;
}
p { margin: 0 0 1em; }
ul, ol { padding: 0; margin: 0; }
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--blue); color: #fff; padding: 12px 20px; z-index: 1000; }
.skip-link:focus { top: 16px; color: #fff; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }
/* 3. LAYOUT ================================================================ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(48px, 7vw, 88px) 0; }
.section--gray { background: var(--gray-light); }
.section--soft { background: var(--blue-tint); }
.section--blue { background: var(--blue); color: var(--white); }
.section--deep { background: var(--blue-deep); color: var(--white); }
.section--mesh { background: var(--white) var(--grad-mesh); position: relative; }
.section--blue h1, .section--blue h2, .section--blue h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }
.split { display: grid; gap: clamp(40px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
.split--7-5 { align-items: start; }
.split-figure { margin: 0 0 30px; }
.split-figure img,
.split-figure video {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
border-radius: var(--r-lg); box-shadow: var(--shadow-card); display: block;
}
.split--6-6 > *, .split--7-5 > *, .split--5-7 > * { min-width: 0; }
@media (min-width: 900px) {
.split--6-6 { grid-template-columns: 1fr 1fr; }
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
}
/* 4. TYPE ================================================================== */
h1, .h1 { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 700; letter-spacing: -0.025em; }
h2, .h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }
.lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; color: var(--muted); font-weight: 400; }
.muted { color: var(--muted); }
.center { text-align: center; }
.text-blue { color: var(--blue); }
.text-grad {
background: var(--grad-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Tiny uppercase eyebrow */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 18px;
}
.eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 2px;
background: var(--blue);
}
.eyebrow--light { color: rgba(255,255,255,0.92); }
.eyebrow--light::before { background: rgba(255,255,255,0.6); }
.eyebrow--center { justify-content: center; }
/* 5. BUTTONS =============================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 16px 28px; border: 2px solid transparent;
background: transparent; color: inherit; cursor: pointer; user-select: none;
transition: all var(--t) var(--ease);
white-space: nowrap; border-radius: 999px;
line-height: 1.1;
}
.btn-primary {
background: var(--blue);
color: var(--white);
border-color: var(--blue);
box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
background: var(--blue-dark);
border-color: var(--blue-dark);
color: var(--white);
transform: translateY(-1px);
box-shadow: var(--shadow-blue);
}
.btn-outline { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: var(--white); transform: translateY(-1px); }
.btn-white { background: var(--white); color: var(--blue); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-ghost-white:hover { background: var(--white); color: var(--blue); border-color: var(--white); }
.btn-large { padding: 18px 36px; font-size: 14px; }
.btn-small { padding: 11px 20px; font-size: 11px; }
.btn-block { display: flex; width: 100%; }
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* 6. SHARED HEADER TOGGLE + MOBILE DRAWER ================================ */
.site-header__toggle {
display: flex; flex-direction: column; gap: 5px;
background: none; border: 0; padding: 12px;
margin-left: auto;
}
.site-header__toggle span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; }
@media (min-width: 1080px) { .site-header__toggle { display: none; } }
.mobile-drawer { position: fixed; inset: 0; background: var(--white); z-index: 200; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 300ms var(--ease); overflow-y: auto; }
.mobile-drawer:not([hidden]) { transform: translateX(0); display: flex; }
.mobile-drawer[hidden] { display: none; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--grad-blue); }
.mobile-drawer__logo img { height: 44px; background: white; padding: 6px 10px; border-radius: var(--r-sm); }
.mobile-drawer__close { font-size: 28px; background: none; border: 0; line-height: 1; color: var(--white); padding: 4px 12px; }
.mobile-drawer__nav { padding: 16px; flex: 1; }
.mobile-drawer__nav ul { list-style: none; }
.mobile-drawer__nav details { border-bottom: 1px solid var(--gray-rule); }
.mobile-drawer__nav summary {
padding: 18px 4px; font-size: 14px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue);
cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.mobile-drawer__nav summary::-webkit-details-marker { display: none; }
.mobile-drawer__nav summary::after { content: "+"; font-weight: 400; font-size: 22px; }
.mobile-drawer__nav details[open] summary::after { content: "−"; }
.mobile-drawer__nav details ul { padding-bottom: 12px; }
.mobile-drawer__nav details a {
display: block; padding: 8px 0 8px 16px;
font-size: 14px; color: var(--ink);
text-transform: none; letter-spacing: 0;
}
.mobile-drawer__foot { padding: 24px; border-top: 1px solid var(--gray-rule); display: flex; flex-direction: column; gap: 12px; }
.mobile-drawer__book { background: var(--accent); border-color: var(--accent); color: var(--blue-deep); }
.mobile-drawer__book:hover { background: var(--accent); border-color: var(--accent); color: var(--blue-deep); filter: brightness(0.96); }
.mobile-drawer__phone { text-align: center; font-size: 1.25rem; font-weight: 700; color: var(--blue); padding: 8px; }
body.is-locked { overflow: hidden; }
/* 7. HERO — modern asymmetric ============================================== */
.hero {
position: relative;
background: var(--blue-tint);
background-image: var(--grad-mesh);
padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 140px);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -200px; right: -200px;
width: 600px; height: 600px;
background: radial-gradient(closest-side, rgba(46,89,165,0.18), transparent 70%);
z-index: 0;
pointer-events: none;
}
.hero__grid {
display: grid; gap: clamp(40px, 5vw, 64px);
grid-template-columns: 1fr;
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 980px) {
.hero__grid { grid-template-columns: 1.05fr 1fr; gap: 80px; }
}
.hero__content { position: relative; z-index: 2; }
.hero__title {
font-family: var(--display);
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ink);
margin-bottom: 24px;
}
.hero__title .grad {
background: var(--grad-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero__lede {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--muted);
max-width: 52ch;
margin-bottom: 36px;
line-height: 1.6;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero__phone-callout {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 28px;
padding: 14px 22px 14px 18px;
background: var(--white);
border-radius: 999px;
box-shadow: var(--shadow-soft);
border: 1px solid var(--gray-rule);
}
.hero__phone-callout .dot {
width: 10px; height: 10px;
background: #4ade80;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
50% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
}
.hero__phone-callout .label {
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.hero__phone-callout .number {
font-family: var(--display);
font-size: 1.05rem;
font-weight: 700;
color: var(--blue);
}
/* Hero media — layered image + floating accent cards */
.hero__media {
position: relative;
}
.hero__image {
position: relative;
aspect-ratio: 5 / 6;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-card);
background: var(--blue-soft) center/cover;
}
.hero__image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(15,34,71,0.25));
}
.hero__badge {
position: absolute;
top: 24px; left: -18px;
background: var(--white);
padding: 12px 20px;
border-radius: 999px;
font-family: var(--display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
box-shadow: var(--shadow-card);
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 3;
}
.hero__badge::before {
content: "★"; color: var(--blue-bright); font-size: 14px;
}
.hero__stat-card {
position: absolute;
bottom: -24px; right: -16px;
background: var(--white);
padding: 20px 24px;
border-radius: var(--r-md);
box-shadow: var(--shadow-lift);
z-index: 3;
min-width: 200px;
}
.hero__stat-card .num {
font-family: var(--display);
font-size: 2.5rem;
font-weight: 700;
color: var(--blue);
line-height: 1;
letter-spacing: -0.03em;
}
.hero__stat-card .lbl {
font-size: 12px;
font-weight: 600;
color: var(--muted);
letter-spacing: 0.05em;
margin-top: 6px;
}
/* Hero trust strip below */
.hero__trust {
margin-top: clamp(48px, 6vw, 72px);
padding-top: clamp(32px, 4vw, 48px);
border-top: 1px solid var(--gray-rule);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
position: relative;
z-index: 2;
}
@media (min-width: 700px) { .hero__trust { grid-template-columns: repeat(4, 1fr); } }
.hero__trust-item {
display: flex; flex-direction: column; gap: 4px;
}
.hero__trust-num {
font-family: var(--display);
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 700;
color: var(--blue);
letter-spacing: -0.025em;
line-height: 1;
}
.hero__trust-lbl {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.4;
}
/* Sub-hero — for interior pages, modernized */
.subhero {
position: relative;
padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 76px);
background: var(--blue);
background-image: var(--grad-blue);
color: var(--white);
text-align: left;
overflow: hidden;
}
.subhero::before {
content: "";
position: absolute; top: -200px; right: -200px;
width: 500px; height: 500px;
background: radial-gradient(closest-side, rgba(61,124,216,0.4), transparent 70%);
pointer-events: none;
}
.subhero--image {
background-size: cover;
background-position: center;
background-color: var(--blue-deep);
background-blend-mode: multiply;
}
.subhero--image::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg, rgba(15,34,71,0.82) 0%, rgba(15,34,71,0.5) 55%, rgba(15,34,71,0.28) 100%);
}
.subhero::before { z-index: 1; }
.subhero > .container { position: relative; z-index: 2; }
.subhero .eyebrow { color: rgba(255,255,255,0.92); }
.subhero .eyebrow::before { background: var(--accent); }
.subhero__crumb {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
margin-bottom: 20px;
}
.subhero__crumb a { color: rgba(255,255,255,0.7); }
.subhero__crumb a:hover { color: var(--white); }
.subhero__crumb span { margin: 0 8px; opacity: 0.4; }
.subhero h1, .subhero__title {
color: var(--white);
font-family: var(--display);
font-size: clamp(2rem, 4.4vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
margin-bottom: 20px;
max-width: 22ch;
text-transform: none;
}
.subhero__title em { font-style: normal; color: var(--accent); font-weight: 600; }
.subhero__lede {
color: rgba(255,255,255,0.85);
max-width: 60ch;
font-size: clamp(1rem, 1.2vw, 1.15rem);
line-height: 1.65;
}
/* 8. SECTION HEADERS ======================================================= */
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(40px, 6vw, 64px);
}
.section-head .eyebrow { justify-content: center; }
.section-head h2 {
margin-bottom: 16px;
}
.section-head .lede { color: var(--muted); margin: 0 auto; }
/* Legacy centered title with lines flanking */
.section-title {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.section-title::before,
.section-title::after {
content: "";
display: block;
height: 2px;
width: clamp(24px, 5vw, 60px);
background: var(--blue);
border-radius: 2px;
}
.section-title h2 {
font-family: var(--font);
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0;
}
.section-callout {
text-align: center;
font-size: clamp(1.1rem, 1.5vw, 1.35rem);
color: var(--blue);
font-weight: 600;
max-width: 50ch;
margin: 0 auto clamp(24px, 4vw, 40px);
}
/* 9. SERVICE TILES — modern bento + photo grid ============================ */
.service-grid {
display: grid;
gap: clamp(16px, 2vw, 24px);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
/* Bento — 1 large featured + smaller tiles */
.bento {
display: grid;
gap: clamp(16px, 2vw, 24px);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.bento {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(220px, auto);
}
.bento__item { grid-column: span 2; }
.bento__item--feature { grid-column: span 3; grid-row: span 2; }
.bento__item--wide { grid-column: span 3; }
}
.service-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--gray-light);
box-shadow: var(--shadow-soft);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
color: var(--white);
padding: 24px 28px 26px;
isolation: isolate;
}
.service-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); color: var(--white); }
.service-tile img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 800ms var(--ease);
}
.service-tile:hover img { transform: scale(1.08); }
.service-tile::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,34,71,0) 35%, rgba(15,34,71,0.85) 100%);
z-index: -1;
}
.service-tile__chip {
position: absolute;
top: 18px; left: 18px;
padding: 6px 12px;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.25);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--white);
}
.service-tile__title {
color: var(--white);
font-family: var(--display);
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
}
.service-tile__sub {
color: rgba(255,255,255,0.85);
font-size: 13px;
margin-top: 8px;
letter-spacing: 0.02em;
}
.service-tile__cta {
position: absolute;
bottom: 22px; right: 22px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--white);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.service-tile:hover .service-tile__cta {
background: var(--blue-bright);
color: var(--white);
transform: scale(1.1) rotate(-45deg);
}
.service-tile--feature {
aspect-ratio: unset;
min-height: 360px;
}
.service-tile--feature .service-tile__title {
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
}
/* 10. STATS / VALUE PROPS ================================================== */
.stats {
background: var(--white);
padding: clamp(56px, 8vw, 96px) 0;
position: relative;
}
.stats--blue { background: var(--grad-blue); color: var(--white); }
.stats--blue .stat__num { color: var(--white); }
.stats--blue .stat__lbl { color: rgba(255,255,255,0.8); }
.stats__grid {
display: grid;
gap: 32px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
font-family: var(--display);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 700;
color: var(--blue);
letter-spacing: -0.04em;
line-height: 1;
margin-bottom: 12px;
}
.stat__lbl {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.5;
max-width: 24ch;
margin: 0 auto;
}
/* 11. THREE-UP VALUE BLOCKS ================================================ */
.three-up {
display: grid;
gap: clamp(20px, 2.5vw, 32px);
grid-template-columns: 1fr;
}
@media (min-width: 800px) { .three-up { grid-template-columns: repeat(3, 1fr); } }
.three-up__item {
position: relative;
text-align: left;
padding: clamp(32px, 4vw, 44px) clamp(28px, 3vw, 36px);
background: var(--white);
border-radius: var(--r-lg);
border: 1px solid var(--gray-rule);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
overflow: hidden;
}
.three-up__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.three-up__item::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--grad-blue);
border-radius: var(--r-lg) var(--r-lg) 0 0;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t) var(--ease);
}
.three-up__item:hover::before { transform: scaleX(1); }
.three-up__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
border-radius: var(--r-md);
background: var(--blue-soft);
color: var(--blue);
margin-bottom: 24px;
font-size: 22px;
}
.three-up__item h3 {
font-family: var(--display);
color: var(--ink);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.three-up__item p { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.three-up__item .btn { margin-top: 4px; }
/* 12. VIDEO + TESTIMONIAL ================================================== */
.video-wrap {
position: relative;
aspect-ratio: 16/9;
background: var(--ink);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
blockquote.quote {
margin: 0;
padding: clamp(32px, 4vw, 56px);
background: var(--blue-tint);
border-radius: var(--r-lg);
font-family: var(--display);
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.5;
color: var(--ink);
font-weight: 500;
position: relative;
font-style: normal;
}
blockquote.quote::before {
content: """;
position: absolute;
top: 12px; left: clamp(20px, 2.5vw, 32px);
font-size: 5rem;
color: var(--blue);
opacity: 0.18;
line-height: 1;
font-family: var(--display);
}
blockquote.quote cite {
display: block;
margin-top: 20px;
font-style: normal;
font-family: var(--font);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blue);
}
/* 13. PARTNERS MARQUEE ===================================================== */
.partners {
padding: clamp(40px, 5vw, 64px) 0;
background: var(--white);
border-top: 1px solid var(--gray-rule);
border-bottom: 1px solid var(--gray-rule);
overflow: hidden;
}
.partners__head {
text-align: center;
margin-bottom: 32px;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.partners__track {
display: flex;
align-items: center;
animation: marquee 44s linear infinite;
width: max-content;
}
.partners:hover .partners__track { animation-play-state: paused; }
/* 3 identical copies in markup → translate exactly one copy width for a seamless loop */
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-33.333%); }
}
.partners__logo {
flex-shrink: 0;
display: flex; align-items: center;
padding: 0 clamp(28px, 4vw, 56px);
}
.partners__logo img {
height: clamp(26px, 3vw, 38px); width: auto; display: block;
opacity: 0.62; filter: grayscale(1);
transition: opacity var(--t) var(--ease), filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.partners__logo img:hover { opacity: 1; filter: none; transform: scale(1.06); }
/* 14. FORMS ================================================================ */
.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
font-family: var(--display);
font-size: 0.82rem; font-weight: 600;
color: var(--ink); letter-spacing: 0.04em;
text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
width: 100%; padding: 14px 16px; font-family: var(--font); font-size: 15px;
background: var(--white); color: var(--ink);
border: 1.5px solid var(--gray-rule); border-radius: var(--r-md);
transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: #9aa3b1; }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: 0; border-color: var(--blue);
box-shadow: 0 0 0 4px var(--blue-soft);
}
.field textarea { resize: vertical; min-height: 140px; }
.checkbox-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 500px) { .checkbox-grid { grid-template-columns: 1fr 1fr; } }
.checkbox { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--blue); }
.required { color: var(--accent); }
.form-note { font-size: 12px; color: var(--muted); line-height: 1.6; }
.form-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* 15. CTA BAND + FOOTER ==================================================== */
.cta-band {
background: var(--blue-deep);
background-image: var(--grad-blue);
color: var(--white);
padding: clamp(64px, 8vw, 96px) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute;
top: -50%; left: -10%;
width: 60%; height: 200%;
background: radial-gradient(closest-side, rgba(61,124,216,0.25), transparent 70%);
pointer-events: none;
}
.cta-band h2 {
color: var(--white);
font-family: var(--display);
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.cta-band__phone {
font-family: var(--display);
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
color: var(--white);
font-weight: 600;
margin: 16px 0 28px;
display: inline-block;
letter-spacing: -0.02em;
}
.cta-band__phone:hover { color: var(--white); opacity: 0.85; }
.site-footer {
background: var(--blue-deep);
color: rgba(255,255,255,0.7);
padding: clamp(64px, 8vw, 96px) 0 32px;
position: relative;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.site-footer a:hover { color: var(--white); }
.site-footer__top {
display: grid;
gap: 48px;
grid-template-columns: 1fr;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1.4fr 2.6fr; } }
.site-footer__brand img {
width: 200px;
background: var(--white);
padding: 16px 22px;
border-radius: var(--r-md);
margin-bottom: 24px;
}
.site-footer__about { color: rgba(255,255,255,0.7); margin-bottom: 24px; font-size: 14px; line-height: 1.65; }
.site-footer__contact p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.site-footer__columns {
display: grid;
gap: 32px 24px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .site-footer__columns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .site-footer__columns { grid-template-columns: repeat(4, 1fr); } }
.site-footer__heading {
font-family: var(--font);
font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--white); margin-bottom: 18px;
}
.site-footer__col ul { list-style: none; }
.site-footer__col li { margin-bottom: 10px; font-size: 13px; }
.site-footer__service-area { padding: 36px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.site-footer__service-area p { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.9; }
.site-footer__service-area strong { color: var(--white); font-weight: 700; }
.site-footer__bottom {
padding-top: 28px;
display: flex; flex-direction: column; gap: 12px;
justify-content: space-between; align-items: center;
font-size: 12px;
}
@media (min-width: 700px) { .site-footer__bottom { flex-direction: row; } }
.site-footer__legal { list-style: none; display: flex; gap: 20px; }
/* 16. INTRO BLOCK + PRODUCT PAGE MODULES =================================== */
.intro-block {
text-align: center;
max-width: 72ch;
margin: 0 auto;
}
.intro-block p { font-size: clamp(1rem, 1.15vw, 1.1rem); color: var(--muted); }
.feature-list { list-style: none; display: grid; gap: 12px; margin: 24px 0; }
.feature-list li {
position: relative;
padding: 16px 20px 16px 52px;
background: var(--white);
border: 1px solid var(--gray-rule);
border-radius: var(--r-sm);
font-size: 0.95rem;
transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.feature-list li:hover { border-color: var(--blue); background: var(--blue-tint); }
.feature-list li::before {
content: "✓";
position: absolute;
left: 16px; top: 14px;
width: 24px; height: 24px;
background: var(--blue-soft);
color: var(--blue);
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.feature-list strong { color: var(--blue); }
.variant-grid {
display: grid; gap: 24px;
grid-template-columns: 1fr;
margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 800px) { .variant-grid { grid-template-columns: repeat(3, 1fr); } }
.variant-card {
background: var(--white);
border: 1px solid var(--gray-rule);
padding: 32px;
border-radius: var(--r-lg);
display: flex; flex-direction: column; gap: 14px;
transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
position: relative;
overflow: hidden;
}
.variant-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--grad-blue);
}
.variant-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: transparent; }
.variant-card h3 {
font-family: var(--display);
font-size: 1.2rem; color: var(--ink);
letter-spacing: -0.01em;
font-weight: 600;
margin-top: 4px;
}
.variant-card__tag,
.variant-card .badge {
display: inline-block;
align-self: flex-start;
padding: 5px 12px; font-size: 10px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
background: var(--blue-soft); color: var(--blue);
border-radius: 999px;
}
.variant-card ul { list-style: none; display: grid; gap: 6px; }
.variant-card ul li {
font-size: 13px; color: var(--muted);
padding-left: 16px; position: relative; line-height: 1.6;
}
.variant-card ul li::before {
content: "—"; position: absolute; left: 0; color: var(--blue); opacity: 0.5;
}
.image-grid {
display: grid; gap: 16px;
grid-template-columns: 1fr;
margin-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 700px) { .image-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .image-grid { grid-template-columns: repeat(3, 1fr); } }
.image-grid figure { margin: 0; }
.image-grid img {
aspect-ratio: 4/3;
object-fit: cover;
border-radius: var(--r-md);
width: 100%;
transition: transform var(--t) var(--ease);
}
.image-grid figure:hover img { transform: scale(1.02); }
.color-chips,
.chip-row {
display: flex; flex-wrap: wrap; gap: 10px;
list-style: none; padding: 0; margin: 24px 0;
}
.color-chips li,
.chip {
padding: 8px 16px;
background: var(--white);
border: 1px solid var(--gray-rule);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--ink);
transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.color-chips li:hover,
.chip:hover { border-color: var(--blue); background: var(--blue-tint); }
.chip--ghost { background: transparent; }
.chip--navy { background: var(--blue); color: var(--white); border-color: var(--blue); }
.chip--sun { background: var(--blue); color: var(--white); border-color: var(--blue); }
/* Process steps */
.process-list, .process__list {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
margin-top: clamp(40px, 5vw, 64px);
counter-reset: step;
list-style: none;
}
@media (min-width: 700px) { .process-list, .process__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process-list, .process__list { grid-template-columns: repeat(5, 1fr); } }
.process-step, .process__step {
counter-increment: step;
background: var(--white);
padding: 28px 24px;
border-radius: var(--r-lg);
border: 1px solid var(--gray-rule);
text-align: left;
position: relative;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
list-style: none;
}
.process-step:hover, .process__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.process-step::before, .process__step::before {
content: counter(step, decimal-leading-zero);
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--grad-blue);
color: var(--white);
font-family: var(--display);
font-size: 1rem; font-weight: 700;
margin-bottom: 18px;
letter-spacing: -0.02em;
}
.process-step h3, .process__step h3 {
font-family: var(--display);
font-size: 1rem; font-weight: 600;
letter-spacing: -0.005em;
margin-bottom: 10px;
color: var(--ink);
text-transform: none;
}
.process-step p, .process__step p { font-size: 0.9rem; color: var(--muted); margin: 0; line-height: 1.55; }
/* Related-product cards */
.related__head { margin-bottom: clamp(32px, 4vw, 52px); }
.related__head h2 { max-width: 24ch; }
.related-grid, .related__grid {
display: grid; gap: 20px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .related-grid, .related__grid { grid-template-columns: repeat(3, 1fr); } }
.related-card {
background: var(--white);
border: 1px solid var(--gray-rule);
padding: 28px;
border-radius: var(--r-lg);
display: flex; flex-direction: column; gap: 10px;
transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.related-card:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--shadow-card); }
.related-card h3 {
font-family: var(--display);
font-size: 1.1rem; color: var(--ink);
letter-spacing: -0.01em;
font-weight: 600;
text-transform: none;
}
.related-card p { color: var(--muted); font-size: 0.9rem; flex: 1; margin: 0; }
.related-card .btn-link, .related-card .more {
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--blue);
margin-top: 8px;
display: inline-flex; align-items: center; gap: 6px;
transition: gap var(--t) var(--ease);
}
.related-card:hover .btn-link, .related-card:hover .more { gap: 12px; color: var(--blue-bright); }
/* Editorial split — used on hub pages */
.editorial-split {
background: var(--blue-deep);
background-image: var(--grad-blue);
color: var(--white);
position: relative;
overflow: hidden;
}
.editorial-split h2 { color: var(--white); }
.editorial-split::before {
content: "";
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(closest-side, rgba(61,124,216,0.3), transparent 70%);
pointer-events: none;
}
.editorial-split__inner {
display: grid;
gap: 0;
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .editorial-split__inner { grid-template-columns: 6fr 5fr; } }
.editorial-split__media {
background-size: cover;
background-position: center;
min-height: 360px;
position: relative;
overflow: hidden;
}
.editorial-split__media .ed-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.04);
transition: opacity 900ms var(--ease), transform 6s var(--ease);
}
.editorial-split__media .ed-slide.is-active {
opacity: 1;
transform: scale(1);
}
.ed-dots {
position: absolute;
left: clamp(20px, 4vw, 40px);
bottom: clamp(20px, 4vw, 32px);
display: flex;
gap: 9px;
z-index: 2;
}
.ed-dots button {
width: 9px; height: 9px;
padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,0.5);
box-shadow: 0 1px 4px rgba(15,34,71,0.35);
cursor: pointer;
transition: width var(--t) var(--ease), background var(--t) var(--ease);
}
.ed-dots button.is-active {
width: 30px;
background: var(--white);
}
.editorial-split__body { padding: clamp(48px, 6vw, 88px); position: relative; }
.editorial-split__body .lede,
.editorial-split__body p { color: rgba(255,255,255,0.85); }
.editorial-split__list {
list-style: none;
display: grid;
gap: 14px;
margin: 28px 0 36px;
}
.editorial-split__list li {
display: flex; gap: 12px; align-items: flex-start;
color: rgba(255,255,255,0.9); font-size: 0.95rem;
}
.editorial-split__list li::before {
content: "";
width: 24px; height: 24px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: var(--white);
border-radius: 50%;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
margin-top: 2px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
/* Legacy services head (interior pages) */
.services__head {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
align-items: end;
margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) { .services__head { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.services__title {
font-family: var(--display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 24ch;
text-transform: none;
line-height: 1.1;
}
.services__title em { font-style: normal; color: var(--blue); }
.services__grid {
display: grid;
gap: clamp(16px, 2vw, 24px);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--gray-rule);
border-radius: var(--r-lg);
overflow: hidden;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.service-card__media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: var(--gray-light);
}
.service-card__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__tag {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
padding: 5px 12px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--blue);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.service-card__body {
padding: 28px 28px 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.service-card__title {
font-family: var(--display);
font-size: 1.2rem;
font-weight: 600;
color: var(--ink);
text-transform: none;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.service-card__copy {
color: var(--muted);
font-size: 0.95rem;
flex: 1;
margin-bottom: 20px;
line-height: 1.6;
}
.service-card__link {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--blue);
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.service-card__link::after { content: "→"; font-size: 14px; }
.service-card:hover .service-card__link { gap: 14px; color: var(--blue-bright); }
/* ==========================================================================
HERO VARIANTS 2–7
========================================================================== */
/* ===== HERO VARIANT 2 — Cinematic Full-Bleed ============================== */
.hero-v2 {
position: relative;
min-height: clamp(520px, 78vh, 720px);
background-color: var(--blue-deep);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
overflow: hidden;
text-align: center;
}
.hero-v2::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,34,71,0.35) 0%, rgba(15,34,71,0.6) 60%, rgba(15,34,71,0.92) 100%);
}
.hero-v2__content {
position: relative; z-index: 2;
max-width: 880px;
padding: 80px clamp(20px, 4vw, 48px) 120px;
margin: 0 auto;
}
.hero-v2 .eyebrow { color: var(--white); justify-content: center; }
.hero-v2 .eyebrow::before { background: rgba(255,255,255,0.5); }
.hero-v2__title {
font-family: var(--display);
font-size: clamp(2.5rem, 6.5vw, 5.25rem);
font-weight: 700;
color: var(--white);
letter-spacing: -0.035em;
line-height: 1.02;
margin-bottom: 24px;
}
.hero-v2__lede {
font-size: clamp(1.05rem, 1.4vw, 1.3rem);
color: rgba(255,255,255,0.92);
max-width: 64ch;
margin: 0 auto 36px;
line-height: 1.55;
}
.hero-v2__actions {
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.hero-v2__bottom {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(255,255,255,0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 22px 0;
z-index: 2;
border-top: 1px solid rgba(255,255,255,0.15);
}
.hero-v2__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
text-align: center;
max-width: var(--container);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
@media (min-width: 700px) { .hero-v2__stats { grid-template-columns: repeat(4, 1fr); } }
.hero-v2__stats .stat__num { color: var(--white); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 4px; }
.hero-v2__stats .stat__lbl { color: rgba(255,255,255,0.78); font-size: 11px; }
/* ===== HERO VARIANT 3 — Editorial Magazine Split ========================= */
.hero-v3 {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.hero-v3 {
grid-template-columns: 1.1fr 1fr;
min-height: 80vh;
}
}
.hero-v3__image {
background-size: cover;
background-position: center;
background-color: var(--blue-tint);
min-height: clamp(280px, 48vh, 520px);
position: relative;
}
.hero-v3__image::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.5), transparent 50%);
}
.hero-v3__image .badge {
position: absolute;
bottom: 24px; left: 24px;
z-index: 2;
background: var(--white);
padding: 8px 16px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blue);
box-shadow: var(--shadow-soft);
}
.hero-v3__content {
background: var(--white);
padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 80px);
display: flex; flex-direction: column; justify-content: center;
position: relative;
}
.hero-v3__content::before {
content: "";
position: absolute;
top: clamp(48px, 7vw, 96px); bottom: clamp(48px, 7vw, 96px);
left: 0;
width: 3px;
background: var(--blue);
display: none;
}
@media (min-width: 900px) { .hero-v3__content::before { display: block; left: 0; } }
.hero-v3__title {
font-family: var(--display);
font-size: clamp(2.25rem, 4.6vw, 3.75rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 24px;
color: var(--ink);
}
.hero-v3__title em { font-style: italic; color: var(--blue); font-weight: 600; }
.hero-v3__lede {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--muted);
max-width: 48ch;
margin-bottom: 32px;
line-height: 1.6;
}
.hero-v3__features {
list-style: none;
display: grid;
gap: 12px;
margin: 0 0 32px;
}
.hero-v3__features li {
display: flex; gap: 12px; align-items: center;
font-size: 0.95rem;
color: var(--ink);
}
.hero-v3__features li::before {
content: ""; width: 28px; height: 28px;
background: var(--blue-soft) url("data:image/svg+xml;utf8,") no-repeat center;
border-radius: 50%;
flex-shrink: 0;
}
.hero-v3__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* ===== HERO VARIANT 4 — Bento Multi-Image ================================ */
.hero-v4-section {
padding: clamp(56px, 8vw, 112px) 0 clamp(40px, 6vw, 80px);
background: var(--blue-tint);
background-image: var(--grad-mesh);
}
.hero-v4-head {
text-align: center;
max-width: 920px;
margin: 0 auto clamp(40px, 6vw, 72px);
padding: 0 clamp(20px, 4vw, 48px);
}
.hero-v4-head .eyebrow { justify-content: center; }
.hero-v4-title {
font-family: var(--display);
font-size: clamp(2.5rem, 6vw, 4.75rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.02;
margin-bottom: 24px;
}
.hero-v4-title .grad {
background: var(--grad-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v4-lede {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--muted);
max-width: 60ch;
margin: 0 auto 32px;
}
.hero-v4-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-v4-bento {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
max-width: var(--container);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
@media (min-width: 800px) {
.hero-v4-bento {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
}
.hero-v4-bento .b1 { grid-column: span 3; grid-row: span 2; }
.hero-v4-bento .b2 { grid-column: span 3; }
.hero-v4-bento .b3 { grid-column: span 2; }
.hero-v4-bento .b4 { grid-column: span 1; }
.hero-v4-bento .b5 { grid-column: span 6; grid-row: 3; padding: 24px 28px; }
}
.hero-v4-bento > div {
border-radius: var(--r-lg);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
min-height: 200px;
transition: transform var(--t) var(--ease);
}
.hero-v4-bento > div:hover { transform: translateY(-4px); }
.hero-v4-bento > div::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,34,71,0) 50%, rgba(15,34,71,0.85) 100%);
}
.hero-v4-bento > div span {
position: absolute; bottom: 20px; left: 24px; right: 24px;
z-index: 2;
color: var(--white);
font-family: var(--display);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.005em;
}
.hero-v4-bento .b5 {
background: var(--white);
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
min-height: auto;
}
.hero-v4-bento .b5::after { display: none; }
.hero-v4-bento .b5 .copy {
font-family: var(--display); font-size: 1.05rem; font-weight: 600;
color: var(--ink); letter-spacing: -0.005em;
}
.hero-v4-bento .b5 .phone {
font-family: var(--display); color: var(--blue);
font-size: 1.5rem; font-weight: 700;
letter-spacing: -0.02em;
}
/* ===== HERO 5 — Diagonal Split Modern ====================================
Blue gradient panel on the left clipped at an angle, image on the right.
*/
.hero-v5 {
position: relative;
background: var(--white);
display: grid;
grid-template-columns: 1fr;
min-height: clamp(520px, 80vh, 720px);
overflow: hidden;
}
@media (min-width: 900px) {
.hero-v5 { grid-template-columns: 1fr 1fr; }
}
.hero-v5__left {
background-image: var(--grad-blue);
color: var(--white);
padding: clamp(56px, 8vw, 96px) clamp(28px, 5vw, 64px);
display: flex; flex-direction: column; justify-content: center;
position: relative;
z-index: 2;
}
@media (min-width: 900px) {
.hero-v5__left {
clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
padding-right: clamp(80px, 12vw, 160px);
}
}
.hero-v5__left::before {
content: "";
position: absolute;
top: 40px; right: 40px;
width: 120px; height: 120px;
background: radial-gradient(closest-side, rgba(244,168,58,0.35), transparent 70%);
pointer-events: none;
}
.hero-v5 .eyebrow { color: rgba(255,255,255,0.85); }
.hero-v5 .eyebrow::before { background: rgba(255,255,255,0.55); }
.hero-v5__title {
font-family: var(--display);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.04;
color: var(--white);
margin-bottom: 20px;
}
.hero-v5__title em { font-style: normal; color: var(--accent); font-weight: 600; }
.hero-v5__lede {
color: rgba(255,255,255,0.9);
font-size: clamp(1rem, 1.3vw, 1.2rem);
margin-bottom: 32px;
max-width: 50ch;
}
.hero-v5__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-v5__meta {
margin-top: 32px;
display: flex; gap: 32px; flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-v5__meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-v5__meta-num {
font-family: var(--display);
font-size: 1.6rem; font-weight: 700;
color: var(--white); letter-spacing: -0.02em;
line-height: 1;
}
.hero-v5__meta-lbl {
font-size: 11px; color: rgba(255,255,255,0.7);
letter-spacing: 0.06em;
}
.hero-v5__right {
position: relative;
background-size: cover;
background-position: center;
min-height: 50vh;
}
.hero-v5__right::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 60%, rgba(15,34,71,0.45) 100%);
}
.hero-v5__badge {
position: absolute;
bottom: 28px; right: 28px;
z-index: 2;
background: var(--white);
padding: 10px 18px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--blue);
box-shadow: var(--shadow-card);
}
/* ===== HERO 6 — Service Selector with Live Preview =======================
Headline + lede on top, 4 tabbed product cards that swap a preview panel.
*/
.hero-v6 {
padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 6vw, 80px);
background: var(--blue-tint);
background-image: var(--grad-mesh);
}
.hero-v6__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
.hero-v6__head {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(36px, 5vw, 56px);
}
.hero-v6 .eyebrow { justify-content: center; }
.hero-v6__title {
font-family: var(--display);
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 18px;
}
.hero-v6__title .grad {
background: var(--grad-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v6__lede {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--muted);
max-width: 60ch;
margin: 0 auto;
}
.hero-v6__selector {
background: var(--white);
border-radius: var(--r-xl);
padding: 12px;
box-shadow: var(--shadow-lift);
border: 1px solid var(--gray-rule);
}
.hero-v6__tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 12px;
}
@media (min-width: 700px) { .hero-v6__tabs { grid-template-columns: repeat(4, 1fr); } }
.hero-v6__tab {
background: var(--gray-light);
border: 0;
padding: 16px 14px;
border-radius: var(--r-md);
font-family: var(--font);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
cursor: pointer;
transition: all var(--t) var(--ease);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-align: left;
}
.hero-v6__tab small {
font-size: 10px;
font-weight: 500;
color: var(--muted);
text-transform: none;
letter-spacing: 0.02em;
}
.hero-v6__tab:hover { background: var(--blue-soft); }
.hero-v6__tab.is-active {
background: var(--grad-blue);
color: var(--white);
box-shadow: 0 6px 16px -6px rgba(46,89,165,0.5);
}
.hero-v6__tab.is-active small { color: rgba(255,255,255,0.85); }
.hero-v6__preview {
position: relative;
aspect-ratio: 16/9;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--ink);
}
.hero-v6__panel {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0; visibility: hidden;
transition: opacity 400ms var(--ease), visibility 400ms;
}
.hero-v6__panel.is-active { opacity: 1; visibility: visible; }
.hero-v6__panel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.85) 0%, rgba(15,34,71,0.1) 60%);
}
.hero-v6__panel-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: clamp(24px, 4vw, 48px);
color: var(--white);
z-index: 2;
}
.hero-v6__panel-content h3 {
font-family: var(--display);
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
font-weight: 700;
color: var(--white);
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.hero-v6__panel-content p {
color: rgba(255,255,255,0.85);
max-width: 56ch;
margin-bottom: 18px;
}
.hero-v6__panel-content .btn { padding: 12px 22px; font-size: 11px; }
/* ===== HERO 7 — Stats-Forward with Quote =================================
Big stats row at top, magazine quote middle, image card bottom.
*/
.hero-v7 {
padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 96px);
background: var(--white);
background-image:
radial-gradient(at 20% 10%, rgba(46,89,165,0.08), transparent 50%),
radial-gradient(at 80% 90%, rgba(244,168,58,0.06), transparent 50%);
}
.hero-v7__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
.hero-v7__stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: clamp(40px, 5vw, 64px);
padding-bottom: clamp(32px, 4vw, 48px);
border-bottom: 1px solid var(--gray-rule);
}
@media (min-width: 800px) { .hero-v7__stats { grid-template-columns: repeat(4, 1fr); } }
.hero-v7__stat-item { text-align: left; }
.hero-v7__stat-item .num {
font-family: var(--display);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
color: var(--blue);
letter-spacing: -0.04em;
line-height: 0.95;
display: block;
margin-bottom: 8px;
}
.hero-v7__stat-item .num small {
font-size: 0.6em;
color: var(--blue-bright);
}
.hero-v7__stat-item .lbl {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.5;
}
.hero-v7__main {
text-align: center;
max-width: 880px;
margin: 0 auto;
}
.hero-v7 .eyebrow { justify-content: center; }
.hero-v7__title {
font-family: var(--display);
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--ink);
margin-bottom: 20px;
font-style: italic;
}
.hero-v7__title::before, .hero-v7__title::after {
display: inline-block;
color: var(--blue);
font-style: normal;
font-weight: 700;
margin: 0 0.1em;
opacity: 0.5;
}
.hero-v7__title::before { content: "“"; }
.hero-v7__title::after { content: "”"; }
.hero-v7__title em {
font-style: italic;
background: var(--grad-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v7__lede {
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
color: var(--muted);
max-width: 60ch;
margin: 0 auto 32px;
}
.hero-v7__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.hero-v7__image {
position: relative;
aspect-ratio: 21/9;
background-size: cover;
background-position: center;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-lift);
max-width: 1280px;
margin: 0 auto;
}
.hero-v7__image::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.5), transparent 50%);
}
.hero-v7__image .badge {
position: absolute;
bottom: 24px; left: 28px;
z-index: 2;
background: var(--white);
padding: 10px 18px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--blue);
}
.hero-v7__image .meta {
position: absolute;
bottom: 24px; right: 28px;
z-index: 2;
color: var(--white);
font-family: var(--display);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.01em;
}
/* ==========================================================================
VARIANT VISIBILITY — picked via the floating switcher; persists in localStorage
Use `revert` so each variant keeps its intended display (grid, flex, etc.)
========================================================================== */
.header-variant { display: none; }
html[data-h="8"] .header-variant--8,
html[data-h="10"] .header-variant--10,
html[data-h="11"] .header-variant--11 { display: revert; }
html:not([data-h]) .header-variant--11 { display: revert; }
.hero-variant { display: none; }
html[data-r="1"] .hero-variant--1,
html[data-r="2"] .hero-variant--2,
html[data-r="3"] .hero-variant--3,
html[data-r="4"] .hero-variant--4,
html[data-r="5"] .hero-variant--5,
html[data-r="6"] .hero-variant--6,
html[data-r="7"] .hero-variant--7,
html[data-r="8"] .hero-variant--8,
html[data-r="9"] .hero-variant--9,
html[data-r="10"] .hero-variant--10,
html[data-r="11"] .hero-variant--11,
html[data-r="12"] .hero-variant--12 { display: revert; }
html:not([data-r]) .hero-variant--9 { display: revert; }
/* 17. REVEAL / MOTION / RESPONSIVE ========================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }
.reveal[data-delay="300"] { transition-delay: 300ms; }
.reveal[data-delay="400"] { transition-delay: 400ms; }
@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; }
.reveal { opacity: 1; transform: none; }
.partners__track { animation: none; }
}
@media (max-width: 768px) {
.hero__stat-card { right: auto; left: -8px; bottom: -32px; padding: 16px 20px; min-width: 180px; }
.hero__badge { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 480px) {
.hero { padding: 56px 0 88px; }
.hero__media { margin-top: 16px; }
}
/* ==========================================================================
HEADER VARIANTS 8 & 10 (kept) — layout lives on inner wrappers so the
on inner wrappers so the display:revert visibility toggle behaves correctly.
========================================================================== */
/* ===== H8 — Classic Centered + Utility Strip ============================= */
.h-v8 {
background: var(--white); border-bottom: 1px solid var(--gray-rule);
position: sticky; top: 0; z-index: 90;
transition: box-shadow var(--t) var(--ease);
}
.h-v8.is-scrolled { box-shadow: 0 8px 24px -14px rgba(15,34,71,0.45); }
.h-v8__utility {
background: var(--blue-deep); color: rgba(255,255,255,0.82); display: none;
overflow: hidden;
}
@media (min-width: 760px) { .h-v8__utility { display: block; } }
/* The classic header keeps a constant height — on scroll only the shadow
changes. (Previously it collapsed the utility strip and shrank the logo,
which shifted the page content and made the nav "jump" near the threshold.) */
.h-v8__utility-inner {
display: flex; align-items: center; justify-content: space-between;
max-width: 1320px; margin: 0 auto;
padding: 9px clamp(20px, 4vw, 48px);
font-size: 12px; letter-spacing: 0.02em;
}
.h-v8__utility a { color: rgba(255,255,255,0.82); }
.h-v8__utility a:hover { color: var(--white); }
.h-v8__utility-left, .h-v8__utility-right { display: flex; align-items: center; gap: 12px; }
.h-v8__util-phone { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.h-v8__util-phone svg { opacity: 0.75; flex-shrink: 0; }
.h-v8__util-tag { color: rgba(255,255,255,0.6); margin-right: 4px; }
@media (max-width: 1100px) { .h-v8__util-tag { display: none; } }
/* Service Request + Free Estimate read as outline buttons; Book Online keeps the gold */
.h-v8__utility-right .h-v8__util-btn {
padding: 5px 14px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.42);
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: #fff; transition: all var(--t) var(--ease);
}
.h-v8__utility-right .h-v8__util-btn:hover {
background: rgba(255,255,255,0.14); border-color: #fff; color: #fff;
}
.h-v8__utility-cta {
background: var(--accent); color: var(--blue-deep) !important;
padding: 6px 16px; border-radius: 999px; font-weight: 700;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
transition: filter var(--t) var(--ease);
}
.h-v8__utility-cta:hover { filter: brightness(0.95); }
.h-v8__main {
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
max-width: 1320px; margin: 0 auto;
padding: 14px clamp(20px, 4vw, 48px);
transition: padding var(--t) var(--ease);
}
@media (min-width: 1080px) { .h-v8__main { grid-template-columns: 1fr auto 1fr; } }
.h-v8__logo { justify-self: start; }
@media (min-width: 1080px) { .h-v8__logo { justify-self: center; } }
.h-v8__logo img { height: 96px; width: auto; display: block; transition: height var(--t) var(--ease); }
.h-v8__nav { display: none; gap: clamp(22px, 2.4vw, 40px); }
@media (min-width: 1080px) { .h-v8__nav { display: flex; } }
.h-v8__nav--left { justify-content: flex-end; }
.h-v8__nav--right { justify-content: flex-start; }
.h-v8__item { position: relative; display: flex; align-items: center; }
.h-v8__item > a {
position: relative;
padding: 10px 4px; font-size: 12px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
transition: color var(--t) var(--ease); white-space: nowrap;
}
.h-v8__item.has-children > a { padding-right: 18px; }
.h-v8__item.has-children > a::before { /* caret */
content: ""; position: absolute; right: 4px; top: 50%; margin-top: -4px;
width: 6px; height: 6px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg); transition: border-color var(--t) var(--ease);
}
.h-v8__item.has-children:hover > a::before { border-color: var(--accent); }
.h-v8__item > a:hover { color: var(--blue-deep); }
/* gold hover underline to match the Book Online button */
.h-v8__item > a::after {
content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 2px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform var(--t) var(--ease);
}
.h-v8__item.has-children > a::after { right: 18px; }
.h-v8__item > a:hover::after { transform: scaleX(1); }
/* "Get In Touch" — the one button in the main nav, sits after Company.
Solid brand blue so it reads as an action next to the plain text links,
while leaving the gold to Book Online in the utility strip above. */
.h-v8__nav-cta {
display: inline-flex; align-items: center; align-self: center;
padding: 9px 20px; border-radius: 999px;
background: var(--blue); color: var(--white);
font-size: 12px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.h-v8__nav-cta:hover {
background: var(--blue-dark); color: var(--white);
transform: translateY(-1px);
box-shadow: 0 6px 16px -6px rgba(46,89,165,0.55);
}
.h-v8__nav-cta:active { transform: translateY(0); box-shadow: none; }
.h-v8__nav-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The nav gap is sized for text links; the button needs a touch more room. */
@media (min-width: 1080px) { .h-v8__nav--right { gap: clamp(22px, 2vw, 32px); } }
/* dropdown panels on the main nav */
.h-v8__panel {
position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
min-width: 230px; background: var(--white);
border-radius: 0 0 var(--r-md) var(--r-md);
box-shadow: var(--shadow-lift); padding: 10px;
opacity: 0; visibility: hidden;
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
z-index: 80;
}
.h-v8__item:hover .h-v8__panel, .h-v8__item:focus-within .h-v8__panel {
opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.h-v8__panel ul { list-style: none; margin: 0; padding: 0; }
.h-v8__panel a {
display: block; padding: 10px 16px; border-radius: 8px;
font-size: 13px; font-weight: 600; color: var(--ink);
text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.h-v8__panel a:hover { background: var(--blue-tint); color: var(--blue); }
.h-v8__toggle { grid-column: 3; justify-self: end; }
@media (min-width: 1080px) { .h-v8__toggle { display: none; } }
/* ===== H10 — Bold Blue Brand Bar ========================================= */
.h-v10 {
background-image: var(--grad-blue); color: var(--white);
position: sticky; top: 0; z-index: 90;
transition: box-shadow var(--t) var(--ease);
}
.h-v10.is-scrolled { box-shadow: 0 8px 28px -12px rgba(15,34,71,0.55); }
.h-v10::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.8;
}
.h-v10__inner {
display: flex; align-items: stretch; gap: 24px;
max-width: 1320px; margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
min-height: 116px;
transition: min-height var(--t) var(--ease);
}
.h-v10.is-scrolled .h-v10__inner { min-height: 80px; }
.h-v10__logo {
background: var(--white); flex-shrink: 0;
align-self: stretch; /* white panel runs flush to the top of the nav bar */
width: 138px; padding: 14px 16px;
border-radius: 0 0 var(--r-md) var(--r-md);
display: flex; align-items: center; justify-content: center;
transition: width var(--t) var(--ease), padding var(--t) var(--ease);
}
.h-v10.is-scrolled .h-v10__logo { width: 112px; padding: 9px 14px; }
.h-v10__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* keep nav + right cluster vertically centered now that the bar uses align-items:stretch */
.h-v10__nav, .h-v10__right { align-self: center; }
.h-v10__nav { display: none; gap: 2px; flex: 1; justify-content: center; }
@media (min-width: 1080px) { .h-v10__nav { display: flex; } }
.h-v10__nav a {
position: relative; padding: 12px 16px;
font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.85); transition: color var(--t) var(--ease); white-space: nowrap;
}
.h-v10__nav a:hover { color: var(--white); }
.h-v10__nav a::after {
content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform var(--t) var(--ease);
}
.h-v10__nav a:hover::after { transform: scaleX(1); }
/* dropdown menus */
.h-v10__item { position: relative; display: flex; align-items: center; }
.h-v10__item.has-children > a { padding-right: 28px; }
.h-v10__item.has-children > a::before {
content: ""; position: absolute; right: 14px; top: 50%; margin-top: -4px;
width: 6px; height: 6px;
border-right: 2px solid rgba(255,255,255,0.7); border-bottom: 2px solid rgba(255,255,255,0.7);
transform: rotate(45deg); transition: border-color var(--t) var(--ease);
}
.h-v10__item.has-children:hover > a::before { border-color: var(--white); }
.h-v10__panel {
position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
min-width: 240px; background: var(--white);
border-radius: 0 0 var(--r-md) var(--r-md);
box-shadow: var(--shadow-lift); padding: 10px;
opacity: 0; visibility: hidden;
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
z-index: 70;
}
.h-v10__item:hover .h-v10__panel, .h-v10__item:focus-within .h-v10__panel {
opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.h-v10__panel ul { list-style: none; }
.h-v10__panel a {
display: block; padding: 10px 16px; border-radius: 8px;
font-size: 13px; font-weight: 600; color: var(--ink);
text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.h-v10__panel a::after { display: none; }
.h-v10__panel a:hover { background: var(--blue-tint); color: var(--blue); }
.h-v10__service {
display: none; color: rgba(255,255,255,0.92);
font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
}
/* secondary link only appears on wide screens so the bar never crowds */
@media (min-width: 1400px) { .h-v10__service { display: inline; } }
.h-v10__service:hover { color: var(--accent); }
.h-v10__right { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-shrink: 0; }
.h-v10__phone {
display: none; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap;
color: var(--white); font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em;
}
@media (min-width: 900px) { .h-v10__phone { display: inline-flex; } }
.h-v10__phone:hover { color: var(--accent); }
.h-v10__phone-ico { opacity: 0.8; flex-shrink: 0; }
/* Book Online + Free Estimate stack vertically to stay compact in the bar */
.h-v10__cta-stack { display: none; flex-shrink: 0; }
@media (min-width: 1080px) {
.h-v10__cta-stack { display: flex; flex-direction: column; gap: 7px; }
}
.h-v10__cta {
display: inline-flex; align-items: center; justify-content: center;
gap: 7px; white-space: nowrap;
padding: 9px 22px; border-radius: 999px;
background: var(--accent); color: var(--blue-deep);
border: 1.5px solid transparent; /* keeps the ghost + solid pills the same height */
font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
transition: all var(--t) var(--ease);
}
.h-v10__cta:hover { background: var(--white); color: var(--blue-deep); transform: translateY(-1px); }
.h-v10__cta-ico { flex-shrink: 0; }
/* Free Estimate becomes the quieter, outlined option; Book Online carries the gold. */
.h-v10__cta--ghost {
background: transparent; color: var(--white);
border-color: rgba(255,255,255,0.45);
}
.h-v10__cta--ghost:hover {
background: rgba(255,255,255,0.12); color: var(--white);
border-color: var(--white);
}
.h-v10__cta--book { box-shadow: 0 6px 18px -6px rgba(244,168,58,0.7); }
.h-v10__cta--book:hover { background: var(--white); box-shadow: 0 8px 22px -6px rgba(244,168,58,0.5); }
/* ==========================================================================
HEADER 11 — Blue bar with a single "Products & Services" mega menu.
Reuses .h-v10 styling; overrides are scoped under .h-v11 so v10 is untouched.
========================================================================== */
/* With only two nav items there is room, so show every right-side control and
give the phone / Service Request / both pills even breathing space. */
.h-v11 .h-v10__right { gap: 22px; }
.h-v11 .h-v10__cta { display: none; }
@media (min-width: 1080px) {
.h-v11 .h-v10__service { display: inline-flex; }
.h-v11 .h-v10__cta { display: inline-flex; }
}
/* Mega dropdown panel */
.h-v11__mega {
left: 0; right: auto;
transform: translate(0, 10px);
min-width: min(720px, 88vw);
padding: 24px;
}
.h-v10__item:hover > .h-v11__mega,
.h-v10__item:focus-within > .h-v11__mega { transform: translate(0, 0); }
.h-v11__mega-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px 24px;
}
.h-v11__mega-head {
display: block;
padding: 4px 8px 10px;
margin-bottom: 6px;
border-bottom: 1px solid var(--gray-rule);
font-family: var(--display);
font-size: 13px; font-weight: 700;
letter-spacing: 0; text-transform: none;
color: var(--blue) !important;
}
.h-v11__mega-head:hover { color: var(--blue-bright) !important; background: transparent !important; }
.h-v11__mega-col ul { list-style: none; margin: 0; padding: 0; }
/* ==========================================================================
HERO VARIANTS 8–12 (added)
========================================================================== */
/* ===== HERO 8 — Triptych Vertical Slats ================================== */
.hero-v8 { background: var(--white) var(--grad-mesh); padding: clamp(48px, 6vw, 88px) 0; }
.hero-v8__inner {
display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); align-items: center;
max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
}
@media (min-width: 960px) { .hero-v8__inner { grid-template-columns: 1fr 1.1fr; } }
.hero-v8__title {
font-family: var(--display); font-size: clamp(2.25rem, 4.6vw, 3.6rem);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 20px;
}
.hero-v8__title .grad {
background: var(--grad-blue); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v8__lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--muted); max-width: 52ch; margin-bottom: 30px; }
.hero-v8__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-v8__phone { display: inline-block; margin-top: 24px; font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--blue); }
.hero-v8__slats {
position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px; height: clamp(360px, 56vh, 560px);
}
.hero-v8__slat {
position: relative; border-radius: var(--r-lg); overflow: hidden;
background-size: cover; background-position: center;
box-shadow: var(--shadow-card); transition: transform var(--t) var(--ease);
display: flex; align-items: flex-end;
}
.hero-v8__slat:nth-child(1), .hero-v8__slat:nth-child(3) { transform: translateY(22px); }
.hero-v8__slat:hover { transform: translateY(8px) scale(1.01); }
.hero-v8__slat:nth-child(1):hover, .hero-v8__slat:nth-child(3):hover { transform: translateY(14px) scale(1.01); }
.hero-v8__slat::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.78), transparent 55%);
}
.hero-v8__slat span {
position: relative; z-index: 2; padding: 16px;
color: var(--white); font-family: var(--display); font-weight: 700;
font-size: 0.95rem; letter-spacing: -0.01em;
}
.hero-v8__ring {
position: absolute; left: -14px; bottom: -14px; z-index: 3;
width: 116px; height: 116px; border-radius: 50%;
background-image: var(--grad-blue); color: var(--white);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; box-shadow: var(--shadow-blue); border: 4px solid var(--white);
}
.hero-v8__ring .num { font-family: var(--display); font-size: 1.6rem; font-weight: 800; line-height: 1; }
.hero-v8__ring .lbl { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; opacity: 0.9; }
@media (max-width: 540px) {
.hero-v8__slats { height: 320px; gap: 10px; }
.hero-v8__ring { width: 92px; height: 92px; }
.hero-v8__ring .num { font-size: 1.25rem; }
}
/* ===== HERO 9 — Full-Bleed Service Slider ================================ */
.hero-v9 {
position: relative; overflow: hidden;
background-color: var(--blue-deep); color: var(--white);
min-height: clamp(560px, 88vh, 820px);
}
.hero-v9__slide {
position: absolute; inset: 0;
background-size: cover; background-position: center;
display: flex; align-items: center;
opacity: 0; visibility: hidden;
transition: opacity 900ms var(--ease), visibility 900ms var(--ease);
}
.hero-v9__slide.is-active { opacity: 1; visibility: visible; }
.hero-v9__slide::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(100deg, rgba(15,34,71,0.9) 0%, rgba(15,34,71,0.58) 44%, rgba(15,34,71,0.22) 100%);
}
.hero-v9__inner {
position: relative; z-index: 2;
width: 100%; max-width: var(--container); margin: 0 auto;
padding: clamp(80px, 12vw, 120px) clamp(20px, 4vw, 48px);
}
.hero-v9__content { max-width: 660px; }
/* subtle entrance for the active slide's copy */
.hero-v9__slide .hero-v9__content > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.hero-v9__slide.is-active .hero-v9__content > * { opacity: 1; transform: none; }
.hero-v9__slide.is-active .hero-v9__content > *:nth-child(2) { transition-delay: 90ms; }
.hero-v9__slide.is-active .hero-v9__content > *:nth-child(3) { transition-delay: 160ms; }
.hero-v9__slide.is-active .hero-v9__content > *:nth-child(4) { transition-delay: 230ms; }
.hero-v9__title {
font-family: var(--display); font-size: clamp(2.4rem, 5.4vw, 4.4rem);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.03; color: var(--white); margin-bottom: 18px;
}
.hero-v9__lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255,255,255,0.9); max-width: 54ch; margin-bottom: 30px; }
.hero-v9__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* slider controls */
.hero-v9__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 50px; height: 50px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.45); background: rgba(15,34,71,0.28);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
color: var(--white); font-size: 26px; line-height: 1;
display: none; align-items: center; justify-content: center;
transition: all var(--t) var(--ease);
}
@media (min-width: 760px) { .hero-v9__nav { display: flex; } }
.hero-v9__nav--prev { left: clamp(14px, 2.5vw, 32px); }
.hero-v9__nav--next { right: clamp(14px, 2.5vw, 32px); }
.hero-v9__nav:hover { background: var(--white); color: var(--blue); border-color: var(--white); }
.hero-v9__dots {
position: absolute; bottom: clamp(20px, 3vw, 34px); left: 50%; transform: translateX(-50%);
z-index: 3; display: flex; gap: 10px;
}
.hero-v9__dots button {
width: 11px; height: 11px; border-radius: 999px; border: 0; padding: 0;
background: rgba(255,255,255,0.45); cursor: pointer;
transition: background var(--t) var(--ease), width var(--t) var(--ease);
}
.hero-v9__dots button:hover { background: rgba(255,255,255,0.8); }
.hero-v9__dots button.is-active { background: var(--accent); width: 30px; }
/* ===== EXPLORE WHAT WE BUILD — service card band (under the hero) ======== */
.svc-band { background: var(--white); }
.svc-band__head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); }
.svc-band__head .eyebrow { justify-content: center; }
.svc-band__head h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
.svc-band__grid { display: grid; grid-template-columns: 1fr; gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 560px) { .svc-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc-band__grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
position: relative; min-height: 200px; border-radius: var(--r-lg); overflow: hidden;
background-size: cover; background-position: center; color: var(--white);
display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
box-shadow: var(--shadow-card); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.svc-card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.92) 0%, rgba(15,34,71,0.3) 62%, rgba(15,34,71,0.05) 100%);
transition: background var(--t) var(--ease);
}
.svc-card > * { position: relative; z-index: 2; }
.svc-card__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; }
.svc-card__sub {
font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
color: rgba(255,255,255,0.82); margin-top: 5px;
}
.svc-card__arrow {
position: absolute; top: 18px; right: 18px;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
color: var(--white); font-size: 18px; line-height: 1;
transition: all var(--t) var(--ease);
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.svc-card:hover::after { background: linear-gradient(0deg, rgba(46,89,165,0.92) 0%, rgba(15,34,71,0.35) 70%); }
.svc-card:hover .svc-card__arrow { background: var(--accent); color: var(--blue-deep); transform: translateX(2px); }
/* ===== PHOTO GALLERY (reusable, per-page + home) ========================= */
.gallery-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.2vw, 16px);
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
position: relative; display: block; aspect-ratio: 4 / 3;
border-radius: var(--r-md); overflow: hidden;
background-size: cover; background-position: center;
box-shadow: var(--shadow-card);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.gallery-item::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.45), transparent 55%);
opacity: 0; transition: opacity var(--t) var(--ease);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item__zoom {
position: absolute; z-index: 2; right: 12px; bottom: 12px;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,0.92); color: var(--blue);
display: flex; align-items: center; justify-content: center;
font-size: 15px; transform: scale(0.6); opacity: 0;
transition: all var(--t) var(--ease);
}
.gallery-item:hover .gallery-item__zoom { transform: scale(1); opacity: 1; }
/* lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 10000;
background: rgba(10, 14, 22, 0.93); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px);
}
.lightbox.is-open { display: flex; animation: lb-fade 200ms var(--ease); }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img {
max-width: min(1100px, 92vw); max-height: 84vh; width: auto; height: auto;
border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); display: block;
}
.lightbox__count { color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: 0.1em; }
.lightbox__close {
position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 28px);
width: 46px; height: 46px; border-radius: 50%; border: 0;
background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
transition: background var(--t) var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,0.25); }
.lightbox__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
background: rgba(255,255,255,0.1); color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--t) var(--ease);
}
.lightbox__nav:hover { background: rgba(255,255,255,0.28); }
.lightbox__prev { left: clamp(10px, 2vw, 28px); }
.lightbox__next { right: clamp(10px, 2vw, 28px); }
/* ===== WHAT WE OFFER — photo story rows ================================== */
.story { padding: var(--section-y) 0; }
.story__head { text-align: center; max-width: 780px; margin: 0 auto clamp(44px, 6vw, 76px); }
.story__head .eyebrow { justify-content: center; }
.story-row {
display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px);
align-items: center; margin-bottom: clamp(56px, 7vw, 104px);
}
.story-row:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
.story-row { grid-template-columns: 1.02fr 0.98fr; }
.story-row--rev .story-row__media { order: 2; }
}
.story-row__media { position: relative; }
.story-row__media-main {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--r-lg); box-shadow: var(--shadow-card); display: block;
}
.story-row__media-inset {
display: none;
position: absolute; bottom: -26px; right: -18px; z-index: 2;
width: 44%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--r-md); border: 6px solid var(--white);
box-shadow: var(--shadow-lift);
}
.story-row--rev .story-row__media-inset { right: auto; left: -18px; }
@media (min-width: 760px) { .story-row__media-inset { display: block; } }
.story-row__title {
font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin-bottom: 14px;
}
.story-row__copy { color: var(--muted); font-size: clamp(1rem, 1.15vw, 1.1rem); margin-bottom: 20px; max-width: 52ch; }
.story-row__list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; }
.story-row__list li {
position: relative; padding-left: 20px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.story-row__list li::before {
content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; font-size: 12px;
}
/* shared text link */
.btn-link {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--blue); transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.btn-link:hover { gap: 12px; color: var(--blue-bright); }
/* ===== HERO 10 — Bold Type + Product Card Grid =========================== */
.hero-v10 { background: var(--white); padding: clamp(48px, 6vw, 96px) 0; }
.hero-v10__inner {
display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px); align-items: center;
max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
}
@media (min-width: 960px) { .hero-v10__inner { grid-template-columns: 1.05fr 0.95fr; } }
.hero-v10__title {
font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; margin-bottom: 20px;
}
.hero-v10__title .grad {
background: var(--grad-blue); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v10__lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--muted); max-width: 50ch; margin-bottom: 30px; }
.hero-v10__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-v10__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.hero-v10__card {
position: relative; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
background-size: cover; background-position: center; box-shadow: var(--shadow-card);
display: flex; align-items: flex-end; transition: transform var(--t) var(--ease);
}
.hero-v10__card::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.8), transparent 60%);
transition: opacity var(--t) var(--ease);
}
.hero-v10__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.hero-v10__card span {
position: relative; z-index: 2; padding: 16px 18px;
color: var(--white); font-family: var(--display); font-weight: 700;
font-size: 1.05rem; letter-spacing: -0.01em;
}
.hero-v10__card:nth-child(1) { border-top-left-radius: var(--r-xl); }
.hero-v10__card:nth-child(2) { border-top-right-radius: var(--r-xl); }
.hero-v10__card:nth-child(3) { border-bottom-left-radius: var(--r-xl); }
.hero-v10__card:nth-child(4) { border-bottom-right-radius: var(--r-xl); }
/* ===== HERO 11 — Minimal Type-Forward ==================================== */
.hero-v11 {
background: var(--blue-tint); background-image: var(--grad-mesh);
padding: clamp(80px, 12vw, 160px) 0;
}
.hero-v11__inner { max-width: 920px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); text-align: center; }
.hero-v11__title {
font-family: var(--display); font-size: clamp(2.75rem, 7vw, 5.5rem);
font-weight: 700; letter-spacing: -0.04em; line-height: 1.0; margin-bottom: 24px;
}
.hero-v11__title .grad {
background: var(--grad-blue); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-v11__lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 64ch; margin: 0 auto 36px; }
.hero-v11__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.hero-v11__strip {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
margin-top: clamp(40px, 5vw, 64px); padding-top: 28px;
border-top: 1px solid var(--gray-rule);
font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.hero-v11__strip .dot { color: var(--blue); opacity: 0.45; }
/* ===== HERO 12 — Estimate Form (Lead Capture) =========================== */
.hero-v12 { background: var(--blue-tint); }
.hero-v12__inner {
display: grid; grid-template-columns: 1fr; align-items: stretch;
max-width: 1340px; margin: 0 auto;
}
@media (min-width: 920px) { .hero-v12__inner { grid-template-columns: 1.15fr 0.85fr; } }
.hero-v12__media {
position: relative; background-color: var(--blue-deep);
background-size: cover; background-position: center; color: var(--white);
min-height: 280px; display: flex; align-items: flex-end;
padding: clamp(32px, 5vw, 64px);
}
.hero-v12__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(15,34,71,0.85) 0%, rgba(15,34,71,0.35) 70%);
}
.hero-v12__media-inner { position: relative; z-index: 2; max-width: 540px; }
.hero-v12__title {
font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--white); margin-bottom: 14px;
}
.hero-v12__lede { color: rgba(255,255,255,0.9); font-size: clamp(1rem, 1.2vw, 1.1rem); margin-bottom: 20px; }
.hero-v12__list { list-style: none; display: grid; gap: 10px; }
.hero-v12__list li {
position: relative; padding-left: 28px; font-size: 0.95rem; color: rgba(255,255,255,0.92);
}
.hero-v12__list li::before {
content: "✓"; position: absolute; left: 0; top: -1px;
width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--blue-deep);
font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.hero-v12__form-wrap { display: flex; align-items: center; padding: clamp(28px, 4vw, 56px); }
.hero-v12__form {
width: 100%; background: var(--white); border-radius: var(--r-xl);
box-shadow: var(--shadow-lift); border: 1px solid var(--gray-rule);
padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px;
}
.hero-v12__form-title { font-family: var(--display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.hero-v12__form-sub { color: var(--muted); font-size: 0.9rem; margin: -8px 0 4px; }
.hero-v12__form label {
display: grid; gap: 6px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.hero-v12__form input, .hero-v12__form select {
font-family: var(--font); font-size: 15px; color: var(--ink);
padding: 13px 14px; border: 1.5px solid var(--gray-rule); border-radius: var(--r-sm);
background: var(--white); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
text-transform: none; letter-spacing: normal; font-weight: 400;
}
.hero-v12__form input:focus, .hero-v12__form select:focus {
outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,89,165,0.12);
}
.hero-v12__form .btn { margin-top: 4px; }
.hero-v12__call { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.hero-v12__call:hover { color: var(--blue); }
/* ==========================================================================
VALUE PROPS — "Why Choose Us" (premium redesign)
========================================================================== */
.value-grid {
display: grid;
gap: clamp(20px, 2.5vw, 28px);
grid-template-columns: 1fr;
}
@media (min-width: 860px) { .value-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(32px, 3.4vw, 44px) clamp(28px, 3vw, 38px) clamp(30px, 3vw, 40px);
background: var(--white);
border: 1px solid var(--gray-rule);
border-radius: var(--r-lg);
box-shadow: var(--shadow-soft);
overflow: hidden;
isolation: isolate;
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.value-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: var(--grad-blue);
transform: scaleX(0);
transform-origin: left;
transition: transform 420ms var(--ease);
}
.value-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
border-color: transparent;
}
.value-card:hover::before { transform: scaleX(1); }
.value-card__num {
position: absolute;
top: clamp(18px, 2.4vw, 26px);
right: clamp(20px, 2.6vw, 30px);
font-family: var(--display);
font-size: clamp(2.4rem, 4vw, 3.4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: var(--blue-soft);
z-index: -1;
transition: color var(--t) var(--ease);
}
.value-card:hover .value-card__num { color: #dde7f8; }
.value-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px; height: 60px;
border-radius: 16px;
background: var(--grad-blue);
color: var(--white);
box-shadow: var(--shadow-blue);
margin-bottom: 24px;
}
.value-card__icon svg { width: 30px; height: 30px; }
.value-card h3 {
font-family: var(--display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 12px;
}
.value-card p {
color: var(--muted);
font-size: 0.96rem;
line-height: 1.7;
margin: 0 0 24px;
}
.value-card__link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--display);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--blue);
}
.value-card__link svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.value-card__link:hover { color: var(--blue-bright); }
.value-card:hover .value-card__link svg,
.value-card__link:hover svg { transform: translateX(4px); }
/* ==========================================================================
TESTIMONIAL — editorial feature card
========================================================================== */
.testimonial-section { background: var(--white) var(--grad-mesh); }
.testimonial-card {
position: relative;
max-width: 880px;
margin: 0 auto;
text-align: center;
padding: clamp(44px, 6vw, 80px) clamp(28px, 5vw, 72px) clamp(40px, 5vw, 64px);
background: var(--white);
border: 1px solid var(--gray-rule);
border-radius: var(--r-xl);
box-shadow: var(--shadow-card);
}
.testimonial-card__rule {
display: inline-flex;
color: var(--blue);
opacity: 0.16;
margin-bottom: 20px;
}
.testimonial-card__rule svg { width: 52px; height: auto; }
.testimonial-card .eyebrow { justify-content: center; margin-bottom: 14px; }
.testimonial-card__stars {
color: var(--accent);
letter-spacing: 0.18em;
font-size: 1.05rem;
margin-bottom: 22px;
}
.testimonial-card__quote {
margin: 0 0 32px;
font-family: var(--display);
font-size: clamp(1.25rem, 2.4vw, 1.85rem);
font-weight: 500;
line-height: 1.45;
letter-spacing: -0.015em;
color: var(--ink);
}
.testimonial-card__quote em {
font-style: normal;
color: var(--blue);
background: linear-gradient(transparent 62%, var(--blue-soft) 62%);
}
.testimonial-card__by {
display: inline-flex;
align-items: center;
gap: 14px;
text-align: left;
}
.testimonial-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
border-radius: 50%;
background: var(--grad-blue);
color: var(--white);
font-family: var(--display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
box-shadow: var(--shadow-blue);
flex-shrink: 0;
}
.testimonial-card__meta { display: flex; flex-direction: column; line-height: 1.35; }
.testimonial-card__meta strong { color: var(--ink); font-size: 1rem; }
.testimonial-card__meta span { color: var(--muted); font-size: 0.85rem; }
.testimonial-foot {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
align-items: center;
justify-content: center;
margin-top: 32px;
}
.testimonial-foot p { margin: 0; color: var(--muted); font-size: 0.95rem; }
/* ==========================================================================
CTA-PRO — estimate band with contact form
========================================================================== */
.cta-pro {
position: relative;
overflow: hidden;
background: var(--blue-deep);
background-image: var(--grad-blue);
color: var(--white);
padding: clamp(64px, 8vw, 104px) 0;
}
.cta-pro::before {
content: "";
position: absolute;
top: -30%; right: -8%;
width: 50%; height: 160%;
background: radial-gradient(closest-side, rgba(61,124,216,0.30), transparent 70%);
pointer-events: none;
}
.cta-pro::after {
content: "";
position: absolute;
bottom: -40%; left: -10%;
width: 45%; height: 150%;
background: radial-gradient(closest-side, rgba(15,34,71,0.45), transparent 70%);
pointer-events: none;
}
.cta-pro__grid {
position: relative;
z-index: 1;
display: grid;
gap: clamp(36px, 5vw, 72px);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 920px) { .cta-pro__grid { grid-template-columns: 1fr 1fr; } }
.cta-pro__intro h2 {
color: var(--white);
font-family: var(--display);
font-size: clamp(1.85rem, 3.4vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 18px;
}
.cta-pro__lede {
color: rgba(255,255,255,0.82);
font-size: clamp(1rem, 1.3vw, 1.1rem);
line-height: 1.7;
margin: 0 0 28px;
max-width: 46ch;
}
.cta-pro__points {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
gap: 14px;
}
.cta-pro__points li {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255,255,255,0.92);
font-size: 0.98rem;
}
.cta-pro__points svg {
flex-shrink: 0;
width: 22px; height: 22px;
padding: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.28);
color: var(--white);
}
.cta-pro__direct {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 22px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.16);
}
.cta-pro__phone {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--display);
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--white);
}
.cta-pro__phone svg { width: 22px; height: 22px; opacity: 0.85; }
.cta-pro__phone:hover { color: var(--white); opacity: 0.88; }
.cta-pro__or { color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.cta-pro__or a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.cta-pro__card {
background: var(--white);
border-radius: var(--r-xl);
padding: clamp(28px, 3.4vw, 44px);
box-shadow: 0 30px 70px -24px rgba(0,0,0,0.45);
}
.cta-form { gap: 16px; }
.cta-form__title {
font-family: var(--display);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 4px;
}
.cta-form .field textarea { min-height: 96px; }
.cta-form .btn-block { justify-content: center; margin-top: 4px; }
.cta-form__note {
margin: 0;
text-align: center;
font-size: 12px;
color: var(--muted);
}
/* ==========================================================================
PROJECT SHOWCASE — home page, tabs per service + big slider + thumbnails
========================================================================== */
.showcase__tabs {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 10px; margin-bottom: 34px;
}
.showcase__tab {
padding: 10px 20px; border-radius: 999px;
border: 1.5px solid var(--gray-rule); background: var(--white);
color: var(--muted); font-family: var(--display);
font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
cursor: pointer; white-space: nowrap;
transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.showcase__tab:hover { border-color: var(--blue); color: var(--blue); }
.showcase__tab.is-active {
background: var(--grad-blue); border-color: transparent;
color: var(--white); box-shadow: var(--shadow-blue);
}
.showcase__panels { position: relative; }
.showcase__panel { display: none; }
.showcase__panel.is-active { display: block; }
.showcase__stage {
position: relative;
aspect-ratio: 16 / 9; max-height: 560px;
border-radius: var(--r-xl); overflow: hidden;
background: var(--blue-deep); box-shadow: var(--shadow-card);
}
.showcase__slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 600ms var(--ease);
}
.showcase__slide.is-active { opacity: 1; }
/* Behind: a blurred, zoomed copy fills the stage so there are no flat bars. */
.showcase__slide::before {
content: ""; position: absolute; inset: 0;
background-image: var(--shot);
background-size: cover; background-position: center;
filter: blur(22px) brightness(0.62);
transform: scale(1.15);
}
/* Front: the whole photo, centered and uncropped, whatever its shape. */
.showcase__slide::after {
content: ""; position: absolute; inset: 0;
background-image: var(--shot);
background-size: contain; background-position: center;
background-repeat: no-repeat;
}
.showcase__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%; border: 0;
background: rgba(255,255,255,0.9); color: var(--blue-deep);
font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-soft);
transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.showcase__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.showcase__arrow--prev { left: 16px; }
.showcase__arrow--next { right: 16px; }
.showcase__link {
position: absolute; left: 18px; bottom: 18px; z-index: 2;
display: inline-flex; align-items: center;
padding: 10px 18px; border-radius: 999px;
background: var(--accent); color: var(--blue-deep) !important;
font-family: var(--display); font-size: 13px; font-weight: 700;
box-shadow: var(--shadow-blue);
transition: filter var(--t) var(--ease), transform var(--t) var(--ease);
}
.showcase__link:hover { filter: brightness(0.96); transform: translateY(-1px); }
.showcase__thumbs {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 12px; margin-top: 14px;
}
@media (max-width: 640px) {
.showcase__thumbs {
grid-auto-columns: minmax(82px, 1fr);
overflow-x: auto; padding-bottom: 6px;
scroll-snap-type: x mandatory;
}
}
.showcase__thumb {
aspect-ratio: 4 / 3; border: 0; padding: 0;
border-radius: var(--r-md);
background-size: cover; background-position: center;
cursor: pointer; opacity: 0.5;
outline: 2px solid transparent; outline-offset: -2px;
scroll-snap-align: start;
transition: opacity var(--t) var(--ease), outline-color var(--t) var(--ease);
}
.showcase__thumb:hover { opacity: 0.85; }
.showcase__thumb.is-active { opacity: 1; outline-color: var(--accent); }
/* ==========================================================================
VIDEO FEATURE — embedded YouTube on relevant product pages
========================================================================== */
.video-feature { max-width: 920px; margin: 0 auto; }
.video-feature__more {
margin: 18px 0 0; text-align: center;
font-size: 0.95rem; color: var(--muted);
}
.video-feature__more a { font-weight: 700; color: var(--blue); }
.video-feature__more a:hover { color: var(--blue-bright); }
/* Self-hosted product videos (mp4 clips of real installs, inline) */
.product-video { max-width: 920px; margin: 0 auto; }
.product-video video {
width: 100%; display: block; border-radius: var(--r-lg);
box-shadow: var(--shadow-card); background: #0c1c33;
}
.product-video figcaption {
margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 0.95rem;
}
.product-video--portrait { max-width: 380px; }
.product-video--portrait video { aspect-ratio: 9 / 16; object-fit: cover; }
/* Fabric brand logos on the /colors page cards */
.fabric-logo {
height: 30px; width: auto; max-width: 170px;
object-fit: contain; object-position: left center;
margin-bottom: 18px; display: block;
}
/* Product-page "Features" heading — larger than the old eyebrow label */
.feature-list__title {
font-family: var(--display);
font-size: clamp(1.3rem, 2vw, 1.65rem);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 4px;
}
/* Lead paragraph in page content uses the body ink color so it reads as the
same typeface family as the paragraphs below it, just a touch larger. */
.intro { color: var(--ink); }
/* ==========================================================================
INSTAGRAM — feed-style grid on the About page
========================================================================== */
.insta__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(8px, 1.2vw, 14px);
margin-top: 8px;
}
@media (min-width: 680px) { .insta__grid { grid-template-columns: repeat(4, 1fr); } }
.insta__tile {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--r-md);
background-size: cover; background-position: center;
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.insta__tile img { width: 100%; height: 100%; object-fit: cover; }
.insta__overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--white);
background: linear-gradient(135deg, rgba(46,89,165,0.55), rgba(15,34,71,0.55));
opacity: 0;
transition: opacity var(--t) var(--ease);
}
.insta__overlay svg { width: 34px; height: 34px; }
.insta__tile:hover .insta__overlay { opacity: 1; }
.insta__cta { text-align: center; margin-top: clamp(28px, 4vw, 40px); }
/* ── Fabric library (colors page) ───────────────────────────────────────── */
.fablib__head { max-width: 760px; }
.fablib__title {
font-family: var(--display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.1;
margin: 10px 0 14px;
}
.fablib__lede { color: var(--muted); max-width: 64ch; }
.fablib__controls {
position: sticky;
top: calc(var(--nav-bar-h) + 8px);
z-index: 5;
margin: 32px 0 28px;
padding: 18px;
background: rgba(255,255,255,0.86);
backdrop-filter: blur(10px);
border: 1px solid var(--rule);
border-radius: var(--r-md);
box-shadow: var(--shadow-soft);
}
.fablib__search {
width: 100%;
font: inherit;
font-size: 1rem;
padding: 12px 16px;
border: 1px solid var(--rule);
border-radius: var(--r-sm);
background: var(--white);
color: var(--ink);
}
.fablib__search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.fablib__chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fablib__chip {
font: inherit;
font-size: 0.85rem;
font-weight: 600;
line-height: 1;
padding: 9px 15px;
border: 1px solid var(--rule);
border-radius: 999px;
background: var(--white);
color: var(--muted);
cursor: pointer;
transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.fablib__chip:hover { color: var(--ink); border-color: var(--blue); }
.fablib__chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.fablib__count { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); }
.fablib__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 16px;
}
.fablib__item { margin: 0; }
.fablib__item[hidden] { display: none; }
.fablib__swatch {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--r-sm);
border: 1px solid var(--rule);
box-shadow: var(--shadow-soft);
}
.fablib__cap { margin-top: 9px; line-height: 1.3; }
.fablib__name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.fablib__code { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 1px; }
.fablib__empty { margin-top: 28px; color: var(--muted); }
@media (max-width: 520px) {
.fablib__grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; }
.fablib__controls { top: 8px; }
}
/* ===== BLOG ============================================================== */
/* Article hero */
.post-hero {
background-size: cover; background-position: center;
color: var(--white);
padding: clamp(90px, 13vw, 170px) 0 clamp(34px, 5vw, 56px);
}
.post-crumb { font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.82); margin: 0 0 18px; }
.post-crumb a { color: rgba(255,255,255,0.82); text-decoration: none; }
.post-crumb a:hover { color: #fff; text-decoration: underline; }
.post-crumb span { margin: 0 8px; opacity: 0.6; }
.post-cat {
display: inline-block; background: var(--accent); color: var(--blue-deep);
font-family: var(--font); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
.post-title {
font-family: var(--display); font-weight: 800; color: #fff;
font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.12; margin: 0 0 16px; max-width: 22ch;
}
.post-meta { color: rgba(255,255,255,0.85); font-size: 14px; margin: 0; }
/* Article body */
.post-wrap { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px clamp(24px, 4vw, 40px); }
.post-body { color: var(--ink); font-size: 1.075rem; line-height: 1.78; }
.post-body > :first-child { margin-top: 0; }
.post-body h2 {
font-family: var(--display); font-weight: 700; color: var(--blue-deep);
font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 2.2em 0 0.6em;
}
.post-body h3 {
font-family: var(--display); font-weight: 700; color: var(--ink);
font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 1.8em 0 0.5em;
}
.post-body p { margin: 0 0 1.2em; }
.post-body ul, .post-body ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.post-body li { margin: 0 0 0.5em; padding-left: 0.2em; }
.post-body li::marker { color: var(--blue); }
.post-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.post-body a:hover { color: var(--blue-dark); }
.post-body strong { font-weight: 700; color: var(--blue-deep); }
.post-body img { border-radius: var(--r-md); border: 1px solid var(--rule); margin: 1.6em 0; }
.post-body blockquote {
margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--accent);
color: var(--muted); font-style: italic; font-size: 1.1rem;
}
.post-body h2:first-of-type { margin-top: 0.4em; }
/* In-article CTA */
.post-cta {
margin: clamp(36px, 5vw, 56px) 0 0; padding: clamp(28px, 4vw, 40px);
background: var(--blue-tint); border: 1px solid var(--blue-soft); border-radius: var(--r-lg);
}
.post-cta h2 { font-family: var(--display); font-weight: 700; color: var(--blue-deep); font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 6px 0 10px; }
.post-cta p { color: var(--muted); margin: 0 0 18px; }
.post-cta__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.post-chip {
display: inline-block; background: var(--white); border: 1px solid var(--blue-soft);
color: var(--blue-dark); font-weight: 600; font-size: 14px; padding: 9px 16px;
border-radius: 999px; text-decoration: none; transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.post-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.post-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Related posts */
.post-related { padding: clamp(48px, 7vw, 88px) 0; background: var(--gray-light); }
.post-card__cat {
display: inline-block; background: var(--blue-soft); color: var(--blue-dark);
font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
/* Blog index + category grids */
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.cat-nav__chip {
display: inline-block; border: 1px solid var(--rule); color: var(--ink);
font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px;
text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.cat-nav__chip:hover { border-color: var(--blue); color: var(--blue); }
.cat-nav__chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.blog-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px;
}
.post-card {
display: flex; flex-direction: column; background: var(--white);
border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
text-decoration: none; color: var(--ink); box-shadow: var(--shadow-soft);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.post-card__media { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.post-card__title { font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.28; color: var(--blue-deep); margin: 4px 0 10px; }
.post-card__excerpt { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 18px; flex: 1; }
.post-card__foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; }
.post-card__more { color: var(--blue); font-weight: 700; }
@media (max-width: 600px) {
.blog-grid { grid-template-columns: 1fr; }
}
/* ===== FAQ ============================================================== */
.faq-section { background: var(--gray-light); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white);
margin-bottom: 14px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.faq-item > summary {
list-style: none; cursor: pointer; padding: 20px 24px;
font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--blue-deep);
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--blue); line-height: 1;
flex: 0 0 auto;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item__a { padding: 0 24px 20px; color: var(--muted); line-height: 1.7; }
.faq-item__a p { margin: 0; }
.faq-item__a a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }