* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.7; font-size: 1.05rem; }
img { max-width: 100%; height: auto; }
img.logo { max-width: none; }
a { color: var(--color-primary); transition: color .2s, opacity .2s; }
a:hover { opacity: .85; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4.5rem 0; }
.section-compact { padding: 2.5rem 0; }
.section.alt { background: rgba(0,0,0,.03); }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; }
.section-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .75rem; }
.section-sub { color: #555; font-size: 1.1rem; margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; font-weight: 700; color: var(--color-accent); margin: 0 0 .5rem; }
/* Header — room for readable logos */
.site-header { padding: 0.625rem 0; position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; flex-wrap: nowrap; }
.main-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.main-nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.main-nav a:hover { border-bottom-color: var(--color-accent); }
.brand { display: flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; flex-shrink: 0; max-width: min(62%, 440px); }
.brand.has-logo-image { line-height: 0; }
.brand.has-logo-image.brand-with-text { line-height: 1.2; }
/* Logo contrast — only invert truly transparent marks (avoids white-box artifacts) */
.brand.logo-treatment-mono-light .logo {
filter: brightness(0) invert(1);
}
.brand.logo-treatment-mono-dark .logo {
filter: brightness(0) contrast(1.08);
}
.brand.logo-treatment-brighten .logo {
filter: brightness(1.35) contrast(1.06) saturate(1.12);
}
.site-header .brand .logo,
.logo {
height: 5.75rem;
min-height: 5.75rem;
width: auto;
max-width: min(380px, 52vw);
display: block;
object-fit: contain;
flex-shrink: 0;
background: transparent;
}
.logo-lg {
height: 7rem;
min-height: 7rem;
width: auto;
max-width: min(480px, 58vw);
display: block;
object-fit: contain;
flex-shrink: 0;
background: transparent;
}
.logo-mark {
height: 5.75rem;
min-height: 5.75rem;
width: 5.75rem;
max-width: 5.75rem;
}
.logo-lg.logo-mark {
height: 7rem;
min-height: 7rem;
width: 7rem;
max-width: 7rem;
}
/* Hide duplicate text when wordmark image already includes the business name */
.brand.has-logo-image:not(.brand-with-text) .brand-name {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.brand-with-text .brand-name {
font-size: clamp(0.9rem, 1.6vw, 1.05rem);
line-height: 1.15;
max-width: 11rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.brand-name { line-height: 1.2; }
.header-cta { text-decoration: none; padding: .65rem 1.25rem; font-weight: 700; white-space: nowrap; }
.nav-force-light { color: #ffffff !important; }
.nav-force-dark { color: #111827 !important; }
.header-cta.nav-force-light { background: var(--header-cta-bg, var(--color-primary)); color: var(--header-cta-fg, #fff) !important; }
.header-cta.nav-force-dark { background: var(--header-cta-bg, var(--color-primary)); color: var(--header-cta-fg, #fff) !important; }
.header-centered .header-top-row { text-align: center; padding: .5rem 0; }
.nav-center { justify-content: center; }
.brand-center { justify-content: center; margin: 0 auto; }
.header-phone-center { text-align: center; font-weight: 700; font-size: 1.1rem; margin-top: .5rem; }
.top-phone-bar a { text-decoration: underline; }
.promo-banner { font-size: .95rem; }
/* Buttons */
.btn-primary, .btn-accent, .btn-outline, button { display: inline-block; padding: .8rem 1.5rem; text-decoration: none; border: 0; cursor: pointer; font-weight: 700; font-size: 1rem; transition: transform .2s, box-shadow .2s; }
.btn-primary:hover, .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); background: transparent; }
.rounded-full { border-radius: 999px !important; }
.hero-outline { border-color: #fff !important; color: #fff !important; }
.hero-outline:hover { background: #fff !important; color: var(--color-primary) !important; }
/* Light hero background outline buttons */
.layout-variant_c .hero-outline,
.layout-variant_d .hero-outline,
.layout-variant_e .hero-outline,
.layout-variant_f .hero-outline,
.layout-variant_g .hero-outline {
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.layout-variant_c .hero-outline:hover,
.layout-variant_d .hero-outline:hover,
.layout-variant_e .hero-outline:hover,
.layout-variant_f .hero-outline:hover,
.layout-variant_g .hero-outline:hover {
background: var(--color-primary) !important;
color: #fff !important;
}
/* Hero variants */
.hero { padding: 5rem 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.15; margin: .5rem 0 1rem; }
.lead { font-size: 1.15rem; opacity: .92; max-width: 560px; }
.hero-actions { display: flex; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero-actions-center { justify-content: center; }
.hero-image { width: 100%; border-radius: var(--radius, 12px); box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.hero-image-full { border-radius: var(--radius, 8px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.trust-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; font-size: .9rem; }
.trust-badges span { display: flex; align-items: center; gap: .4rem; }
.hero-b .hero-overlay { min-height: 520px; display: flex; align-items: center; padding: 4rem 0; }
.hero-overlay-wrap .hero-overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.35) 40%,
rgba(0, 0, 0, 0.55) 100%
);
width: 100%;
}
.hero-text-highlight {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 2rem 2.5rem;
border-radius: var(--radius, 12px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
color: var(--color-dark);
text-align: center;
}
.hero-text-highlight .eyebrow { color: var(--color-accent); }
.hero-text-highlight h1 {
color: var(--color-dark);
font-weight: 700;
text-shadow: none;
}
.hero-text-highlight .lead {
color: #444;
opacity: 1;
max-width: 680px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
}
.hero-text-highlight-left { text-align: left; }
.hero-text-highlight-left .lead { margin-left: 0; margin-right: 0; }
.hero-content-centered { text-align: center; max-width: 800px; margin: 0 auto; color: #fff; }
.hero-phone-big { font-size: 1.75rem; font-weight: 800; margin: .5rem 0; }
.hero-phone-big a { color: inherit; text-decoration: none; }
.hero-e { display: flex; align-items: center; padding: 6rem 0; color: #fff; background-size: cover; background-position: center; }
.hero-editorial { max-width: 720px; }
.glass-badge { display: inline-block; padding: .35rem 1rem; border-radius: 999px; background: rgba(255,255,255,.2); }
.hero-glass-card { padding: 1rem; }
.mt-4 { margin-top: 1rem; }
.accent-text { color: var(--color-primary); }
.hero-trust-stats {
background: radial-gradient(circle at center, var(--color-light) 0%, #ffffff 100%);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hero-trust-stats h1 {
color: var(--color-dark);
}
.hero-trust-stats .lead {
color: #555;
}
.hero-trust-stats .hero-outline {
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
}
.hero-trust-stats .hero-outline:hover {
background: var(--color-primary) !important;
color: #fff !important;
}
.hero-phone-mega {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
margin: 1.5rem 0;
}
.hero-phone-mega a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s, transform 0.2s;
display: inline-block;
}
.hero-phone-mega a:hover {
color: var(--color-accent);
transform: scale(1.03);
}
.hero-premium {
background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-primary) 100%);
color: #fff;
border-bottom: 4px solid var(--color-accent);
}
/* Light hero overrides (fingerprint / color-mode) must win over .hero-premium white text */
body.fingerprint-old_pro .hero.hero-premium,
body.color-mode-warm-saturated .hero.hero-premium,
body.color-mode-earth-green .hero.hero-premium {
color: var(--color-dark) !important;
}
body.fingerprint-old_pro .hero.hero-premium h1,
body.fingerprint-old_pro .hero.hero-premium .lead,
body.fingerprint-old_pro .hero.hero-premium p,
body.color-mode-warm-saturated .hero.hero-premium h1,
body.color-mode-warm-saturated .hero.hero-premium .lead,
body.color-mode-earth-green .hero.hero-premium h1,
body.color-mode-earth-green .hero.hero-premium .lead {
color: var(--color-dark) !important;
opacity: 1;
}
body.fingerprint-old_pro .hero.hero-premium .luxury-eyebrow,
body.color-mode-warm-saturated .hero.hero-premium .luxury-eyebrow {
color: var(--color-primary) !important;
}
.hero mark,
.typology-magazine .intro-highlight mark {
background: var(--color-accent);
color: var(--color-dark);
padding: 0 .12em;
}
.luxury-eyebrow {
color: var(--color-accent) !important;
font-weight: 800;
}
.hero-form-card {
background: #ffffff;
border-radius: var(--radius, 12px);
padding: 2rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.05);
}
.hero-form-card h3 {
font-size: 1.35rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.mission-text {
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
opacity: 0.9;
border-left: 3px solid var(--color-accent);
padding-left: 1rem;
margin: 1.5rem 0;
}
.hero-offer-badge {
background: var(--color-accent);
color: #fff;
padding: 0.5rem 1rem;
border-radius: 99px;
font-weight: 700;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
.stat-item { padding: 1rem; }
.stat-number { display: block; font-size: 2.25rem; font-weight: 800; line-height: 1.1; }
.stat-label { font-size: .95rem; opacity: .85; }
/* Services grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.service-card { overflow: hidden; transition: transform .3s, box-shadow .3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.service-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/10; }
.service-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.service-card:hover .service-img { transform: scale(1.05); }
.service-body { padding: 1.25rem; }
.service-body h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.service-body h3 a { color: inherit; text-decoration: none; }
.link-arrow { font-weight: 600; text-decoration: none; font-size: .95rem; }
/* Why choose / process */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.why-card { padding: 1.5rem; background: #fff; border-radius: var(--radius, 12px); box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.feature-icon { margin-bottom: 1rem; }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.process-step { position: relative; padding: 1.5rem; background: #fff; border-radius: var(--radius, 12px); border-left: 4px solid var(--color-primary); }
.step-num { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; border-radius: 50%; font-weight: 800; margin-bottom: .75rem; }
/* Testimonials swiper */
.testimonial-swiper { padding-bottom: 2.5rem; }
.testimonial-card { padding: 2rem; margin: .5rem; min-height: 200px; }
.testimonial-card .stars { color: #ffc107; margin-bottom: .75rem; }
.testimonial-card cite { display: block; margin-top: 1rem; font-style: normal; font-weight: 600; color: #666; }
.swiper-pagination-bullet-active { background: var(--color-primary) !important; }
/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: #fff; border-radius: var(--radius, 8px); margin-bottom: .75rem; padding: 1rem 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: .75rem 0 0; color: #555; }
/* Areas */
.areas-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.area-chip { display: inline-block; padding: .6rem 1.25rem; background: #fff; border: 2px solid var(--color-primary); border-radius: 999px; text-decoration: none; color: var(--color-primary); font-weight: 600; transition: all .2s; }
.area-chip:hover { background: var(--color-primary); color: #fff; }
/* Blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.blog-card img { border-radius: 8px; margin-bottom: .75rem; aspect-ratio: 16/10; object-fit: cover; }
/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--radius, 8px); aspect-ratio: 4/3; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: var(--radius, 8px);
aspect-ratio: 4/3;
cursor: pointer;
border: none;
padding: 0;
background: #000;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s, opacity .3s;
display: block;
}
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.06); opacity: .88; }
.gallery-item:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.gallery-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
margin: 0;
padding: .75rem 1rem;
background: linear-gradient(transparent, rgba(0,0,0,.75));
color: #fff;
font-size: .9rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
}
.gallery-caption i { opacity: .85; font-size: .85rem; }
/* Gallery lightbox modal */
.gallery-modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.gallery-modal[hidden] { display: none !important; }
.gallery-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
cursor: pointer;
}
.gallery-modal-dialog {
position: relative;
z-index: 1;
background: #fff;
border-radius: var(--radius, 12px);
max-width: 720px;
width: 100%;
max-height: 90vh;
overflow: auto;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
animation: galleryModalIn .25s ease-out;
}
@keyframes galleryModalIn {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.gallery-modal-image {
width: 100%;
max-height: 360px;
object-fit: cover;
border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
display: block;
}
.gallery-modal-body { padding: 1.5rem 1.75rem 1.75rem; }
.gallery-modal-title { margin: 0 0 .75rem; font-size: 1.5rem; }
.gallery-modal-desc { margin: 0 0 1.25rem; color: #444; line-height: 1.65; }
.gallery-modal-link { text-decoration: none; display: inline-block; }
.gallery-modal-close {
position: absolute;
top: .65rem;
right: .75rem;
z-index: 2;
background: rgba(255,255,255,.92);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
color: #333;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
body.gallery-modal-open { overflow: hidden; }
/* CTA band */
.cta-band { text-align: center; padding: 5rem 0; }
.cta-inner h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .75rem; }
.cta-inner p { font-size: 1.15rem; margin-bottom: 1.5rem; opacity: .95; }
/* Cards general */
.card { background: #fff; border-radius: var(--radius, 12px); padding: 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
/* Inner pages */
.page-hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius, 12px); margin-bottom: 2rem; }
.breadcrumb-bar {
padding: .65rem 0;
font-size: .875rem;
background: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.breadcrumb-bar a { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #999; margin: 0 .35rem; }
.page-header { padding: 3rem 0 2rem; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color: #fff; }
.page-header h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.page-header .lead { opacity: .95; max-width: 720px; line-height: 1.6; }
.page-header .header-meta {
display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem;
font-size: .95rem; opacity: .9;
}
.page-header .header-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.content-block { padding: 3rem 0; }
.content-prose { max-width: 820px; }
.content-prose-card {
background: #fff;
border-radius: var(--radius, 12px);
padding: 2rem 2.25rem;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.content-prose p { margin-bottom: 1.25rem; }
.content-sidebar { background: var(--color-light); border-radius: var(--radius, 12px); padding: 1.5rem; }
.content-sidebar-sticky { position: sticky; top: 100px; }
.sidebar-phone-cta {
background: var(--color-primary);
color: #fff;
text-align: center;
padding: 1.25rem;
border-radius: var(--radius, 12px);
margin-bottom: 1rem;
}
.sidebar-phone-cta a {
color: #fff;
font-size: 1.25rem;
font-weight: 800;
text-decoration: none;
display: block;
margin-top: .35rem;
}
.sidebar-phone-cta .btn-accent {
display: block;
margin-top: .75rem;
text-decoration: none;
color: #fff;
}
.intro-highlight {
background: rgba(255, 255, 255, 0.95);
border-left: 4px solid var(--color-accent);
padding: 2rem 2.25rem;
border-radius: 0 var(--radius, 12px) var(--radius, 12px) 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.intro-highlight p:last-child { margin-bottom: 0; }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { padding: .5rem 0; border-bottom: 1px solid #e0e0e0; }
.sidebar-list a { text-decoration: none; font-weight: 600; }
.two-col-page { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.benefit-list { list-style: none; padding: 0; }
.benefit-list li { padding: .75rem 0 .75rem 2rem; position: relative; }
.benefit-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--color-accent); }
.cta-inline { background: var(--color-light); border-left: 4px solid var(--color-accent); padding: 1.5rem; margin: 2rem 0; border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0; }
/* Contact */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-form label { display: block; margin-bottom: 1rem; font-weight: 600; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; padding: .75rem; margin-top: .35rem; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; }
.success { color: #1b5e20; font-weight: 600; padding: 1rem; background: #e8f5e9; border-radius: 8px; }
.form-error { color: #b71c1c; font-weight: 600; padding: .75rem 1rem; background: #ffebee; border-radius: 8px; margin-bottom: 1rem; }
.recaptcha-wrap { margin-bottom: 1rem; }
.recaptcha-notice { font-size: .75rem; color: #64748b; margin-top: .75rem; line-height: 1.4; }
.recaptcha-notice a { color: inherit; }
/* Footer */
.site-footer { padding: 3rem 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* Rich content */
.rich h2 { margin-top: 2rem; margin-bottom: 1rem; }
.rich h3 { margin-top: 1.5rem; }
.rich ul, .rich ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.rich li { margin-bottom: .5rem; }
.badge { display: inline-block; background: var(--color-accent); color: #fff; padding: .25rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
/* Variant-specific overrides */
.layout-variant_b .main-nav a { color: var(--color-dark); }
.layout-variant_c .site-header { color: var(--color-dark); }
.layout-variant_c .main-nav a { color: var(--color-dark); }
.layout-variant_e .site-header.header-minimal { color: #fff; }
.layout-variant_e .main-nav a { color: #fff; }
.layout-variant_f .main-nav a { color: var(--color-dark); }
.two-col-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.social-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.social-links a { color: inherit; opacity: .85; transition: opacity .2s, transform .2s; }
.social-links a:hover { opacity: 1; transform: translateY(-2px); }
.ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ba-labels { padding: .5rem .75rem; background: #f8f9fa; }
.ba-card { border: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.cert-grid .cert-badge { transition: transform .2s; }
.cert-grid .cert-badge:hover { transform: translateY(-4px); }
.border-accent { border-color: var(--color-accent) !important; }
@media (max-width: 900px) {
.hero-grid, .two-col-page, .two-col-section, .grid-2 { grid-template-columns: 1fr; }
.main-nav { display: none !important; }
.hero { padding: 3rem 0; }
.hero-text-highlight { padding: 1.5rem 1.25rem; }
.content-sidebar-sticky { position: static; }
.site-header .brand .logo,
.logo { height: 4.75rem; min-height: 4.75rem; max-width: min(300px, 58vw); }
.logo-lg { height: 5.5rem; min-height: 5.5rem; max-width: min(340px, 64vw); }
.logo-mark { height: 4.75rem; min-height: 4.75rem; width: 4.75rem; max-width: 4.75rem; }
.logo-lg.logo-mark { height: 5.5rem; min-height: 5.5rem; width: 5.5rem; max-width: 5.5rem; }
.brand-with-text .brand-name { max-width: 8.5rem; font-size: 0.88rem; }
.site-header { padding: 0.45rem 0; }
}
/* --- DESIGN SYSTEM: NAVIGATION PROFILES --- */
.nav-toggle {
display: none;
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
flex-direction: column;
gap: 5px;
z-index: 110;
color: inherit;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background-color: currentColor;
transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-mobile-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-bottom: 3px solid var(--color-primary);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
padding: 1.5rem;
z-index: 105;
display: flex;
flex-direction: column;
gap: 1.25rem;
transition: opacity 0.25s ease, transform 0.25s ease;
opacity: 0;
transform: translateY(-10px);
}
.nav-mobile-panel.active {
opacity: 1;
transform: translateY(0);
}
.nav-mobile-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nav-mobile-links a {
font-weight: 700;
text-decoration: none;
color: var(--color-dark);
font-size: 1.1rem;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Drawers */
.nav-drawer {
position: fixed;
top: 0;
bottom: 0;
width: 310px;
background: #fff;
z-index: 1000;
box-shadow: 0 0 40px rgba(0,0,0,0.25);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer-left {
left: 0;
transform: translateX(-100%);
}
.nav-drawer-left.active {
transform: translateX(0);
}
.nav-drawer-right {
right: 0;
transform: translateX(100%);
}
.nav-drawer-right.active {
transform: translateX(0);
}
.nav-drawer-close {
align-self: flex-end;
background: transparent;
border: none;
font-size: 1.75rem;
cursor: pointer;
color: var(--color-dark);
padding: 0.25rem;
}
.nav-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
z-index: 999;
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-backdrop.active {
opacity: 1;
}
/* Fullscreen Menu */
.nav-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-dark);
color: #fff;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-fullscreen.active {
opacity: 1;
transform: scale(1);
}
.nav-fullscreen-close {
position: absolute;
top: 2rem;
right: 2rem;
background: transparent;
border: none;
color: #fff;
font-size: 2.25rem;
cursor: pointer;
}
.nav-fullscreen-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.nav-fullscreen-links a {
font-size: 2.25rem;
font-weight: 800;
color: #fff;
text-decoration: none;
transition: color 0.2s, transform 0.2s;
}
.nav-fullscreen-links a:hover {
color: var(--color-accent);
transform: scale(1.05);
}
/* Bottom Mobile Bar */
@media (max-width: 900px) {
.mobile-bottom-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e2e8f0;
box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
z-index: 998;
height: 60px;
justify-content: space-around;
align-items: center;
}
.mobile-bottom-bar a {
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.75rem;
font-weight: 700;
color: #64748b;
text-decoration: none;
transition: color 0.2s;
}
.mobile-bottom-bar a i {
font-size: 1.25rem;
margin-bottom: 2px;
}
.mobile-bottom-bar a:hover,
.mobile-bottom-bar a.bottom-bar-cta {
color: var(--color-primary);
}
body.nav-profile-bottom-mobile {
padding-bottom: 60px !important;
}
}
/* Compact FAB phone */
.fab-phone {
display: none;
}
@media (max-width: 900px) {
.fab-phone {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 56px;
height: 56px;
background: var(--color-primary);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
z-index: 997;
font-size: 1.5rem;
text-decoration: none;
transition: transform 0.2s;
}
.fab-phone:hover {
transform: scale(1.05);
}
}
/* Pill Nav */
.nav-pill {
background: rgba(0,0,0,0.05);
padding: 0.35rem;
border-radius: 99px;
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-pill a {
padding: 0.5rem 1.25rem !important;
border-radius: 99px;
border: none !important;
font-weight: 700;
text-decoration: none;
font-size: 0.9rem;
color: var(--color-dark);
}
.nav-pill a:hover {
background: rgba(255,255,255,0.75);
}
.header-pill-wrap {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
padding: 0.4rem 1.5rem;
border-radius: 99px;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
/* Scroll Transparency */
.header-transparent {
position: fixed;
left: 0;
right: 0;
top: 0;
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
transition: background-color 0.3s, box-shadow 0.3s;
z-index: 1000;
}
.header-transparent.scrolled {
background: #fff !important;
box-shadow: 0 2px 15px rgba(0,0,0,0.06) !important;
}
.header-transparent:not(.scrolled) .brand,
.header-transparent:not(.scrolled) .main-nav a {
color: #fff !important;
}
.header-transparent.scrolled .brand,
.header-transparent.scrolled .main-nav a {
color: var(--color-dark) !important;
}
.header-transparent:not(.scrolled) .nav-toggle span {
background-color: #fff !important;
}
.header-transparent.scrolled .nav-toggle span {
background-color: var(--color-dark) !important;
}
/* Double Strip banner */
.nav-strip-top {
background: var(--color-dark);
color: #fff;
padding: 0.5rem 0;
text-align: center;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
}
/* Split CTA header alignment */
.header-split {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-split-center {
margin-left: auto;
margin-right: 2rem;
}
/* Hide / show controls for responsive mobile menu */
@media (max-width: 900px) {
.nav-desktop {
display: none !important;
}
.nav-toggle {
display: flex !important;
}
}
body.nav-active {
overflow: hidden !important;
}
/* --- DESIGN SYSTEM: BUTTON STYLES --- */
body.btn-style-square .btn-primary,
body.btn-style-square .btn-accent,
body.btn-style-square .btn-outline,
body.btn-style-square button,
body.btn-style-square .header-cta {
border-radius: 0px !important;
}
body.btn-style-rounded .btn-primary,
body.btn-style-rounded .btn-accent,
body.btn-style-rounded .btn-outline,
body.btn-style-rounded button,
body.btn-style-rounded .header-cta {
border-radius: 6px !important;
}
body.btn-style-pill .btn-primary,
body.btn-style-pill .btn-accent,
body.btn-style-pill .btn-outline,
body.btn-style-pill button,
body.btn-style-pill .header-cta {
border-radius: 99px !important;
}
body.btn-style-outline-heavy .btn-primary,
body.btn-style-outline-heavy .btn-accent,
body.btn-style-outline-heavy .header-cta {
border: 3px solid var(--color-primary) !important;
background: transparent !important;
color: var(--color-primary) !important;
font-weight: 800 !important;
}
body.btn-style-outline-heavy .btn-primary:hover,
body.btn-style-outline-heavy .btn-accent:hover,
body.btn-style-outline-heavy .header-cta:hover {
background: var(--color-primary) !important;
color: #fff !important;
}
body.btn-style-shadow-pop .btn-primary,
body.btn-style-shadow-pop .btn-accent,
body.btn-style-shadow-pop button,
body.btn-style-shadow-pop .header-cta {
border: 2px solid var(--color-dark) !important;
box-shadow: 4px 4px 0px var(--color-dark) !important;
transform: translate(0) !important;
transition: all 0.15s ease !important;
}
body.btn-style-shadow-pop .btn-primary:hover,
body.btn-style-shadow-pop .btn-accent:hover,
body.btn-style-shadow-pop button:hover,
body.btn-style-shadow-pop .header-cta:hover {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0px var(--color-dark) !important;
}
body.btn-style-shadow-pop .btn-primary:active,
body.btn-style-shadow-pop .btn-accent:active,
body.btn-style-shadow-pop .header-cta:active {
transform: translate(4px, 4px) !important;
box-shadow: 0px 0px 0px var(--color-dark) !important;
}
body.btn-style-flat-bold .btn-primary,
body.btn-style-flat-bold .btn-accent,
body.btn-style-flat-bold button,
body.btn-style-flat-bold .header-cta {
border: 2px solid var(--color-dark) !important;
background: var(--color-primary) !important;
color: #fff !important;
font-weight: 800 !important;
box-shadow: none !important;
transform: none !important;
}
/* --- DESIGN SYSTEM: CARD STYLES --- */
body.card-style-elevated .card,
body.card-style-elevated .service-card,
body.card-style-elevated .why-card,
body.card-style-elevated .process-step,
body.card-style-elevated .testimonial-card,
body.card-style-elevated .faq-item {
box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
border: none !important;
}
body.card-style-bordered .card,
body.card-style-bordered .service-card,
body.card-style-bordered .why-card,
body.card-style-bordered .process-step,
body.card-style-bordered .testimonial-card,
body.card-style-bordered .faq-item {
border: 1px solid rgba(0,0,0,0.15) !important;
box-shadow: none !important;
}
body.card-style-flat .card,
body.card-style-flat .service-card,
body.card-style-flat .why-card,
body.card-style-flat .process-step,
body.card-style-flat .testimonial-card,
body.card-style-flat .faq-item {
background: rgba(0,0,0,0.03) !important;
border: none !important;
box-shadow: none !important;
}
body.card-style-glass .card,
body.card-style-glass .service-card,
body.card-style-glass .why-card,
body.card-style-glass .process-step,
body.card-style-glass .testimonial-card,
body.card-style-glass .faq-item {
background: rgba(255, 255, 255, 0.45) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.04) !important;
}
body.card-style-industrial .card,
body.card-style-industrial .service-card,
body.card-style-industrial .why-card,
body.card-style-industrial .process-step,
body.card-style-industrial .testimonial-card,
body.card-style-industrial .faq-item {
border-left: 5px solid var(--color-accent) !important;
border-radius: 0px !important;
background: #fafafa !important;
box-shadow: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
}
body.card-style-soft-shadow .card,
body.card-style-soft-shadow .service-card,
body.card-style-soft-shadow .why-card,
body.card-style-soft-shadow .process-step,
body.card-style-soft-shadow .testimonial-card,
body.card-style-soft-shadow .faq-item {
box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
border: 1px solid rgba(0,0,0,0.05) !important;
}
/* --- DESIGN SYSTEM: SPACING SCALES --- */
body.spacing-compact .section {
padding: 2.25rem 0 !important;
}
body.spacing-compact .section-head {
margin-bottom: 1.5rem !important;
}
body.spacing-compact .lead {
font-size: 1.05rem !important;
}
body.spacing-relaxed .section {
padding: 7.5rem 0 !important;
}
body.spacing-relaxed .section-head {
margin-bottom: 4rem !important;
}
body.spacing-relaxed p,
body.spacing-relaxed li {
line-height: 1.95 !important;
font-size: 1.12rem !important;
}
/* --- DESIGN SYSTEM: HERO DENSITIES --- */
body.hero-density-compact .hero {
padding: 2.5rem 0 !important;
}
body.hero-density-standard .hero {
padding: 5rem 0 !important;
}
body.hero-density-tall .hero {
padding: 9rem 0 !important;
}
body.hero-density-minimal .hero {
padding: 1.75rem 0 !important;
min-height: auto !important;
}
body.hero-density-immersive .hero {
padding: 12rem 0 !important;
min-height: 92vh !important;
}
body.spacing-tight .section {
padding: 1.75rem 0 !important;
}
body.spacing-airy .section {
padding: 9rem 0 !important;
}
body.grid-profile-grid-2 .services-grid { grid-template-columns: repeat(2, 1fr); }
body.grid-profile-grid-3 .services-grid { grid-template-columns: repeat(3, 1fr); }
body.grid-profile-grid-4 .services-grid { grid-template-columns: repeat(4, 1fr); }
body.grid-profile-masonry .services-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
body.grid-profile-asymmetric .services-grid { grid-template-columns: 2fr 1fr; }
body.grid-profile-stacked .services-grid { grid-template-columns: 1fr; }
body.radius-sharp .service-card img,
body.radius-sharp .card { border-radius: 0 !important; }
body.radius-soft .service-card img,
body.radius-soft .card { border-radius: 8px !important; }
body.radius-round .service-card img,
body.radius-round .card { border-radius: 16px !important; }
body.radius-pill .service-card img { border-radius: 999px !important; }
body.motion-none [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
body.motion-aos-subtle [data-aos] { transition-duration: .45s !important; }
/* --- V2 TYPOLOGY LAYOUTS --- */
.theme-v2 .section.alt {
background: transparent !important;
}
.theme-v2 .section-line {
border-top: 1px solid rgba(0,0,0,.08);
padding: 3rem 0;
}
/* Typology A: Funnel */
.typology-funnel .hero { min-height: 80vh; display: flex; align-items: center; }
.typology-funnel .funnel-sections { max-width: 900px; margin: 0 auto; }
.typology-funnel .footer-phone { font-size: 1.5rem; font-weight: 800; }
.sticky-mobile-cta {
display: none;
}
@media (max-width: 768px) {
body:not([data-sticky-mode="none"]) .sticky-mobile-cta {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 1000;
background: var(--color-primary);
padding: .65rem 1rem;
gap: .5rem;
box-shadow: 0 -4px 16px rgba(0,0,0,.12);
}
.sticky-cta-call, .sticky-cta-quote {
flex: 1; text-align: center; color: #fff; font-weight: 600; text-decoration: none; padding: .6rem;
}
body.theme-v2 main { padding-bottom: 4rem; }
}
body[data-sticky-mode="phone_all"] .sticky-mobile-cta {
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 1000;
background: var(--color-primary);
padding: .75rem 1rem;
gap: .5rem;
box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
body[data-sticky-mode="phone_all"] .sticky-cta-call {
flex: 1; text-align: center; color: #fff; font-weight: 700; text-decoration: none;
padding: .75rem; background: rgba(255,255,255,.15); border-radius: var(--radius);
}
body[data-sticky-mode="phone_all"] .sticky-cta-quote { display: none; }
body[data-conversion="phone_primary"] .sticky-cta-call.sticky-cta-full { flex: 1; font-size: 1.05rem; font-weight: 800; }
body[data-conversion="consultation"] .sticky-mobile-cta { grid-template-columns: 1fr; }
/* Trust expression variants */
.trust-bar-credential-wall .credential-wall {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;
}
.credential-badge-lg {
display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem;
border: 2px solid var(--color-primary); border-radius: var(--radius);
font-weight: 700; font-size: .95rem;
}
.credential-badge-lg i { font-size: 1.35rem; color: var(--color-primary); }
.trust-bar-owner-trust .owner-trust-block {
text-align: center; max-width: 720px; margin: 0 auto; padding: 1rem 0;
}
.trust-bar-owner-trust .owner-trust-copy strong {
display: block; font-size: 1.35rem; margin-bottom: .5rem; font-family: var(--font-heading);
}
.trust-bar-owner-trust .owner-trust-copy p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #444; }
/* Typology B: Magazine — sections stay full-width (2-col on .section broke single .container children) */
.typology-magazine .magazine-grid-flow .section { padding-left: 0; padding-right: 0; }
.typology-magazine .footer-editorial {
display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding: 3rem 0;
}
@media (max-width: 768px) {
.typology-magazine .footer-editorial { grid-template-columns: 1fr; }
}
/* Typology C: Sidebar */
.sidebar-home-layout {
display: grid; grid-template-columns: 1fr 320px; gap: 2rem;
max-width: 1200px; margin: 0 auto; padding: 0 1rem;
}
.sidebar-aside { position: sticky; top: 100px; align-self: start; }
.sidebar-booking { padding: 1.5rem; }
@media (max-width: 992px) {
.sidebar-home-layout { grid-template-columns: 1fr; }
.sidebar-aside { position: static; order: -1; }
}
/* Typology D: Portfolio */
.typology-portfolio .hero { min-height: 85vh; }
.typology-portfolio .portfolio-sections .service-card { border: none; background: transparent; }
.typology-portfolio .portfolio-footer-inner {
display: flex; justify-content: space-between; align-items: center; padding: 2rem 0;
}
/* Typology E: Community */
.owner-story-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: center; }
.owner-photo img, .owner-photo-placeholder {
width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
background: var(--color-light);
}
.story-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.story-card blockquote { font-style: italic; margin: 0 0 .75rem; }
.trust-bar-single-guarantee .guarantee-statement {
font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; text-align: center; padding: 2rem 0;
}
/* Typology F: Technical */
.typology-technical .spec-table { width: 100%; border-collapse: collapse; }
.typology-technical .spec-table th,
.typology-technical .spec-table td {
border: 1px solid rgba(0,0,0,.1); padding: .75rem 1rem; text-align: left;
}
.typology-technical .spec-table th { background: var(--color-light); font-family: var(--font-heading); }
.typology-technical .process-step .step-num {
font-variant-numeric: tabular-nums;
}
/* Per-typography type scales — distinct rhythm per layout family */
.typology-funnel h1 { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; font-weight: 700; }
.typology-funnel h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.1; font-weight: 700; }
.typology-funnel h3 { font-size: 1.35rem; font-weight: 700; }
.typology-funnel body, .typology-funnel .lead { letter-spacing: .01em; }
.typology-magazine h1 { font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; }
.typology-magazine h2 { font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 500; }
.typology-magazine h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.typology-magazine .section-head h2 { font-weight: 500; }
.typology-portfolio h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; letter-spacing: -.03em; }
.typology-portfolio h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -.02em; }
.typology-community h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; font-weight: 800; }
.typology-community h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.25; }
.typology-community h3 { font-size: 1.35rem; font-weight: 700; }
.typology-technical h1 { font-size: clamp(2rem, 3.5vw, 2.8rem); font-variant-numeric: tabular-nums; font-weight: 700; }
.typology-technical h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: -.01em; }
.typology-sidebar h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.typology-sidebar h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
/* Nav + button typography per typology */
.typology-funnel .brand { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.typology-magazine .brand { font-weight: 600; letter-spacing: -.01em; color: var(--color-dark); }
/* Logo contrast: monochrome filters via site.js (no background pads) */
.typology-community .brand { font-weight: 800; }
.typology-portfolio .brand { font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; }
.typology-technical .brand { font-weight: 700; letter-spacing: .02em; }
.typology-funnel .btn-primary, .typology-funnel .btn-accent,
.typology-funnel .header-cta { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.typology-magazine .btn-primary, .typology-magazine .btn-accent { font-weight: 600; letter-spacing: .03em; }
.typology-community .btn-primary, .typology-community .btn-accent { font-weight: 700; }
.typology-portfolio .btn-primary, .typology-portfolio .btn-accent { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.typology-magazine .typology-announcement-bar { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.typology-funnel .typology-announcement-bar { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.typology-community .typology-announcement-bar { font-weight: 600; font-size: .9rem; }
/* Inner page mastheads inherit typology voice */
.typology-magazine .inner-kicker { letter-spacing: .18em; font-weight: 600; font-size: .72rem; }
.typology-funnel .inner-kicker { letter-spacing: .1em; font-weight: 800; text-transform: uppercase; }
.typology-community .inner-kicker { letter-spacing: .08em; font-weight: 700; }
.typology-portfolio .inner-kicker { letter-spacing: .2em; font-weight: 400; text-transform: uppercase; font-size: .7rem; }
.typology-technical .inner-kicker { letter-spacing: .12em; font-weight: 700; text-transform: uppercase; font-size: .72rem; }
.guarantee-banner { text-align: center; padding: 2rem; border: 2px solid var(--color-primary); border-radius: var(--radius); }
.container.narrow { max-width: 640px; }
.proof-reviews { text-align: center; max-width: 720px; margin: 0 auto; }
.proof-stars { color: var(--color-accent); margin-right: .5rem; }
/* Typology-specific nav profiles */
.nav-profile-funnel-minimal .funnel-nav-inner { justify-content: space-between; align-items: center; }
.nav-profile-funnel-minimal .main-nav.nav-desktop { display: none; }
.nav-profile-funnel-minimal .header-cta { display: none; }
.funnel-nav-phone {
font-size: 1.25rem; font-weight: 800; color: var(--color-primary);
text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
}
.nav-mobile-minimal a { font-size: 1.1rem; padding: .65rem 0; }
.nav-profile-magazine-mega .nav-mega,
.nav-profile-magazine-mega-menu .nav-mega {
display: flex; gap: .35rem 1rem; align-items: stretch; flex-wrap: wrap;
}
.nav-profile-magazine-mega .header-inner,
.nav-profile-magazine-mega-menu .header-inner {
gap: 1.25rem 1.5rem;
}
.nav-mega-item { position: relative; }
.nav-mega-link { padding: .5rem 1rem; font-weight: 600; text-decoration: none; color: inherit; display: block; white-space: nowrap; }
.nav-mega-item:hover .nav-mega-dropdown { display: block; }
.nav-mega-dropdown {
display: none; position: absolute; top: 100%; left: 0; min-width: 280px;
background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0,0,0,.12); z-index: 100; padding: .5rem 0;
}
.nav-mega-preview {
display: block; padding: .65rem 1rem; text-decoration: none; color: inherit;
border-bottom: 1px solid rgba(0,0,0,.05);
}
.nav-mega-preview span { display: block; font-size: .8rem; color: #666; margin-top: .15rem; }
.nav-mega-preview:hover { background: var(--color-light); }
.nav-mega-all { font-weight: 700; color: var(--color-primary); border-bottom: none; }
.header-cta-group { display: flex; align-items: center; gap: 1rem; }
.nav-phone-inline { font-weight: 700; text-decoration: none; color: var(--color-primary); }
.technical-nav-strip { background: var(--color-light); border-bottom: 1px solid rgba(0,0,0,.08); }
.technical-nav-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem 0; }
.tech-tab {
padding: .45rem .85rem; border-radius: 999px; text-decoration: none;
font-size: .85rem; font-weight: 600; color: #444; background: transparent;
}
.tech-tab:hover, .tech-tab.active { background: var(--color-primary); color: #fff; }
.tech-tab-cta { margin-left: auto; background: var(--color-accent); color: #fff; }
.tech-tab-cta:hover { filter: brightness(.95); color: #fff; }
.nav-profile-technical-tabs .technical-header-meta {
display: flex; align-items: center; gap: 1rem; margin-left: auto;
}
.tech-license { font-size: .85rem; color: #555; }
/* ===== Inner pages — typology-specific layouts ===== */
.inner-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.inner-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; opacity: .75; margin-bottom: .5rem; }
.inner-lead { font-size: 1.1rem; max-width: 640px; line-height: 1.65; margin-top: .75rem; }
.inner-hero-funnel { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); color: #fff; text-align: center; }
.inner-hero-funnel .inner-kicker { color: rgba(255,255,255,.8); }
.inner-hero-funnel .btn-primary { margin-top: 1.25rem; }
.inner-hero-magazine { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 3rem; }
.editorial-kicker { color: var(--color-accent); }
.editorial-lead { font-size: 1.25rem; line-height: 1.7; max-width: 58ch; }
.inner-hero-community { background: linear-gradient(180deg, #fff8f0 0%, #fff 100%); }
.inner-hero-sidebar { background: var(--color-light); }
.inner-hero-portfolio.inner-hero-minimal { padding: 4rem 0 2rem; text-align: center; }
.portfolio-tagline { letter-spacing: .15em; text-transform: uppercase; font-size: .85rem; color: #666; }
.inner-hero-technical { background: var(--color-light); border-bottom: 3px solid var(--color-primary); }
.funnel-location-list { list-style: none; padding: 0; margin: 0; }
.funnel-location-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.funnel-location-list a {
display: flex; align-items: center; gap: 1rem; padding: 1rem 0;
text-decoration: none; color: inherit; font-weight: 600;
}
.funnel-loc-type { margin-left: auto; font-size: .85rem; color: #666; font-weight: 400; }
.magazine-loc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem 2.5rem;
}
.magazine-loc-card { border-top: 3px solid var(--color-primary); padding-top: 1rem; }
.magazine-loc-index { font-size: .75rem; letter-spacing: .1em; color: #999; }
.magazine-loc-type { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); }
.magazine-read-more { font-weight: 700; text-decoration: none; color: var(--color-primary); }
.community-loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.community-loc-card {
background: #fff; border-radius: var(--radius); padding: 1.5rem;
box-shadow: 0 8px 24px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.04);
}
.community-loc-badge { font-size: .75rem; color: var(--color-primary); margin-bottom: .5rem; }
.community-loc-link { font-weight: 600; color: var(--color-primary); text-decoration: none; }
.sidebar-page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.sidebar-page-aside { position: sticky; top: 5rem; }
.sidebar-booking-card {
background: var(--color-primary); color: #fff; padding: 1.5rem; border-radius: var(--radius);
}
.sidebar-booking-card .btn-outline { display: block; text-align: center; margin-top: .75rem; color: #fff; border-color: rgba(255,255,255,.5); }
.sidebar-loc-row {
display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.sidebar-loc-meta { font-size: .85rem; color: #666; }
.portfolio-loc-tiles {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0;
}
.portfolio-loc-tile {
aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end;
padding: 1.25rem; background: var(--color-dark); color: #fff; text-decoration: none;
border: 1px solid rgba(255,255,255,.08); transition: background .2s;
}
.portfolio-loc-tile:nth-child(odd) { background: var(--color-primary); }
.portfolio-loc-tile:hover { filter: brightness(1.1); color: #fff; }
.portfolio-tile-type { font-size: .75rem; opacity: .75; text-transform: uppercase; letter-spacing: .08em; }
.tech-table-wrap { overflow-x: auto; }
.tech-loc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tech-loc-table th, .tech-loc-table td { border: 1px solid rgba(0,0,0,.1); padding: .75rem 1rem; text-align: left; }
.tech-loc-table th { background: var(--color-light); font-family: var(--font-heading); }
.magazine-area-layout { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; }
.magazine-area-rail { border-left: 2px solid var(--color-light); padding-left: 1.5rem; }
.magazine-rail-list { list-style: none; padding: 0; }
.magazine-rail-list a { text-decoration: none; color: var(--color-primary); font-weight: 600; display: block; padding: .35rem 0; }
.magazine-service-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.magazine-svc-link {
padding: .5rem 1rem; border: 1px solid var(--color-primary); border-radius: 999px;
text-decoration: none; color: var(--color-primary); font-weight: 600; font-size: .9rem;
}
.community-area-grid { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; }
.community-guarantee-card {
background: #fff3e0; border-left: 4px solid var(--color-accent); padding: 1rem 1.25rem;
margin: 1.5rem 0; display: flex; gap: .75rem; align-items: flex-start;
}
.community-service-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.community-service-chips a {
background: var(--color-light); padding: .45rem .9rem; border-radius: 999px;
text-decoration: none; color: var(--color-dark); font-weight: 600; font-size: .9rem;
}
.community-nearby-link { display: block; padding: .5rem 0; text-decoration: none; color: var(--color-primary); font-weight: 600; border-bottom: 1px solid rgba(0,0,0,.06); }
.technical-area-grid { display: grid; grid-template-columns: 1fr 220px; gap: 2rem; }
.tech-zone-link { display: block; padding: .4rem 0; font-size: .9rem; text-decoration: none; color: var(--color-primary); }
.portfolio-svc-strip { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 2rem 1rem; }
.portfolio-svc-strip a {
padding: .65rem 1.25rem; border: 1px solid var(--color-dark); text-decoration: none;
color: var(--color-dark); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em;
}
@media (max-width: 768px) {
.sidebar-page-grid, .magazine-area-layout, .community-area-grid, .technical-area-grid {
grid-template-columns: 1fr;
}
.sidebar-page-aside { position: static; }
}
/* ── Typology announcement bars (EcoGrizzly / urgency patterns) ── */
.typology-announcement-bar {
background: var(--color-primary); color: #fff; text-align: center;
font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .45rem 1rem;
}
.typology-announcement-urgent { background: #1a237e; font-weight: 700; }
/* ── Magazine typology: editorial inner pages ── */
.typology-magazine main { background: #faf9f7; }
.typology-magazine .inner-masthead { padding: 3.5rem 0 2.5rem; background: #faf9f7; }
.typology-magazine .inner-masthead-dark {
background: linear-gradient(180deg, #1a1a1a 0%, #2d2d2d 100%);
color: #fff;
}
.typology-magazine .inner-masthead-dark .editorial-kicker { color: var(--color-accent); }
.typology-magazine .inner-masthead-dark .editorial-lead { color: rgba(255,255,255,.85); }
.typology-magazine .magazine-masthead-rule {
height: 2px; background: var(--color-primary); margin: 1rem 0; opacity: .35;
}
.typology-magazine .inner-masthead-dark .magazine-masthead-rule { background: rgba(255,255,255,.25); }
.typology-magazine .magazine-display-head {
font-family: var(--font-heading); font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: .5rem 0;
}
.typology-magazine .magazine-loc-grid-editorial {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2.5rem 3rem;
}
.typology-magazine .magazine-loc-card-editorial {
background: #fff; padding: 1.75rem; border-top: 4px solid var(--color-primary);
box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.typology-magazine .magazine-loc-card-editorial .magazine-loc-index {
font-size: 2.5rem; font-weight: 800; color: rgba(0,0,0,.06); line-height: 1;
}
.typology-magazine .magazine-service-row {
display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: start;
padding: 2rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
}
.typology-magazine .magazine-service-num {
font-size: 2rem; font-weight: 800; color: rgba(0,0,0,.12); line-height: 1;
}
.typology-magazine .magazine-service-thumb { width: 120px; }
.typology-magazine .magazine-service-thumb img { width: 100%; border-radius: 4px; }
.typology-magazine .magazine-pull-quote {
border-left: 4px solid var(--color-primary); padding: 1rem 1.5rem;
font-size: 1.25rem; font-style: italic; margin: 2rem 0; background: #fff;
}
.typology-magazine .magazine-about-layout {
display: grid; grid-template-columns: 1fr 280px; gap: 3rem;
}
.typology-magazine .magazine-about-rail { border-left: 2px solid rgba(0,0,0,.08); padding-left: 1.5rem; }
.typology-magazine .magazine-rail-item { margin-bottom: 1.25rem; }
.typology-magazine .magazine-contact-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
/* ── Community typology: warm neighbor pages ── */
.typology-community main { background: linear-gradient(180deg, #fff8f0 0%, #fff5eb 40%, #fff 100%); }
.typology-community .inner-warm-band {
background: linear-gradient(135deg, #ffe8cc 0%, #fff8f0 50%, #fff 100%);
border-bottom: 3px solid var(--color-accent);
}
.typology-community .community-hero-badge {
display: inline-block; background: var(--color-primary); color: #fff;
padding: .35rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
margin-bottom: .75rem;
}
.typology-community .community-loc-grid-cards { gap: 1.75rem; }
.typology-community .community-loc-card-rich {
border: 2px solid rgba(0,0,0,.04); transition: transform .2s, box-shadow .2s;
}
.typology-community .community-loc-card-rich:hover {
transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.typology-community .community-services-masonry {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;
}
.typology-community .community-service-tile {
background: #fff; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.04);
}
.typology-community .community-service-tile-head {
background: var(--color-primary); color: #fff; padding: .85rem 1.25rem;
font-weight: 700; display: flex; align-items: center; gap: .5rem;
}
.typology-community .community-service-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.typology-community .community-service-tile-body { padding: 1.25rem; }
.typology-community .community-values-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem; margin: 2rem 0;
}
.typology-community .community-contact-grid {
display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start;
}
.typology-community .community-contact-card h3 { font-size: 1rem; margin: 1rem 0 .35rem; }
/* ── Funnel typology: dark conversion pages ── */
.typology-funnel main { background: #fff; }
.typology-funnel .inner-funnel-dark {
background: linear-gradient(135deg, #0d1b2a 0%, var(--color-primary) 60%, #000 100%);
color: #fff; text-align: center; padding: 4rem 0;
}
.typology-funnel .inner-funnel-dark .inner-kicker { color: rgba(255,255,255,.7); }
.typology-funnel .inner-funnel-dark h1 { font-size: clamp(2rem, 4vw, 3rem); }
.typology-funnel .funnel-phone-btn { margin-top: 1.5rem; font-size: 1.15rem; }
.typology-funnel .funnel-service-list { list-style: none; padding: 0; margin: 0; }
.typology-funnel .funnel-service-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.typology-funnel .funnel-service-list a {
display: grid; grid-template-columns: 1fr 2fr auto; gap: 1rem; align-items: center;
padding: 1.25rem 0; text-decoration: none; color: inherit; font-weight: 600;
}
.typology-funnel .funnel-svc-desc { font-weight: 400; color: #666; font-size: .95rem; }
/* ── Portfolio typology: minimal dark tiles ── */
.typology-portfolio main { background: #111; color: #fff; }
.typology-portfolio .inner-hero-minimal { background: #111; color: #fff; }
.typology-portfolio .portfolio-svc-strip-full {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0;
}
.typology-portfolio .portfolio-svc-tile {
aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-end;
padding: 1.5rem; background: var(--color-dark); color: #fff; text-decoration: none;
border: 1px solid rgba(255,255,255,.06); transition: filter .2s;
}
.typology-portfolio .portfolio-svc-tile:nth-child(odd) { background: var(--color-primary); }
.typology-portfolio .portfolio-svc-tile:hover { filter: brightness(1.15); color: #fff; }
.typology-portfolio .portfolio-svc-tag { font-size: .75rem; opacity: .75; margin-top: .35rem; }
/* ── Technical typology: spec-sheet pages ── */
.typology-technical main { background: #f4f6f8; }
.typology-technical .tech-kicker {
font-family: ui-monospace, monospace; font-size: .75rem; letter-spacing: .12em;
color: var(--color-primary);
}
.typology-technical .tech-svc-table td, .typology-technical .tech-svc-table th { font-size: .9rem; }
.typology-technical .tech-contact-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.typology-technical .tech-doc { font-size: .95rem; line-height: 1.7; }
@media (max-width: 768px) {
.typology-magazine .magazine-service-row { grid-template-columns: 1fr; }
.typology-magazine .magazine-contact-split,
.typology-community .community-contact-grid,
.typology-technical .tech-contact-grid,
.typology-magazine .magazine-about-layout { grid-template-columns: 1fr; }
.typology-funnel .funnel-service-list a { grid-template-columns: 1fr; gap: .25rem; }
.svc-loc-page-grid { grid-template-columns: 1fr !important; }
.footer-mega-grid { grid-template-columns: 1fr 1fr !important; }
}
/* ── Service × Location landing pages ── */
.svc-loc-hero-tru {
background: linear-gradient(135deg, #0f172a 0%, var(--color-primary) 55%, #1e3a5f 100%);
color: #fff; padding: 3.5rem 0 3rem; text-align: center;
}
.svc-loc-breadcrumb { font-size: .85rem; margin-bottom: 1rem; opacity: .85; }
.svc-loc-breadcrumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.svc-loc-breadcrumb span { margin: 0 .4rem; opacity: .5; }
.svc-loc-hero-tru h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; margin: 0 0 .75rem; }
.svc-loc-hero-lead { max-width: 640px; margin: 0 auto; opacity: .9; font-size: 1.05rem; }
.svc-loc-hero-dusty {
background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
url('data:image/svg+xml,');
background-color: #1a1a1a; background-size: cover;
color: #fff; padding: 4rem 0; text-align: center;
}
.svc-loc-hero-dusty h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; margin: 0; }
.svc-loc-hero-sub { opacity: .8; margin-top: .5rem; font-size: 1rem; }
.svc-loc-hero-portfolio { background: #111; color: #fff; padding: 3rem 0; text-align: center; }
.svc-loc-page-grid {
display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start;
padding: 3rem 0 4rem;
}
.svc-loc-img-row img { width: 100%; border-radius: var(--radius); margin-bottom: 1.5rem; }
.svc-loc-checklist { list-style: none; padding: 0; }
.svc-loc-checklist li { padding: .5rem 0; display: flex; gap: .65rem; align-items: flex-start; }
.svc-loc-checklist i { color: var(--color-primary); margin-top: .2rem; }
.svc-loc-widget {
background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius);
padding: 1.25rem; margin-bottom: 1.25rem;
}
.svc-loc-widget h3 { font-size: 1rem; margin: 0 0 .75rem; font-weight: 700; }
.svc-loc-widget ul { list-style: none; padding: 0; margin: 0; }
.svc-loc-widget li { padding: .35rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.svc-loc-widget a { text-decoration: none; color: var(--color-dark); font-size: .92rem; }
.svc-loc-widget a.is-active { color: var(--color-primary); font-weight: 700; }
.svc-loc-loc-list { max-height: 220px; overflow-y: auto; }
.svc-loc-estimate-box {
background: linear-gradient(135deg, #0f172a, var(--color-primary)); color: #fff; border: none;
}
.svc-loc-estimate-box h3, .svc-loc-estimate-box p { color: #fff; }
.svc-loc-estimate-box .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-block { display: block; width: 100%; text-align: center; margin-top: .5rem; }
.typology-community .svc-loc-body-community { background: linear-gradient(180deg, #fff8f0 0%, #fff 100%); }
.svc-loc-kicker { color: var(--color-primary); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.svc-loc-benefit-block {
border-left: 4px solid var(--color-accent); background: #fff;
padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.svc-loc-arrow-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.svc-loc-arrow-list li { padding: .4rem 0; display: flex; gap: .5rem; align-items: baseline; }
.svc-loc-arrow { color: var(--color-accent); font-weight: 800; }
.svc-loc-dark-cta {
background: #1a1a1a; color: #fff; padding: 1.5rem; border-radius: var(--radius); margin-bottom: 1.25rem;
}
.svc-loc-dark-cta p { margin-bottom: 1rem; opacity: .9; }
.svc-loc-side-img img { width: 100%; border-radius: var(--radius); margin-bottom: 1.25rem; }
.svc-loc-widget-warm { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.svc-loc-back-links { font-size: .9rem; margin-top: 1rem; }
.svc-loc-back-links a { color: var(--color-primary); font-weight: 600; }
.svc-loc-learn-btn { margin-top: 1rem; }
/* ── Pre-footer strips (Season Control / Lemon Grove patterns) ── */
.pre-footer-strip { padding: 1.25rem 0; }
.pre-footer-magazine {
background: var(--color-primary); color: #fff;
}
.pre-footer-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center;
}
.pre-footer-item { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .9rem; }
.pre-footer-item a { color: #fff; text-decoration: none; font-weight: 600; }
.pre-footer-community {
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
color: #fff;
}
.pre-footer-cta-row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.pre-footer-label { display: block; font-size: .85rem; opacity: .9; }
.pre-footer-phone { font-size: 1.5rem; font-weight: 800; color: #fff; text-decoration: none; }
.pre-footer-btn { background: #fff !important; color: var(--color-primary) !important; }
.pre-footer-funnel { background: #0f172a; color: #fff; padding: 2rem 0; }
.pre-footer-phone-lg { font-size: 1.75rem; font-weight: 800; color: #fff; text-decoration: none; }
.pre-footer-sub { opacity: .75; margin-top: .35rem; font-size: .9rem; }
/* ── Mega footers (Tru Duct / Lemon Grove patterns) ── */
.footer-mega { margin-top: 0; padding: 0; }
.footer-mega-magazine { background: #0f172a; color: rgba(255,255,255,.85); }
.footer-mega-community { background: #f5f5f5; color: var(--color-dark); }
.footer-mega-funnel { background: #1a1a1a; color: rgba(255,255,255,.85); }
.footer-mega-grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
padding: 3rem 0 2rem;
}
.footer-mega-col h4, .footer-mega-col h5 {
font-size: .95rem; font-weight: 700; margin-bottom: 1rem;
text-transform: uppercase; letter-spacing: .06em;
}
.footer-mega-magazine .footer-mega-col h5 { color: #fff; }
.footer-mega-col ul { list-style: none; padding: 0; margin: 0; }
.footer-mega-col li { padding: .3rem 0; }
.footer-mega-col a { text-decoration: none; font-size: .9rem; }
.footer-mega-magazine a, .footer-mega-funnel a { color: rgba(255,255,255,.75); }
.footer-mega-magazine a:hover, .footer-mega-funnel a:hover { color: #fff; }
.footer-mega-community a { color: var(--color-dark); }
.footer-mega-brand p { font-size: .9rem; line-height: 1.6; opacity: .85; margin: .75rem 0; }
.footer-social { display: flex; gap: .65rem; margin-top: 1rem; }
.footer-social a {
width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center; color: #fff;
}
.footer-mega-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; }
.footer-mega-magazine .footer-mega-bottom { background: #0a0f1a; }
.footer-mega-bottom p { font-size: .8rem; opacity: .65; margin: 0; }
.footer-community-bottom { background: #e8e8e8; border-top: 1px solid #ddd; }
.footer-community-bottom p { color: #666; }
.footer-five-star { color: #f59e0b; font-size: .85rem; margin: .5rem 0; }
.footer-five-star i { margin-right: 2px; }
.footer-phone-big { font-size: 1.35rem; font-weight: 800; text-decoration: none; display: block; }
.footer-mega-magazine .footer-phone-big, .footer-mega-funnel .footer-phone-big { color: #fff; }
.footer-mega-community .footer-phone-big { color: var(--color-primary); }
.footer-community-contact .btn-primary { margin-top: .75rem; }
@media (max-width: 768px) {
.pre-footer-grid { grid-template-columns: 1fr; }
.footer-mega-grid { grid-template-columns: 1fr 1fr; }
}
/* ===== Tier 1: Typology homepage sections ===== */
/* --- Background rhythm per typology (no white/gray alternation) --- */
.typology-magazine .magazine-sections,
.typology-magazine main { background: #faf9f7; }
.typology-magazine .magazine-sections > .section:not([class*="home-"]):not(.team-section):not(.testimonials-section) {
background: transparent !important;
}
.typology-magazine .home-svc-magazine { background: #fff !important; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.typology-magazine .home-why-magazine { background: #f3f1ed !important; }
.typology-magazine .home-areas-magazine { background: #fff !important; }
.typology-magazine .home-ba-magazine { background: #fff !important; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.typology-magazine .home-blog-magazine { background: #fff !important; }
.typology-magazine .home-intro-magazine { background: transparent !important; }
.typology-magazine .home-ba-magazine .container { max-width: 1100px; }
.typology-magazine .hero.hero-premium { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.typology-magazine .hero.hero-premium .lead { max-width: 42ch; }
.typology-magazine.theme-v2 .magazine-sections .section:not(.home-cta-magazine) {
padding: clamp(2.5rem, 4vw, 3.75rem) 0 !important;
}
.typology-magazine .home-ba-magazine { padding-top: 2.5rem !important; }
.typology-magazine .magazine-sections > .section.home-cta-magazine {
background: linear-gradient(180deg, #1a1a1a 0%, #0f172a 100%) !important;
color: #fff !important;
padding: 0 !important;
width: 100%;
margin: 0;
}
.typology-community .home-ba-community { background: #fff; }
.typology-magazine .home-cta-magazine h2,
.typology-magazine .home-cta-magazine .magazine-cta-headline {
color: #fff;
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.12;
margin: 0 0 1rem;
}
.typology-magazine .home-cta-magazine .editorial-kicker,
.typology-magazine .home-cta-magazine .magazine-cta-kicker {
color: var(--color-accent);
margin-bottom: 0;
}
.typology-magazine .home-cta-magazine .editorial-lead,
.typology-magazine .home-cta-magazine .magazine-cta-lead {
color: rgba(255,255,255,.88);
max-width: 52ch;
margin: 0 auto 1.75rem;
line-height: 1.75;
}
.typology-magazine .home-cta-magazine .magazine-masthead-rule {
background: rgba(255,255,255,.25);
max-width: 4rem;
margin: .75rem auto 1.5rem;
}
.typology-magazine .home-cta-magazine .magazine-cta-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.typology-magazine .home-cta-magazine .magazine-cta-btn,
.typology-magazine .home-cta-magazine .btn-accent {
min-width: 220px;
background: var(--color-accent) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.typology-magazine .home-cta-magazine .magazine-cta-btn:hover,
.typology-magazine .home-cta-magazine .btn-accent:hover {
filter: brightness(1.08);
color: #fff !important;
}
.typology-magazine .home-cta-magazine .magazine-cta-phone {
margin: 0;
font-size: 1.05rem;
}
.typology-magazine .home-cta-magazine .magazine-cta-phone a {
color: var(--color-accent);
font-weight: 700;
text-decoration: none;
}
.typology-magazine .home-cta-magazine .magazine-cta-phone a:hover {
color: #fff;
text-decoration: underline;
}
.typology-magazine .team-section,
.typology-magazine .testimonials-section { background: #faf9f7 !important; }
.typology-community .community-sections,
.typology-community main { background: linear-gradient(180deg, #fff8f0 0%, #fff5eb 35%, #fff 100%); }
.typology-community .section { background: transparent !important; }
.typology-community .home-svc-community { background: #fff; border-radius: var(--radius); margin: 0 1.5rem; max-width: calc(1200px - 3rem); margin-left: auto; margin-right: auto; box-shadow: 0 8px 32px rgba(0,0,0,.06); }
.typology-community .home-why-community { background: linear-gradient(135deg, #ffe8cc 0%, #fff8f0 100%); }
.typology-community .home-areas-community { background: #fff; }
.typology-community .home-cta-community { background: var(--color-primary); color: #fff; text-align: center; }
.typology-community .home-cta-community h2,
.typology-community .home-cta-community p { color: #fff; }
.typology-community .community-cta-secondary { display: block; margin-top: 1rem; color: rgba(255,255,255,.85); }
.typology-community .owner-story-section { background: #fff !important; }
.typology-community .story-testimonials { background: transparent !important; }
.typology-funnel .funnel-sections,
.typology-funnel main { background: #fff; }
.typology-funnel .section { background: transparent !important; }
.typology-funnel .home-svc-funnel { background: var(--color-light) !important; }
.typology-funnel .home-why-funnel { background: var(--color-primary) !important; color: #fff; padding: 3rem 0; }
.typology-funnel .home-areas-funnel { background: #fff !important; border-top: 4px solid var(--color-accent); }
.typology-funnel .home-cta-funnel { background: linear-gradient(135deg, var(--color-dark), var(--color-primary)) !important; color: #fff; }
.typology-funnel .home-cta-funnel h2,
.typology-funnel .home-cta-funnel p { color: #fff; }
.typology-funnel .funnel-cta-outline { border-color: #fff !important; color: #fff !important; }
.typology-portfolio main { background: #0a0a0a; color: #fff; }
.typology-portfolio .section { background: transparent !important; color: #fff; }
/* Light cards on dark portfolio pages: override main { color: #fff } */
.typology-portfolio main .process-step,
.typology-portfolio main .cta-inline,
.typology-portfolio main .testimonial-card,
.typology-portfolio main .faq-item,
.typology-portfolio main .why-card,
.typology-portfolio main .card:not(.portfolio-svc-tile) {
color: var(--color-dark, #1a1a2e);
}
.typology-portfolio main .process-step h3,
.typology-portfolio main .process-step p,
.typology-portfolio main .cta-inline h3,
.typology-portfolio main .cta-inline p,
.typology-portfolio main .testimonial-card p,
.typology-portfolio main .testimonial-card cite,
.typology-portfolio main .faq-item summary,
.typology-portfolio main .faq-item p,
.typology-portfolio main .why-card h3,
.typology-portfolio main .why-card p {
color: var(--color-dark, #1a1a2e);
}
.typology-portfolio main .cta-inline a:not(.btn-primary) {
color: var(--color-primary);
font-weight: 600;
}
.typology-portfolio .section-head .section-sub {
color: rgba(255, 255, 255, 0.82);
}
.typology-portfolio .portfolio-svc-strip .portfolio-svc-panel {
color: #fff;
}
.typology-portfolio .portfolio-svc-strip a.portfolio-svc-panel:hover {
color: #fff;
}
.typology-portfolio .inner-portfolio-service-detail .page-hero,
.typology-portfolio .inner-portfolio-service-detail img.page-hero {
width: 100%;
max-height: 420px;
object-fit: cover;
border-radius: var(--radius, 12px);
margin-bottom: 2rem;
}
.typology-technical main { background: #f8fafc; }
.typology-sidebar main { background: #fff; }
/* --- Funnel services (Tru Duct style) --- */
.funnel-section-label {
text-transform: uppercase; letter-spacing: .12em; font-size: .75rem;
font-weight: 800; color: var(--color-accent); margin-bottom: .5rem;
}
.funnel-svc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem;
}
.funnel-svc-card {
background: #fff; border: 2px solid rgba(0,0,0,.06); border-radius: var(--radius);
padding: 1.5rem; position: relative;
}
.funnel-svc-popular {
position: absolute; top: -10px; right: 1rem; background: var(--color-accent);
color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase;
padding: .25rem .65rem; border-radius: 4px; letter-spacing: .04em;
}
.funnel-svc-card h3 { margin: 0 0 .75rem; font-size: 1.15rem; }
.funnel-svc-card h3 a { color: inherit; text-decoration: none; }
.funnel-svc-benefits { list-style: none; padding: 0; margin: 1rem 0; font-size: .9rem; }
.funnel-svc-benefits li { padding: .25rem 0 .25rem 1.25rem; position: relative; }
.funnel-svc-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.funnel-guarantee-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;
}
.funnel-guarantee-card {
text-align: center; padding: 2rem 1.25rem; background: rgba(255,255,255,.12);
border-radius: var(--radius); border: 1px solid rgba(255,255,255,.2);
}
.funnel-guarantee-card i { font-size: 2rem; margin-bottom: .75rem; opacity: .9; }
.funnel-guarantee-card h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.funnel-guarantee-card p { font-size: .9rem; opacity: .9; margin: 0; }
.funnel-region-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2rem; margin-top: 1.5rem;
}
.funnel-region-col h3 {
font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
border-bottom: 3px solid var(--color-accent); padding-bottom: .5rem; margin-bottom: 1rem;
}
.funnel-region-links { list-style: none; padding: 0; margin: 0; }
.funnel-region-links li { margin-bottom: .35rem; }
.funnel-region-links a { text-decoration: none; color: var(--color-primary); font-weight: 600; }
.funnel-region-links a:hover { text-decoration: underline; }
.funnel-view-all { display: inline-block; margin-top: 1.5rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.funnel-region-headline { margin-bottom: .5rem; }
.funnel-cta-dual { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: center; }
.funnel-hero-cta { justify-content: flex-start; }
.funnel-cta-outline-light { border-color: #fff !important; color: #fff !important; }
.inner-hero-funnel .funnel-cta-outline-light:hover { background: #fff !important; color: var(--color-primary) !important; }
.funnel-cta-band { text-align: center; }
.home-cta-funnel .funnel-cta-dual { justify-content: center; }
/* --- Magazine homepage --- */
.magazine-why-layout { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: start; }
.magazine-why-block { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.magazine-why-block:last-child { border-bottom: none; }
.magazine-areas-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.magazine-areas-list li {
display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline;
padding: 1rem 0; border-bottom: 1px solid rgba(0,0,0,.08);
}
.magazine-areas-list a { font-weight: 600; font-size: 1.15rem; color: var(--color-dark); text-decoration: none; }
.magazine-areas-list a:hover { color: var(--color-primary); }
.magazine-cta-editorial {
text-align: center;
padding: clamp(3rem, 6vw, 4.5rem) 0;
max-width: 720px;
margin: 0 auto;
}
.home-cta-magazine > .container {
max-width: 1200px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.magazine-blog-list { margin-top: 1.5rem; }
.magazine-blog-row { padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.magazine-blog-row h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.magazine-blog-row h3 a { color: inherit; text-decoration: none; }
.magazine-intro-wrap { max-width: 720px; margin: 0 auto; font-size: 1.15rem; line-height: 1.8; }
/* --- Community homepage --- */
.community-why-list { margin-top: 1.5rem; }
.community-why-item {
display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.community-why-bullet { font-size: 1.5rem; font-weight: 800; color: var(--color-accent); line-height: 1.2; }
.community-areas-intro { font-size: 1.1rem; margin-bottom: 1.5rem; max-width: 640px; }
.community-loc-simple-list { list-style: none; padding: 0; margin: 0; }
.community-loc-simple-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.community-loc-simple-list a {
display: flex; justify-content: space-between; align-items: center;
padding: .85rem 0; text-decoration: none; color: inherit; font-weight: 600;
}
.community-loc-simple-list a span { font-weight: 400; font-size: .85rem; color: #666; text-transform: capitalize; }
.community-loc-simple-list a:hover { color: var(--color-primary); }
.community-loc-snippet { font-size: .9rem; color: #555; margin: -.25rem 0 .75rem; padding-left: 0; }
.community-loc-simple-list-page { margin-bottom: 2rem; }
.community-loc-prose { max-width: 640px; margin-bottom: 2rem; font-size: 1.05rem; line-height: 1.7; }
.community-cta-warm { text-align: center; padding: 3rem 0; }
.community-blog-cards { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.community-blog-card {
display: block; padding: 1rem 1.25rem; background: #fff; border-radius: var(--radius);
text-decoration: none; color: inherit; font-weight: 600; border: 1px solid rgba(0,0,0,.06);
}
.community-blog-card:hover { border-color: var(--color-primary); color: var(--color-primary); }
.community-intro-wrap { max-width: 680px; font-size: 1.08rem; line-height: 1.75; }
/* --- Portfolio homepage --- */
.portfolio-svc-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.portfolio-svc-panel {
min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end;
padding: 2rem; text-decoration: none; color: #fff; background: var(--color-dark);
}
.portfolio-svc-name { font-size: 1.35rem; font-weight: 300; letter-spacing: .04em; }
.portfolio-svc-desc { font-size: .85rem; opacity: .85; margin-top: .35rem; }
.portfolio-areas-minimal { display: flex; flex-wrap: wrap; gap: .5rem; padding: 2rem 1.5rem; justify-content: center; }
.portfolio-area-tag {
padding: .45rem 1rem; border: 1px solid rgba(255,255,255,.25); color: #fff;
text-decoration: none; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.portfolio-area-more { border-style: dashed; opacity: .7; }
.portfolio-why-line { font-size: 1.15rem; font-weight: 300; letter-spacing: .02em; opacity: .85; }
.portfolio-cta-minimal {
display: inline-block; letter-spacing: .15em; text-transform: uppercase;
font-size: .85rem; color: #fff; text-decoration: none; border-bottom: 1px solid #fff; padding-bottom: .25rem;
}
/* --- Technical / sidebar homepage --- */
.tech-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.tech-spec-item { border: 1px solid rgba(0,0,0,.1); padding: 1.25rem; background: #fff; }
.tech-spec-num { font-size: .75rem; font-weight: 700; color: var(--color-accent); letter-spacing: .1em; }
.tech-zone-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tech-zone-chip {
padding: .4rem .85rem; background: #fff; border: 1px solid rgba(0,0,0,.12);
border-radius: 4px; text-decoration: none; font-size: .85rem; font-weight: 600; color: inherit;
}
.tech-cta-strip {
display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between;
background: var(--color-dark); color: #fff; padding: 2rem; border-radius: var(--radius);
}
.tech-cta-strip h2, .tech-cta-strip p { color: #fff; margin: 0; }
.tech-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.sidebar-svc-layout { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.sidebar-why-list { list-style: none; padding: 0; }
.sidebar-why-list li { padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.sidebar-area-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.sidebar-area-links a {
padding: .4rem .85rem; background: var(--color-light); border-radius: var(--radius);
text-decoration: none; font-weight: 600; font-size: .9rem; color: inherit;
}
.sidebar-cta-box { text-align: center; padding: 2.5rem; background: var(--color-light); border-radius: var(--radius); }
.sidebar-cta-box .btn-outline { margin-left: .75rem; }
/* --- Magazine service area: editorial list (not card grid) --- */
.magazine-loc-list-editorial { max-width: 820px; margin: 0 auto; }
.magazine-loc-row {
display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem;
padding: 2.5rem 0; border-bottom: 1px solid rgba(0,0,0,.1);
}
.magazine-loc-row:first-child { border-top: 1px solid rgba(0,0,0,.1); }
.magazine-loc-row .magazine-loc-index {
font-size: 2.5rem; font-weight: 800; color: rgba(0,0,0,.08); line-height: 1;
}
.magazine-loc-row-body h2 { margin: 0 0 .35rem; font-size: 1.5rem; }
.magazine-loc-row-body h2 a { color: inherit; text-decoration: none; }
.magazine-loc-row-body h2 a:hover { color: var(--color-primary); }
@media (max-width: 768px) {
.magazine-why-layout { grid-template-columns: 1fr; }
.magazine-areas-list li { grid-template-columns: 2.5rem 1fr; }
.magazine-areas-list .magazine-loc-type { grid-column: 2; }
.sidebar-svc-layout { grid-template-columns: 1fr; }
.typology-community .home-svc-community { margin: 0 1rem; }
.magazine-loc-row { grid-template-columns: 1fr; }
.magazine-loc-row .magazine-loc-index { font-size: 1.5rem; }
.funnel-region-grid { grid-template-columns: 1fr 1fr; }
}
/* ===== Tier 2: Before/after, footer forms, blog, svc-loc ===== */
/* Before/after — funnel (Tru Duct) */
.home-ba-funnel { background: var(--color-light); }
.funnel-ba-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem;
}
.funnel-ba-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,.08);
}
.funnel-ba-labels {
display: flex; justify-content: space-between; padding: .5rem 1rem;
background: #f1f5f9; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.funnel-ba-labels span:first-child { color: #dc2626; }
.funnel-ba-labels span:last-child { color: #16a34a; }
.funnel-ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.funnel-ba-images img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.funnel-ba-caption { padding: 1rem 1.25rem; }
.funnel-ba-caption h3 { margin: 0 0 .35rem; font-size: 1rem; }
.funnel-ba-caption p { margin: 0; font-size: .85rem; color: #666; }
/* Before/after — portfolio full-bleed */
.home-ba-portfolio { padding: 0; background: #0a0a0a; color: #fff; }
.home-ba-portfolio h2 { color: #fff; text-align: center; margin-bottom: 0; }
.home-ba-portfolio .portfolio-tagline { text-align: center; display: block; margin-bottom: .5rem; }
.portfolio-ba-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.portfolio-ba-panel { margin: 0; }
.portfolio-ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.portfolio-ba-images img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.portfolio-ba-panel figcaption {
padding: 1rem 1.25rem; background: #111; font-size: .85rem;
}
.portfolio-ba-panel figcaption span { display: block; opacity: .65; margin-top: .25rem; }
/* Before/after — magazine editorial essay */
.magazine-ba-essay { margin-top: 2.5rem; max-width: 100%; }
.magazine-ba-entry {
display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem 2rem;
padding: 2.5rem 0; border-bottom: 1px solid rgba(0,0,0,.1);
align-items: start;
}
.magazine-ba-entry:first-child { border-top: 1px solid rgba(0,0,0,.1); }
.magazine-ba-entry .magazine-loc-index {
font-size: 2rem; font-weight: 800; color: rgba(0,0,0,.18); line-height: 1;
}
.magazine-ba-body { min-width: 0; }
.magazine-ba-pair {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;
}
.magazine-ba-pair figure { margin: 0; }
.magazine-ba-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.magazine-ba-pair figcaption {
font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
font-weight: 600; margin-top: .4rem; color: #555;
}
.magazine-ba-copy h3 { margin: 0 0 .35rem; font-family: var(--font-heading); font-weight: 500; }
.magazine-ba-copy p { margin: 0; color: #555; line-height: 1.65; }
/* Before/after — community neighbor cards */
.community-ba-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.75rem; margin-top: 1.5rem;
}
.community-ba-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.04);
}
.community-ba-images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.community-ba-half { position: relative; }
.community-ba-half img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.community-ba-tag {
position: absolute; top: .5rem; left: .5rem; z-index: 1;
font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
padding: .2rem .5rem; border-radius: 3px;
}
.community-ba-tag-before { background: #fee2e2; color: #991b1b; }
.community-ba-tag-after { background: #dcfce7; color: #166534; }
.community-ba-caption { padding: 1rem 1.25rem; }
.community-ba-caption h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.community-ba-caption p { margin: 0; font-size: .9rem; color: #555; }
/* Footer / pre-footer quote forms (Tru Duct) */
.footer-quote-form h5 {
font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem;
}
.footer-quote-fields { display: flex; flex-direction: column; gap: .65rem; }
.footer-quote-field { display: flex; flex-direction: column; gap: .2rem; }
.footer-quote-field span { font-size: .75rem; font-weight: 600; opacity: .8; }
.footer-quote-field input,
.footer-quote-field select {
padding: .55rem .75rem; border: 1px solid rgba(0,0,0,.15); border-radius: 4px;
font-size: .9rem; background: #fff; color: var(--color-dark);
}
.footer-mega-funnel .footer-quote-field input,
.footer-mega-funnel .footer-quote-field select,
.pre-footer-funnel .footer-quote-field input,
.pre-footer-funnel .footer-quote-field select {
background: rgba(255,255,255,.95); border-color: rgba(255,255,255,.3);
}
.footer-quote-or { font-size: .8rem; margin-top: .65rem; opacity: .75; }
.footer-quote-or a { color: inherit; font-weight: 700; }
.footer-mega-grid-form { grid-template-columns: 1.2fr 1fr 1fr 1.3fr !important; }
.footer-mega-form-col .footer-quote-form h5 { color: inherit; }
.footer-mega-funnel .footer-quote-form h5,
.pre-footer-funnel .footer-quote-form h5 { color: #fff; }
.footer-mega-funnel .footer-quote-or { color: rgba(255,255,255,.75); }
.footer-mega-funnel .footer-quote-or a { color: var(--color-accent); }
.pre-footer-funnel-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;
}
.pre-footer-funnel-form .footer-quote-form { max-width: 360px; margin-left: auto; }
/* Blog typology pages */
.inner-blog-magazine { background: #faf9f7; padding: 3rem 0 4rem; }
.magazine-blog-list-page .magazine-blog-row {
display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: start;
}
.magazine-blog-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.magazine-blog-row-body h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.magazine-blog-row-body h2 a { color: inherit; text-decoration: none; }
.inner-blog-community { padding: 3rem 0 4rem; }
.community-blog-story-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;
}
.community-blog-story-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,.07); border: 1px solid rgba(0,0,0,.04);
}
.community-blog-story-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.community-blog-story-body { padding: 1.25rem; }
.community-blog-story-body h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.community-blog-story-body h2 a { color: inherit; text-decoration: none; }
.funnel-blog-list { list-style: none; padding: 0; margin: 0; }
.funnel-blog-list li { border-bottom: 1px solid rgba(0,0,0,.08); }
.funnel-blog-list a {
display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
gap: .15rem 1rem; padding: 1.1rem 0; text-decoration: none; color: inherit; align-items: center;
}
.funnel-blog-title { font-weight: 700; grid-column: 1; }
.funnel-blog-excerpt { font-size: .9rem; color: #666; grid-column: 1; }
.funnel-blog-list i { grid-row: 1 / span 2; grid-column: 2; color: var(--color-primary); }
.portfolio-blog-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.portfolio-blog-tile {
min-height: 220px; display: flex; align-items: flex-end; padding: 1.5rem;
text-decoration: none; color: #fff; background: #222;
}
.portfolio-blog-title { font-weight: 300; letter-spacing: .02em; font-size: 1.1rem; }
.tech-blog-table { margin-top: 1rem; }
/* Blog detail layouts */
.magazine-article-layout {
display: grid; grid-template-columns: 1fr 260px; gap: 3rem; align-items: start;
}
.magazine-article-hero img { width: 100%; border-radius: 4px; margin-bottom: 1.5rem; }
.magazine-article-rail { border-left: 2px solid rgba(0,0,0,.08); padding-left: 1.5rem; }
.magazine-rail-link {
display: block; padding: .65rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
text-decoration: none; color: inherit; font-size: .9rem; font-weight: 600;
}
.magazine-rail-link:hover { color: var(--color-primary); }
.community-article-wrap { max-width: 720px; }
.community-article-img { width: 100%; border-radius: var(--radius); margin-bottom: 1.5rem; }
.funnel-article-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.portfolio-article-img { width: 100%; margin-bottom: 1.5rem; }
/* Service × location — stronger typology contrast */
.typology-magazine .svc-loc-body-tru { background: #faf9f7; }
.typology-magazine .svc-loc-widget {
border-radius: 0; box-shadow: none; border: none;
border-top: 3px solid var(--color-primary); background: #fff;
}
.typology-magazine .svc-loc-main h2,
.typology-magazine .svc-loc-main h3 { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.01em; }
.typology-magazine .svc-loc-checklist i { color: var(--color-accent); }
.typology-magazine .svc-loc-estimate-box { border-radius: 0; }
.typology-community .svc-loc-body-community { background: linear-gradient(180deg, #fff8f0 0%, #fff 100%); }
.typology-community .svc-loc-main { font-size: 1.05rem; line-height: 1.75; }
.typology-community .svc-loc-hero-dusty {
border-bottom: 4px solid var(--color-accent);
background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)), var(--color-dark);
}
.typology-community .svc-loc-benefit-block {
background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
.typology-community .svc-loc-dark-cta {
background: var(--color-primary); border-radius: var(--radius);
}
.typology-community .svc-loc-dark-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.typology-funnel .svc-loc-hero-tru { padding: 4rem 0 3.5rem; }
.typology-funnel .svc-loc-estimate-box .btn-primary { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
/* ===== Phase 2b additions ===== */
body.type-scale-dense { font-size: 1rem; line-height: 1.55; }
body.type-scale-dense h1 { font-size: clamp(1.8rem, 3.4vw, 2.85rem) !important; line-height: 1.1; }
body.type-scale-dense h2 { font-size: clamp(1.35rem, 2.5vw, 2rem) !important; line-height: 1.15; }
body.type-scale-dense .lead { font-size: 1.02rem !important; line-height: 1.5; }
.nav-profile-offset-logo .offset-logo-brand { margin-right: 1rem; }
.nav-profile-vertical-stack .vertical-stack-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-profile-vertical-stack .vertical-stack-bottom { border-top: 1px solid rgba(0,0,0,.06); padding-top: .45rem; padding-bottom: .35rem; }
.nav-accent-strip { background: var(--color-accent); color: #fff; font-size: .82rem; font-weight: 700; padding: .3rem 0; }
.nav-accent-strip .container { display: flex; justify-content: space-between; gap: 1rem; }
.nav-profile-floating-island .floating-island-shell {
background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: .35rem 1rem;
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.nav-profile-split-brand .split-brand-inner { gap: 1.1rem; }
.nav-profile-split-brand .split-brand-nav { margin-left: auto; margin-right: auto; }
.hero-stats-split .hero-stats-card { padding: 1.25rem; }
.hero-video-frame {
min-height: 260px; border: 2px dashed rgba(0,0,0,.2); border-radius: var(--radius); display: grid;
place-items: center; text-align: center; gap: .65rem; color: #555;
}
.hero-video-frame i { font-size: 2rem; color: var(--color-primary); }
.hero-map-card { display: grid; place-items: center; }
.hero-map-pin { text-align: center; padding: 2rem; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); width: 100%; }
.hero-map-pin i { font-size: 2rem; color: var(--color-primary); margin-bottom: .5rem; }
.hero-quote-card { max-width: 760px; margin: 1.5rem auto 0; }
.hero-quote-card blockquote { margin: 0 0 .75rem; font-size: 1.2rem; font-style: italic; }
.hero-quote-card cite { font-style: normal; color: #666; }
.hero-narrow-wrap { max-width: 860px; margin: 0 auto; text-align: center; }
.trust-bar-inner.icon-grid,
.trust-bar-inner.timeline-trust,
.trust-bar-inner.badge-stack,
.trust-bar-inner.comparison-row,
.trust-bar-inner.license-banner {
display: flex; flex-wrap: wrap; gap: .65rem 1rem; justify-content: center;
}
.trust-bar-inner.icon-grid span,
.trust-bar-inner.timeline-trust span,
.trust-bar-inner.comparison-row span,
.trust-bar-inner.license-banner span {
background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: .4rem .8rem; font-size: .9rem;
}
.trust-bar-inner.testimonial-strip { text-align: center; display: grid; gap: .3rem; }
.trust-bar-inner.testimonial-strip strong { font-size: 1.05rem; }
.trust-bar-inner.testimonial-strip span { color: #666; font-size: .9rem; }
.inner-masthead-banner { background: linear-gradient(135deg, var(--color-primary), var(--color-dark)); color: #fff; }
.inner-masthead-minimal { background: transparent; border-bottom: 1px solid rgba(0,0,0,.08); }
.inner-masthead-breadcrumb { background: var(--color-light); }
.inner-masthead-full-bleed { background: linear-gradient(145deg, var(--color-dark), var(--color-primary)); color: #fff; }
.footer-compact { border-top: 1px solid rgba(0,0,0,.08); padding: 1.25rem 0; }
.footer-compact-inner { display: flex; flex-wrap: wrap; gap: .65rem 1rem; justify-content: center; align-items: center; }
.footer-split { border-top: 1px solid rgba(0,0,0,.08); }
.footer-split-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.footer-minimal { border-top: 1px solid rgba(0,0,0,.08); padding: 1.5rem 0; }
.footer-columns { border-top: 1px solid rgba(0,0,0,.08); }
.footer-columns-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.footer-columns-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-columns-grid li { padding: .2rem 0; }
@media (max-width: 768px) {
.pre-footer-funnel-grid { grid-template-columns: 1fr; }
.pre-footer-funnel-form .footer-quote-form { margin-left: 0; max-width: none; }
.footer-mega-grid-form { grid-template-columns: 1fr 1fr !important; }
.magazine-blog-list-page .magazine-blog-row { grid-template-columns: 1fr; }
.magazine-article-layout { grid-template-columns: 1fr; }
.magazine-article-rail { border-left: none; padding-left: 0; border-top: 1px solid rgba(0,0,0,.08); padding-top: 1.5rem; }
.magazine-ba-pair { grid-template-columns: 1fr; }
.magazine-ba-entry { grid-template-columns: 1fr; gap: 1rem; }
.magazine-ba-entry .magazine-loc-index { font-size: 1.5rem; }
.community-ba-grid { grid-template-columns: 1fr; }
}