/* ==========================================================================
Sections — Home Page & Reusable Section Styles (Dark Premium Theme)
========================================================================== */
/* ==========================================================================
Sticky Mobile CTA Bar — المعتز لنقل وتغلي٠الأثاث
========================================================================== */
.mobile-sticky-bar {
display: none; /* hidden on desktop */
}
@media (max-width: 768px) {
.mobile-sticky-bar {
position: fixed;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 9999;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 12px;
background: rgba(10, 18, 32, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-sticky-btn {
min-height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.mobile-sticky-btn:active {
opacity: 0.85;
transform: scale(0.97);
}
.mobile-sticky-btn--call {
background: var(--color-primary-500, #9D262B);
color: var(--color-navy-950, #0A0F1C);
font-weight: 800;
}
.mobile-sticky-btn--wa {
background: #25D366;
color: #fff;
}
/* Push page content up so the sticky bar doesn't cover the footer */
body {
padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
/* iOS safe-area for the bar itself */
.mobile-sticky-bar {
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
/* Hide the desktop floating buttons on mobile to avoid overlap */
.floating-actions .whatsapp-btn,
.floating-actions .phone-btn {
display: none;
}
}
/* ==========================================================================
Common Section Utilities
========================================================================== */
.content-narrow {
max-width: 800px;
margin-inline: auto;
}
.section-badge {
display: inline-block;
padding: var(--space-2) var(--space-4);
background-color: rgba(157, 38, 43, 0.15);
color: var(--color-primary-400);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-4);
}
.section-cta {
text-align: center;
margin-top: var(--space-10);
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.section-cta-text {
color: var(--text-muted);
margin-bottom: var(--space-3);
}
.section-cta-box {
text-align: center;
margin-top: var(--space-10);
padding: var(--space-8);
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
}
.section-cta-box h3 {
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.section-cta-box p {
color: var(--text-secondary);
margin-bottom: var(--space-6);
}
.section-cta-box .section-cta {
margin-top: 0;
}
.empty-state {
text-align: center;
padding: var(--space-12) var(--space-6);
color: var(--text-secondary);
}
.empty-state h4 {
color: var(--text-primary);
margin-bottom: var(--space-3);
}
/* ==========================================================================
About Section v2 — Homepage (ab-)
========================================================================== */
/* ── shell ── */
.ab-section {
position: relative;
background-color: var(--color-sand-50);
padding-block: var(--section-padding-y);
overflow: hidden;
/* text token overrides for light background */
--text-primary: var(--color-navy-950);
--text-secondary: var(--color-navy-800);
--text-muted: var(--color-navy-600);
}
/* ── ambient background ── */
.ab-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.ab-bg__glow {
position: absolute;
width: 640px;
height: 640px;
border-radius: 50%;
background: radial-gradient(circle, rgba(157, 38, 43, 0.06) 0%, transparent 65%);
inset-inline-end: -120px;
top: -180px;
}
/* Dot grid fading in from the visual side */
.ab-bg__pattern {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(157, 38, 43, 0.09) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse at 80% 50%, black 10%, transparent 62%);
mask-image: radial-gradient(ellipse at 80% 50%, black 10%, transparent 62%);
}
/* ── layout ── */
.ab-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(40px, 6.5vw, 92px);
align-items: center;
}
/* ── content column ── */
.ab-content {
max-width: 580px;
}
/* Badge */
.ab-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 16px;
border-radius: var(--radius-full);
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.20);
color: var(--color-primary-700);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.05em;
margin-bottom: 20px;
}
.ab-badge svg { flex-shrink: 0; width: 14px; height: 14px; }
/* Heading */
.ab-title {
font-size: clamp(1.9rem, 4vw, 2.9rem);
font-weight: 800;
line-height: 1.2;
color: var(--color-navy-950);
margin-bottom: 22px;
}
.ab-title-accent {
display: block;
background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-primary-400) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 2px;
}
/* Lead */
.ab-lead {
color: var(--color-navy-700);
font-size: clamp(0.98rem, 1.8vw, 1.1rem);
line-height: 1.9;
margin-bottom: 28px;
}
/* Trust points */
.ab-points {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ab-point {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: var(--radius-md);
background: #ffffff;
border: 1px solid rgba(157, 38, 43, 0.09);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
color: var(--color-navy-900);
font-weight: 600;
font-size: var(--font-size-sm);
line-height: 1.4;
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.ab-point:hover {
border-color: rgba(157, 38, 43, 0.22);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
transform: translateY(-1px);
}
.ab-point-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
background: rgba(157, 38, 43, 0.08);
color: var(--color-primary-700);
}
.ab-point-icon svg { width: 14px; height: 14px; }
/* CTAs */
.ab-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 22px;
}
/* Promise */
.ab-promise {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--color-primary-700);
font-size: 0.9rem;
font-weight: 700;
}
.ab-promise::before {
content: '';
display: inline-block;
flex-shrink: 0;
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--color-primary-600);
}
/* ── visual / media column ── */
.ab-visual { position: relative; }
/* Media card */
.ab-media-card {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
background: var(--color-navy-950);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 28px 70px rgba(0, 0, 0, 0.22),
0 0 0 1px rgba(157, 38, 43, 0.10);
aspect-ratio: 4 / 5;
}
/* Crimson accent line at top */
.ab-media-card::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--color-primary-600), transparent 55%);
z-index: 4;
pointer-events: none;
}
/* Gradient vignette for caption legibility */
.ab-media-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 52%, rgba(7, 11, 20, 0.72) 100%);
z-index: 2;
pointer-events: none;
}
/* Video */
.ab-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Image fallback */
.ab-media-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
/* Placeholder */
.ab-media-placeholder {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(circle at 28% 30%, rgba(157, 38, 43, 0.28), transparent 50%),
radial-gradient(circle at 72% 75%, rgba(23, 32, 51, 0.55), transparent 45%),
linear-gradient(145deg, var(--color-navy-800) 0%, var(--color-navy-950) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.ab-placeholder-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-full);
background: rgba(157, 38, 43, 0.14);
border: 1px solid rgba(157, 38, 43, 0.28);
display: grid;
place-items: center;
color: var(--color-primary-300);
}
.ab-placeholder-icon svg { width: 32px; height: 32px; }
.ab-placeholder-text {
color: rgba(255, 255, 255, 0.45);
font-size: 0.875rem;
font-weight: 600;
}
/* Caption overlay */
.ab-media-caption {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 3;
padding: 18px 22px;
display: flex;
align-items: center;
gap: 12px;
}
.ab-caption-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
background: rgba(157, 38, 43, 0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: var(--radius-full);
color: #ffffff;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
flex-shrink: 0;
}
.ab-caption-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.ab-caption-text {
color: rgba(255, 255, 255, 0.75);
font-size: 0.8rem;
font-weight: 500;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── animate-on-scroll ── */
.ab-badge.animate-on-scroll,
.ab-title.animate-on-scroll,
.ab-lead.animate-on-scroll,
.ab-points.animate-on-scroll,
.ab-actions.animate-on-scroll,
.ab-promise.animate-on-scroll {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.65s ease, transform 0.65s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ab-badge.animate-on-scroll.animated,
.ab-title.animate-on-scroll.animated,
.ab-lead.animate-on-scroll.animated,
.ab-points.animate-on-scroll.animated,
.ab-actions.animate-on-scroll.animated,
.ab-promise.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.ab-visual.animate-on-scroll {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.75s ease, transform 0.75s ease;
transition-delay: var(--reveal-delay, 0ms);
}
[dir="rtl"] .ab-visual.animate-on-scroll { transform: translateX(32px); }
.ab-visual.animate-on-scroll.animated {
opacity: 1;
transform: translateX(0);
}
/* ── responsive ── */
@media (max-width: 960px) {
.ab-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.ab-content { max-width: 100%; order: 1; }
/* width:100% breaks the margin-inline:auto max-content collapse (all card children are position:absolute) */
.ab-visual { order: 2; width: 100%; max-width: 600px; margin-inline: auto; }
.ab-media-card { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
.ab-points { grid-template-columns: 1fr; }
.ab-actions .btn { width: 100%; justify-content: center; }
.ab-media-card { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
.ab-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.ab-media-card { aspect-ratio: 3 / 2; }
}
/* touch: disable hover micro-lifts */
@media (hover: none) {
.ab-point:hover {
transform: none;
border-color: rgba(157, 38, 43, 0.09);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ab-badge.animate-on-scroll,
.ab-title.animate-on-scroll,
.ab-lead.animate-on-scroll,
.ab-points.animate-on-scroll,
.ab-actions.animate-on-scroll,
.ab-promise.animate-on-scroll,
.ab-visual.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.ab-point { transition: none !important; }
}
/* ==========================================================================
Service/Location Hero (Single Pages)
========================================================================== */
.service-hero {
padding: var(--space-16) 0 var(--space-12);
background: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-900) 100%);
overflow: hidden;
}
.service-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
gap: clamp(32px, 6vw, 72px);
align-items: center;
}
.service-hero .service-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.service-hero .service-subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-6);
}
.service-hero-actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-6);
}
/* Trust chips row */
.service-hero-trust {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.trust-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: var(--radius-full);
background: rgba(157, 38, 43, 0.09);
border: 1px solid rgba(157, 38, 43, 0.2);
color: var(--color-gold-300);
font-size: var(--font-size-sm);
font-weight: 600;
}
.trust-chip svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Featured image area */
.service-hero-image {
position: relative;
}
.service-hero-image__wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-xl);
border: 1px solid rgba(157, 38, 43, 0.16);
box-shadow: var(--shadow-card);
background: var(--color-navy-900);
}
.service-hero-image__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.service-hero-image__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10, 15, 30, 0.38) 100%);
pointer-events: none;
}
@media (max-width: 900px) {
.service-hero-grid {
grid-template-columns: 1fr;
}
.service-hero-image {
order: -1;
}
.service-hero-image__wrap {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 768px) {
.service-hero-actions {
flex-direction: column;
}
.service-hero-actions .btn {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
Archive Service Hero
========================================================================== */
.archive-service-hero {
padding-block: clamp(64px, 10vw, 120px);
background:
radial-gradient(circle at 20% 50%, rgba(157, 38, 43, 0.08), transparent 40%),
linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-900) 100%);
text-align: center;
}
.archive-service-hero__inner {
max-width: 760px;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.archive-service-hero__title {
color: var(--text-primary);
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
line-height: 1.25;
margin: 0;
}
.archive-service-hero__subtitle {
color: var(--text-secondary);
font-size: clamp(1rem, 2vw, 1.15rem);
line-height: 1.85;
margin: 0;
}
/* Archive CTA block */
.archive-service-cta {
text-align: center;
padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 48px);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
border: 1px solid rgba(157, 38, 43, 0.15);
max-width: 640px;
margin-inline: auto;
}
.archive-service-cta__title {
color: var(--text-primary);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 700;
margin-bottom: 12px;
}
.archive-service-cta__text {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.8;
margin-bottom: 24px;
}
.archive-service-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
/* Filter tabs */
.service-filter-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-8);
}
.service-filter-btn {
padding: 9px 20px;
border-radius: var(--radius-full);
border: 1px solid rgba(157, 38, 43, 0.2);
background: transparent;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
}
.service-filter-btn:hover,
.service-filter-btn.active {
background: rgba(157, 38, 43, 0.1);
border-color: rgba(157, 38, 43, 0.4);
color: var(--color-gold-300);
}
/* ==========================================================================
Content Sections (Single Pages)
========================================================================== */
.service-description,
.service-benefits,
.service-pricing,
.service-faq,
.related-services,
.service-areas {
padding: var(--space-14) 0;
}
.service-description {
background-color: var(--bg-body);
}
.service-benefits,
.service-areas {
background-color: var(--bg-surface);
}
/* Related services: cap at 3 cols, smaller gap than homepage */
.related-svc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) {
.related-svc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 580px) {
.related-svc-grid {
grid-template-columns: 1fr;
}
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-6);
}
.pricing-factors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-6);
}
.areas-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* ==========================================================================
Card Shorthand Classes (used in single-service/location templates)
========================================================================== */
/* Override padding when card uses image+content structure */
.service-card:has(.card-image) {
padding: 0;
}
.card-image {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform var(--transition-slow);
}
.service-card:hover .card-image img {
transform: scale(1.05);
}
.card-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
background-color: var(--bg-elevated);
font-size: var(--font-size-4xl);
}
.card-content {
padding: var(--space-5);
}
.card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.card-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
.card-title a:hover {
color: var(--color-primary-400);
}
.card-excerpt {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-4);
}
.card-meta {
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-bottom: var(--space-3);
}
/* ==========================================================================
Contact Cards Grid
========================================================================== */
.contact-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.contact-card {
text-align: center;
padding: var(--space-6);
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
transition: all var(--transition-normal);
}
.contact-card:hover {
border-color: var(--color-primary-500);
}
.contact-icon {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-3);
}
.contact-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.contact-text {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin: 0;
}
.contact-text a {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-text a:hover {
color: var(--color-primary-400);
}
.emergency-banner {
text-align: center;
padding: var(--space-4) var(--space-6);
background-color: rgba(255, 193, 7, 0.1);
border: 1px solid rgba(255, 193, 7, 0.3);
border-radius: var(--radius-lg);
margin-bottom: var(--space-6);
}
.emergency-banner h5 {
color: #ffc107;
margin-bottom: var(--space-2);
}
.emergency-banner p {
margin: 0;
}
.emergency-banner a {
color: #ffc107;
text-decoration: none;
}
.social-section {
text-align: center;
margin-top: var(--space-6);
}
.social-section h5 {
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.social-links-row {
display: flex;
justify-content: center;
gap: var(--space-4);
}
.social-links-row .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
font-size: var(--font-size-xl);
background-color: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
text-decoration: none;
transition: all var(--transition-normal);
}
.social-links-row .social-link:hover {
border-color: var(--color-primary-500);
background-color: var(--bg-surface);
}
/* ==========================================================================
Form Utilities
========================================================================== */
.theme-form {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
@media (max-width: 640px) {
.form-row {
grid-template-columns: 1fr;
}
}
.form-submit {
text-align: center;
margin-top: var(--space-6);
}
/* ==========================================================================
FAQ Accordion (Custom — replaces Bootstrap accordion)
========================================================================== */
.faq-accordion {
display: grid;
gap: var(--space-3);
}
.faq-accordion .accordion-item {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition-fast);
}
.faq-accordion .accordion-item:hover {
border-color: var(--border-default);
}
.accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-4) var(--space-5);
background: none;
border: none;
cursor: pointer;
text-align: inherit;
transition: all var(--transition-fast);
}
.accordion-trigger:hover {
background-color: var(--bg-elevated);
}
.accordion-trigger[aria-expanded="true"] {
background-color: var(--bg-elevated);
}
.accordion-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.accordion-trigger[aria-expanded="true"] .accordion-title {
color: var(--color-primary-400);
}
.accordion-icon {
font-size: var(--font-size-xl);
color: var(--text-muted);
transition: transform var(--transition-normal);
flex-shrink: 0;
margin-inline-start: var(--space-3);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
transform: rotate(45deg);
}
.accordion-content {
display: none;
padding: 0 var(--space-5) var(--space-4);
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
border-top: 1px solid var(--border-subtle);
}
.accordion-content[aria-hidden="false"] {
display: block;
}
/* ==========================================================================
Hero Section — Premium
========================================================================== */
.hero-section.hero-premium {
position: relative;
min-height: 100vh; /* safe fallback */
min-height: 100svh; /* modern: excludes browser address bar on mobile */
display: flex;
align-items: center;
background: var(--bg-body);
overflow: hidden;
padding: calc(var(--space-20) + 60px) 0 var(--space-16); /* extra top for sticky header */
isolation: isolate;
}
/* ---------- Background layers ---------- */
.hero-premium .hero-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-premium .hero-blob {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
filter: blur(100px);
opacity: 0.35;
will-change: transform;
}
.hero-premium .hero-blob--1 {
top: -120px;
right: -80px;
background: radial-gradient(circle, hsla(42, 70%, 45%, 0.55), transparent 70%);
animation: hero-blob-float 24s ease-in-out infinite;
}
.hero-premium .hero-blob--2 {
bottom: -160px;
left: -100px;
width: 600px;
height: 600px;
background: radial-gradient(circle, hsla(215, 75%, 50%, 0.28), transparent 70%);
animation: hero-blob-float 28s ease-in-out infinite reverse;
animation-delay: -8s;
}
/* blob--3 removed — two background layers sufficient */
.hero-premium .hero-blob--3 {
display: none;
}
@keyframes hero-blob-float {
0%,100% { transform: translate3d(0,0,0) scale(1); }
33% { transform: translate3d(40px,-30px,0) scale(1.08); }
66% { transform: translate3d(-30px,40px,0) scale(0.95); }
}
/* hero-grid removed — visual noise */
.hero-premium .hero-grid {
display: none;
}
.hero-premium .hero-noise {
position: absolute;
inset: 0;
opacity: 0.035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Container ---------- */
.hero-premium .hero-container {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container-xl, 1280px);
margin: 0 auto;
padding: 0 var(--space-6);
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: var(--space-12);
align-items: center;
}
/* ---------- Content ---------- */
.hero-premium .hero-content {
max-width: 640px;
}
/* Reveal-on-load */
.hero-premium .reveal {
opacity: 0;
transform: translateY(18px);
animation: hero-reveal 0.8s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--reveal-delay, 0ms));
}
.hero-premium [data-reveal-delay="0"] { --reveal-delay: 0ms; }
.hero-premium [data-reveal-delay="80"] { --reveal-delay: 80ms; }
.hero-premium [data-reveal-delay="160"] { --reveal-delay: 160ms; }
.hero-premium [data-reveal-delay="200"] { --reveal-delay: 200ms; }
.hero-premium [data-reveal-delay="240"] { --reveal-delay: 240ms; }
.hero-premium [data-reveal-delay="320"] { --reveal-delay: 320ms; }
.hero-premium [data-reveal-delay="400"] { --reveal-delay: 400ms; }
@keyframes hero-reveal {
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Badge — copper bottom border, no shimmer ---------- */
.hero-premium .hero-badge {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(128, 29, 35, 0.08);
border: 1px solid rgba(128, 29, 35, 0.22);
border-bottom: 2px solid var(--color-copper-500, #9D262B);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-copper-400, #D25746);
margin-bottom: var(--space-6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-premium .hero-badge-pulse {
position: relative;
display: inline-block;
width: 8px;
height: 8px;
background: var(--color-primary-400);
border-radius: 50%;
box-shadow: 0 0 0 0 hsla(42, 60%, 50%, 0.6);
animation: hero-pulse 2.2s ease-out infinite;
}
@keyframes hero-pulse {
0% { box-shadow: 0 0 0 0 hsla(42, 60%, 50%, 0.55); }
70% { box-shadow: 0 0 0 14px hsla(42, 60%, 50%, 0); }
100% { box-shadow: 0 0 0 0 hsla(42, 60%, 50%, 0); }
}
.hero-premium .hero-badge-icon { display: inline-flex; color: currentColor; }
.hero-premium .hero-badge-text { position: relative; z-index: 1; }
/* ---------- Title ---------- */
.hero-premium .hero-title {
font-size: clamp(2.0rem, 4.5vw, 3.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.hero-premium .hero-title-accent {
background: linear-gradient(135deg, var(--color-primary-300, hsl(358, 70%, 55%)), var(--color-primary-500, hsl(358, 60%, 42%)));
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: hero-accent-shift 6s ease-in-out infinite;
}
@keyframes hero-accent-shift {
0%,100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ---------- Subtitle ---------- */
.hero-premium .hero-subtitle {
font-size: clamp(1rem, 1.15vw, 1.15rem);
color: var(--text-secondary);
line-height: 1.75;
margin-bottom: var(--space-8);
max-width: 560px;
}
/* ---------- Actions ---------- */
.hero-premium .hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-block: var(--space-7);
}
.hero-premium .hero-cta-primary {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: var(--space-2);
box-shadow: 0 10px 30px -10px hsla(42, 60%, 42%, 0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.hero-premium .hero-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px hsla(42, 60%, 42%, 0.7);
}
.hero-premium .hero-cta-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
transform: translateX(-120%);
transition: transform .6s ease;
}
.hero-premium .hero-cta-primary:hover .hero-cta-shimmer { transform: translateX(120%); }
.hero-premium .hero-cta-arrow {
display: inline-flex;
transition: transform .25s ease;
}
.hero-premium .hero-cta-primary:hover .hero-cta-arrow { transform: translateX(-4px); }
.hero-premium .hero-cta-secondary {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-strong, rgba(255,255,255,0.18));
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hero-premium .hero-cta-secondary:hover {
background: rgba(255,255,255,0.04);
border-color: var(--color-primary-400);
transform: translateY(-2px);
}
/* ---------- Quick contact dock ---------- */
.hero-premium .hero-quick-contact {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-4);
margin-bottom: var(--space-8);
padding-top: var(--space-5);
border-top: 1px dashed rgba(255,255,255,0.08);
}
.hero-premium .hero-quick-label {
color: var(--text-tertiary, var(--text-secondary));
font-size: var(--font-size-sm);
}
.hero-premium .hero-quick-actions {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.hero-premium .hero-quick-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-premium .hero-quick-btn:hover { transform: translateY(-2px); }
.hero-premium .hero-quick-btn--whatsapp {
background: hsl(142, 70%, 45%);
color: #fff;
box-shadow: 0 8px 20px -10px hsl(142, 70%, 45%);
}
.hero-premium .hero-quick-btn--whatsapp:hover { background: hsl(142, 72%, 40%); }
.hero-premium .hero-quick-btn--call {
background: rgba(255,255,255,0.04);
color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.1);
}
.hero-premium .hero-quick-btn--call:hover {
background: rgba(255,255,255,0.08);
border-color: var(--color-primary-400);
color: var(--color-primary-300);
}
.hero-premium .hero-quick-btn-pulse {
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 0 0 hsla(142, 70%, 45%, 0.6);
animation: hero-pulse 2.4s ease-out infinite;
pointer-events: none;
}
/* ---------- Stats strip ---------- */
.hero-premium .hero-stats {
list-style: none;
margin: 0;
padding: var(--space-5);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-premium .hero-stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
padding-inline-start: var(--space-3);
border-inline-start: 2px solid var(--color-primary-500);
}
.hero-premium .hero-stat .stat-number {
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
font-weight: 800;
line-height: 1;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.hero-premium .hero-stat-label {
font-size: var(--font-size-xs);
color: var(--text-secondary);
white-space: nowrap;
}
/* ---------- Visual ---------- */
.hero-premium .hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 460px;
}
.hero-premium .hero-visual-inner {
position: relative;
width: 100%;
max-width: 560px;
transform-style: preserve-3d;
transition: transform .35s cubic-bezier(.2,.7,.2,1);
will-change: transform;
}
.hero-premium .hero-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-2xl, 24px);
overflow: hidden;
box-shadow:
0 30px 60px -20px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.06) inset,
0 0 80px -20px hsla(42,60%,50%,0.3);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
transform: translateZ(0);
}
.hero-premium .hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.hero-premium .hero-visual-inner:hover .hero-image img { transform: scale(1.03); }
.hero-premium .hero-image--placeholder {
display: grid;
place-items: center;
color: hsla(42, 60%, 55%, 0.5);
background:
radial-gradient(circle at 30% 30%, hsla(42,60%,50%,0.22), transparent 60%),
linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
/* ---------- Live indicator card ---------- */
.hero-premium .hero-live-card {
position: absolute;
bottom: 20px;
inset-inline-start: -20px;
min-width: 230px;
padding: var(--space-4);
background: rgba(20, 26, 34, 0.82);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg, 16px);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: var(--space-2);
animation: hero-float 6s ease-in-out infinite;
z-index: 3;
}
.hero-premium .hero-live-row {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.hero-premium .hero-live-row strong { color: var(--text-primary); font-weight: 700; }
.hero-premium .hero-live-stars { display: inline-flex; gap: 1px; color: #F5C020; }
.hero-premium .hero-live-value { font-weight: 800; color: var(--text-primary); font-size: var(--font-size-base); }
.hero-premium .hero-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: hsl(142, 70%, 50%);
box-shadow: 0 0 0 0 hsla(142, 70%, 50%, 0.55);
animation: hero-pulse 2s ease-out infinite;
}
.hero-premium .hero-live-icon { display: inline-flex; color: var(--color-primary-400); }
/* ---------- Credential floating chips ---------- */
.hero-premium .hero-credential {
position: absolute;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(20, 26, 34, 0.85);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-full);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
font-size: var(--font-size-xs);
box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45);
z-index: 3;
}
.hero-premium .hero-credential-icon {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: hsla(42,60%,50%,0.16);
color: var(--color-primary-300);
}
.hero-premium .hero-credential-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero-premium .hero-credential-text strong { color: var(--text-primary); font-weight: 700; }
.hero-premium .hero-credential-text span { color: var(--text-tertiary, var(--text-secondary)); font-size: 11px; }
.hero-premium .hero-credential--1 { top: 18px; inset-inline-end: -30px; animation: hero-float 7s ease-in-out infinite; }
.hero-premium .hero-credential--2 { top: 42%; inset-inline-start: -56px; animation: hero-float 8s ease-in-out infinite -2s; }
.hero-premium .hero-credential--3 { bottom: 30%; inset-inline-end: -40px; animation: hero-float 9s ease-in-out infinite -4s; }
@keyframes hero-float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ---------- Scroll cue ---------- */
.hero-premium .hero-scroll-cue {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: var(--text-secondary);
text-decoration: none;
font-size: var(--font-size-xs);
z-index: 2;
opacity: 0.75;
transition: opacity .25s ease, transform .25s ease;
}
.hero-premium .hero-scroll-cue:hover { opacity: 1; transform: translateX(-50%) translateY(-2px); color: var(--color-primary-300); }
.hero-premium .hero-scroll-cue-wheel {
width: 22px;
height: 34px;
border: 2px solid currentColor;
border-radius: 11px;
position: relative;
}
.hero-premium .hero-scroll-cue-wheel::before {
content: '';
position: absolute;
top: 6px;
left: 50%;
width: 2px;
height: 7px;
background: currentColor;
border-radius: 2px;
transform: translateX(-50%);
animation: hero-scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-wheel {
0% { transform: translate(-50%, 0); opacity: 1; }
60% { transform: translate(-50%, 10px); opacity: 0; }
61% { transform: translate(-50%, 0); opacity: 0; }
100% { transform: translate(-50%, 0); opacity: 1; }
}
/* ---------- Responsive ---------- */
/* ── Tablet landscape: ≤1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
.hero-section.hero-premium {
/* Use svh so browser chrome doesn't cause overflow on mobile */
min-height: 100vh; /* fallback */
min-height: 100svh;
padding: calc(var(--space-16) + 60px) 0 var(--space-12);
}
.hero-premium .hero-container { grid-template-columns: 1fr; gap: var(--space-8); }
.hero-premium .hero-content { max-width: 100%; }
.hero-premium .hero-visual { order: -1; min-height: 320px; }
.hero-premium .hero-credential--2 { inset-inline-start: -10px; }
.hero-premium .hero-credential--3 { inset-inline-end: -10px; }
}
/* ── Tablet portrait: ≤768px ───────────────────────────────────────────── */
@media (max-width: 768px) {
.hero-section.hero-premium {
min-height: auto;
padding: calc(var(--space-14) + 56px) 0 var(--space-10);
}
.hero-premium .hero-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
.hero-premium .hero-subtitle { font-size: clamp(.95rem, 3vw, 1.05rem); margin-bottom: var(--space-6); }
.hero-premium .hero-actions { flex-direction: column; }
.hero-premium .hero-actions .btn { width: 100%; justify-content: center; }
.hero-premium .hero-quick-contact { padding-top: var(--space-4); margin-bottom: var(--space-6); }
.hero-premium .hero-stats {
grid-template-columns: repeat(2, 1fr);
padding: var(--space-4);
gap: var(--space-3);
}
.hero-premium .hero-visual { min-height: auto; }
.hero-premium .hero-live-card { inset-inline-start: 10px; bottom: 10px; min-width: 200px; }
.hero-premium .hero-credential--1,
.hero-premium .hero-credential--2,
.hero-premium .hero-credential--3 { display: none; }
.hero-premium .hero-scroll-cue { display: none; }
.hero-premium .hero-blob { filter: blur(70px); }
}
/* ── Mobile large: ≤640px ──────────────────────────────────────────────── */
@media (max-width: 640px) {
.hero-section.hero-premium {
padding: calc(var(--space-12) + 56px) 0 var(--space-8);
}
.hero-premium .hero-container { gap: var(--space-6); }
.hero-premium .hero-badge { margin-bottom: var(--space-4); padding: var(--space-1) var(--space-3); font-size: .8rem; }
.hero-premium .hero-title { font-size: clamp(1.6rem, 7.5vw, 2.1rem); margin-bottom: var(--space-4); line-height: 1.15; }
.hero-premium .hero-visual-inner { max-width: 100%; }
.hero-premium .hero-image { border-radius: var(--radius-xl, 16px); }
.hero-premium .hero-live-card { font-size: .78rem; min-width: 180px; padding: var(--space-3); }
.hero-premium .hero-stat .stat-number { font-size: clamp(1.2rem, 4vw, 1.5rem); }
}
/* ── Mobile: ≤480px ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.hero-section.hero-premium {
padding: calc(var(--space-10) + 52px) 0 var(--space-6);
}
.hero-premium .hero-container { padding: 0 var(--space-4); }
.hero-premium .hero-title { font-size: clamp(1.5rem, 8vw, 1.9rem); }
.hero-premium .hero-subtitle { font-size: .92rem; }
.hero-premium .hero-quick-contact {
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.hero-premium .hero-quick-actions { width: 100%; }
.hero-premium .hero-quick-btn { flex: 1; justify-content: center; }
.hero-premium .hero-stats { padding: var(--space-3); gap: var(--space-2); }
.hero-premium .hero-stat { padding-inline-start: var(--space-2); }
.hero-premium .hero-stat .stat-number { font-size: clamp(1.1rem, 5vw, 1.4rem); }
.hero-premium .hero-stat-label { font-size: .7rem; white-space: normal; }
/* Hide live-card on small phones to save vertical space */
.hero-premium .hero-live-card { display: none; }
.hero-premium .hero-blob { width: 320px; height: 320px; filter: blur(55px); opacity: .4; }
.hero-premium .hero-blob--2 { width: 360px; height: 360px; }
}
/* ── Tiny mobile: ≤360px ───────────────────────────────────────────────── */
@media (max-width: 360px) {
.hero-section.hero-premium {
padding: calc(52px + var(--space-6)) 0 var(--space-4);
}
.hero-premium .hero-container { padding: 0 var(--space-3); }
/* Hide the badge so the title is the very first thing the eye hits */
.hero-premium .hero-badge { display: none; }
.hero-premium .hero-title { font-size: clamp(1.35rem, 8.5vw, 1.6rem); margin-bottom: var(--space-3); }
.hero-premium .hero-actions .btn { padding-inline: var(--space-4); }
.hero-premium .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-1); padding: var(--space-2); }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.hero-premium .hero-blob,
.hero-premium .hero-live-card,
.hero-premium .hero-credential,
.hero-premium .hero-badge-pulse,
.hero-premium .hero-quick-btn-pulse,
.hero-premium .hero-live-dot,
.hero-premium .hero-badge::before,
.hero-premium .hero-title-accent,
.hero-premium .hero-scroll-cue-wheel::before { animation: none !important; }
.hero-premium .reveal { opacity: 1; transform: none; animation: none !important; }
.hero-premium .hero-visual-inner { transition: none !important; }
}
/* ==========================================================================
Hero — Cinema Phase 1: 3-slide crossfade background system
========================================================================== */
/* Dark fallback while images load (also shown when no photos uploaded) */
.hero-section.hero-cinema {
background: #060c1a;
}
/* Always full-screen on all breakpoints — overrides the auto at ≤768px */
.hero-section.hero-cinema {
min-height: 100svh;
}
/* ---------- Background slide stack ---------- */
.hero-cinema-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-cinema-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
will-change: opacity;
opacity: 0;
animation: hero-cinema-fade 18s linear infinite;
}
/*
* Stagger delays — 3 slides, 18s cycle, each holds 7s:
* Slide 1: delay 0s → visible from t=0
* Slide 2: delay -12s → visible from t=6s
* Slide 3: delay -6s → visible from t=12s
*/
.hero-cinema-slide--1 { animation-delay: 0s; }
.hero-cinema-slide--2 { animation-delay: -12s; }
.hero-cinema-slide--3 { animation-delay: -6s; }
@keyframes hero-cinema-fade {
0% { opacity: 1; }
38.89% { opacity: 1; } /* 7s / 18s — still on */
47.22% { opacity: 0; } /* 8.5s / 18s — faded out */
94.44% { opacity: 0; } /* 17s / 18s — still off */
100% { opacity: 1; }
}
/* Pause crossfade on hover */
.hero-section.hero-cinema:hover .hero-cinema-slide {
animation-play-state: paused;
}
/* ---------- Overlay — RTL-aware: right side (text) is darkest ---------- */
.hero-cinema-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to left,
rgba(6, 12, 26, 0.90) 0%,
rgba(6, 12, 26, 0.68) 42%,
rgba(6, 12, 26, 0.28) 72%,
transparent 100%
),
linear-gradient(
to top,
rgba(6, 12, 26, 0.78) 0%,
transparent 50%
);
}
.hero-cinema--no-photo .hero-cinema-overlay {
background: rgba(6, 12, 26, 0.94);
}
/* ---------- Noise texture ---------- */
.hero-cinema-noise {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0.042;
mix-blend-mode: overlay;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- Content layer above photo ---------- */
.hero-cinema .hero-container {
position: relative;
z-index: 3;
}
/* Text shadow for legibility on photographic backgrounds */
.hero-section.hero-cinema .hero-title {
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.60);
}
.hero-section.hero-cinema .hero-subtitle {
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}
/* ---------- Micro trust line ---------- */
.hero-section.hero-cinema .hero__trust-line {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.52);
letter-spacing: 0.015em;
margin-bottom: var(--space-8);
}
/* ---------- Move Control Card ---------- */
.hero-move-card {
align-self: center;
justify-self: center;
max-width: 272px;
width: 100%;
padding: var(--space-5);
background: rgba(6, 12, 26, 0.76);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-xl);
backdrop-filter: blur(22px) saturate(1.4);
-webkit-backdrop-filter: blur(22px) saturate(1.4);
box-shadow:
0 24px 48px -12px rgba(0, 0, 0, 0.60),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
animation: hero-float 7s ease-in-out infinite;
}
.hero-move-card__header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-move-card__icon {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: hsla(42, 60%, 50%, 0.14);
color: var(--color-primary-300, hsl(358, 70%, 62%));
flex-shrink: 0;
}
.hero-move-card__title {
color: var(--text-primary);
font-size: var(--font-size-base);
font-weight: 700;
}
.hero-move-card__rows {
list-style: none;
margin: 0 0 var(--space-4) 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.hero-move-card__row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
}
.hero-move-card__key { color: rgba(255, 255, 255, 0.42); }
.hero-move-card__val { color: var(--text-primary); font-weight: 600; }
.hero-move-card__val--free { color: hsl(142, 68%, 52%); }
.hero-move-card__status {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-xs);
font-weight: 600;
color: rgba(255, 255, 255, 0.68);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.hero-move-card__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
background: hsl(142, 68%, 50%);
box-shadow: 0 0 0 0 hsla(142, 68%, 50%, 0.55);
animation: hero-pulse 2.2s ease-out infinite;
}
/* ---------- Slide scene label (glass pill) ---------- */
.hero-cinema-label-wrap {
position: absolute;
bottom: 86px;
inset-inline-start: var(--space-8);
z-index: 4;
display: flex;
align-items: center;
pointer-events: none;
}
.hero-cinema-label {
display: none;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius-full);
backdrop-filter: blur(16px) saturate(1.3);
-webkit-backdrop-filter: blur(16px) saturate(1.3);
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.86);
letter-spacing: 0.01em;
white-space: nowrap;
opacity: 0;
transition: opacity 0.5s ease;
}
.hero-cinema-label.is-active {
display: inline-flex;
opacity: 1;
}
.hero-cinema-label__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: var(--color-primary-400, hsl(358, 60%, 55%));
box-shadow: 0 0 0 0 hsla(42, 60%, 55%, 0.6);
animation: hero-pulse 2.4s ease-out infinite;
}
/* ---------- Slide indicator dots ---------- */
.hero-cinema-dots {
position: absolute;
bottom: 86px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: var(--space-2);
align-items: center;
}
.hero-cinema-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.32);
cursor: pointer;
transition: background 0.4s ease, width 0.35s ease, border-radius 0.35s ease;
}
.hero-cinema-dot:focus-visible {
outline: 2px solid var(--color-primary-400);
outline-offset: 3px;
}
.hero-cinema-dot.is-active {
background: var(--color-primary-400, hsl(358, 60%, 55%));
width: 22px;
border-radius: 4px;
}
/* ---------- Reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
.hero-cinema-slide { animation: none !important; opacity: 0 !important; }
.hero-cinema-slide--1 { opacity: 1 !important; }
.hero-move-card { animation: none !important; }
.hero-move-card__status-dot { animation: none !important; }
.hero-cinema-dot { transition: none !important; }
.hero-cinema-label { transition: none !important; }
.hero-cinema-label--1 { display: inline-flex !important; opacity: 1 !important; }
.hero-cinema-label__dot { animation: none !important; }
}
/* ---------- Tablet ≤1024px ---------- */
@media (max-width: 1024px) {
.hero-section.hero-cinema { min-height: 100svh; }
.hero-cinema .hero-container { grid-template-columns: 1fr; gap: var(--space-8); }
.hero-move-card { max-width: 360px; margin: 0 auto; animation: none; }
}
/* ---------- Mobile ≤768px ---------- */
@media (max-width: 768px) {
.hero-section.hero-cinema { min-height: 100svh; padding-bottom: var(--space-16); }
.hero-cinema-overlay {
background:
rgba(6, 12, 26, 0.70),
linear-gradient(to top, rgba(6, 12, 26, 0.80) 0%, transparent 55%);
}
.hero-move-card { display: none; }
.hero-cinema-label-wrap { display: none; }
.hero-cinema-dots { bottom: 60px; }
}
/* ---------- Mobile ≤480px ---------- */
@media (max-width: 480px) {
.hero-cinema-dots { bottom: 52px; }
}
/* ==========================================================================
Services Section — Premium
========================================================================== */
/* ==========================================================================
Services Section — Premium
========================================================================== */
/* ---------- Section wrapper ---------- */
.svc-section {
background: var(--bg-body);
padding: var(--space-20) 0;
position: relative;
overflow: hidden;
}
/* Ambient glow top-end corner */
.svc-section::before {
content: '';
position: absolute;
top: -200px;
inset-inline-end: -180px;
width: 680px;
height: 680px;
border-radius: 50%;
background: radial-gradient(circle, hsla(42, 60%, 45%, 0.07), transparent 65%);
pointer-events: none;
z-index: 0;
}
/* ---------- Section header ---------- */
.svc-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-12);
position: relative;
z-index: 1;
}
.svc-header-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
background: linear-gradient(135deg, hsla(42, 60%, 50%, 0.14), hsla(42, 60%, 50%, 0.06));
border: 1px solid hsla(42, 60%, 55%, 0.28);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary-400);
margin-bottom: var(--space-4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.svc-header-badge-icon { display: inline-flex; color: currentColor; }
.svc-header-title {
font-size: clamp(1.75rem, 3.8vw, 2.75rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.svc-title-accent {
background: linear-gradient(135deg, var(--color-primary-300, hsl(358, 70%, 55%)), var(--color-primary-500, hsl(358, 60%, 42%)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.svc-header-subtitle {
font-size: clamp(.95rem, 1.6vw, 1.1rem); /* wider vw range so it scales cleanly */
color: var(--text-secondary);
line-height: 1.75;
max-width: 580px;
margin: 0 auto;
}
/* ---------- Scroll-entrance (uses existing initScrollAnimations JS) ---------- */
.svc-header-badge.animate-on-scroll,
.svc-header-title.animate-on-scroll,
.svc-header-subtitle.animate-on-scroll,
.svc-card.animate-on-scroll,
.svc-cta.animate-on-scroll {
opacity: 0;
transform: translateY(22px);
transition:
opacity .6s cubic-bezier(.2, .7, .2, 1) var(--card-delay, 0ms),
transform .6s cubic-bezier(.2, .7, .2, 1) var(--card-delay, 0ms);
}
.svc-header-badge.animate-on-scroll.animated,
.svc-header-title.animate-on-scroll.animated,
.svc-header-subtitle.animate-on-scroll.animated,
.svc-card.animate-on-scroll.animated,
.svc-cta.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- Grid ---------- */
.svc-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-10);
}
/* ---------- Card ---------- */
.svc-card {
position: relative;
background: var(--bg-warm, #151923);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.svc-card:hover {
transform: translateY(-6px);
border-color: hsla(42, 60%, 55%, 0.35);
box-shadow:
0 20px 50px -15px rgba(0, 0, 0, 0.45),
0 0 0 1px hsla(42, 60%, 55%, 0.12) inset,
0 0 40px -20px hsla(42, 60%, 45%, 0.25);
}
/* Featured (first) card — gold top border, always visible */
.svc-card--featured {
border-top: 3px solid var(--color-gold-500, #9D262B);
border-color: hsla(42, 60%, 55%, 0.18);
box-shadow: var(--shadow-card);
}
.svc-card--featured:hover {
box-shadow:
0 24px 60px -16px rgba(0, 0, 0, 0.5),
0 0 0 1px hsla(42, 60%, 55%, 0.22) inset,
0 0 60px -20px hsla(42, 60%, 45%, 0.35);
}
/* Card number watermark — removed (RTL context + visual noise) */
.svc-card-num {
display: none;
font-size: 3.5rem;
font-weight: 900;
line-height: 1;
color: var(--text-primary);
opacity: 0.055;
pointer-events: none;
user-select: none;
transition: opacity .3s ease;
font-feature-settings: 'tnum';
}
.svc-card:hover .svc-card-num { opacity: 0.09; }
/* Accent bar — 40px visible at rest, expands full on hover */
.svc-accent-bar {
position: absolute;
top: 0;
inset-inline-start: 0;
width: 40px;
height: 3px;
background: linear-gradient(to left, var(--color-primary-500), var(--color-primary-300));
border-radius: 0 0 3px 3px;
transition: width .45s cubic-bezier(.2, .7, .2, 1);
pointer-events: none;
}
.svc-card:hover .svc-accent-bar,
.svc-card--featured .svc-accent-bar { width: 100%; }
/* ---------- Icon ring ---------- */
.svc-icon-wrap {
display: inline-grid;
place-items: center;
width: 62px;
height: 62px;
border-radius: var(--radius-lg);
background: rgba(157, 38, 43, 0.18);
color: var(--color-gold-400, #D25746);
margin-bottom: var(--space-4);
flex-shrink: 0;
transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.svc-card:hover .svc-icon-wrap {
background: var(--color-primary-500);
color: #fff;
transform: scale(1.07) rotate(-4deg);
box-shadow: 0 10px 30px -10px hsla(42, 60%, 42%, 0.6);
}
/* ---------- Text ---------- */
.svc-card-title {
font-size: var(--font-size-lg);
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.svc-card-title a {
color: inherit;
text-decoration: none;
transition: color .2s ease;
}
.svc-card-title a:hover { color: var(--color-primary-400); }
.svc-card-desc {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.75;
flex-grow: 1;
margin-bottom: var(--space-5);
}
/* ---------- Link ---------- */
.svc-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-primary-400);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
margin-top: auto;
transition: color .2s ease, gap .2s ease;
}
.svc-link:hover {
color: var(--color-primary-300);
gap: var(--space-3);
}
.svc-link-arrow {
display: inline-flex;
transition: transform .25s ease;
}
.svc-link:hover .svc-link-arrow { transform: translateX(-4px); }
/* ---------- CTA row ---------- */
.svc-cta {
text-align: center;
position: relative;
z-index: 1;
}
.svc-cta-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: var(--space-2);
box-shadow: 0 10px 30px -10px hsla(42, 60%, 42%, 0.5);
transition: transform .25s ease, box-shadow .25s ease;
}
.svc-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px hsla(42, 60%, 42%, 0.65);
}
.svc-cta-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
transform: translateX(-120%);
transition: transform .55s ease;
}
.svc-cta-btn:hover .svc-cta-shimmer { transform: translateX(120%); }
.svc-cta-icon {
display: inline-flex;
transition: transform .25s ease;
}
.svc-cta-btn:hover .svc-cta-icon { transform: translateX(-4px); }
/* ---------- Card with thumbnail (svc-card--with-image) ---------- */
.svc-card--with-image {
padding: 0;
}
.svc-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--color-navy-900);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.svc-card__media-link {
display: block;
height: 100%;
}
.svc-card__image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.01);
transition: transform 0.5s ease;
}
.svc-card--with-image:hover .svc-card__image {
transform: scale(1.07);
}
.svc-card__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 15, 30, 0.06) 0%, rgba(10, 15, 30, 0.72) 100%),
linear-gradient(90deg, rgba(157, 38, 43, 0.14), transparent 46%);
pointer-events: none;
}
.svc-card__icon-on-image {
position: absolute;
bottom: 14px;
inset-inline-start: 16px;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: var(--radius-full);
color: var(--color-gold-500);
background: rgba(10, 15, 30, 0.82);
border: 1px solid rgba(157, 38, 43, 0.35);
backdrop-filter: blur(10px);
}
.svc-card__icon-on-image svg {
width: 24px;
height: 24px;
}
/* Body wrapper - used for image cards and non-image WP query cards */
.svc-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px 24px 24px;
}
/* Non-image cards: body has no extra padding (card already has padding) */
.svc-card:not(.svc-card--with-image) .svc-card__body {
padding: 0;
flex: 1;
}
/* ---------- Responsive ---------- */
/* ── Tablet landscape: ≤1024px ──────────────────────────────────────────── */
@media (max-width: 1024px) {
.svc-section { padding: var(--space-16) 0; }
.svc-grid { gap: var(--space-5); }
}
/* ── Tablet portrait: ≤900px — switch to 2 cols ────────────────────────── */
@media (max-width: 900px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc-card-num { font-size: 2.8rem; } /* prevent overflow in narrower cards */
}
/* ── Small tablet: ≤768px ───────────────────────────────────────────────── */
@media (max-width: 768px) {
.svc-section { padding: var(--space-14) 0; }
.svc-header { margin-bottom: var(--space-8); }
.svc-card { padding: var(--space-5); }
.svc-icon-wrap { width: 54px; height: 54px; }
}
/* ── Mobile large: ≤560px — single column ──────────────────────────────── */
@media (max-width: 560px) {
.svc-section { padding: var(--space-12) 0; }
.svc-grid { grid-template-columns: 1fr; gap: var(--space-4); }
.svc-header { margin-bottom: var(--space-7); }
.svc-card-num { font-size: 2.4rem; }
.svc-card-desc { margin-bottom: var(--space-4); }
}
/* ── Mobile: ≤480px ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.svc-header-title { letter-spacing: -0.01em; }
.svc-card { padding: var(--space-4); }
.svc-icon-wrap { width: 50px; height: 50px; margin-bottom: var(--space-3); }
.svc-card-title { font-size: var(--font-size-base); }
.svc-card-desc { font-size: .82rem; }
/* CTA full-width on small phones */
.svc-cta { padding: 0 var(--space-4); }
.svc-cta-btn { width: 100%; justify-content: center; }
}
/* ── Tiny: ≤360px ───────────────────────────────────────────────────────── */
@media (max-width: 360px) {
.svc-section { padding: var(--space-10) 0; }
.svc-header-title { font-size: clamp(1.5rem, 7vw, 1.9rem); }
.svc-card { padding: var(--space-3) var(--space-4); }
.svc-card-num { font-size: 2rem; }
.svc-icon-wrap { width: 44px; height: 44px; }
}
/* ── Touch devices — disable translate lift (no hover intent) ───────────── */
@media (hover: none) {
.svc-card:hover { transform: none; }
.svc-card:hover .svc-card-num { opacity: 0.055; }
/* Keep the accent bar always visible on featured; hide on others */
.svc-card:not(.svc-card--featured):hover .svc-accent-bar { width: 0; }
/* Keep icon glow off on tap */
.svc-card:hover .svc-icon-wrap {
background: hsla(42, 60%, 50%, 0.1);
color: var(--color-primary-400);
transform: none;
box-shadow: none;
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.svc-header-badge.animate-on-scroll,
.svc-header-title.animate-on-scroll,
.svc-header-subtitle.animate-on-scroll,
.svc-card.animate-on-scroll,
.svc-cta.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
.svc-card,
.svc-icon-wrap,
.svc-accent-bar,
.svc-link-arrow,
.svc-cta-btn,
.svc-cta-shimmer { transition: none !important; animation: none !important; }
}
/* ==========================================================================
Services Section — Light Editorial Redesign (svc-section--light)
========================================================================== */
/* ── Section light modifier ───────────────────────────────────────────────── */
.svc-section--light {
background-color: var(--color-sand-50, #F5F0E8);
}
.svc-section--light::before {
background: radial-gradient(circle, hsla(30, 40%, 60%, 0.05), transparent 65%);
}
/* ── Two-column editorial layout ─────────────────────────────────────────── */
.svc-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
/* ── Intro column ─────────────────────────────────────────────────────────── */
.svc-intro-col {
position: sticky;
top: 120px;
}
.svc-section--light .svc-header-badge {
background: rgba(128, 29, 35, 0.10);
border-color: rgba(128, 29, 35, 0.25);
color: var(--color-copper-500, #9D262B);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.svc-section--light .svc-header-badge-icon { color: var(--color-copper-500, #9D262B); }
.svc-section--light .svc-header-title {
color: var(--color-navy-900, #0F1628);
}
.svc-section--light .svc-title-accent {
background: linear-gradient(135deg, var(--color-copper-400, #D25746), var(--color-copper-500, #9D262B));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.svc-section--light .svc-header-subtitle {
color: var(--color-navy-700, #334155);
max-width: none;
margin: 0 0 var(--space-7) 0;
}
.svc-section--light .svc-cta {
text-align: start;
}
/* ── Light CTA button (copper ghost) ─────────────────────────────────────── */
.svc-cta-btn--light {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1.5px solid var(--color-copper-500, #9D262B);
color: var(--color-copper-500, #9D262B);
background: transparent;
border-radius: var(--radius-full, 9999px);
padding: 10px 24px;
font-family: inherit;
font-size: var(--font-size-sm, 0.875rem);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease;
}
.svc-cta-btn--light:hover {
background: var(--color-copper-500, #9D262B);
color: #fff;
}
.svc-cta-btn--light:focus-visible {
outline: 2px solid var(--color-copper-400, #D25746);
outline-offset: 3px;
}
.svc-cta-btn--light .svc-cta-icon {
display: inline-flex;
transition: transform 0.25s ease;
}
.svc-cta-btn--light:hover .svc-cta-icon { transform: translateX(-4px); }
/* ── Grid area ────────────────────────────────────────────────────────────── */
.svc-grid-area {
display: flex;
flex-direction: column;
gap: clamp(12px, 2vw, 18px);
}
/* ── Featured grid (first 3 cards) ───────────────────────────────────────── */
.svc-featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 2vw, 20px);
}
/* ── Compact grid (remaining 6 cards) ────────────────────────────────────── */
.svc-compact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(10px, 1.5vw, 14px);
}
/* ── Featured light card ──────────────────────────────────────────────────── */
.svc-card--featured-light {
background: var(--color-warm-card, #FFFDF9) !important;
border: 1px solid rgba(128, 29, 35, 0.14) !important;
border-inline-start: 3px solid var(--color-copper-500, #9D262B) !important;
border-radius: var(--radius-lg, 12px) !important;
padding: 22px 18px 20px !important;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.svc-card--featured-light:hover {
transform: translateY(-4px) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.09), 0 0 0 1px rgba(128, 29, 35, 0.10) !important;
border-color: rgba(128, 29, 35, 0.26) !important;
border-inline-start-color: var(--color-copper-500, #9D262B) !important;
}
/* ── Service thumbnail (featured cards only) ──────────────────────────────── */
.svc-thumb {
/* Negative margins cancel the card's padding so the image fills edge-to-edge at the top. */
/* overflow:hidden on the card clips the image corners to border-radius automatically. */
margin-block-start: -22px;
margin-inline: -18px;
margin-block-end: 16px;
aspect-ratio: 16 / 9;
overflow: hidden;
flex-shrink: 0;
background: var(--color-navy-100, #e8edf4);
}
.svc-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.svc-card--featured-light:hover .svc-thumb img { transform: scale(1.04); }
/* ── Copper number badge ──────────────────────────────────────────────────── */
.svc-card-num--copper {
position: absolute;
top: 14px;
inset-inline-end: 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-copper-400, #D25746);
opacity: 0.50;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
font-feature-settings: 'tnum';
}
/* ── Light icon ring (featured) ───────────────────────────────────────────── */
.svc-icon-wrap--light {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius-md, 8px);
background: rgba(128, 29, 35, 0.10);
color: var(--color-copper-500, #9D262B);
margin-bottom: 14px;
flex-shrink: 0;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.svc-card--featured-light:hover .svc-icon-wrap--light {
background: var(--color-copper-500, #9D262B);
color: #fff;
transform: scale(1.06) rotate(-3deg);
}
/* ── Featured card title ──────────────────────────────────────────────────── */
.svc-card--featured-light .svc-card-title {
font-size: var(--font-size-base, 1rem);
color: var(--color-navy-900, #0F1628);
margin-bottom: 8px;
}
.svc-card--featured-light .svc-card-title a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.svc-card--featured-light .svc-card-title a:hover { color: var(--color-copper-500, #9D262B); }
/* ── Featured card description ────────────────────────────────────────────── */
.svc-card--featured-light .svc-card-desc {
color: var(--color-navy-700, #334155);
font-size: var(--font-size-sm, 0.875rem);
line-height: 1.7;
flex-grow: 1;
margin-bottom: 14px;
}
/* ── Featured card link ───────────────────────────────────────────────────── */
.svc-card--featured-light .svc-link {
color: var(--color-copper-500, #9D262B);
margin-top: auto;
}
.svc-card--featured-light .svc-link:hover { color: var(--color-copper-400, #D25746); }
/* ── Compact light card ───────────────────────────────────────────────────── */
.svc-card--compact-light {
background: var(--color-warm-card, #FFFDF9) !important;
border: 1px solid rgba(128, 29, 35, 0.10) !important;
border-inline-start: 2px solid var(--color-copper-500, #9D262B) !important;
border-radius: var(--radius-md, 8px) !important;
padding: 14px 12px !important;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
box-shadow: none !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.svc-card--compact-light:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07) !important;
border-color: rgba(128, 29, 35, 0.22) !important;
border-inline-start-color: var(--color-copper-500, #9D262B) !important;
}
/* ── Compact icon ring ────────────────────────────────────────────────────── */
.svc-icon-wrap--compact {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md, 8px);
background: rgba(128, 29, 35, 0.08);
color: var(--color-copper-500, #9D262B);
flex-shrink: 0;
transition: background 0.25s ease, color 0.25s ease;
}
.svc-card--compact-light:hover .svc-icon-wrap--compact {
background: var(--color-copper-500, #9D262B);
color: #fff;
}
/* ── Compact card title ───────────────────────────────────────────────────── */
.svc-card-title--compact {
font-size: var(--font-size-sm, 0.875rem);
font-weight: 600;
line-height: 1.35;
color: var(--color-navy-900, #0F1628);
margin: 0;
flex: 1;
}
.svc-card-title--compact a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.svc-card-title--compact a:hover { color: var(--color-copper-500, #9D262B); }
/* ── Animate-on-scroll for light card classes ─────────────────────────────── */
.svc-card--featured-light.animate-on-scroll,
.svc-card--compact-light.animate-on-scroll {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--card-delay, 0ms),
transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--card-delay, 0ms);
}
.svc-card--featured-light.animate-on-scroll.animated,
.svc-card--compact-light.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.svc-card--featured-light,
.svc-card--compact-light,
.svc-card--featured-light.animate-on-scroll,
.svc-card--compact-light.animate-on-scroll {
transition: none !important;
opacity: 1;
transform: none;
}
.svc-card--featured-light:hover,
.svc-card--compact-light:hover { transform: none !important; }
.svc-cta-btn--light { transition: none; }
}
/* ── Responsive: tablet ≤1024px ───────────────────────────────────────────── */
@media (max-width: 1024px) {
.svc-layout { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }
.svc-intro-col { position: static; }
.svc-featured-grid { grid-template-columns: repeat(3, 1fr); }
.svc-compact-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ── Responsive: small tablet ≤768px ─────────────────────────────────────── */
@media (max-width: 768px) {
.svc-featured-grid { grid-template-columns: repeat(2, 1fr); }
.svc-compact-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ── Responsive: mobile ≤640px ───────────────────────────────────────────── */
@media (max-width: 640px) {
.svc-featured-grid { grid-template-columns: 1fr; }
.svc-compact-grid { grid-template-columns: repeat(2, 1fr); }
.svc-cta-btn--light { width: 100%; justify-content: center; }
}
/* ── Responsive: tiny ≤400px ─────────────────────────────────────────────── */
@media (max-width: 400px) {
.svc-compact-grid { grid-template-columns: 1fr; }
}
/* ── Touch devices ────────────────────────────────────────────────────────── */
@media (hover: none) {
.svc-card--featured-light:hover { transform: none !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; }
.svc-card--compact-light:hover { transform: none !important; box-shadow: none !important; }
.svc-card--featured-light:hover .svc-icon-wrap--light,
.svc-card--compact-light:hover .svc-icon-wrap--compact {
background: rgba(128, 29, 35, 0.10);
color: var(--color-copper-500, #9D262B);
transform: none;
}
}
/* ==========================================================================
Trust Signals Section (ts-)
========================================================================== */
/* ---------- shell ---------- */
.ts-section {
position: relative;
background-color: var(--bg-surface);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: var(--space-16) 0 0;
overflow: hidden;
}
/* subtle diagonal-line CSS pattern */
.ts-pattern {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-55deg,
transparent,
transparent 28px,
rgba(255, 255, 255, 0.018) 28px,
rgba(255, 255, 255, 0.018) 29px
);
pointer-events: none;
}
/* ---------- stat counters ---------- */
.ts-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-10);
position: relative;
z-index: 1;
}
.ts-stat {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-7) var(--space-4) var(--space-6);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-2xl);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.ts-stat:hover {
transform: translateY(-4px);
border-color: rgba(157, 38, 43, 0.30);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), 0 0 28px rgba(157, 38, 43, 0.1);
}
.ts-stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-xl);
background: rgba(157, 38, 43, 0.10);
border: 1px solid rgba(157, 38, 43, 0.22);
color: var(--color-primary-400);
margin-bottom: var(--space-4);
transition: background 0.3s ease;
flex-shrink: 0;
}
.ts-stat:hover .ts-stat-icon {
background: rgba(157, 38, 43, 0.20);
}
.ts-stat-icon svg { width: 22px; height: 22px; }
.ts-stat-number-wrap { line-height: 1; margin-bottom: var(--space-2); }
.ts-stat-value {
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: var(--font-weight-bold);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.ts-stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
line-height: 1.4;
}
/* decorative bottom line that sweeps in on hover */
.ts-stat-line {
position: absolute;
bottom: 0;
inset-inline-start: 20%;
inset-inline-end: 20%;
height: 2px;
background: var(--gradient-primary);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.35s ease;
}
.ts-stat:hover .ts-stat-line { transform: scaleX(1); }
/* ---------- credential pills ---------- */
.ts-creds {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-10);
position: relative;
z-index: 1;
}
.ts-cred-pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.22);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ts-cred-pill:hover {
background: rgba(157, 38, 43, 0.16);
border-color: rgba(157, 38, 43, 0.45);
transform: translateY(-2px);
}
.ts-cred-icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--color-primary-400);
}
.ts-cred-icon svg { width: 18px; height: 18px; }
.ts-cred-text { color: var(--text-primary); }
/* ---------- ticker strip ---------- */
.ts-ticker-wrap {
position: relative;
z-index: 1;
width: 100%;
overflow: hidden;
background: linear-gradient(
to bottom,
rgba(157, 38, 43, 0.10) 0%,
rgba(157, 38, 43, 0.07) 100%
);
border-top: 1px solid rgba(157, 38, 43, 0.20);
padding: var(--space-3) 0;
/* fade edges */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
black 8%,
black 92%,
transparent 100%
);
}
.ts-ticker { overflow: hidden; }
.ts-ticker-track {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
/* RTL: scroll direction right→left visually = animation to positive X in RTL */
animation: ts-ticker-scroll 30s linear infinite;
}
@keyframes ts-ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.ts-ticker-item {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-primary-300);
padding: 0 var(--space-4);
}
.ts-ticker-sep {
color: rgba(157, 38, 43, 0.40);
padding: 0 var(--space-2);
font-size: var(--font-size-xs);
}
/* pause on hover */
.ts-ticker-wrap:hover .ts-ticker-track { animation-play-state: paused; }
/* ---------- scroll animations ---------- */
.ts-section .ts-stat.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ts-section .ts-stat.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.ts-section .ts-creds.animate-on-scroll,
.ts-section .ts-ticker-wrap.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ts-section .ts-creds.animate-on-scroll.animated,
.ts-section .ts-ticker-wrap.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- responsive ---------- */
/* ≤1024px */
@media (max-width: 1024px) {
.ts-stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}
/* ≤900px */
@media (max-width: 900px) {
.ts-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ≤640px */
@media (max-width: 640px) {
.ts-section { padding-top: var(--space-12); }
.ts-stats { gap: var(--space-3); }
.ts-stat { padding: var(--space-5) var(--space-3); }
.ts-creds { gap: var(--space-2); }
.ts-cred-pill { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-3); }
}
/* ≤480px */
@media (max-width: 480px) {
.ts-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.ts-stat-icon { width: 38px; height: 38px; }
}
/* ≤360px */
@media (max-width: 360px) {
.ts-stats { grid-template-columns: 1fr 1fr; }
.ts-stat { padding: var(--space-4) var(--space-2); }
}
/* touch */
@media (hover: none) {
.ts-stat:hover,
.ts-cred-pill:hover { transform: none; box-shadow: none; }
.ts-stat:hover .ts-stat-line { transform: scaleX(0); }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ts-ticker-track { animation: none !important; }
.ts-stat-line { transition: none !important; }
.ts-section .ts-stat.animate-on-scroll,
.ts-section .ts-creds.animate-on-scroll,
.ts-section .ts-ticker-wrap.animate-on-scroll {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================================
Testimonials Section (tm-)
========================================================================== */
/* ---------- shell ---------- */
.tm-section {
position: relative;
background-color: var(--bg-surface);
padding: var(--space-20) 0;
overflow: hidden;
}
.tm-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.tm-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.18;
}
.tm-blob--1 {
width: 500px;
height: 500px;
background: radial-gradient(circle, hsl(358 53% 28%) 0%, transparent 70%);
top: -120px;
inset-inline-end: 10%;
animation: tm-blob-drift 9s ease-in-out infinite alternate;
}
.tm-blob--2 {
width: 380px;
height: 380px;
background: radial-gradient(circle, hsl(358 53% 18%) 0%, transparent 70%);
bottom: -80px;
inset-inline-start: 5%;
animation: tm-blob-drift 12s ease-in-out infinite alternate-reverse;
}
@keyframes tm-blob-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 20px) scale(1.1); }
}
.tm-section .container { position: relative; z-index: 1; }
/* ---------- header ---------- */
.tm-header {
text-align: center;
max-width: 600px;
margin: 0 auto var(--space-12);
}
.tm-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.tm-badge svg { flex-shrink: 0; }
.tm-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.25;
margin-bottom: var(--space-4);
}
.tm-title-accent {
display: block;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.tm-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ---------- slider shell ---------- */
.tm-slider {
position: relative;
overflow: hidden;
margin-bottom: var(--space-8);
/* reserve space for arrows */
padding-inline: var(--space-12);
}
/* ---------- track ---------- */
.tm-track {
display: flex;
gap: var(--space-5);
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
/* RTL: direction managed by JS translateX */
}
/* ---------- slide card ---------- */
.tm-slide {
flex: 0 0 calc(33.333% - var(--space-4));
min-width: 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-inline-start: 4px solid var(--color-copper-500, #9D262B);
border-radius: var(--radius-2xl);
padding: var(--space-7) var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-4);
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, border-inline-start-color 0.3s ease, box-shadow 0.3s ease;
}
.tm-slide::before {
content: '';
position: absolute;
inset-block: 20%;
inset-inline-start: 0;
width: 3px;
background: var(--gradient-primary);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 0.3s ease, inset-block 0.35s ease;
}
.tm-slide.tm-slide--active {
border-color: rgba(157, 38, 43, 0.30);
border-inline-start-color: var(--color-gold-500, #9D262B);
box-shadow: 0 20px 56px rgba(0,0,0,0.35), 0 0 28px rgba(157, 38, 43,0.10);
}
.tm-slide.tm-slide--active::before {
opacity: 1;
inset-block: 10%;
}
/* quote mark */
.tm-quote-mark {
color: var(--color-copper-500, #9D262B);
width: 32px;
height: 24px;
flex-shrink: 0;
}
.tm-quote-mark svg { width: 32px; height: 24px; }
/* stars */
.tm-stars {
display: flex;
gap: 3px;
}
.tm-star svg {
width: 14px;
height: 14px;
color: rgba(255,255,255,0.15);
fill: currentColor;
transition: color 0.2s ease;
}
.tm-star--on svg {
color: #f59e0b;
}
/* review text */
.tm-text {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
font-style: italic;
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
transition: color 0.3s ease;
}
.tm-slide.tm-slide--active .tm-text { color: var(--text-primary); }
/* author footer */
.tm-author {
display: flex;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(255,255,255,0.07);
margin-top: auto;
}
.tm-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
}
.tm-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tm-avatar-initial {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(128, 29, 35, 0.20);
color: var(--color-copper-400, #D25746);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base);
border-radius: 50%;
}
.tm-author-name {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: 2px;
}
.tm-author-meta {
display: block;
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
/* ---------- arrows ---------- */
.tm-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.tm-arrow svg { width: 20px; height: 20px; pointer-events: none; }
.tm-arrow:hover {
background: rgba(157, 38, 43,0.20);
border-color: rgba(157, 38, 43,0.45);
}
/* RTL: prev = inline-start arrow pointing right, next = inline-end pointing left */
.tm-arrow--prev {
inset-inline-start: 0;
transform: translateY(-50%) rotate(-90deg);
}
.tm-arrow--prev:hover { transform: translateY(-50%) rotate(-90deg) scale(1.1); }
.tm-arrow--next {
inset-inline-end: 0;
transform: translateY(-50%) rotate(90deg);
}
.tm-arrow--next:hover { transform: translateY(-50%) rotate(90deg) scale(1.1); }
.tm-arrow:disabled {
opacity: 0.3;
pointer-events: none;
}
/* ---------- dots ---------- */
.tm-dots {
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-6);
}
.tm-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.18);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}
.tm-dot--active {
width: 28px;
border-radius: 4px;
background: var(--color-primary-500);
}
/* ---------- footer: progress + all-link ---------- */
.tm-footer {
display: flex;
align-items: center;
gap: var(--space-6);
margin-top: var(--space-6);
}
.tm-progress-wrap {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
}
.tm-progress-bar {
height: 100%;
background: var(--gradient-primary);
border-radius: 2px;
width: 0%;
transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tm-all-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary-400);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, gap 0.25s ease;
}
.tm-all-link svg {
width: 16px;
height: 16px;
rotate: 135deg;
transition: transform 0.25s ease;
}
.tm-all-link:hover { color: var(--color-primary-300); }
.tm-all-link:hover svg { transform: translateX(-3px); }
/* ---------- scroll animations ---------- */
.tm-section .tm-header.animate-on-scroll,
.tm-section .tm-footer.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.tm-section .tm-header.animate-on-scroll.animated,
.tm-section .tm-footer.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.tm-section .tm-slider.animate-on-scroll {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.tm-section .tm-slider.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- responsive ---------- */
/* ≤1100px: 2 visible slides */
@media (max-width: 1100px) {
.tm-slide { flex: 0 0 calc(50% - var(--space-3)); }
}
/* ≤768px: 1 slide, smaller padding */
@media (max-width: 768px) {
.tm-section { padding: var(--space-14) 0; }
.tm-slider { padding-inline: var(--space-10); }
.tm-slide { flex: 0 0 100%; }
.tm-arrow { width: 38px; height: 38px; }
}
/* ≤640px */
@media (max-width: 640px) {
.tm-slider { padding-inline: var(--space-8); }
.tm-footer { flex-direction: column; gap: var(--space-3); align-items: stretch; }
.tm-all-link { justify-content: center; }
}
/* ≤480px */
@media (max-width: 480px) {
.tm-slider { padding-inline: var(--space-6); }
.tm-slide { padding: var(--space-5) var(--space-4); }
.tm-arrow { width: 34px; height: 34px; }
}
/* touch: disable non-essential hover */
@media (hover: none) {
.tm-arrow:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); transform: translateY(-50%) rotate(var(--rot, -90deg)); }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.tm-track { transition: none !important; }
.tm-blob { animation: none !important; }
.tm-dot, .tm-progress-bar { transition: none !important; }
.tm-section .tm-header.animate-on-scroll,
.tm-section .tm-slider.animate-on-scroll,
.tm-section .tm-footer.animate-on-scroll {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ── tm-section: premium dark visual enhancement ─────────────────── */
/* Explicit dark navy — sits after light Areas, returns to dark rhythm */
.tm-section {
background-color: #0C1524;
}
/* Warm muted beige review text */
.tm-text {
color: rgba(210, 200, 182, 0.76);
}
.tm-slide.tm-slide--active .tm-text {
color: var(--color-sand-50, #F5F0E8);
}
/* Warm sand author name */
.tm-author-name {
color: var(--color-sand-50, #F5F0E8);
}
/* Copper-tinted author divider */
.tm-author {
border-top-color: rgba(157, 38, 43, 0.15);
}
/* Copper-tinted navigation dots */
.tm-dot {
background: rgba(157, 38, 43, 0.22);
}
.tm-dot--active {
background: var(--color-copper-500, #9D262B);
}
/* Copper arrows */
.tm-arrow {
background: rgba(157, 38, 43, 0.08);
border-color: rgba(157, 38, 43, 0.22);
color: var(--color-sand-50, #F5F0E8);
}
.tm-arrow:hover {
background: rgba(157, 38, 43, 0.22);
border-color: rgba(157, 38, 43, 0.50);
}
/* Warm progress track */
.tm-progress-wrap {
background: rgba(157, 38, 43, 0.12);
}
/* "All reviews" link — copper */
.tm-all-link {
color: var(--color-copper-500, #9D262B);
}
.tm-all-link:hover {
color: var(--color-copper-400, #D25746);
}
/* Touch: restore arrow copper base (no hover scale) */
@media (hover: none) {
.tm-arrow:hover {
background: rgba(157, 38, 43, 0.08);
border-color: rgba(157, 38, 43, 0.22);
transform: translateY(-50%) rotate(var(--rot, -90deg));
}
}
/* ──────────────────────────────────────────────────────────────────── */
/* ==========================================================================
CTA Section (ct-)
========================================================================== */
/* ---------- shell ---------- */
.ct-section {
position: relative;
background: #050c0f;
padding: var(--space-24, 7rem) 0;
overflow: hidden;
isolation: isolate;
border-top: 1px solid var(--border-default, rgba(201,146,42,0.12));
}
/* ---------- background layers ---------- */
.ct-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
/* mesh grid */
.ct-mesh {
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(157, 38, 43,0.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(157, 38, 43,0.07) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
}
/* diagonal accent lines — removed (visual noise) */
.ct-lines {
display: none;
}
/* glowing orbs */
.ct-orb {
position: absolute;
border-radius: 50%;
filter: blur(100px);
}
.ct-orb--1 {
width: 640px;
height: 640px;
background: radial-gradient(circle, hsl(358 60% 35% / 0.45) 0%, transparent 70%);
top: -220px;
inset-inline-end: -120px;
animation: ct-orb-drift 14s ease-in-out infinite alternate;
}
.ct-orb--2 {
width: 480px;
height: 480px;
background: radial-gradient(circle, hsl(215 65% 40% / 0.28) 0%, transparent 70%);
bottom: -160px;
inset-inline-start: -80px;
animation: ct-orb-drift 18s ease-in-out infinite alternate-reverse;
}
.ct-orb--3 {
display: none;
}
@keyframes ct-orb-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 20px) scale(1.12); }
}
/* ---------- content wrapper ---------- */
.ct-section .container { position: relative; z-index: 1; }
.ct-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
}
/* ---------- badge ---------- */
.ct-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-5);
background: rgba(157, 38, 43, 0.14);
border: 1px solid rgba(157, 38, 43, 0.35);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.05em;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.ct-badge::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
transform: translateX(-120%);
animation: ct-badge-shine 3.5s ease-in-out infinite;
}
@keyframes ct-badge-shine {
0%, 60%, 100% { transform: translateX(-120%); }
30% { transform: translateX(120%); }
}
.ct-badge svg { flex-shrink: 0; }
/* ---------- title ---------- */
.ct-title {
font-size: clamp(2rem, 5vw, 3.25rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
.ct-title-accent {
display: block;
color: var(--color-gold-500, #9D262B);
background: none;
-webkit-text-fill-color: unset;
}
/* ---------- subtitle ---------- */
.ct-subtitle {
font-size: clamp(1rem, 1.6vw, 1.15rem);
color: rgba(255, 255, 255, 0.7);
line-height: 1.75;
max-width: 560px;
margin: 0;
}
/* ---------- action buttons ---------- */
.ct-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
.ct-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-8);
border-radius: var(--radius-full);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
white-space: nowrap;
}
.ct-btn svg { flex-shrink: 0; }
/* shimmer sweep layer — slow auto-cycle (4s), not hover-triggered */
.ct-btn-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.22) 50%, transparent 62%);
pointer-events: none;
border-radius: inherit;
animation: ct-btn-sweep 4s ease-in-out infinite;
}
@keyframes ct-btn-sweep {
0% { transform: translateX(-130%); }
40%, 100% { transform: translateX(130%); }
}
/* WhatsApp primary */
.ct-btn--wa {
background: linear-gradient(135deg, hsl(142, 72%, 48%), hsl(142, 68%, 38%));
color: #fff;
box-shadow:
0 12px 36px -10px hsl(142, 68%, 32% / 0.65),
0 0 0 1px hsl(142, 70%, 55% / 0.20) inset;
}
.ct-btn--wa:hover {
transform: translateY(-3px);
box-shadow:
0 20px 48px -10px hsl(142, 68%, 32% / 0.75),
0 0 0 1px hsl(142, 70%, 60% / 0.30) inset;
}
/* Phone secondary */
.ct-btn--tel {
background: rgba(255, 255, 255, 0.08);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ct-btn--tel:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(157, 38, 43, 0.55);
color: var(--color-gold-300, #E88770);
transform: translateY(-3px);
box-shadow: 0 14px 36px -10px rgba(0,0,0,0.45);
}
/* ---------- trust chips ---------- */
.ct-trust {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
}
.ct-trust-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-full);
color: rgba(255, 255, 255, 0.75);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ct-trust-item svg {
width: 14px;
height: 14px;
color: var(--color-primary-400);
flex-shrink: 0;
}
.ct-trust-item:hover {
background: rgba(157, 38, 43, 0.12);
border-color: rgba(157, 38, 43, 0.35);
color: #fff;
}
/* ---------- stats row ---------- */
.ct-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: var(--space-6) var(--space-8);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-2xl);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
width: 100%;
max-width: 480px;
}
.ct-stat {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
}
.ct-stat-divider {
width: 1px;
height: 40px;
background: rgba(255, 255, 255, 0.12);
flex-shrink: 0;
}
.ct-stat-value {
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--color-gold-300, #E88770), var(--color-gold-500, #9D262B));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ct-stat-label {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
}
/* ---------- scroll animations ---------- */
.ct-section .animate-on-scroll {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ct-section .animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- responsive ---------- */
/* ≤1024px */
@media (max-width: 1024px) {
.ct-section { padding: var(--space-20) 0; }
}
/* ≤768px */
@media (max-width: 768px) {
.ct-section { padding: var(--space-16) 0; }
.ct-actions { flex-direction: column; align-items: stretch; }
.ct-btn { width: 100%; }
}
/* ≤640px */
@media (max-width: 640px) {
.ct-inner { gap: var(--space-5); }
.ct-trust { gap: var(--space-2); }
.ct-trust-item { font-size: var(--font-size-xs); padding: var(--space-2) var(--space-3); }
.ct-stats { padding: var(--space-5) var(--space-5); }
}
/* ≤480px */
@media (max-width: 480px) {
.ct-section { padding: var(--space-14) 0; }
.ct-title { letter-spacing: -0.01em; }
.ct-btn { padding: var(--space-3) var(--space-6); }
.ct-stats { max-width: 100%; }
.ct-stat-value { font-size: 1.35rem; }
}
/* ≤360px */
@media (max-width: 360px) {
.ct-section { padding: var(--space-12) 0; }
.ct-trust { display: grid; grid-template-columns: 1fr 1fr; }
.ct-trust-item { justify-content: center; }
}
/* touch */
@media (hover: none) {
.ct-btn:hover { transform: none; }
.ct-trust-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.75); }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ct-orb { animation: none !important; }
.ct-badge::before { animation: none !important; }
.ct-title-accent { animation: none !important; }
.ct-btn-shimmer { transition: none !important; }
.ct-section .animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================================
Recent Posts Section (rp-)
========================================================================== */
/* ---------- shell ---------- */
.rp-section {
position: relative;
background-color: var(--bg-surface);
padding: var(--space-20) 0;
overflow: hidden;
}
.rp-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.rp-blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.10;
}
.rp-blob--1 {
width: 520px;
height: 520px;
background: radial-gradient(circle, hsl(358 53% 32%) 0%, transparent 70%);
top: -110px;
inset-inline-end: -80px;
animation: rp-blob-drift 12s ease-in-out infinite alternate;
}
.rp-blob--2 {
width: 420px;
height: 420px;
background: radial-gradient(circle, hsl(220 55% 42%) 0%, transparent 70%);
bottom: -90px;
inset-inline-start: -70px;
animation: rp-blob-drift 16s ease-in-out infinite alternate-reverse;
}
@keyframes rp-blob-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(20px, 14px) scale(1.06); }
}
.rp-section .container { position: relative; z-index: 1; }
/* ---------- header ---------- */
.rp-header {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-12);
}
.rp-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.rp-badge svg { flex-shrink: 0; }
.rp-title {
font-size: clamp(1.9rem, 4vw, 2.75rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-4);
}
.rp-title-accent {
display: block;
background: linear-gradient(
135deg,
var(--color-primary-300, hsl(358, 70%, 68%)) 0%,
var(--color-primary-500, hsl(358, 53%, 43%)) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rp-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
}
/* ---------- grid ---------- */
.rp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-10);
}
/* ---------- card ---------- */
.rp-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-2xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.rp-card:hover {
transform: translateY(-7px);
border-color: rgba(157, 38, 43, 0.32);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.32), 0 0 30px rgba(157, 38, 43, 0.08);
}
/* featured first card */
.rp-card--featured {
border-color: rgba(157, 38, 43, 0.18);
background: rgba(157, 38, 43, 0.025);
}
/* ---------- media ---------- */
.rp-card-media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
flex-shrink: 0;
}
.rp-card-img-link {
display: block;
width: 100%;
height: 100%;
}
.rp-card-img {
width: 100%;
height: 100%;
}
.rp-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rp-card:hover .rp-card-img img { transform: scale(1.08); }
/* placeholder */
.rp-card-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, hsl(358 53% 10%) 0%, hsl(220 40% 13%) 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.18);
}
/* category chip (overlaid on media, sibling to img-link) */
.rp-cat {
position: absolute;
top: var(--space-3);
inset-inline-start: var(--space-3);
padding: 4px var(--space-3);
background: rgba(5, 12, 15, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(157, 38, 43, 0.38);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-decoration: none;
line-height: 1;
z-index: 2;
transition: background 0.22s ease, color 0.22s ease;
}
.rp-cat:hover {
background: rgba(157, 38, 43, 0.28);
color: #fff;
}
/* ---------- card body ---------- */
.rp-card-body {
padding: var(--space-5);
display: flex;
flex-direction: column;
flex: 1;
}
/* meta row */
.rp-meta {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-3);
}
.rp-date,
.rp-cmts {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.rp-date svg,
.rp-cmts svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--color-primary-400);
}
/* card title */
.rp-card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: 1.5;
margin-bottom: var(--space-3);
}
.rp-card-title a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.25s ease;
}
.rp-card-title a:hover { color: var(--color-primary-300); }
/* excerpt */
.rp-card-excerpt {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-5);
flex: 1;
/* 3-line clamp */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* read-more link */
.rp-read-more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-primary-400);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-decoration: none;
margin-top: auto;
transition: color 0.25s ease, gap 0.25s ease;
}
.rp-read-more svg {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.rp-read-more:hover {
color: var(--color-primary-300);
gap: var(--space-3);
}
[dir="rtl"] .rp-read-more:hover svg { transform: translateX(-4px); }
[dir="ltr"] .rp-read-more:hover svg { transform: translateX(4px); }
/* ---------- footer ---------- */
.rp-footer {
display: flex;
justify-content: center;
margin-top: var(--space-2);
}
.rp-all-link {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-8);
border-radius: var(--radius-full);
border: 1px solid rgba(157, 38, 43, 0.32);
background: rgba(157, 38, 43, 0.08);
color: var(--color-primary-300);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: background 0.25s ease, border-color 0.25s ease,
color 0.25s ease, gap 0.25s ease, box-shadow 0.25s ease;
}
.rp-all-link svg {
width: 18px;
height: 18px;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.rp-all-link:hover {
background: rgba(157, 38, 43, 0.18);
border-color: rgba(157, 38, 43, 0.55);
color: #fff;
box-shadow: 0 8px 28px rgba(157, 38, 43, 0.22);
gap: var(--space-4);
}
[dir="rtl"] .rp-all-link:hover svg { transform: translateX(-5px); }
[dir="ltr"] .rp-all-link:hover svg { transform: translateX(5px); }
/* ---------- scroll animations ---------- */
.rp-header.animate-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.rp-header.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
.rp-card.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.rp-card.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
.rp-footer.animate-on-scroll {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.rp-footer.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* ---------- responsive ---------- */
/* ≤1200px */
@media (max-width: 1200px) {
.rp-grid { gap: var(--space-5); }
}
/* ≤1024px: featured spans both columns */
@media (max-width: 1024px) {
.rp-grid { grid-template-columns: repeat(2, 1fr); }
.rp-card--featured { grid-column: span 2; }
.rp-card--featured .rp-card-media { aspect-ratio: 21 / 9; }
}
/* ≤768px */
@media (max-width: 768px) {
.rp-section { padding: var(--space-14) 0; }
.rp-card--featured { grid-column: span 1; }
.rp-card--featured .rp-card-media { aspect-ratio: 16 / 9; }
.rp-header { margin-bottom: var(--space-8); }
}
/* ≤640px */
@media (max-width: 640px) {
.rp-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
/* ≤480px */
@media (max-width: 480px) {
.rp-section { padding: var(--space-12) 0; }
.rp-card-title { font-size: var(--font-size-base); }
}
/* ≤360px */
@media (max-width: 360px) {
.rp-section { padding: var(--space-10) 0; }
.rp-card-body { padding: var(--space-4); }
}
/* touch */
@media (hover: none) {
.rp-card:hover { transform: none; box-shadow: none; }
.rp-read-more:hover { gap: var(--space-2); }
.rp-all-link:hover { gap: var(--space-3); }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.rp-blob { animation: none !important; }
.rp-card { transition: border-color 0.2s ease, box-shadow 0.2s ease !important; }
.rp-card-img img { transition: none !important; }
.rp-read-more,
.rp-all-link { transition: color 0.2s ease !important; }
.rp-header.animate-on-scroll,
.rp-card.animate-on-scroll,
.rp-footer.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ==========================================================================
Recent Posts — Light editorial skin
========================================================================== */
.rp-section {
background-color: var(--color-sand-50);
/* Override text tokens for light background */
--text-primary: var(--color-navy-950);
--text-secondary: var(--color-navy-800);
--text-muted: var(--color-navy-600);
}
.rp-blob--1 {
background: radial-gradient(circle, rgba(157, 38, 43, 0.20) 0%, transparent 70%);
opacity: 0.07;
}
.rp-blob--2 {
background: radial-gradient(circle, rgba(16, 24, 39, 0.30) 0%, transparent 70%);
opacity: 0.05;
}
.rp-badge {
color: var(--color-primary-700);
}
.rp-card {
background: #ffffff;
border-color: rgba(157, 38, 43, 0.10);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.rp-card:hover {
box-shadow: 0 14px 44px rgba(0, 0, 0, 0.10), 0 0 22px rgba(157, 38, 43, 0.07);
}
.rp-card--featured {
background: #fdf8f5;
border-color: rgba(157, 38, 43, 0.16);
}
.rp-card-placeholder {
background: linear-gradient(135deg, var(--color-sand-100) 0%, #ede8de 100%);
color: rgba(16, 24, 39, 0.22);
}
.rp-cat {
background: rgba(255, 255, 255, 0.90);
color: var(--color-primary-700);
}
.rp-cat:hover {
background: var(--color-primary-600);
color: #ffffff;
}
.rp-all-link {
color: var(--color-primary-700);
background: rgba(157, 38, 43, 0.07);
border-color: rgba(157, 38, 43, 0.26);
}
.rp-all-link:hover {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: #ffffff;
box-shadow: 0 8px 28px rgba(157, 38, 43, 0.26);
}
/* ==========================================================================
FAQ Section (fq-)
========================================================================== */
/* ---------- shell ---------- */
.fq-section {
position: relative;
background-color: var(--bg-body);
padding: var(--space-20) 0;
overflow: hidden;
}
.fq-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.fq-blob {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.13;
}
.fq-blob--1 {
width: 560px;
height: 560px;
background: radial-gradient(circle, hsl(358 53% 30%) 0%, transparent 70%);
top: -180px;
inset-inline-start: -100px;
animation: fq-blob-drift 11s ease-in-out infinite alternate;
}
.fq-blob--2 {
width: 420px;
height: 420px;
background: radial-gradient(circle, hsl(215 60% 40%) 0%, transparent 70%);
bottom: -100px;
inset-inline-end: -60px;
animation: fq-blob-drift 14s ease-in-out infinite alternate-reverse;
}
@keyframes fq-blob-drift {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(24px, 16px) scale(1.08); }
}
.fq-section .container { position: relative; z-index: 1; }
/* ---------- two-column layout ---------- */
.fq-layout {
display: grid;
grid-template-columns: 310px 1fr;
gap: var(--space-12);
align-items: start;
}
/* ---------- aside ---------- */
.fq-aside {
position: sticky;
top: 90px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.12);
border-inline-start: 3px solid var(--color-gold-500, #9D262B);
border-radius: var(--radius-2xl);
padding: var(--space-7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.fq-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-5);
}
.fq-badge svg { flex-shrink: 0; }
.fq-title {
font-size: clamp(1.65rem, 3vw, 2.2rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-4);
}
.fq-title-accent {
display: block;
background: linear-gradient(
135deg,
var(--color-primary-300, hsl(358, 70%, 68%)) 0%,
var(--color-primary-500, hsl(358, 53%, 43%)) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fq-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-6);
}
/* ---------- trust bullet list ---------- */
.fq-trust-list {
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.fq-trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.5;
background: rgba(157, 38, 43, 0.06);
border: 1px solid var(--border-subtle, rgba(201,146,42,0.06));
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-3);
}
.fq-trust-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--color-primary-400);
margin-top: 2px;
}
/* ---------- aside bottom CTA ---------- */
.fq-aside-cta {
padding-top: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.fq-aside-cta-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: var(--space-3);
}
.fq-aside-btns {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.fq-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fq-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.fq-btn--wa {
background: hsl(142, 70%, 45%);
color: #fff;
box-shadow: 0 8px 24px -10px hsl(142, 70%, 40%);
}
.fq-btn--wa:hover {
background: hsl(142, 70%, 40%);
transform: translateY(-2px);
box-shadow: 0 14px 32px -10px hsl(142, 70%, 35%);
}
.fq-btn--call {
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.fq-btn--call:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(157, 38, 43, 0.4);
color: var(--color-primary-300);
transform: translateY(-2px);
}
/* ---------- accordion list ---------- */
.fq-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.fq-item {
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-xl);
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
position: relative;
}
.fq-item:hover {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.03);
}
/* open-item: left accent bar + highlight */
.fq-item::before {
content: '';
position: absolute;
top: 12%;
bottom: 12%;
inset-inline-start: 0;
width: 3px;
background: linear-gradient(
to bottom,
var(--color-primary-300, hsl(358,70%,68%)),
var(--color-primary-500, hsl(358,53%,43%))
);
border-radius: 0 2px 2px 0;
opacity: 0;
transform: scaleY(0.6);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
pointer-events: none;
}
/* Progressive enhancement: open-item highlight */
@supports selector(:has(a)) {
.fq-item:has(.fq-trigger[aria-expanded="true"]) {
border-color: rgba(157, 38, 43, 0.32);
background: rgba(26, 35, 64, 0.60);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0 24px rgba(157, 38, 43, 0.10);
}
.fq-item:has(.fq-trigger[aria-expanded="true"])::before {
opacity: 1;
transform: scaleY(1);
}
}
/* ---------- trigger button ---------- */
.fq-trigger {
width: 100%;
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
background: transparent;
border: none;
cursor: pointer;
text-align: start;
color: var(--text-primary);
transition: background 0.25s ease;
}
.fq-trigger:hover { background: rgba(255, 255, 255, 0.03); }
.fq-trigger[aria-expanded="true"] { background: rgba(157, 38, 43, 0.05); }
.fq-trigger-num {
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
color: var(--color-gold-400, #D25746);
opacity: 0.45;
flex-shrink: 0;
min-width: 32px;
font-variant-numeric: tabular-nums;
transition: color 0.3s ease, opacity 0.3s ease;
}
.fq-trigger[aria-expanded="true"] .fq-trigger-num { color: var(--color-gold-400, #D25746); opacity: 1; }
.fq-trigger-text {
flex: 1;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: 1.6;
transition: color 0.3s ease;
}
.fq-trigger[aria-expanded="true"] .fq-trigger-text { color: var(--color-gold-400, #D25746); }
/* plus (âº) → cross (×) icon via pseudo-elements + rotate */
.fq-trigger-icon {
position: relative;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
margin-inline-start: auto;
color: var(--text-secondary);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
background 0.3s ease,
border-color 0.3s ease,
color 0.3s ease;
}
.fq-trigger-icon::before,
.fq-trigger-icon::after {
content: '';
position: absolute;
background: currentColor;
border-radius: 1px;
top: 50%;
left: 50%;
}
.fq-trigger-icon::before {
width: 12px;
height: 2px;
transform: translate(-50%, -50%);
}
.fq-trigger-icon::after {
width: 2px;
height: 12px;
transform: translate(-50%, -50%);
}
.fq-trigger[aria-expanded="true"] .fq-trigger-icon {
transform: rotate(45deg);
background: rgba(157, 38, 43, 0.14);
border-color: rgba(157, 38, 43, 0.35);
color: var(--color-primary-400);
}
/* ---------- panel — smooth CSS grid-rows height animation ---------- */
.fq-panel.accordion-content {
display: grid !important;
grid-template-rows: 0fr;
transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
/* reset base accordion-content styles */
padding: 0 !important;
border-top: none !important;
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
.fq-panel.accordion-content[aria-hidden="false"] {
grid-template-rows: 1fr;
display: grid !important;
}
.fq-panel-inner {
overflow: hidden;
min-height: 0;
padding: var(--space-4) var(--space-5) var(--space-6);
border-top: 1px solid rgba(255, 255, 255, 0.10);
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
}
/* ---------- scroll animations ---------- */
.fq-aside.animate-on-scroll {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.fq-aside.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.fq-item.animate-on-scroll {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.fq-item.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- responsive ---------- */
/* ≤1200px */
@media (max-width: 1200px) {
.fq-layout { grid-template-columns: 280px 1fr; gap: var(--space-8); }
}
/* ≤1024px: collapse aside above list */
@media (max-width: 1024px) {
.fq-layout { grid-template-columns: 1fr; gap: var(--space-8); }
.fq-aside { position: static; }
.fq-aside-btns { flex-direction: row; }
.fq-btn { flex: 1; }
}
/* ≤768px */
@media (max-width: 768px) {
.fq-section { padding: var(--space-14) 0; }
.fq-aside { padding: var(--space-5); }
.fq-trigger { padding: var(--space-4) var(--space-4); gap: var(--space-3); }
}
/* ≤640px */
@media (max-width: 640px) {
.fq-layout { gap: var(--space-6); }
.fq-trigger-num { display: none; }
}
/* ≤480px */
@media (max-width: 480px) {
.fq-section { padding: var(--space-12) 0; }
.fq-aside-btns { flex-direction: column; }
.fq-btn { width: 100%; }
.fq-trigger-text { font-size: var(--font-size-sm); }
}
/* ≤360px */
@media (max-width: 360px) {
.fq-section { padding: var(--space-10) 0; }
.fq-aside { padding: var(--space-4); }
.fq-trigger { padding: var(--space-3) var(--space-3); }
}
/* touch */
@media (hover: none) {
.fq-trigger:hover { background: transparent; }
.fq-btn:hover { transform: none; box-shadow: none; }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fq-blob { animation: none !important; }
.fq-panel.accordion-content { transition: none !important; }
.fq-trigger-icon { transition: none !important; }
.fq-item::before { transition: none !important; }
.fq-aside.animate-on-scroll,
.fq-item.animate-on-scroll {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ── fq-section: light warm premium enhancement ───────────────────── */
/* Warm sand — light relief after dark Testimonials */
.fq-section {
background-color: #F8F1E7;
}
/* Tone down blobs on light bg; replace cold blue blob-2 with warm copper */
.fq-blob {
opacity: 0.06;
}
.fq-blob--2 {
background: radial-gradient(circle, hsla(358, 52%, 45%, 0.18) 0%, transparent 70%);
}
/* Aside — warm white card, copper start-edge */
.fq-aside {
background: #FFFCF7;
border: 1px solid rgba(157, 38, 43, 0.18);
border-inline-start: 3px solid rgba(157, 38, 43, 0.55);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Badge — copper pill on light bg */
.fq-badge {
background: rgba(157, 38, 43, 0.10);
border-color: rgba(157, 38, 43, 0.25);
color: #8A5A1A;
}
/* Title + subtitle — dark navy on sand */
.fq-title {
color: #0F1628;
}
.fq-subtitle {
color: rgba(15, 22, 40, 0.65);
}
/* Trust items — warm chip on light bg */
.fq-trust-item {
background: rgba(157, 38, 43, 0.06);
border-color: rgba(157, 38, 43, 0.12);
color: rgba(15, 22, 40, 0.75);
}
.fq-trust-item svg {
color: #D25746;
}
/* Aside CTA — copper hairline divider */
.fq-aside-cta {
border-top-color: rgba(157, 38, 43, 0.18);
}
.fq-aside-cta-label {
color: rgba(15, 22, 40, 0.60);
}
/* Call button — copper outline on light bg */
.fq-btn--call {
background: transparent;
color: #0F1628;
border: 1.5px solid rgba(157, 38, 43, 0.45);
}
.fq-btn--call:hover {
background: rgba(157, 38, 43, 0.08);
border-color: rgba(157, 38, 43, 0.70);
color: #8A5A1A;
}
/* Accordion items — warm white card on light bg */
.fq-item {
background: #FFFCF7;
border-color: rgba(157, 38, 43, 0.14);
}
.fq-item:hover {
border-color: rgba(157, 38, 43, 0.28);
background: #FFFDF9;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
/* Open item — copper accent on light bg */
@supports selector(:has(a)) {
.fq-item:has(.fq-trigger[aria-expanded="true"]) {
border-color: rgba(157, 38, 43, 0.35);
background: #FFFDF9;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 0 20px rgba(157, 38, 43, 0.08);
}
}
/* Trigger — dark navy on light bg */
.fq-trigger {
color: #0F1628;
}
.fq-trigger:hover {
background: rgba(157, 38, 43, 0.04);
}
.fq-trigger[aria-expanded="true"] {
background: rgba(157, 38, 43, 0.06);
}
/* Number watermark — copper on light bg */
.fq-trigger-num {
color: rgba(157, 38, 43, 0.55);
opacity: 1;
}
.fq-trigger[aria-expanded="true"] .fq-trigger-num {
color: #D25746;
opacity: 1;
}
/* Question text — dark navy; copper when open */
.fq-trigger-text {
color: #0F1628;
}
.fq-trigger[aria-expanded="true"] .fq-trigger-text {
color: #8A5A1A;
}
/* Expand icon — dark outline on light bg */
.fq-trigger-icon {
border-color: rgba(15, 22, 40, 0.20);
color: rgba(15, 22, 40, 0.50);
}
.fq-trigger[aria-expanded="true"] .fq-trigger-icon {
background: rgba(157, 38, 43, 0.12);
border-color: rgba(157, 38, 43, 0.45);
color: #D25746;
}
/* Panel inner — muted warm text + copper divider */
.fq-panel-inner {
border-top-color: rgba(157, 38, 43, 0.15);
color: rgba(15, 22, 40, 0.65);
}
/* Focus-visible on light bg */
.fq-trigger:focus-visible {
outline: 2px solid rgba(157, 38, 43, 0.70);
outline-offset: -2px;
}
/* Touch: restore call-button base on light bg */
@media (hover: none) {
.fq-btn--call:hover {
background: transparent;
border-color: rgba(157, 38, 43, 0.45);
color: #0F1628;
transform: none;
box-shadow: none;
}
}
/* ──────────────────────────────────────────────────────────────────── */
/* ==========================================================================
Pricing Preview Section
========================================================================== */
.pricing-preview-section {
background-color: var(--bg-surface);
padding: var(--space-20) 0;
}
.pricing-plans {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin-bottom: var(--space-8);
align-items: start;
}
.pricing-plan {
background-color: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
transition: all var(--transition-normal);
position: relative;
}
.pricing-plan:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-md);
}
.pricing-plan.popular {
border-color: var(--color-primary-500);
box-shadow: var(--shadow-glow);
transform: scale(1.02);
z-index: 1;
}
.pricing-plan.popular:hover {
transform: scale(1.04);
}
.plan-badge {
position: absolute;
top: calc(-1 * var(--space-3));
right: var(--space-4);
left: var(--space-4);
text-align: center;
}
.plan-badge span {
display: inline-block;
padding: var(--space-1) var(--space-4);
background: var(--gradient-gold-btn);
color: var(--color-navy-950);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
letter-spacing: 0.05em;
}
.plan-header {
text-align: center;
margin-bottom: var(--space-6);
}
.plan-name {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.plan-description {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin: 0;
}
.plan-price {
text-align: center;
margin-bottom: var(--space-6);
padding: var(--space-4) 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.price-amount {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary-400);
}
.price-currency {
font-size: var(--font-size-lg);
color: var(--text-secondary);
margin-inline-start: var(--space-1);
}
.price-period {
display: block;
font-size: var(--font-size-sm);
color: var(--text-muted);
margin-top: var(--space-1);
}
.plan-features {
list-style: none;
margin: 0 0 var(--space-6);
padding: 0;
}
.plan-features .feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border-subtle);
}
.plan-features .feature-item:last-child {
border-bottom: none;
}
.plan-features .feature-check {
color: var(--color-primary-400);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
margin-top: 2px;
}
.plan-features .feature-text {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
.plan-cta {
text-align: center;
}
.plan-cta .btn {
width: 100%;
}
.pricing-note {
text-align: center;
color: var(--text-muted);
font-size: var(--font-size-sm);
}
/* ==========================================================================
Featured Services Section
========================================================================== */
.featured-services-section {
background-color: var(--bg-body);
padding: var(--space-20) 0;
}
.featured-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.featured-service-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all var(--transition-normal);
}
.featured-service-card:hover {
transform: translateY(-4px);
border-color: var(--color-primary-500);
box-shadow: var(--shadow-lg);
}
.featured-service-card .service-image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
}
.featured-service-card .service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-service-card:hover .service-image img {
transform: scale(1.05);
}
.featured-service-card .service-placeholder {
width: 100%;
aspect-ratio: 16 / 10;
background-color: var(--bg-elevated);
display: grid;
place-items: center;
color: var(--text-muted);
font-size: var(--font-size-3xl);
}
.featured-service-card .service-badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: var(--space-1) var(--space-3);
background: var(--gradient-gold-btn);
color: var(--color-navy-950);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
border-radius: var(--radius-full);
}
.featured-service-card .service-content {
padding: var(--space-5);
}
.featured-service-card .service-icon,
.featured-service-card .fallback-icon {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background-color: rgba(157, 38, 43, 0.1);
color: var(--color-primary-400);
font-size: var(--font-size-lg);
margin-bottom: var(--space-3);
}
.featured-service-card .service-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.featured-service-card .service-title a {
color: inherit;
}
.featured-service-card .service-title a:hover {
color: var(--color-primary-400);
}
.featured-service-card .service-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-3);
}
.featured-service-card .service-pricing {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.featured-service-card .price-label {
font-size: var(--font-size-xs);
color: var(--text-muted);
}
.featured-service-card .price-amount {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-primary-400);
}
.featured-service-card .service-features {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.featured-service-card .service-features .feature-item {
padding: var(--space-1) var(--space-3);
background-color: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.featured-service-card .service-link {
width: 100%;
}
/* ==========================================================================
Contact Form Section
========================================================================== */
.contact-form-section {
background-color: var(--bg-body);
padding: var(--space-20) 0;
}
.contact-form-wrapper {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-2xl);
padding: var(--space-10);
max-width: 800px;
margin: 0 auto;
}
.contact-form .form-control,
.contact-form .form-select {
background-color: var(--bg-elevated);
border-color: var(--border-default);
color: var(--text-primary);
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px var(--color-primary-glow);
background-color: var(--bg-surface);
}
.contact-form .form-label {
color: var(--text-primary);
font-weight: var(--font-weight-medium);
}
/* ==========================================================================
Service/Location Hero (Single Pages)
========================================================================== */
.service-hero,
.location-hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
padding: var(--space-16) 0;
background-color: var(--bg-sunken);
overflow: hidden;
}
.service-hero::before,
.location-hero::before {
content: '';
position: absolute;
inset: 0;
background: var(--gradient-hero);
z-index: 1;
}
.service-hero-content,
.location-hero-content {
position: relative;
z-index: 2;
}
.service-badge,
.location-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
background-color: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.2);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
color: var(--color-primary-400);
margin-bottom: var(--space-4);
}
.service-title,
.location-title {
font-size: clamp(1.75rem, 4vw, 3rem);
font-weight: var(--font-weight-bold);
color: white;
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);
}
.service-subtitle,
.location-subtitle {
font-size: var(--font-size-lg);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
max-width: 600px;
margin-bottom: var(--space-6);
}
.service-hero-actions,
.location-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.service-hero-image,
.location-hero-image {
position: relative;
z-index: 2;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.service-hero-image img,
.location-hero-image img {
width: 100%;
height: auto;
display: block;
}
/* Service/Location Content Sections */
.service-description,
.location-description,
.service-benefits,
.location-benefits,
.service-process,
.service-pricing,
.service-faq,
.location-faq,
.available-services,
.nearby-areas {
padding: var(--space-16) 0;
}
.service-description,
.location-description {
background-color: var(--bg-body);
}
.service-content,
.location-content {
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
}
.service-content h2,
.service-content h3,
.location-content h2,
.location-content h3 {
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.service-benefits,
.location-benefits {
background-color: var(--bg-surface);
}
.benefit-card {
background-color: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-6);
transition: all var(--transition-normal);
}
.benefit-card:hover {
border-color: var(--color-primary-500);
transform: translateY(-2px);
}
.benefit-icon {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background-color: rgba(157, 38, 43, 0.1);
color: var(--color-primary-400);
font-size: var(--font-size-xl);
margin-bottom: var(--space-3);
}
.benefit-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.benefit-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* Process Timeline */
.service-process {
background-color: var(--bg-body);
}
.process-timeline {
display: grid;
gap: var(--space-6);
}
.process-step {
display: flex;
gap: var(--space-5);
align-items: flex-start;
}
.process-number {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--gradient-gold-btn);
color: var(--color-navy-950);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.process-content {
flex: 1;
padding-top: var(--space-2);
}
.process-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.process-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* Pricing Factors */
.pricing-factor-card {
background-color: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
transition: border-color var(--transition-fast);
}
.pricing-factor-card:hover {
border-color: var(--border-default);
}
.factor-icon {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-3);
}
.factor-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.factor-description {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ==========================================================================
Responsive — Sections
========================================================================== */
@media (max-width: 1024px) {
.hero-container {
grid-template-columns: 1fr;
gap: var(--space-8);
}
.hero-visual {
order: -1;
}
.pricing-plans {
grid-template-columns: 1fr 1fr;
}
.trust-stats,
.trust-badges {
grid-template-columns: repeat(2, 1fr);
}
.featured-services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.testimonials-section .testimonials-grid,
.featured-services-grid {
grid-template-columns: 1fr;
}
.pricing-plans {
grid-template-columns: 1fr;
}
.pricing-plan.popular {
transform: none;
order: -1;
}
.trust-stats,
.trust-badges {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.cta-content {
text-align: center;
}
.cta-features {
flex-direction: column;
align-items: center;
}
.process-step {
flex-direction: column;
align-items: center;
text-align: center;
}
.contact-form-wrapper {
padding: var(--space-6);
}
.service-hero,
.location-hero {
min-height: auto;
padding: var(--space-12) 0;
}
}
@media (max-width: 480px) {
.trust-stats {
grid-template-columns: 1fr;
}
.stat-number {
font-size: var(--font-size-3xl);
}
.trust-badges {
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
}
.cta-title {
font-size: var(--font-size-2xl);
}
.cta-actions {
flex-direction: column;
}
.cta-actions .btn {
width: 100%;
justify-content: center;
}
.testimonial-card {
padding: var(--space-4);
}
.pricing-plan {
padding: var(--space-5);
}
.section-title {
font-size: var(--font-size-2xl);
}
.section-subtitle {
font-size: var(--font-size-base);
}
.featured-services-grid {
gap: var(--space-4);
}
}
/* ==========================================================================
404 Error Page
========================================================================== */
.error-404-section {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: var(--space-16) 0;
text-align: center;
}
.error-404-content {
max-width: 560px;
margin: 0 auto;
}
.error-code {
display: block;
font-size: clamp(5rem, 15vw, 10rem);
font-weight: var(--font-weight-bold);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: var(--space-4);
}
.error-title {
font-size: var(--font-size-3xl);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.error-message {
color: var(--text-secondary);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-8);
}
.error-search {
margin-bottom: var(--space-6);
}
.error-actions {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
/* =============================================
Why Choose Us Section
============================================= */
/* ==========================================================================
Why Choose Us — Premium Split Layout
========================================================================== */
/* ---------- Section wrapper ---------- */
.why-section {
position: relative;
background: var(--bg-surface);
padding: var(--space-20) 0;
overflow: hidden;
isolation: isolate;
}
/* ---------- Ambient blobs ---------- */
.why-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.why-blob {
position: absolute;
border-radius: 50%;
filter: blur(110px);
opacity: 0.45;
}
.why-blob--1 {
width: 560px; height: 560px;
top: -140px; inset-inline-start: -160px;
background: radial-gradient(circle, hsla(42, 65%, 45%, 0.18), transparent 70%);
animation: why-blob-drift 20s ease-in-out infinite;
}
.why-blob--2 {
width: 480px; height: 480px;
bottom: -120px; inset-inline-end: -100px;
background: radial-gradient(circle, hsla(215, 70%, 50%, 0.14), transparent 70%);
animation: why-blob-drift 26s ease-in-out infinite reverse;
animation-delay: -8s;
}
@keyframes why-blob-drift {
0%,100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(30px, -20px) scale(1.06); }
70% { transform: translate(-20px, 30px) scale(0.96); }
}
/* ---------- Two-column container ---------- */
.why-container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: var(--space-16);
align-items: start;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• LEFT COLUMN â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.why-left {
position: sticky;
top: calc(var(--space-8) + 60px); /* 60px ≈ sticky header height */
}
/* ---------- Badge ---------- */
.why-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-4);
background: linear-gradient(135deg, hsla(42, 60%, 50%, 0.14), hsla(42, 60%, 50%, 0.06));
border: 1px solid hsla(42, 60%, 55%, 0.28);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-primary-400);
margin-bottom: var(--space-5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.why-badge-icon { display: inline-flex; }
/* ---------- Title ---------- */
.why-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.why-title-accent {
background: linear-gradient(135deg, var(--color-primary-300, hsl(358,70%,55%)), var(--color-primary-500, hsl(358,60%,42%)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ---------- Subtitle ---------- */
.why-subtitle {
font-size: clamp(.95rem, 1.4vw, 1.08rem);
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: var(--space-8);
max-width: 480px;
}
/* ---------- Macro stats ---------- */
.why-macro-stats {
display: flex;
gap: var(--space-8);
margin-bottom: var(--space-8);
padding-bottom: var(--space-8);
border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.why-macro-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.why-stat-value {
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 900;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text-primary);
}
.why-stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
}
/* ---------- Pull-quote ---------- */
.why-quote {
margin: 0;
padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
border: 1px solid rgba(255,255,255,0.07);
border-inline-start: 3px solid var(--color-copper-500, #9D262B);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
}
.why-quote-mark {
display: block;
color: var(--color-copper-400, #D25746);
margin-bottom: var(--space-3);
}
.why-quote-text {
font-size: var(--font-size-base);
font-style: italic;
color: var(--text-primary);
line-height: 1.7;
margin: 0 0 var(--space-4);
}
.why-quote-footer {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.why-quote-avatar {
display: inline-grid;
place-items: center;
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-300));
color: #fff;
font-size: var(--font-size-base);
font-weight: 700;
flex-shrink: 0;
}
.why-quote-meta { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.why-quote-name { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); }
.why-quote-city { font-size: var(--font-size-xs); color: var(--text-secondary); }
.why-quote-stars { display: inline-flex; gap: 1px; margin-inline-start: auto; }
.why-star { display: inline-flex; color: rgba(255,255,255,0.18); }
.why-star--on { color: #F5C020; }
/* ---------- Scroll-entrance ---------- */
.why-badge.animate-on-scroll,
.why-title.animate-on-scroll,
.why-subtitle.animate-on-scroll,
.why-macro-stats.animate-on-scroll,
.why-quote.animate-on-scroll,
.why-card.animate-on-scroll {
opacity: 0;
transform: translateY(22px);
transition:
opacity .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms),
transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.why-badge.animate-on-scroll.animated,
.why-title.animate-on-scroll.animated,
.why-subtitle.animate-on-scroll.animated,
.why-macro-stats.animate-on-scroll.animated,
.why-quote.animate-on-scroll.animated,
.why-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• RIGHT COLUMN â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
}
/* ---------- Reason card ---------- */
.why-card {
position: relative;
background: var(--bg-body);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
overflow: hidden;
transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.why-card::before {
/* left/start border glow line */
content: '';
position: absolute;
inset-block: 20% 20%;
inset-inline-start: 0;
width: 3px;
background: linear-gradient(to bottom, transparent, var(--color-primary-400), transparent);
border-radius: 3px;
opacity: 0;
transition: opacity .35s ease, inset-block .35s ease;
}
.why-card:hover {
transform: translateY(-5px);
border-color: var(--border-copper, rgba(184,115,51,0.15));
box-shadow:
0 16px 40px rgba(0,0,0,0.28),
0 0 0 1px var(--border-copper, rgba(184,115,51,0.15));
}
.why-card:hover::before {
opacity: 1;
inset-block: 10% 10%;
}
/* Card top row: icon + number */
.why-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-1);
}
/* Icon ring — copper tint (differentiates from service section gold) */
.why-icon-ring {
display: inline-grid;
place-items: center;
width: 52px; height: 52px;
border-radius: var(--radius-lg);
background: rgba(128, 29, 35, 0.12);
color: var(--color-copper-400, #D25746);
flex-shrink: 0;
transition: background .3s ease, color .3s ease, transform .3s ease;
}
.why-card:hover .why-icon-ring {
background: var(--color-copper-500, #9D262B);
color: #fff;
transform: scale(1.08) rotate(-5deg);
}
/* Number watermark */
.why-card-num {
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
color: var(--text-primary);
opacity: 0.05;
pointer-events: none;
user-select: none;
transition: opacity .3s ease;
font-feature-settings: 'tnum';
}
.why-card:hover .why-card-num { opacity: 0.1; }
/* Title & description */
.why-card-title {
font-size: var(--font-size-base);
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
margin: 0;
}
.why-card-desc {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: 1.7;
flex-grow: 1;
margin: 0;
}
/* Check-circle — visible at rest as a subtle dot, expands on hover */
.why-card-check {
display: inline-flex;
align-self: flex-end;
color: var(--color-copper-400, #D25746);
opacity: 0.35;
transform: scale(0.30);
transition: opacity .3s ease .1s, transform .3s cubic-bezier(.2,.7,.2,1) .1s;
}
.why-card:hover .why-card-check {
opacity: 1;
transform: scale(1);
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• RESPONSIVE â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── ≤1100px: narrow the left column a bit ──────────────────────────────── */
@media (max-width: 1100px) {
.why-container { gap: var(--space-10); }
.why-title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
}
/* ── ≤900px: stack to single column, unstick left ───────────────────────── */
@media (max-width: 900px) {
.why-container {
grid-template-columns: 1fr;
gap: var(--space-10);
}
.why-left {
position: static; /* unstick on mobile */
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.why-subtitle { max-width: 100%; }
.why-macro-stats { justify-content: center; }
.why-quote-footer { justify-content: center; }
.why-quote-stars { margin-inline-start: 0; width: 100%; justify-content: center; }
}
/* ── ≤640px: cards go 1-col ──────────────────────────────────────────────── */
@media (max-width: 640px) {
.why-section { padding: var(--space-14) 0; }
.why-grid { grid-template-columns: 1fr; gap: var(--space-3); }
.why-card { flex-direction: row; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
.why-card-top { flex-direction: column; gap: var(--space-2); align-items: flex-start; margin-bottom: 0; }
.why-card-num { display: none; }
.why-macro-stats { gap: var(--space-6); }
}
/* ── ≤480px ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.why-section { padding: var(--space-12) 0; }
.why-title { font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
.why-card { padding: var(--space-3); }
.why-icon-ring { width: 44px; height: 44px; }
.why-macro-stats { flex-direction: column; gap: var(--space-4); align-items: center; }
.why-macro-stat { align-items: center; }
}
/* ── ≤360px ───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
.why-section { padding: var(--space-10) 0; }
.why-title { font-size: clamp(1.45rem, 8vw, 1.8rem); }
.why-badge { font-size: .78rem; }
}
/* ── Touch: remove hover transforms ──────────────────────────────────────── */
@media (hover: none) {
.why-card:hover { transform: none; }
.why-card:hover .why-icon-ring {
background: rgba(128, 29, 35, 0.12);
color: var(--color-copper-400, #D25746);
transform: none;
}
.why-card:hover::before { opacity: 0; }
.why-card:hover .why-card-check { opacity: 0.35; transform: scale(0.30); }
}
/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.why-blob { animation: none !important; }
.why-badge.animate-on-scroll,
.why-title.animate-on-scroll,
.why-subtitle.animate-on-scroll,
.why-macro-stats.animate-on-scroll,
.why-quote.animate-on-scroll,
.why-card.animate-on-scroll {
opacity: 1; transform: none; transition: none;
}
.why-card,
.why-icon-ring,
.why-card::before,
.why-card-check { transition: none !important; }
}
/* ── why-section: premium dark warm enhancement ───────────────────── */
/* Warmer dark navy — distinct from proc's #0B1120 */
.why-section {
background-color: #0F1628;
}
/* Replace cold blue blob-2 with warm copper */
.why-blob--2 {
background: radial-gradient(circle, hsla(358, 52%, 30%, 0.12), transparent 70%);
}
/* Force two-line H2 from the last-2-words accent logic */
.why-title-accent {
display: block;
}
/* Deeper glass cards + always-visible copper start-edge accent */
.why-card {
background: rgba(12, 19, 36, 0.72);
border: 1px solid rgba(157, 38, 43, 0.14);
border-inline-start: 3px solid rgba(157, 38, 43, 0.42);
}
.why-card:hover {
border-color: rgba(157, 38, 43, 0.28);
border-inline-start-color: rgba(157, 38, 43, 0.80);
}
/* Larger copper watermark number */
.why-card-num {
font-size: 3.5rem;
color: rgba(157, 38, 43, 0.07);
}
.why-card:hover .why-card-num {
color: rgba(157, 38, 43, 0.14);
}
/* Stronger icon ring with border + inner glow */
.why-icon-ring {
border: 1.5px solid rgba(157, 38, 43, 0.38);
box-shadow: inset 0 0 12px rgba(157, 38, 43, 0.07);
}
.why-card:hover .why-icon-ring {
box-shadow: 0 0 20px rgba(157, 38, 43, 0.28);
}
/* Warm sand card titles */
.why-card-title {
color: var(--color-sand-50, #F5F0E8);
}
/* Warm muted beige descriptions */
.why-card-desc {
color: rgba(210, 200, 182, 0.76);
}
/* Pull-quote — deeper glass consistent with cards */
.why-quote {
background: rgba(12, 19, 36, 0.62);
}
.why-quote-text {
color: var(--color-sand-50, #F5F0E8);
}
/* Touch: restore icon ring base appearance */
@media (hover: none) {
.why-card:hover .why-icon-ring {
box-shadow: inset 0 0 12px rgba(157, 38, 43, 0.07);
}
}
/* ──────────────────────────────────────────────────────────────────── */
/* =============================================
Service Process Section (proc-)
============================================= */
/* ---------- section shell + bg ---------- */
.proc-section {
position: relative;
padding: var(--space-20) 0;
background-color: var(--bg-body);
background-image: var(--proc-bg, none);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* CSS texture fallback when no image is supplied */
.proc-section:not([style*="--proc-bg"])::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 15% 45%, hsl(358 53% 18% / 0.32) 0%, transparent 55%),
radial-gradient(ellipse 60% 80% at 85% 65%, hsl(358 53% 14% / 0.22) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
/* dark overlay — strong enough for WCAG AA on any photo */
.proc-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(13, 17, 23, 0.93) 0%,
rgba(13, 17, 23, 0.82) 40%,
rgba(13, 17, 23, 0.90) 100%
);
z-index: 1;
pointer-events: none;
}
.proc-section .container {
position: relative;
z-index: 2;
}
/* ---------- header ---------- */
.proc-header {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-16);
}
.proc-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.30);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.proc-badge svg { flex-shrink: 0; }
.proc-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.25;
margin-bottom: var(--space-4);
}
.proc-title-accent {
display: block;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.proc-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ---------- timeline container ---------- */
.proc-timeline {
position: relative;
max-width: 900px;
margin: 0 auto var(--space-16);
}
/* ---------- spine (draws itself on scroll) ---------- */
.proc-spine {
position: absolute;
left: calc(50% - 1px);
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(157, 38, 43, 0.9) 8%,
rgba(157, 38, 43, 0.7) 50%,
rgba(157, 38, 43, 0.9) 92%,
transparent 100%
);
border-radius: 2px;
transform: scaleY(0);
transform-origin: top center;
transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-delay: var(--reveal-delay, 200ms);
z-index: 0;
}
.proc-spine.animated { transform: scaleY(1); }
/* ---------- rows (alternating left / right) ---------- */
.proc-row {
display: flex;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-10);
}
.proc-row:last-of-type { margin-bottom: 0; }
.proc-empty { flex: 1; }
/* ---------- node (center spine dot) ---------- */
.proc-node {
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
}
.proc-node-dot {
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(157, 38, 43, 0.15);
position: relative;
z-index: 2;
transition: box-shadow 0.3s ease;
}
.proc-row:hover .proc-node-dot {
box-shadow: 0 0 0 6px rgba(157, 38, 43, 0.20);
}
.proc-node-ring {
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1.5px solid rgba(157, 38, 43, 0.55);
opacity: 0;
transform: scale(0.5);
transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.proc-row.animated .proc-node-ring {
opacity: 1;
transform: scale(1);
animation: proc-node-pulse 2.4s ease-in-out 0.7s infinite;
}
@keyframes proc-node-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.4); }
}
/* ---------- card (glass-morphism) ---------- */
.proc-card {
flex: 1;
position: relative;
padding: var(--space-6) var(--space-5);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
overflow: hidden;
transition:
transform 0.35s ease,
background 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* start-side glow line */
.proc-card::before {
content: '';
position: absolute;
inset-block: 20%;
inset-inline-start: 0;
width: 3px;
background: var(--gradient-primary);
border-radius: 0 2px 2px 0;
opacity: 0;
transition: opacity 0.3s ease, inset-block 0.35s ease;
}
.proc-card:hover::before {
opacity: 1;
inset-block: 8%;
}
.proc-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(157, 38, 43, 0.28);
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.45),
0 0 36px rgba(157, 38, 43, 0.12);
}
/* large arabic numeral watermark — 8rem behind card content */
.proc-card-num {
position: absolute;
bottom: -0.1em;
inset-inline-end: var(--space-3);
font-size: 8rem;
font-weight: var(--font-weight-bold);
line-height: 1;
color: rgba(255, 255, 255, 0.04);
pointer-events: none;
-webkit-user-select: none;
user-select: none;
transition: color 0.3s ease;
}
.proc-card:hover .proc-card-num { color: rgba(157, 38, 43, 0.09); }
/* icon ring — 64px */
.proc-icon-ring {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: var(--radius-xl);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
color: var(--color-gold-400, #D25746);
margin-bottom: var(--space-4);
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.proc-card:hover .proc-icon-ring {
background: var(--color-gold-500, #9D262B);
color: var(--color-navy-950);
transform: rotate(-5deg) scale(1.05);
}
.proc-icon-ring svg { width: 28px; height: 28px; }
.proc-card-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
margin-bottom: var(--space-2);
line-height: 1.4;
}
.proc-card-desc {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ---------- CTA ---------- */
.proc-cta {
text-align: center;
padding: var(--space-10) var(--space-8);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-2xl);
max-width: 600px;
margin: 0 auto;
}
.proc-cta-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.proc-cta-sub {
color: var(--text-secondary);
margin-bottom: var(--space-6);
margin-top: 0;
}
.proc-cta-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-8);
background: var(--gradient-gold-btn);
color: var(--color-navy-950);
font-weight: 800;
border-radius: var(--radius-full);
text-decoration: none;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.proc-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 38px rgba(157, 38, 43, 0.42);
}
.proc-cta-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(255, 255, 255, 0.15) 50%,
transparent 60%
);
transform: translateX(-100%);
transition: transform 0.55s ease;
pointer-events: none;
}
.proc-cta-btn:hover .proc-cta-shimmer { transform: translateX(100%); }
.proc-cta-btn svg { width: 18px; height: 18px; }
/* ---------- scroll animations (scoped) ---------- */
.proc-section .proc-header.animate-on-scroll,
.proc-section .proc-cta.animate-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.proc-section .proc-header.animate-on-scroll.animated,
.proc-section .proc-cta.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.proc-section .proc-row.animate-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s ease, transform 0.65s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.proc-section .proc-row.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---------- responsive ---------- */
/* ≤1100px */
@media (max-width: 1100px) {
.proc-timeline { max-width: 780px; }
}
/* ≤900px */
@media (max-width: 900px) {
.proc-timeline { max-width: 660px; }
.proc-row { gap: var(--space-5); }
.proc-card { padding: var(--space-5) var(--space-4); }
.proc-card-num { font-size: 3rem; }
}
/* ≤768px — stack vertically, spine moves to inline-start */
@media (max-width: 768px) {
.proc-section { padding: var(--space-14) 0; }
.proc-timeline {
padding-inline-start: 44px;
max-width: 100%;
}
.proc-spine {
left: auto;
inset-inline-start: 12px;
inset-inline-end: auto;
}
.proc-row,
.proc-row--right {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
position: relative;
padding-block: var(--space-2);
}
.proc-empty { display: none; }
.proc-node {
position: absolute;
inset-inline-start: calc(-44px + 12px - 7px);
top: var(--space-4);
}
.proc-card { width: 100%; }
.proc-row { margin-bottom: var(--space-8); }
}
/* ≤640px */
@media (max-width: 640px) {
.proc-header { margin-bottom: var(--space-12); }
.proc-cta { padding: var(--space-7) var(--space-5); }
.proc-cta-title { font-size: var(--font-size-xl); }
.proc-cta-btn { width: 100%; justify-content: center; }
}
/* ≤480px */
@media (max-width: 480px) {
.proc-section { padding: var(--space-12) 0; }
.proc-timeline { padding-inline-start: 36px; }
.proc-spine { inset-inline-start: 8px; }
.proc-node { inset-inline-start: calc(-36px + 8px - 7px); }
.proc-icon-ring { width: 44px; height: 44px; }
.proc-card { padding: var(--space-4) var(--space-3); }
}
/* ≤360px */
@media (max-width: 360px) {
.proc-card-num { font-size: 5rem; } /* reduce from 8rem — partial watermark still visible */
.proc-cta { padding: var(--space-6) var(--space-4); }
}
/* touch: disable hover transforms */
@media (hover: none) {
.proc-card:hover,
.proc-cta-btn:hover { transform: none; box-shadow: none; }
.proc-card:hover::before { opacity: 0; }
.proc-card:hover .proc-icon-ring { transform: none; background: rgba(157, 38, 43, 0.12); color: var(--color-primary-400); }
.proc-row.animated .proc-node-ring { animation: none; }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.proc-spine,
.proc-node-ring,
.proc-cta-shimmer,
.proc-section .proc-header.animate-on-scroll,
.proc-section .proc-row.animate-on-scroll,
.proc-section .proc-cta.animate-on-scroll {
transition: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ── proc-section: premium dark navy visual enhancement ───────────── */
/* Explicit obsidian base — no reliance on --bg-body theme variable */
.proc-section {
background-color: #0B1120;
}
/* Faint copper blueprint grid — sits above the dark overlay (z-index 2)
so the pattern is visible in card gutters and section margins */
.proc-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(157, 38, 43, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(157, 38, 43, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
z-index: 2;
pointer-events: none;
}
/* Richer copper radial atmosphere (no-image fallback) */
.proc-section:not([style*="--proc-bg"])::after {
background:
radial-gradient(ellipse 72% 58% at 7% 40%, hsl(358 54% 22% / 0.44) 0%, transparent 56%),
radial-gradient(ellipse 56% 66% at 88% 66%, hsl(358 54% 16% / 0.30) 0%, transparent 56%),
radial-gradient(ellipse 38% 42% at 52% 3%, hsl(358 54% 18% / 0.22) 0%, transparent 52%);
}
/* Wider, more vivid copper spine */
.proc-spine {
width: 3px;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(157, 38, 43, 0.95) 6%,
rgba(157, 38, 43, 0.72) 50%,
rgba(157, 38, 43, 0.95) 94%,
transparent 100%
);
}
/* Larger timeline node dot with copper halo */
.proc-node-dot {
width: 16px;
height: 16px;
box-shadow:
0 0 0 3px rgba(157, 38, 43, 0.18),
0 0 10px rgba(157, 38, 43, 0.26);
}
.proc-row:hover .proc-node-dot {
box-shadow:
0 0 0 7px rgba(157, 38, 43, 0.20),
0 0 18px rgba(157, 38, 43, 0.36);
}
.proc-node-ring {
border-color: rgba(157, 38, 43, 0.62);
}
/* Deeper glass card + always-visible copper accent on inline-start edge */
.proc-card {
background: rgba(12, 19, 36, 0.70);
border: 1px solid rgba(157, 38, 43, 0.14);
border-inline-start: 3px solid rgba(157, 38, 43, 0.44);
}
.proc-card:hover {
background: rgba(12, 19, 36, 0.86);
border-color: rgba(157, 38, 43, 0.28);
border-inline-start-color: rgba(157, 38, 43, 0.82);
}
/* Larger copper watermark number */
.proc-card-num {
font-size: 10rem;
color: rgba(157, 38, 43, 0.07);
}
.proc-card:hover .proc-card-num {
color: rgba(157, 38, 43, 0.14);
}
/* Stronger icon ring with ambient inner glow */
.proc-icon-ring {
background: rgba(157, 38, 43, 0.10);
border: 1.5px solid rgba(157, 38, 43, 0.40);
box-shadow: inset 0 0 14px rgba(157, 38, 43, 0.08);
}
.proc-card:hover .proc-icon-ring {
box-shadow: 0 0 22px rgba(157, 38, 43, 0.30);
}
/* Warm sand card titles */
.proc-card-title {
color: var(--color-sand-50, #F5F0E8);
}
/* Warm muted description */
.proc-card-desc {
color: rgba(210, 200, 182, 0.76);
}
/* CTA block — deeper glass, copper border */
.proc-cta {
background: rgba(12, 19, 36, 0.70);
border: 1px solid rgba(157, 38, 43, 0.22);
}
.proc-cta-title {
color: var(--color-sand-50, #F5F0E8);
}
/* Restore icon ring appearance on touch (no hover transforms) */
@media (hover: none) {
.proc-card:hover .proc-icon-ring {
box-shadow: inset 0 0 14px rgba(157, 38, 43, 0.08);
}
}
/* ──────────────────────────────────────────────────────────────────── */
/* ======================================================================
Areas Grid Section (ag-)
====================================================================== */
/* ---------- shell ---------- */
.ag-section {
position: relative;
background-color: var(--bg-body);
padding: var(--space-20) 0;
overflow: hidden;
}
.ag-pattern {
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-55deg,
transparent,
transparent 28px,
rgba(255, 255, 255, 0.016) 28px,
rgba(255, 255, 255, 0.016) 29px
);
pointer-events: none;
}
/* subtle radial ambient glow */
.ag-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 50% at 10% 30%, hsl(358 53% 16% / 0.28) 0%, transparent 55%),
radial-gradient(ellipse 55% 60% at 90% 75%, hsl(358 53% 12% / 0.20) 0%, transparent 55%);
pointer-events: none;
}
.ag-section .container { position: relative; z-index: 1; }
/* ---------- header ---------- */
.ag-header {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-14);
}
.ag-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.ag-badge svg { flex-shrink: 0; }
.ag-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.25;
margin-bottom: var(--space-4);
}
.ag-title-accent {
display: block;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ag-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ---------- smart auto-fill grid ---------- */
.ag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-14);
}
/* ---------- card ---------- */
.ag-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 140px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-2xl);
overflow: hidden;
transition:
transform 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* region name as large typographic watermark */
.ag-card::before {
content: attr(data-region);
position: absolute;
inset-block-end: -0.15em;
inset-inline-end: var(--space-3);
font-size: 4.5rem;
font-weight: 800;
color: var(--text-primary);
opacity: 0.045;
line-height: 1;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
max-width: 90%;
}
.ag-card:hover {
transform: translateY(-6px);
border-color: rgba(157, 38, 43, 0.35);
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.40),
0 0 36px rgba(157, 38, 43, 0.12);
}
/* radial glow — removed (simplified) */
.ag-card-glow {
display: none;
}
/* ---------- thumbnail — hidden (text-first card layout) ---------- */
.ag-card-thumb {
display: none;
}
.ag-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.ag-card:hover .ag-thumb-img { transform: scale(1.06); }
/* overlay on real image */
.ag-thumb-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
transparent 40%,
rgba(13, 17, 23, 0.7) 100%
);
pointer-events: none;
}
/* placeholder — no image uploaded */
.ag-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(
ellipse at 50% 40%,
hsl(358 53% 18% / 0.55) 0%,
hsl(358 53% 8% / 0.40) 60%,
rgba(13, 17, 23, 0.30) 100%
);
color: var(--color-primary-400);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.ag-card:hover .ag-thumb-placeholder { opacity: 1; }
.ag-thumb-placeholder svg { width: 36px; height: 36px; }
/* ---------- card body ---------- */
.ag-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--space-5) var(--space-4) var(--space-4);
gap: var(--space-2);
}
.ag-card-district {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-gold-400, #D25746);
}
.ag-card-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: 1.3;
margin: 0;
}
.ag-card-link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.ag-card-link:hover,
.ag-card:hover .ag-card-link { color: var(--color-primary-300); }
.ag-card-excerpt {
font-size: var(--font-size-sm);
color: var(--text-secondary);
line-height: var(--line-height-relaxed);
margin: 0;
flex: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* CTA link — pinned to card bottom */
.ag-card-cta {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-3);
color: var(--color-primary-400);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: color 0.2s ease, gap 0.25s ease;
}
.ag-card-cta svg {
width: 14px;
height: 14px;
rotate: 135deg; /* arrow-up rotated = arrow pointing inline-end */
transition: transform 0.25s ease;
}
.ag-card-cta:hover { color: var(--color-primary-300); }
.ag-card-cta:hover svg { transform: translateX(-4px); }
/* ---------- empty state ---------- */
.ag-empty {
text-align: center;
padding: var(--space-16) var(--space-8);
margin-bottom: var(--space-12);
}
.ag-empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.10);
border: 1px solid rgba(157, 38, 43, 0.22);
color: var(--color-primary-400);
margin: 0 auto var(--space-5);
}
.ag-empty-icon svg { width: 36px; height: 36px; }
.ag-empty-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.ag-empty-sub {
color: var(--text-secondary);
margin: 0;
}
/* ---------- "didn't find your area?" CTA ---------- */
.ag-cta {
display: flex;
align-items: center;
gap: var(--space-6);
padding: var(--space-7) var(--space-8);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-2xl);
}
.ag-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: var(--radius-xl);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.25);
color: var(--color-primary-400);
flex-shrink: 0;
}
.ag-cta-icon svg { width: 28px; height: 28px; }
.ag-cta-text { flex: 1; }
.ag-cta-title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-1);
}
.ag-cta-sub {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
margin: 0;
}
.ag-cta-btns {
display: flex;
gap: var(--space-3);
flex-shrink: 0;
}
.ag-btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-full);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.ag-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ag-btn--primary {
background: var(--gradient-gold-btn);
color: var(--color-navy-950);
font-weight: 800;
}
.ag-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(157, 38, 43, 0.38);
}
.ag-btn--whatsapp {
background: rgba(37, 211, 102, 0.12);
border: 1px solid rgba(37, 211, 102, 0.30);
color: #25d366;
}
.ag-btn--whatsapp:hover {
transform: translateY(-2px);
background: rgba(37, 211, 102, 0.20);
box-shadow: 0 10px 32px rgba(37, 211, 102, 0.22);
}
/* ---------- scroll animations ---------- */
.ag-section .ag-header.animate-on-scroll,
.ag-section .ag-cta.animate-on-scroll,
.ag-section .ag-empty.animate-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ag-section .ag-header.animate-on-scroll.animated,
.ag-section .ag-cta.animate-on-scroll.animated,
.ag-section .ag-empty.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
.ag-section .ag-card.animate-on-scroll {
opacity: 0;
transform: translateY(24px) scale(0.98);
transition: opacity 0.55s ease, transform 0.55s ease;
transition-delay: var(--reveal-delay, 0ms);
}
.ag-section .ag-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---------- responsive ---------- */
/* ≤1024px */
@media (max-width: 1024px) {
.ag-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
/* ≤900px */
@media (max-width: 900px) {
.ag-cta { flex-direction: column; text-align: center; gap: var(--space-4); }
.ag-cta-text { text-align: center; }
.ag-cta-btns { justify-content: center; }
}
/* ≤640px */
@media (max-width: 640px) {
.ag-section { padding: var(--space-14) 0; }
.ag-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.ag-header { margin-bottom: var(--space-10); }
.ag-cta { padding: var(--space-5) var(--space-4); }
.ag-btn { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }
}
/* ≤480px — keep 2-col (text-first cards stay compact) */
@media (max-width: 480px) {
.ag-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.ag-cta-btns { flex-direction: column; width: 100%; }
.ag-btn { justify-content: center; width: 100%; }
}
/* ≤360px — single column only if truly necessary */
@media (max-width: 360px) {
.ag-grid { grid-template-columns: 1fr; }
}
/* ≤360px */
@media (max-width: 360px) {
.ag-card-body { padding: var(--space-4) var(--space-3); }
}
/* touch */
@media (hover: none) {
.ag-card:hover,
.ag-btn--primary:hover,
.ag-btn--whatsapp:hover { transform: none; box-shadow: none; }
.ag-card:hover .ag-thumb-img { transform: none; }
.ag-card:hover .ag-card-glow { opacity: 0; }
}
/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ag-thumb-img,
.ag-card-glow,
.ag-section .ag-header.animate-on-scroll,
.ag-section .ag-card.animate-on-scroll,
.ag-section .ag-cta.animate-on-scroll,
.ag-section .ag-empty.animate-on-scroll {
transition: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ── ag-section: warm light sand enhancement ─────────────────────── */
/* Sand surface — tonal breathing space after dark Process + Why sections */
.ag-section {
background-color: var(--color-sand-50, #F5F0E8);
}
/* Map-grid route-line pattern on sand */
.ag-pattern {
background-image:
linear-gradient(rgba(180, 110, 40, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(180, 110, 40, 0.055) 1px, transparent 1px);
background-size: 44px 44px;
}
/* Warm ambient radial glows — subtle on light surface */
.ag-section::before {
background:
radial-gradient(ellipse 65% 50% at 8% 28%, rgba(157, 38, 43, 0.09) 0%, transparent 55%),
radial-gradient(ellipse 50% 60% at 92% 72%, rgba(157, 38, 43, 0.07) 0%, transparent 55%);
}
/* Badge — copper tint on sand */
.ag-badge {
background: rgba(157, 38, 43, 0.10);
border-color: rgba(157, 38, 43, 0.28);
color: var(--color-copper-500, #9D262B);
}
/* Section heading — dark navy on sand */
.ag-title {
color: var(--color-navy-900, #0F1628);
}
.ag-subtitle {
color: rgba(51, 65, 85, 0.85);
}
/* Warm white cards + copper start-edge accent */
.ag-card {
background: var(--color-warm-card, #FFFDF9);
border: 1px solid rgba(157, 38, 43, 0.15);
border-inline-start: 3px solid rgba(157, 38, 43, 0.38);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
/* Card watermark (data-region) — copper tint visible on light card */
.ag-card::before {
color: rgba(157, 38, 43, 0.12);
opacity: 1;
}
/* Card hover — lighter shadow appropriate for light surface */
.ag-card:hover {
transform: translateY(-5px);
border-color: rgba(157, 38, 43, 0.32);
border-inline-start-color: rgba(157, 38, 43, 0.80);
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.09),
0 0 0 1px rgba(157, 38, 43, 0.10);
}
/* Card typography — dark navy on warm white */
.ag-card-district {
color: var(--color-copper-500, #9D262B);
}
.ag-card-title {
color: var(--color-navy-900, #0F1628);
}
.ag-card-link {
color: var(--color-navy-900, #0F1628);
}
.ag-card-link:hover,
.ag-card:hover .ag-card-link {
color: var(--color-copper-500, #9D262B);
}
.ag-card-excerpt {
color: rgba(51, 65, 85, 0.78);
}
.ag-card-cta {
color: var(--color-copper-500, #9D262B);
}
.ag-card-cta:hover {
color: var(--color-copper-400, #D25746);
}
/* Empty state — dark typography on sand */
.ag-empty-title {
color: var(--color-navy-900, #0F1628);
}
.ag-empty-sub {
color: rgba(51, 65, 85, 0.78);
}
/* "Didn't find your area?" CTA — warm white, copper border */
.ag-cta {
background: var(--color-warm-card, #FFFDF9);
border: 1px solid rgba(157, 38, 43, 0.18);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.ag-cta-title {
color: var(--color-navy-900, #0F1628);
}
.ag-cta-sub {
color: rgba(51, 65, 85, 0.78);
}
/* ──────────────────────────────────────────────────────────────────── */
/* ======================================================================
Quote Form Section
====================================================================== */
.quote-form-section {
padding: var(--space-16) 0;
}
.quote-form-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--space-8);
align-items: start;
}
.quote-form-wrapper {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-8);
}
.quote-form-wrapper .section-header {
margin-bottom: var(--space-6);
text-align: center;
}
.quote-form-wrapper .section-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-2);
}
.quote-form-wrapper .section-subtitle {
color: var(--text-secondary);
}
/* Form Actions */
.form-actions {
text-align: center;
margin-top: var(--space-6);
}
.form-actions .btn {
min-width: 220px;
}
/* Privacy Notice */
.privacy-notice {
margin-top: var(--space-4);
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
flex-shrink: 0;
}
/* Form Message */
.form-message {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
text-align: center;
}
.form-message.success {
background: hsla(42, 53%, 43%, 0.15);
color: var(--accent);
border: 1px solid hsla(42, 53%, 43%, 0.3);
}
.form-message.error {
background: hsla(0, 70%, 50%, 0.15);
color: hsl(0, 70%, 65%);
border: 1px solid hsla(0, 70%, 50%, 0.3);
}
/* Spinner */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.6s linear infinite;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Trust Sidebar */
.trust-sidebar {
position: sticky;
top: calc(var(--header-height, 80px) + var(--space-4));
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.trust-badges {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.sidebar-title {
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.badges-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.trust-badge-item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
}
.trust-badge-item .badge-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: hsla(42, 53%, 43%, 0.1);
border-radius: var(--radius-md);
color: var(--accent);
}
.trust-badge-item .badge-content {
flex: 1;
min-width: 0;
}
.trust-badge-item .badge-title {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.trust-badge-item .badge-text {
font-size: var(--font-size-xs);
color: var(--text-secondary);
line-height: 1.4;
}
/* Contact Info Card */
.contact-info-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.contact-info-card .card-title {
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
.contact-methods {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.contact-methods .btn {
width: 100%;
justify-content: center;
}
.working-hours {
text-align: center;
color: var(--text-muted);
margin-top: var(--space-2);
}
/* Responsive */
@media (max-width: 960px) {
.quote-form-layout {
grid-template-columns: 1fr;
}
.trust-sidebar {
position: static;
flex-direction: row;
flex-wrap: wrap;
}
.trust-badges,
.contact-info-card {
flex: 1;
min-width: 280px;
}
}
@media (max-width: 640px) {
.quote-form-wrapper {
padding: var(--space-5);
}
.trust-sidebar {
flex-direction: column;
}
.trust-badges,
.contact-info-card {
min-width: 0;
}
}
/* ==========================================================================
About Page Hero (abt-hero-)
========================================================================== */
.abt-hero {
position: relative;
background: var(--bg-body);
padding: calc(var(--space-16) + 64px) 0 var(--space-16);
overflow: hidden;
isolation: isolate;
}
.abt-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.abt-hero-blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.48;
will-change: transform;
}
.abt-hero-blob--1 {
width: 560px; height: 560px;
top: -140px; right: -80px;
background: radial-gradient(circle, hsla(42,65%,44%,0.5), transparent 68%);
animation: abt-hero-blob-float 17s ease-in-out infinite;
}
.abt-hero-blob--2 {
width: 480px; height: 480px;
bottom: -120px; left: -100px;
background: radial-gradient(circle, hsla(215,70%,48%,0.3), transparent 68%);
animation: abt-hero-blob-float 22s ease-in-out infinite reverse;
animation-delay: -8s;
}
.abt-hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, black 25%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 72%);
}
.abt-hero-noise {
position: absolute; inset: 0; opacity: 0.03; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
@keyframes abt-hero-blob-float {
0%,100% { transform: translate3d(0,0,0) scale(1); }
33% { transform: translate3d(36px,-28px,0) scale(1.07); }
66% { transform: translate3d(-28px,36px,0) scale(0.96); }
}
/* Container / grid */
.abt-hero .container { position: relative; z-index: 2; }
.abt-hero-grid-layout {
display: grid;
grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
gap: var(--space-12);
align-items: center;
}
/* Content */
.abt-hero-content { max-width: 640px; }
/* Reveal */
.abt-hero .reveal {
opacity: 0;
transform: translateY(18px);
animation: abt-reveal 0.75s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--reveal-delay, 0ms));
}
@keyframes abt-reveal { to { opacity:1; transform:translateY(0); } }
/* Badge */
.abt-hero-badge {
position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: linear-gradient(135deg, hsla(42,60%,50%,0.14), hsla(42,60%,50%,0.06));
border: 1px solid hsla(42,60%,55%,0.28);
border-radius: var(--radius-full);
font-size: var(--font-size-sm); font-weight: 600;
color: var(--color-primary-400);
margin-bottom: var(--space-5);
overflow: hidden;
backdrop-filter: blur(10px);
}
.abt-hero-badge-pulse {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--color-primary-400);
animation: hero-pulse 2.2s ease-out infinite;
}
/* Breadcrumb */
.abt-breadcrumb {
display: flex; align-items: center; gap: var(--space-2);
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
}
.abt-bc-link { color: var(--text-secondary); text-decoration: none; transition: color .2s ease; }
.abt-bc-link:hover { color: var(--color-primary-400); }
.abt-bc-sep { color: var(--text-muted); display: inline-flex; }
.abt-bc-current { color: var(--text-primary); font-weight: 600; }
/* Title */
.abt-hero-title {
font-size: clamp(2rem, 5vw, 3.6rem);
font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.abt-hero-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
background-size: 200% 200%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: hero-accent-shift 6s ease-in-out infinite;
}
/* Subtitle */
.abt-hero-subtitle {
font-size: clamp(1rem, 1.15vw, 1.15rem);
color: var(--text-secondary); line-height: 1.75;
margin-bottom: var(--space-7); max-width: 560px;
}
/* Actions */
.abt-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.abt-hero-cta-primary {
position: relative; overflow: hidden;
box-shadow: 0 10px 30px -10px hsla(42,60%,42%,0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.abt-hero-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px hsla(42,60%,42%,0.7);
}
.abt-cta-shimmer {
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .6s ease;
pointer-events: none;
}
.abt-hero-cta-primary:hover .abt-cta-shimmer { transform: translateX(120%); }
.abt-cta-icon { display: inline-flex; transition: transform .25s ease; }
.abt-hero-cta-primary:hover .abt-cta-icon { transform: translateX(-4px); }
.abt-hero-cta-wa {
position: relative;
background: hsl(142,70%,45%); color: #fff;
box-shadow: 0 8px 20px -10px hsl(142,70%,40%);
transition: background .25s ease, transform .25s ease;
}
.abt-hero-cta-wa:hover { background: hsl(142,72%,40%); transform: translateY(-2px); }
.abt-hero-wa-pulse {
position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 hsla(142,70%,45%,0.55);
animation: hero-pulse 2.4s ease-out infinite;
pointer-events: none;
}
/* Stats strip */
.abt-hero-stats {
list-style: none; margin: 0; padding: var(--space-5);
display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-xl);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.abt-hero-stat {
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
padding-inline-start: var(--space-3);
border-inline-start: 2px solid var(--color-primary-500);
}
.abt-hero-stat-num {
font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 800; line-height: 1;
color: var(--text-primary); letter-spacing: -0.01em;
}
.abt-hero-stat-lbl { font-size: var(--font-size-xs); color: var(--text-secondary); white-space: nowrap; }
/* Visual col */
.abt-hero-visual { position: relative; display: flex; justify-content: center; min-height: 400px; }
.abt-hero-visual-inner { position: relative; width: 100%; max-width: 520px; }
.abt-hero-image {
width: 100%; aspect-ratio: 1/1;
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: 0 28px 56px -18px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.06) inset,
0 0 70px -20px hsla(42,60%,50%,0.28);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.abt-hero-image img { width:100%; height:100%; object-fit:cover; display:block; }
.abt-hero-image--placeholder {
display: grid; place-items: center;
color: hsla(42,60%,55%,0.5);
background: radial-gradient(circle at 30% 30%, hsla(42,60%,50%,0.2), transparent 60%),
linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
/* Chips */
.abt-hero-chip {
position: absolute; display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: rgba(20,26,34,0.85);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-full);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
font-size: var(--font-size-xs);
box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45);
z-index: 3;
}
.abt-hero-chip-icon {
display: inline-grid; place-items: center; width: 28px; height: 28px;
border-radius: 50%; background: hsla(42,60%,50%,0.16);
color: var(--color-primary-300);
}
.abt-hero-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.abt-hero-chip-text strong { color: var(--text-primary); font-weight: 700; }
.abt-hero-chip-text span { color: var(--text-secondary); font-size: 11px; }
.abt-hero-chip--1 { top: 18px; inset-inline-end: -28px; animation: hero-float 7s ease-in-out infinite; }
.abt-hero-chip--2 { bottom: 60px; inset-inline-start: -44px; animation: hero-float 9s ease-in-out infinite -3s; }
/* Responsive */
@media (max-width: 1024px) {
.abt-hero { padding: calc(var(--space-14) + 60px) 0 var(--space-12); }
.abt-hero-grid-layout { grid-template-columns: 1fr; gap: var(--space-8); }
.abt-hero-content { max-width: 100%; }
.abt-hero-visual { order: -1; min-height: 280px; }
.abt-hero-chip--1 { inset-inline-end: -8px; }
.abt-hero-chip--2 { inset-inline-start: -8px; }
}
@media (max-width: 768px) {
.abt-hero { padding: calc(var(--space-12) + 56px) 0 var(--space-10); }
.abt-hero-actions { flex-direction: column; }
.abt-hero-actions .btn { width:100%; justify-content:center; }
.abt-hero-stats { grid-template-columns: repeat(2,1fr); padding: var(--space-4); gap: var(--space-3); }
.abt-hero-chip--1, .abt-hero-chip--2 { display: none; }
}
@media (max-width: 480px) {
.abt-hero-stats { gap: var(--space-2); padding: var(--space-3); }
}
@media (hover: none) {
.abt-hero-cta-primary:hover { transform: none; }
.abt-hero-cta-wa:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.abt-hero-blob, .abt-hero-chip, .abt-hero-badge-pulse, .abt-hero-wa-pulse { animation: none !important; }
.abt-hero .reveal { opacity:1; transform:none; animation:none !important; }
}
/* ==========================================================================
About — Values (abt-val-)
========================================================================== */
.abt-val-section {
position: relative; background: var(--bg-surface);
padding: var(--space-20) 0; overflow: hidden;
}
.abt-val-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.abt-val-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.12; }
.abt-val-blob--1 { width: 540px; height: 540px; top: -160px; inset-inline-end: -80px;
background: radial-gradient(circle, hsl(358 53% 32%) 0%, transparent 70%);
animation: abt-blob-drift 12s ease-in-out infinite alternate; }
.abt-val-blob--2 { width: 420px; height: 420px; bottom: -100px; inset-inline-start: -60px;
background: radial-gradient(circle, hsl(215 60% 40%) 0%, transparent 70%);
animation: abt-blob-drift 15s ease-in-out infinite alternate-reverse; }
@keyframes abt-blob-drift {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(24px,16px) scale(1.08); }
}
.abt-val-section .container { position: relative; z-index: 1; }
/* Header */
.abt-val-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.abt-val-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.abt-val-title {
font-size: clamp(1.75rem, 3.8vw, 2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.abt-val-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.abt-val-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Grid */
.abt-val-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6);
}
/* Card */
.abt-val-card {
position: relative;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-6);
overflow: hidden; isolation: isolate;
transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.abt-val-card:hover {
transform: translateY(-6px);
border-color: hsla(42,60%,55%,0.35);
box-shadow: 0 20px 48px -14px rgba(0,0,0,0.4), 0 0 36px -18px hsla(42,60%,45%,0.25);
}
.abt-val-card-glow {
position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(circle at 50% 0%, hsla(42,60%,50%,0.12), transparent 65%);
opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.abt-val-card:hover .abt-val-card-glow { opacity: 1; }
.abt-val-icon {
display: inline-grid; place-items: center; width: 58px; height: 58px;
border-radius: var(--radius-lg);
background: hsla(42,60%,50%,0.10);
color: var(--color-primary-400);
margin-bottom: var(--space-5);
transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.abt-val-card:hover .abt-val-icon {
background: var(--color-primary-500); color: #fff;
transform: scale(1.06) rotate(-4deg);
box-shadow: 0 10px 28px -10px hsla(42,60%,42%,0.6);
}
.abt-val-card-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-3); line-height: 1.3; }
.abt-val-card-desc { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.75; margin: 0; }
/* Scroll animation */
.abt-val-header.animate-on-scroll,
.abt-val-card.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .6s ease var(--reveal-delay,0ms), transform .6s ease var(--reveal-delay,0ms);
}
.abt-val-header.animate-on-scroll.animated,
.abt-val-card.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .abt-val-section { padding: var(--space-16) 0; } }
@media (max-width: 900px) { .abt-val-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .abt-val-section { padding: var(--space-14) 0; } .abt-val-header { margin-bottom: var(--space-8); } }
@media (max-width: 560px) { .abt-val-grid { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 480px) { .abt-val-card { padding: var(--space-5) var(--space-4); } }
@media (hover: none) { .abt-val-card:hover { transform: none; box-shadow: none; } .abt-val-card:hover .abt-val-icon { background: hsla(42,60%,50%,0.1); color: var(--color-primary-400); transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
.abt-val-blob { animation: none !important; }
.abt-val-header.animate-on-scroll, .abt-val-card.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
About — Stats (abt-st-)
========================================================================== */
.abt-st-section {
position: relative; background: var(--bg-body);
padding: var(--space-20) 0; overflow: hidden;
}
.abt-st-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.abt-st-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.14; }
.abt-st-blob--1 { width: 560px; height: 560px; top: -150px; inset-inline-start: -80px;
background: radial-gradient(circle, hsl(358 55% 35%) 0%, transparent 70%);
animation: abt-blob-drift 14s ease-in-out infinite alternate; }
.abt-st-blob--2 { width: 440px; height: 440px; bottom: -120px; inset-inline-end: -70px;
background: radial-gradient(circle, hsl(215 60% 42%) 0%, transparent 70%);
animation: abt-blob-drift 18s ease-in-out infinite alternate-reverse; }
.abt-st-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(157, 38, 43,0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(157, 38, 43,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
}
.abt-st-section .container { position: relative; z-index: 1; }
/* Header */
.abt-st-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.abt-st-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.abt-st-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.abt-st-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.abt-st-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Grid */
.abt-st-grid-layout {
display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6);
}
/* Item */
.abt-st-item {
position: relative; text-align: center;
padding: var(--space-8) var(--space-5);
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.abt-st-item:hover {
transform: translateY(-5px);
border-color: rgba(157, 38, 43,0.35);
box-shadow: 0 18px 48px -14px rgba(0,0,0,0.38), 0 0 30px -16px hsla(42,60%,45%,0.2);
}
.abt-st-icon {
display: inline-grid; place-items: center; width: 48px; height: 48px;
border-radius: var(--radius-lg);
background: rgba(157, 38, 43,0.10); border: 1px solid rgba(157, 38, 43,0.2);
color: var(--color-primary-400);
margin: 0 auto var(--space-4);
transition: background .3s ease;
}
.abt-st-item:hover .abt-st-icon { background: rgba(157, 38, 43,0.2); }
.abt-st-num-wrap { line-height: 1; margin-bottom: var(--space-2); }
.abt-st-num {
font-size: clamp(2rem,4vw,2.75rem); font-weight: 800; display: inline-block;
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.abt-st-label { color: var(--text-secondary); font-size: var(--font-size-sm); margin: 0; line-height: 1.4; }
.abt-st-line {
position: absolute; bottom: 0; inset-inline-start: 20%; inset-inline-end: 20%;
height: 2px; background: linear-gradient(to left, var(--color-primary-500), var(--color-primary-300));
border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: center;
transition: transform .35s ease;
}
.abt-st-item:hover .abt-st-line { transform: scaleX(1); }
/* Scroll animation */
.abt-st-header.animate-on-scroll,
.abt-st-item.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .6s ease var(--reveal-delay,0ms), transform .6s ease var(--reveal-delay,0ms);
}
.abt-st-header.animate-on-scroll.animated,
.abt-st-item.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .abt-st-section { padding: var(--space-16) 0; } }
@media (max-width: 900px) { .abt-st-grid-layout { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .abt-st-section { padding: var(--space-14) 0; } .abt-st-header { margin-bottom: var(--space-8); } }
@media (max-width: 560px) { .abt-st-grid-layout { grid-template-columns: repeat(2,1fr); gap: var(--space-3); } }
@media (max-width: 360px) { .abt-st-grid-layout { grid-template-columns: 1fr; } }
@media (hover: none) { .abt-st-item:hover { transform: none; box-shadow: none; } .abt-st-item:hover .abt-st-line { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
.abt-st-blob { animation: none !important; }
.abt-st-line { transition: none !important; }
.abt-st-header.animate-on-scroll, .abt-st-item.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
About Timeline (abt-tl-)
========================================================================== */
.abt-tl-section {
position: relative; background: var(--bg-surface);
padding: var(--space-20) 0; overflow: hidden;
}
.abt-tl-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.abt-tl-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.10; }
.abt-tl-blob--1 { width: 500px; height: 500px; top: -120px; inset-inline-end: -80px;
background: radial-gradient(circle, hsl(358 53% 32%) 0%, transparent 70%);
animation: abt-blob-drift 13s ease-in-out infinite alternate; }
.abt-tl-blob--2 { width: 380px; height: 380px; bottom: -80px; inset-inline-start: -60px;
background: radial-gradient(circle, hsl(215 60% 40%) 0%, transparent 70%);
animation: abt-blob-drift 17s ease-in-out infinite alternate-reverse; }
.abt-tl-section .container { position: relative; z-index: 1; }
/* Header */
.abt-tl-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-14); }
.abt-tl-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.abt-tl-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.abt-tl-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.abt-tl-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Track */
.abt-tl-track {
position: relative; display: flex; flex-direction: column; gap: var(--space-8);
max-width: 900px; margin: 0 auto;
}
/* Spine */
.abt-tl-spine {
position: absolute; top: 0; bottom: 0;
left: 50%; transform: translateX(-50%);
width: 2px;
background: linear-gradient(to bottom, transparent, rgba(157, 38, 43,0.4) 10%, rgba(157, 38, 43,0.4) 90%, transparent);
}
/* Item */
.abt-tl-item {
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: start; gap: var(--space-6);
position: relative;
}
/* Year bubble (always center) */
.abt-tl-year-bubble {
position: absolute; left: 50%; transform: translateX(-50%) translateY(-4px);
top: 0; z-index: 3;
display: inline-flex; align-items: center; justify-content: center;
min-width: 72px; height: 32px;
padding: 0 var(--space-3);
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600,hsl(358,53%,35%)));
border-radius: var(--radius-full);
font-size: var(--font-size-sm); font-weight: 800; color: #fff;
box-shadow: 0 4px 16px -4px hsla(42,60%,40%,0.6);
}
/* Node (dot on spine) */
.abt-tl-node {
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; position: relative; margin-top: var(--space-6);
}
.abt-tl-node-ring {
position: absolute; inset: -4px; border-radius: 50%;
border: 2px solid rgba(157, 38, 43,0.4);
animation: abt-tl-ring-pulse 2.5s ease-out infinite;
}
.abt-tl-node-dot {
width: 12px; height: 12px; border-radius: 50%;
background: var(--color-primary-400);
box-shadow: 0 0 12px hsla(42,60%,45%,0.7);
}
@keyframes abt-tl-ring-pulse {
0%,100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.5); opacity: 0; }
}
/* Card */
.abt-tl-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-top: var(--space-2);
transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.abt-tl-card:hover {
border-color: rgba(157, 38, 43,0.32);
box-shadow: 0 14px 42px -12px rgba(0,0,0,0.35), 0 0 24px -12px hsla(42,60%,45%,0.18);
transform: translateY(-3px);
}
/* start = card on inline-start (right in RTL), end = card on inline-end */
.abt-tl-item--start .abt-tl-card { grid-column: 1; grid-row: 1; }
.abt-tl-item--start .abt-tl-node { grid-column: 2; grid-row: 1; }
.abt-tl-item--start :empty { grid-column: 3; }
.abt-tl-item--end .abt-tl-card { grid-column: 3; grid-row: 1; }
.abt-tl-item--end .abt-tl-node { grid-column: 2; grid-row: 1; }
.abt-tl-item--end :empty { grid-column: 1; }
.abt-tl-card-icon {
display: inline-grid; place-items: center; width: 44px; height: 44px;
border-radius: var(--radius-lg); background: rgba(157, 38, 43,0.1);
color: var(--color-primary-400); margin-bottom: var(--space-3);
}
.abt-tl-card-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.abt-tl-card-desc { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.75; margin: 0; }
/* Scroll animation */
.abt-tl-header.animate-on-scroll,
.abt-tl-item.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .6s ease var(--reveal-delay,0ms), transform .6s ease var(--reveal-delay,0ms);
}
.abt-tl-header.animate-on-scroll.animated,
.abt-tl-item.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive — collapse to single column */
@media (max-width: 768px) {
.abt-tl-section { padding: var(--space-14) 0; }
.abt-tl-spine { left: 20px; }
.abt-tl-track { gap: var(--space-6); }
.abt-tl-item { grid-template-columns: 44px 1fr; gap: var(--space-4); }
.abt-tl-year-bubble { position: static; transform: none; margin-bottom: var(--space-2); grid-column: 1 / -1; }
.abt-tl-node { grid-column: 1; grid-row: 2; }
.abt-tl-item--start .abt-tl-card,
.abt-tl-item--end .abt-tl-card { grid-column: 2; grid-row: 2; margin-top: 0; }
.abt-tl-item--start :empty,
.abt-tl-item--end :empty { display: none; }
}
@media (max-width: 480px) { .abt-tl-card { padding: var(--space-4) var(--space-4); } }
@media (hover: none) { .abt-tl-card:hover { transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
.abt-tl-blob { animation: none !important; }
.abt-tl-node-ring { animation: none !important; }
.abt-tl-header.animate-on-scroll, .abt-tl-item.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
Contact — Hero (cti-hero-)
========================================================================== */
.cti-hero {
position: relative; background: var(--bg-body);
padding: calc(var(--space-14) + 64px) 0 var(--space-14);
overflow: hidden; isolation: isolate;
}
.cti-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.cti-hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.45; will-change: transform; }
.cti-hero-blob--1 { width: 500px; height: 500px; top: -120px; right: -60px;
background: radial-gradient(circle, hsla(42,65%,44%,0.5), transparent 68%);
animation: abt-hero-blob-float 16s ease-in-out infinite; }
.cti-hero-blob--2 { width: 420px; height: 420px; bottom: -100px; left: -80px;
background: radial-gradient(circle, hsla(215,70%,48%,0.28), transparent 68%);
animation: abt-hero-blob-float 20s ease-in-out infinite reverse; animation-delay:-7s; }
.cti-hero-grid {
position: absolute; inset: 0;
background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, black 25%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 72%);
}
.cti-hero .container { position: relative; z-index: 2; }
.cti-hero-inner {
max-width: 760px; margin: 0 auto; text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.cti-hero-badge {
position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: linear-gradient(135deg, hsla(42,60%,50%,0.14), hsla(42,60%,50%,0.06));
border: 1px solid hsla(42,60%,55%,0.28);
border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600;
color: var(--color-primary-400); margin-bottom: var(--space-4); overflow: hidden;
backdrop-filter: blur(10px);
}
.cti-hero-badge-pulse {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--color-primary-400); animation: hero-pulse 2.2s ease-out infinite;
}
/* ==========================================================================
Social Proof Stats Bar — sp- prefix
Compact trust strip displayed immediately after the hero.
========================================================================== */
.sp-bar {
position: relative;
background: var(--bg-elevated, #1A2340);
padding: var(--space-10) 0;
}
.sp-bar__border-top,
.sp-bar__border-bottom {
position: absolute;
inset-inline: 0;
height: 2px;
background: var(--gradient-beam);
opacity: 0.70;
}
.sp-bar__border-top { top: 0; }
.sp-bar__border-bottom { bottom: 0; }
.sp-bar__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
text-align: center;
}
.sp-bar__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
}
.sp-bar__icon {
display: none;
}
.sp-bar__number {
font-family: var(--font-family-primary);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 700;
color: var(--color-gold-500, #9D262B);
line-height: 1.1;
letter-spacing: -0.02em;
}
.sp-bar__counter--placeholder {
color: var(--color-muted-text, #7A8BA8);
font-size: 1.5rem;
}
.sp-bar__label {
font-size: var(--font-size-sm);
color: var(--color-muted-text, #7A8BA8);
font-weight: 400;
line-height: 1.4;
max-width: 120px;
}
/* Anchor stat — visually separates the guaranteed coverage figure */
.sp-bar__item--anchor {
border-inline-end: 1px solid var(--border-medium, rgba(201,146,42,0.22));
padding-inline-end: var(--space-6);
}
/* Scroll-entrance animation */
.sp-bar__item.animate-on-scroll {
opacity: 0;
transform: translateY(16px);
transition:
opacity .6s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
transform .6s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}
.sp-bar__item.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.sp-bar__item.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
/* Tablet: 2×2 */
@media (max-width: 768px) {
.sp-bar__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8) var(--space-4);
}
.sp-bar__label {
max-width: none;
}
}
/* Mobile: keep 2×2, tighten spacing */
@media (max-width: 480px) {
.sp-bar {
padding: var(--space-8) 0;
}
.sp-bar__number {
font-size: 1.75rem;
}
}
/* ==========================================================================
Confidence Bar — شريط الطمأنة (cb- prefix)
4 reassurance pillars. Trust bridge between hero and services.
No counters. No fake numbers. Deep navy + copper accent only.
========================================================================== */
/* ---- Section: transparent wrapper that pulls the dock up into the hero -- */
.cb-bar {
position: relative;
z-index: 8;
background: transparent;
margin-top: clamp(-54px, -5vw, -34px);
padding-inline: var(--container-padding, clamp(16px, 5vw, 40px));
padding-bottom: var(--space-10);
}
/* ---- Dock: premium floating glass panel ---------------------------------- */
.cb-bar__dock {
position: relative;
display: grid;
grid-template-columns: minmax(220px, 0.85fr) 2.4fr;
gap: 0;
overflow: hidden;
border-radius: 24px;
border: 1px solid rgba(157, 38, 43, 0.28);
background:
linear-gradient(145deg, rgba(23, 32, 51, 0.88), rgba(7, 11, 20, 0.84)),
rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
max-width: var(--container-max-width, 1200px);
margin-inline: auto;
}
/* Copper glow line at top of the dock */
.cb-bar__dock::before {
content: '';
position: absolute;
inset-inline: 32px;
inset-block-start: 0;
height: 2px;
background: linear-gradient(
to right,
transparent,
rgba(224, 182, 109, 0.85) 40%,
rgba(224, 182, 109, 0.85) 60%,
transparent
);
z-index: 1;
pointer-events: none;
}
/* ---- Intro block (right column in RTL) ----------------------------------- */
.cb-bar__intro {
padding: clamp(22px, 2.8vw, 34px);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-2);
/* RTL: border-inline-end = left edge of intro = the divider between intro and pillars */
border-inline-end: 1px solid rgba(157, 38, 43, 0.18);
}
.cb-bar__intro-title {
color: var(--text-primary);
font-size: clamp(1.05rem, 1.8vw, 1.5rem);
font-weight: 800;
line-height: 1.3;
margin: 0;
}
.cb-bar__intro-text {
color: rgba(255, 255, 255, 0.48);
font-size: var(--font-size-sm);
line-height: 1.7;
margin: 0;
font-weight: 400;
}
/* ---- Unused edge divs removed — kept as no-op fallback ------------------ */
.cb-bar__edge { display: none; }
/* ---- Pillars grid (left panel in RTL) ------------------------------------ */
.cb-bar__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
/* ---- Individual pillar --------------------------------------------------- */
.cb-bar__item {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: clamp(20px, 2.4vw, 28px);
}
/*
* Vertical separator between pillars.
* RTL: border-inline-end = left border of each cell.
* Items 1, 2, 3 (not last) get the divider at their left edge.
*/
.cb-bar__item:not(:last-child) {
border-inline-end: 1px solid rgba(157, 38, 43, 0.13);
}
/* ---- Icon circle --------------------------------------------------------- */
.cb-bar__icon-wrap {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: hsla(42, 60%, 50%, 0.12);
border: 1px solid hsla(42, 60%, 50%, 0.20);
color: var(--color-primary-400, hsl(358, 60%, 55%));
margin-bottom: var(--space-1);
flex-shrink: 0;
}
/* ---- Title --------------------------------------------------------------- */
.cb-bar__title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px;
font-size: 0.9375rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
margin: 0;
}
/* "9" anchor numeral (pillar 4) */
.cb-bar__highlight {
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary-400, hsl(358, 60%, 55%));
line-height: 1;
letter-spacing: -0.03em;
}
/* ---- Descriptor ---------------------------------------------------------- */
.cb-bar__desc {
font-size: var(--font-size-xs);
color: rgba(255, 255, 255, 0.44);
line-height: 1.6;
font-weight: 400;
}
/* ---- Dock entrance: single fade-up for the whole card -------------------- */
.cb-bar__dock.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity .65s ease .1s, transform .65s cubic-bezier(.2, .7, .2, 1) .1s;
}
.cb-bar__dock.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---- Pillar stagger: each pillar fades up with its own delay ------------- */
.cb-bar__item.animate-on-scroll {
opacity: 0;
transform: translateY(10px);
transition:
opacity .5s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
transform .5s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}
.cb-bar__item.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.cb-bar__dock.animate-on-scroll,
.cb-bar__item.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---- Tablet ≤1024px: pillars collapse to 2×2 ----------------------------- */
@media (max-width: 1024px) {
.cb-bar__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Reset 4-col borders, re-apply for 2-col RTL layout */
.cb-bar__item:not(:last-child) {
border-inline-end: none;
}
/* Items 1 and 3 are in the right column (RTL) — they get the vertical divider */
.cb-bar__item:nth-child(odd) {
border-inline-end: 1px solid rgba(157, 38, 43, 0.13);
}
/* Row divider between items 1-2 and items 3-4 */
.cb-bar__item:nth-child(1),
.cb-bar__item:nth-child(2) {
border-bottom: 1px solid rgba(157, 38, 43, 0.13);
}
}
/* ---- Mobile ≤768px: dock becomes vertical, no hero overlap --------------- */
@media (max-width: 768px) {
.cb-bar {
margin-top: 0;
padding-inline: var(--space-4);
padding-top: var(--space-4);
padding-bottom: var(--space-6);
}
.cb-bar__dock {
grid-template-columns: 1fr;
border-radius: 20px;
}
.cb-bar__intro {
border-inline-end: none;
border-bottom: 1px solid rgba(157, 38, 43, 0.16);
padding: clamp(18px, 5vw, 26px);
}
.cb-bar__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Reset all borders, then re-apply 2×2 pattern */
.cb-bar__item:not(:last-child) {
border-inline-end: none;
border-bottom: none;
}
.cb-bar__item:nth-child(odd) {
border-inline-end: 1px solid rgba(157, 38, 43, 0.13);
}
.cb-bar__item:nth-child(1),
.cb-bar__item:nth-child(2) {
border-bottom: 1px solid rgba(157, 38, 43, 0.13);
}
.cb-bar__item:nth-child(3),
.cb-bar__item:nth-child(4) {
padding-top: clamp(16px, 3vw, 20px);
}
}
/* ---- Small mobile ≤480px ------------------------------------------------- */
@media (max-width: 480px) {
.cb-bar {
padding-inline: var(--space-3);
}
.cb-bar__dock {
border-radius: 16px;
}
.cb-bar__icon-wrap {
width: 36px;
height: 36px;
}
.cb-bar__title {
font-size: var(--font-size-sm);
}
.cb-bar__highlight {
font-size: 1.25rem;
}
}
/* Checklist in Final CTA */
.ct-checklist {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-6);
justify-content: center;
padding: 0;
margin: 0 0 var(--space-2);
}
.ct-checklist__item {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: 0.9375rem;
color: var(--color-slate-300);
}
.ct-checklist__item svg {
color: var(--color-primary-400);
flex-shrink: 0;
}
/* Breadcrumb */
.cti-breadcrumb { display: flex; align-items: center; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.cti-bc-link { color: var(--text-secondary); text-decoration: none; transition: color .2s ease; }
.cti-bc-link:hover { color: var(--color-primary-400); }
.cti-bc-sep { color: var(--text-muted); display: inline-flex; }
.cti-bc-current { color: var(--text-primary); font-weight: 600; }
.cti-hero-title {
font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 800; line-height: 1.1;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-5);
}
.cti-hero-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: hero-accent-shift 6s ease-in-out infinite;
}
.cti-hero-subtitle {
font-size: clamp(1rem,1.15vw,1.15rem); color: var(--text-secondary);
line-height: 1.75; max-width: 580px; margin-bottom: var(--space-8);
}
.cti-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.cti-hero-cta {
position: relative; overflow: hidden;
box-shadow: 0 10px 30px -10px hsla(42,60%,42%,0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.cti-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px hsla(42,60%,42%,0.7); }
.cti-cta-shimmer {
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .6s ease; pointer-events: none;
}
.cti-hero-cta:hover .cti-cta-shimmer { transform: translateX(120%); }
.cti-hero-wa {
position: relative; background: hsl(142,70%,45%); color: #fff;
box-shadow: 0 8px 20px -10px hsl(142,70%,40%);
transition: background .25s ease, transform .25s ease;
}
.cti-hero-wa:hover { background: hsl(142,72%,40%); transform: translateY(-2px); }
.cti-wa-pulse {
position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 hsla(142,70%,45%,0.55);
animation: hero-pulse 2.4s ease-out infinite; pointer-events: none;
}
.cti-hero-call {
background: rgba(255,255,255,0.04); color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.12);
transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.cti-hero-call:hover { background: rgba(255,255,255,0.08); border-color: var(--color-primary-400); transform: translateY(-2px); }
/* Reveal */
.cti-hero .reveal {
opacity: 0; transform: translateY(18px);
animation: abt-reveal 0.75s cubic-bezier(.2,.7,.2,1) forwards;
animation-delay: calc(var(--reveal-delay,0ms));
}
/* Responsive */
@media (max-width: 768px) {
.cti-hero { padding: calc(var(--space-12) + 56px) 0 var(--space-10); }
.cti-hero-actions { flex-direction: column; align-items: stretch; }
.cti-hero-actions .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
.cti-hero-blob, .cti-hero-badge-pulse, .cti-wa-pulse { animation: none !important; }
.cti-hero .reveal { opacity:1; transform:none; animation:none !important; }
}
/* ==========================================================================
Contact — Info Cards (cti-)
========================================================================== */
.cti-section {
position: relative; background: var(--bg-body);
padding: var(--space-16) 0; overflow: hidden;
}
.cti-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cti-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.10; }
.cti-blob--1 { width: 480px; height: 480px; top: -120px; inset-inline-end: -60px;
background: radial-gradient(circle, hsl(358 55% 34%) 0%, transparent 70%);
animation: abt-blob-drift 13s ease-in-out infinite alternate; }
.cti-blob--2 { width: 360px; height: 360px; bottom: -80px; inset-inline-start: -50px;
background: radial-gradient(circle, hsl(215 58% 40%) 0%, transparent 70%);
animation: abt-blob-drift 16s ease-in-out infinite alternate-reverse; }
.cti-section .container { position: relative; z-index: 1; }
/* Header */
.cti-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); }
.cti-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.cti-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.cti-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.cti-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Cards */
.cti-cards {
display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-5);
margin-bottom: var(--space-6);
}
.cti-card {
text-align: center; padding: var(--space-7) var(--space-5);
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cti-card:hover {
transform: translateY(-5px);
border-color: rgba(157, 38, 43,0.32);
box-shadow: 0 16px 42px -12px rgba(0,0,0,0.35), 0 0 24px -12px hsla(42,60%,45%,0.18);
}
.cti-card-icon {
display: inline-grid; place-items: center; width: 52px; height: 52px;
border-radius: var(--radius-lg); background: rgba(157, 38, 43,0.10);
color: var(--color-primary-400); margin: 0 auto var(--space-4);
transition: background .3s ease, transform .3s ease;
}
.cti-card:hover .cti-card-icon { background: rgba(157, 38, 43,0.2); transform: scale(1.05); }
.cti-card-label { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.cti-card-value { color: var(--text-secondary); font-size: var(--font-size-sm); margin: 0; line-height: 1.6; }
.cti-card-link { text-decoration: none; color: var(--text-secondary); transition: color .2s ease; }
.cti-card-link:hover { color: var(--color-primary-400); }
/* Emergency banner */
.cti-emergency {
display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
padding: var(--space-5) var(--space-6);
background: rgba(251,191,36,0.06); border: 1px solid rgba(251,191,36,0.25);
border-radius: var(--radius-xl); margin-bottom: var(--space-6);
}
.cti-emergency-icon { display: inline-flex; color: #f59e0b; flex-shrink: 0; }
.cti-emergency-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.cti-emergency-label { font-size: var(--font-size-sm); font-weight: 700; color: #f59e0b; }
.cti-emergency-num { font-size: var(--font-size-lg); font-weight: 800; color: var(--text-primary); text-decoration: none; transition: color .2s ease; }
.cti-emergency-num:hover { color: #f59e0b; }
.cti-emergency-btn {
margin-inline-start: auto; background: rgba(251,191,36,0.12);
color: #f59e0b; border: 1px solid rgba(251,191,36,0.3);
transition: background .25s ease, border-color .25s ease;
}
.cti-emergency-btn:hover { background: rgba(251,191,36,0.22); border-color: rgba(251,191,36,0.55); }
/* Social */
.cti-social { text-align: center; }
.cti-social-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.cti-social-row { display: flex; justify-content: center; gap: var(--space-3); }
.cti-social-link {
display: inline-grid; place-items: center; width: 48px; height: 48px;
border-radius: 50%; background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
color: var(--text-secondary); text-decoration: none;
transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.cti-social-link:hover {
background: rgba(157, 38, 43,0.14); border-color: rgba(157, 38, 43,0.4);
color: var(--color-primary-300); transform: translateY(-3px);
}
.cti-social-link--wa { background: rgba(29,185,84,0.1); border-color: rgba(29,185,84,0.25); color: hsl(142,70%,55%); }
.cti-social-link--wa:hover { background: rgba(29,185,84,0.22); border-color: rgba(29,185,84,0.5); }
/* Scroll animation */
.cti-header.animate-on-scroll,
.cti-card.animate-on-scroll,
.cti-emergency.animate-on-scroll,
.cti-social.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .6s ease var(--reveal-delay,0ms), transform .6s ease var(--reveal-delay,0ms);
}
.cti-header.animate-on-scroll.animated,
.cti-card.animate-on-scroll.animated,
.cti-emergency.animate-on-scroll.animated,
.cti-social.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .cti-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .cti-section { padding: var(--space-14) 0; } .cti-emergency { flex-direction: column; align-items: flex-start; } .cti-emergency-btn { margin-inline-start: 0; } }
@media (max-width: 560px) { .cti-cards { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (hover: none) { .cti-card:hover { transform: none; box-shadow: none; } .cti-social-link:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.cti-blob { animation: none !important; }
.cti-header.animate-on-scroll, .cti-card.animate-on-scroll, .cti-emergency.animate-on-scroll, .cti-social.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
Contact — Form (ctf-)
========================================================================== */
.ctf-section {
position: relative; background: var(--bg-surface);
padding: var(--space-20) 0; overflow: hidden;
}
.ctf-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ctf-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.10; }
.ctf-blob--1 { width: 500px; height: 500px; top: -120px; inset-inline-end: -70px;
background: radial-gradient(circle, hsl(358 55% 34%) 0%, transparent 70%);
animation: abt-blob-drift 12s ease-in-out infinite alternate; }
.ctf-blob--2 { width: 380px; height: 380px; bottom: -80px; inset-inline-start: -50px;
background: radial-gradient(circle, hsl(215 58% 40%) 0%, transparent 70%);
animation: abt-blob-drift 15s ease-in-out infinite alternate-reverse; }
.ctf-section .container { position: relative; z-index: 1; }
/* Header */
.ctf-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.ctf-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.ctf-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.ctf-title-accent {
background: linear-gradient(135deg, var(--color-primary-300), var(--color-primary-500));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.ctf-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Layout */
.ctf-layout {
display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: start;
}
/* Form wrap */
.ctf-form-wrap {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-2xl);
padding: var(--space-8);
}
/* Success alert */
.ctf-success {
display: flex; align-items: flex-start; gap: var(--space-4);
padding: var(--space-5) var(--space-6);
background: rgba(157, 38, 43,0.1); border: 1px solid rgba(157, 38, 43,0.3);
border-radius: var(--radius-xl); margin-bottom: var(--space-6);
color: var(--color-primary-300);
}
.ctf-success svg { flex-shrink: 0; }
.ctf-success strong { display: block; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); }
.ctf-success p { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
/* Row */
.ctf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Field */
.ctf-field { margin-bottom: var(--space-5); }
.ctf-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.ctf-req { color: var(--color-primary-400); margin-inline-start: 2px; }
/* Input wrap */
.ctf-input-wrap {
position: relative; display: flex; align-items: center;
}
.ctf-input-icon {
position: absolute; inset-inline-start: var(--space-4);
display: inline-flex; color: var(--text-muted);
pointer-events: none; z-index: 1;
transition: color .2s ease;
}
.ctf-input,
.ctf-select,
.ctf-textarea {
width: 100%; padding: var(--space-3) var(--space-4);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-lg);
color: var(--text-primary); font-size: var(--font-size-base);
font-family: inherit;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
outline: none;
-webkit-appearance: none; appearance: none;
}
.ctf-input,
.ctf-select { padding-inline-start: calc(var(--space-4) * 2 + 16px); }
.ctf-input::placeholder,
.ctf-textarea::placeholder { color: var(--text-muted); }
.ctf-input:focus,
.ctf-select:focus,
.ctf-textarea:focus {
border-color: var(--color-primary-500);
background: rgba(255,255,255,0.06);
box-shadow: 0 0 0 3px hsla(42,60%,50%,0.18);
}
.ctf-input:focus ~ .ctf-input-icon,
.ctf-select:focus ~ .ctf-input-icon { color: var(--color-primary-400); }
.ctf-input-wrap:focus-within .ctf-input-icon { color: var(--color-primary-400); }
.ctf-textarea { padding-inline-start: var(--space-4); min-height: 130px; resize: vertical; }
/* Select */
.ctf-input-wrap--select .ctf-select { padding-inline-end: calc(var(--space-4) + 24px); }
.ctf-select-caret {
position: absolute; inset-inline-end: var(--space-4);
display: inline-flex; color: var(--text-muted);
pointer-events: none;
}
/* Submit */
.ctf-submit {
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center; gap: var(--space-3);
width: 100%; padding: var(--space-4) var(--space-6);
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600,hsl(358,53%,35%)));
color: #fff; border: none; border-radius: var(--radius-xl);
font-size: var(--font-size-base); font-weight: 700; font-family: inherit;
cursor: pointer;
box-shadow: 0 12px 32px -10px hsla(42,60%,42%,0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.ctf-submit:hover {
transform: translateY(-2px);
box-shadow: 0 20px 44px -10px hsla(42,60%,42%,0.7);
}
.ctf-submit-shimmer {
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .6s ease; pointer-events: none;
}
.ctf-submit:hover .ctf-submit-shimmer { transform: translateX(120%); }
.ctf-submit-icon { display: inline-flex; }
.ctf-submit-text { position: relative; z-index: 1; }
/* Sidebar */
.ctf-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }
.ctf-sidebar-block {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl); padding: var(--space-6);
}
.ctf-sidebar-heading { font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); }
/* Quick contact */
.ctf-qc { display: flex; flex-direction: column; gap: var(--space-3); }
.ctf-qc-wa {
position: relative; display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: hsl(142,70%,45%); color: #fff;
border-radius: var(--radius-xl); text-decoration: none; font-weight: 700;
box-shadow: 0 10px 28px -10px hsl(142,70%,40%);
transition: background .25s ease, transform .25s ease;
overflow: hidden;
}
.ctf-qc-wa:hover { background: hsl(142,72%,40%); transform: translateY(-2px); }
.ctf-qc-wa-pulse {
position: absolute; inset: 0; border-radius: inherit;
box-shadow: 0 0 0 0 hsla(142,70%,45%,0.55);
animation: hero-pulse 2.4s ease-out infinite; pointer-events: none;
}
.ctf-qc-call {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-xl); text-decoration: none; color: var(--text-primary);
transition: background .25s ease, border-color .25s ease;
}
.ctf-qc-call:hover { background: rgba(255,255,255,0.08); border-color: rgba(157, 38, 43,0.35); }
.ctf-qc-call-label { display: block; font-size: var(--font-size-xs); color: var(--text-secondary); }
.ctf-qc-call-num { display: block; font-size: var(--font-size-sm); font-weight: 700; }
.ctf-qc-hours {
display: flex; align-items: center; gap: var(--space-2);
font-size: var(--font-size-xs); color: var(--text-secondary);
padding: var(--space-3) var(--space-4);
background: rgba(255,255,255,0.02); border-radius: var(--radius-lg);
}
.ctf-qc-hours svg { flex-shrink: 0; color: var(--color-primary-400); }
/* Trust list */
.ctf-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ctf-trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }
.ctf-trust-icon { display: inline-flex; color: var(--color-primary-400); flex-shrink: 0; }
.ctf-trust-text { color: var(--text-secondary); }
/* Scroll animation */
.ctf-header.animate-on-scroll,
.ctf-form-col.animate-on-scroll,
.ctf-sidebar.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .7s ease var(--reveal-delay,0ms), transform .7s ease var(--reveal-delay,0ms);
}
.ctf-header.animate-on-scroll.animated,
.ctf-form-col.animate-on-scroll.animated,
.ctf-sidebar.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .ctf-layout { grid-template-columns: 1fr 320px; gap: var(--space-6); } }
@media (max-width: 900px) { .ctf-layout { grid-template-columns: 1fr; } .ctf-sidebar { flex-direction: row; flex-wrap: wrap; } .ctf-sidebar-block { flex: 1 1 280px; } }
@media (max-width: 768px) { .ctf-section { padding: var(--space-14) 0; } .ctf-form-wrap { padding: var(--space-6); } .ctf-row { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 640px) { .ctf-sidebar { flex-direction: column; } .ctf-sidebar-block { flex: none; } }
@media (max-width: 480px) { .ctf-form-wrap { padding: var(--space-5) var(--space-4); } }
@media (hover: none) { .ctf-submit:hover { transform: none; } .ctf-qc-wa:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
.ctf-blob { animation: none !important; }
.ctf-qc-wa-pulse { animation: none !important; }
.ctf-submit-shimmer, .ctf-submit { transition: none !important; }
.ctf-header.animate-on-scroll, .ctf-form-col.animate-on-scroll, .ctf-sidebar.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
About — Certifications (abt-crt-)
========================================================================== */
.abt-crt-section {
position: relative; background: var(--bg-body);
padding: var(--space-20) 0; overflow: hidden;
}
.abt-crt-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.abt-crt-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.12; }
.abt-crt-blob--1 { width: 520px; height: 520px; top: -140px; inset-inline-start: -80px;
background: radial-gradient(circle, hsl(358 55% 35%) 0%, transparent 70%);
animation: abt-blob-drift 13s ease-in-out infinite alternate; }
.abt-crt-blob--2 { width: 400px; height: 400px; bottom: -100px; inset-inline-end: -60px;
background: radial-gradient(circle, hsl(215 60% 42%) 0%, transparent 70%);
animation: abt-blob-drift 16s ease-in-out infinite alternate-reverse; }
.abt-crt-section .container { position: relative; z-index: 1; }
/* Header */
.abt-crt-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.abt-crt-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.abt-crt-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.abt-crt-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Grid */
.abt-crt-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6);
}
/* Card */
.abt-crt-card {
position: relative; isolation: isolate; overflow: hidden;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl);
padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-3);
transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.abt-crt-card:hover {
transform: translateY(-6px);
border-color: hsla(42,60%,55%,0.35);
box-shadow: 0 20px 48px -14px rgba(0,0,0,0.4), 0 0 36px -18px hsla(42,60%,45%,0.25);
}
.abt-crt-card-glow {
position: absolute; inset: 0; border-radius: inherit;
background: radial-gradient(circle at 50% 0%, hsla(42,60%,50%,0.12), transparent 65%);
opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 0;
}
.abt-crt-card:hover .abt-crt-card-glow { opacity: 1; }
.abt-crt-card > * { position: relative; z-index: 1; }
.abt-crt-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.abt-crt-icon {
display: inline-grid; place-items: center; width: 52px; height: 52px;
border-radius: var(--radius-lg); background: hsla(42,60%,50%,0.10);
color: var(--color-primary-400);
transition: background .3s ease, transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.abt-crt-card:hover .abt-crt-icon {
background: var(--color-primary-500); color: #fff;
transform: scale(1.06) rotate(-4deg);
box-shadow: 0 10px 28px -10px hsla(42,60%,42%,0.6);
}
.abt-crt-year {
display: inline-flex; align-items: center; justify-content: center;
min-width: 56px; height: 28px; padding: 0 var(--space-3);
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-full);
font-size: var(--font-size-xs); font-weight: 700; color: var(--text-secondary);
letter-spacing: 0.04em;
}
.abt-crt-card-title {
font-size: var(--font-size-lg); font-weight: 700;
color: var(--text-primary); line-height: 1.35; margin: 0;
}
.abt-crt-issuer {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--font-size-xs); color: var(--text-muted);
}
.abt-crt-issuer-icon { display: inline-flex; color: var(--color-primary-400); }
.abt-crt-desc {
color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.75; margin: 0;
flex: 1;
}
.abt-crt-verified {
display: inline-flex; align-items: center; gap: var(--space-2);
padding-top: var(--space-3);
margin-top: auto;
border-top: 1px dashed rgba(255,255,255,0.08);
font-size: var(--font-size-xs); font-weight: 600; color: var(--color-primary-300);
}
.abt-crt-verified svg { color: var(--color-primary-400); }
/* Scroll animation */
.abt-crt-header.animate-on-scroll,
.abt-crt-card.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .6s ease var(--reveal-delay,0ms), transform .6s ease var(--reveal-delay,0ms);
}
.abt-crt-header.animate-on-scroll.animated,
.abt-crt-card.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .abt-crt-section { padding: var(--space-16) 0; } }
@media (max-width: 900px) { .abt-crt-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .abt-crt-section { padding: var(--space-14) 0; } .abt-crt-header { margin-bottom: var(--space-8); } }
@media (max-width: 560px) { .abt-crt-grid { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 480px) { .abt-crt-card { padding: var(--space-5) var(--space-4); } }
@media (hover: none) { .abt-crt-card:hover { transform: none; box-shadow: none; } .abt-crt-card:hover .abt-crt-icon { background: hsla(42,60%,50%,0.1); color: var(--color-primary-400); transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
.abt-crt-blob { animation: none !important; }
.abt-crt-header.animate-on-scroll, .abt-crt-card.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ==========================================================================
Contact — Map (cti-map-)
========================================================================== */
.cti-map-section {
position: relative; background: var(--bg-body);
padding: var(--space-20) 0; overflow: hidden;
}
.cti-map-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cti-map-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.10; }
.cti-map-blob--1 { width: 520px; height: 520px; top: -140px; inset-inline-end: -80px;
background: radial-gradient(circle, hsl(358 55% 35%) 0%, transparent 70%);
animation: abt-blob-drift 14s ease-in-out infinite alternate; }
.cti-map-blob--2 { width: 420px; height: 420px; bottom: -100px; inset-inline-start: -60px;
background: radial-gradient(circle, hsl(215 60% 42%) 0%, transparent 70%);
animation: abt-blob-drift 17s ease-in-out infinite alternate-reverse; }
.cti-map-section .container { position: relative; z-index: 1; }
/* Header */
.cti-map-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); }
.cti-map-badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43,0.12); border: 1px solid rgba(157, 38, 43,0.28);
border-radius: var(--radius-full); color: var(--color-primary-300);
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; margin-bottom: var(--space-4);
}
.cti-map-title {
font-size: clamp(1.75rem,3.8vw,2.6rem); font-weight: 800; line-height: 1.15;
letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-4);
}
.cti-map-subtitle { color: var(--text-secondary); font-size: clamp(.95rem,1.5vw,1.05rem); line-height: 1.75; margin: 0; }
/* Layout */
.cti-map-layout {
display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
gap: var(--space-6); align-items: stretch;
}
/* Map frame */
.cti-map-frame {
position: relative; overflow: hidden;
border-radius: var(--radius-2xl);
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
box-shadow: 0 20px 52px -18px rgba(0,0,0,0.45);
min-height: 460px;
}
.cti-map-frame iframe {
display: block; width: 100%; height: 100%; min-height: 460px; border: 0;
filter: saturate(0.9) contrast(0.95);
}
.cti-map-frame::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06),
inset 0 0 60px rgba(0,0,0,0.25);
}
/* Side */
.cti-map-side {
display: flex; flex-direction: column; gap: var(--space-4);
}
.cti-map-side-block {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl); padding: var(--space-6);
}
.cti-map-side-title {
font-size: var(--font-size-base); font-weight: 700; color: var(--text-primary);
margin: 0 0 var(--space-4);
}
/* Info list */
.cti-map-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.cti-map-info-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.cti-map-info-icon {
display: inline-grid; place-items: center; width: 36px; height: 36px;
border-radius: var(--radius-lg); background: rgba(157, 38, 43,0.1);
color: var(--color-primary-400); flex-shrink: 0;
}
.cti-map-info-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cti-map-info-label { font-size: var(--font-size-xs); color: var(--text-muted); }
.cti-map-info-value { font-size: var(--font-size-sm); color: var(--text-primary); line-height: 1.5; }
/* Actions */
.cti-map-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.cti-map-dir-btn {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
width: 100%;
box-shadow: 0 10px 30px -10px hsla(42,60%,42%,0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.cti-map-dir-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px hsla(42,60%,42%,0.7); }
.cti-map-shimmer {
position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.32) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .6s ease; pointer-events: none;
}
.cti-map-dir-btn:hover .cti-map-shimmer { transform: translateX(120%); }
.cti-map-call {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-xl); text-decoration: none; color: var(--text-primary);
transition: background .25s ease, border-color .25s ease;
}
.cti-map-call:hover { background: rgba(255,255,255,0.08); border-color: rgba(157, 38, 43,0.35); }
.cti-map-call-icon {
display: inline-grid; place-items: center; width: 36px; height: 36px;
border-radius: 50%; background: rgba(157, 38, 43,0.12); color: var(--color-primary-400);
flex-shrink: 0;
}
.cti-map-call-body { display: flex; flex-direction: column; line-height: 1.2; }
.cti-map-call-lbl { font-size: var(--font-size-xs); color: var(--text-secondary); }
.cti-map-call-num { font-size: var(--font-size-sm); font-weight: 700; }
/* Transport */
.cti-map-transport {
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
}
.cti-map-transport-title { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-3); }
.cti-map-transport-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cti-map-transport-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.cti-map-transport-icon {
display: inline-grid; place-items: center; width: 28px; height: 28px;
border-radius: 50%; background: rgba(157, 38, 43,0.1); color: var(--color-primary-400);
flex-shrink: 0;
}
/* Scroll animation */
.cti-map-header.animate-on-scroll,
.cti-map-frame.animate-on-scroll,
.cti-map-side.animate-on-scroll {
opacity: 0; transform: translateY(22px);
transition: opacity .7s ease var(--reveal-delay,0ms), transform .7s ease var(--reveal-delay,0ms);
}
.cti-map-header.animate-on-scroll.animated,
.cti-map-frame.animate-on-scroll.animated,
.cti-map-side.animate-on-scroll.animated { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 1024px) { .cti-map-section { padding: var(--space-16) 0; } .cti-map-layout { grid-template-columns: 1fr; } .cti-map-frame { min-height: 380px; } .cti-map-frame iframe { min-height: 380px; } }
@media (max-width: 768px) { .cti-map-section { padding: var(--space-14) 0; } .cti-map-frame { min-height: 320px; } .cti-map-frame iframe { min-height: 320px; } }
@media (max-width: 480px) { .cti-map-side-block, .cti-map-transport { padding: var(--space-4); } }
@media (hover: none) { .cti-map-dir-btn:hover { transform: none; box-shadow: 0 10px 30px -10px hsla(42,60%,42%,0.55); } }
@media (prefers-reduced-motion: reduce) {
.cti-map-blob { animation: none !important; }
.cti-map-header.animate-on-scroll, .cti-map-frame.animate-on-scroll, .cti-map-side.animate-on-scroll { opacity:1; transform:none; transition:none; }
}
/* ============================================================
HERO — Process Card & Trust Chips
============================================================ */
/* Supporting line below subtitle */
.hero-premium .hero__supporting-line {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.7;
margin-top: -8px;
margin-bottom: 0;
max-width: 560px;
}
/* Trust chips strip */
.hero-premium .hero__trust-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero-premium .hero__trust-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: var(--radius-lg);
background: rgba(157, 38, 43, 0.06);
border: 1px solid var(--border-subtle, rgba(201,146,42,0.06));
color: var(--text-secondary);
font-size: var(--font-size-xs);
font-weight: 600;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.hero-premium .hero__trust-chip svg {
color: var(--color-gold-500);
flex-shrink: 0;
}
.hero-premium .hero__trust-chip:hover {
background: rgba(157, 38, 43, 0.16);
border-color: rgba(157, 38, 43, 0.40);
color: var(--text-primary);
}
/* WhatsApp secondary CTA inside hero */
.hero-premium .hero-cta--whatsapp {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-premium .hero-cta--whatsapp svg {
color: hsl(142, 70%, 52%);
}
/* Process overlay card */
.hero-premium .hero__process-card {
position: absolute;
inset-inline-end: 24px;
bottom: 24px;
width: min(420px, calc(100% - 48px));
padding: 22px 24px;
border-radius: var(--radius-xl);
background: rgba(10, 15, 30, 0.82);
border: 1px solid rgba(157, 38, 43, 0.22);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
box-shadow:
0 24px 64px -16px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.04) inset;
}
.hero-premium .hero__process-eyebrow {
display: inline-flex;
align-items: center;
color: var(--color-gold-500);
font-weight: 800;
font-size: var(--font-size-sm);
margin-bottom: 4px;
}
.hero-premium .hero__process-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-sm);
margin: 0 0 16px;
line-height: 1.5;
}
.hero-premium .hero__process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.hero-premium .hero__process-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(157, 38, 43, 0.12);
text-align: center;
transition: background 0.25s ease, border-color 0.25s ease;
}
.hero-premium .hero__process-step:hover {
background: rgba(157, 38, 43, 0.08);
border-color: rgba(157, 38, 43, 0.28);
}
.hero-premium .hero__process-step span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--color-gold-500);
color: var(--color-navy-950);
font-weight: 900;
font-size: var(--font-size-base);
flex-shrink: 0;
}
.hero-premium .hero__process-step strong {
display: block;
color: var(--text-primary);
font-size: 0.82rem;
font-weight: 700;
}
/* Responsive — process card */
@media (max-width: 900px) {
.hero-premium .hero__process-card {
display: none;
}
}
@media (max-width: 580px) {
.hero-premium .hero__trust-chips { gap: 8px; }
.hero-premium .hero__trust-chip { font-size: 11px; padding: 6px 11px; }
}
/* ============================================================
FINAL CTA — Decision Layout
============================================================ */
/* Override background for decision variant */
.final-cta--decision.ct-section {
background:
radial-gradient(circle at 50% 0%, rgba(157, 38, 43, 0.18), transparent 34%),
linear-gradient(180deg, var(--color-navy-900, #0d1326), var(--color-navy-950, #0a0f1e));
border-top: 1px solid rgba(157, 38, 43, 0.16);
border-bottom: 1px solid rgba(157, 38, 43, 0.16);
}
/* Primary CTA button (gold) */
.ct-btn--primary {
background: linear-gradient(135deg, var(--color-gold-500, #9D262B), #801D23);
color: var(--color-navy-950, #0a0f1e);
font-weight: 800;
box-shadow:
0 12px 36px -10px rgba(157, 38, 43, 0.55),
0 0 0 1px rgba(157, 38, 43, 0.20) inset;
}
.ct-btn--primary:hover {
transform: translateY(-3px);
box-shadow:
0 20px 48px -10px rgba(157, 38, 43, 0.65),
0 0 0 1px rgba(157, 38, 43, 0.35) inset;
}
/* Trust line */
.final-cta__trust-line {
margin-top: 16px;
margin-bottom: 0;
color: var(--color-gold-300, #e5c06a);
font-weight: 700;
font-size: var(--font-size-sm);
}
/* Checklist grid */
.final-cta__checklist {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 36px;
text-align: center;
}
.final-cta__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 14px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(157, 38, 43, 0.12);
color: var(--text-primary);
font-weight: 700;
font-size: var(--font-size-sm);
transition: background 0.25s ease, border-color 0.25s ease;
}
.final-cta__item:hover {
background: rgba(157, 38, 43, 0.07);
border-color: rgba(157, 38, 43, 0.28);
}
.final-cta__item-check {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.14);
color: var(--color-gold-500, #9D262B);
flex-shrink: 0;
}
/* Responsive — checklist */
@media (max-width: 900px) {
.final-cta__checklist {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.final-cta__actions .ct-btn {
width: 100%;
justify-content: center;
}
.final-cta__checklist {
grid-template-columns: 1fr;
}
}
/* ── ct-section: final CTA premium enhancement ───────────────────── */
/* Replace cold blue orb with warm copper — consistent with other sections */
.ct-orb--2 {
background: radial-gradient(circle, hsl(358 52% 35% / 0.22) 0%, transparent 70%);
}
/* Gradient accent text — consistent with section accent pattern */
.ct-title-accent {
background: linear-gradient(
135deg,
var(--color-gold-300, #E88770) 0%,
var(--color-gold-500, #9D262B) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
/* ── Booking preview card ─────────────────────────────────────────── */
.ct-preview {
width: 100%;
max-width: 360px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(157, 38, 43, 0.20);
border-inline-start: 3px solid rgba(157, 38, 43, 0.55);
border-radius: var(--radius-xl);
padding: var(--space-5) var(--space-6);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.ct-preview-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: rgba(157, 38, 43, 0.85);
letter-spacing: 0.04em;
margin: 0 0 var(--space-4);
text-align: start;
}
.ct-preview-rows {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.ct-preview-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
padding: var(--space-3) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ct-preview-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.ct-preview-key {
color: rgba(255, 255, 255, 0.45);
}
.ct-preview-val {
color: rgba(255, 255, 255, 0.80);
font-weight: var(--font-weight-semibold);
}
.ct-preview-val--active {
color: #D25746;
font-weight: var(--font-weight-bold);
}
/* Hide preview card on small screens — CTAs take priority */
@media (max-width: 480px) {
.ct-preview { display: none; }
}
/* Touch: pause shimmer animation */
@media (hover: none) {
.ct-btn-shimmer { animation-play-state: paused; }
}
/* ──────────────────────────────────────────────────────────────────── */
/* ==========================================================================
Inner-Page Hero (IPH) — template-parts/global/iph.php
========================================================================== */
.iph-section {
position: relative;
background: var(--color-navy-950);
padding-block: var(--space-14) var(--space-10);
overflow: hidden;
}
.iph-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.iph-beam {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-primary-700) 20%,
var(--color-primary-500) 55%,
var(--color-primary-700) 80%,
transparent 100%
);
}
.iph-glow {
position: absolute;
top: -100px;
inset-inline-end: 8%;
width: 480px;
height: 480px;
background: radial-gradient(ellipse, rgba(157, 38, 43, 0.10) 0%, transparent 70%);
}
.iph-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.iph-badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.12);
border: 1px solid rgba(157, 38, 43, 0.28);
color: var(--color-primary-400);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
width: fit-content;
}
.iph-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
.iph-title {
font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
font-weight: var(--font-weight-bold);
color: var(--text-primary);
line-height: var(--line-height-tight);
margin: 0;
}
.iph-title-accent {
background: linear-gradient(135deg, var(--color-primary-300) 0%, var(--color-primary-500) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.iph-subtitle {
font-size: var(--font-size-base);
color: var(--text-muted);
line-height: var(--line-height-relaxed);
margin: 0;
max-width: 600px;
}
/* ── Breadcrumb ── */
.breadcrumb { margin-bottom: 0; }
.breadcrumb-list {
display: flex;
align-items: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb-item {
display: flex;
align-items: center;
font-size: var(--font-size-sm);
color: var(--text-muted);
}
.breadcrumb-item:not(:last-child)::after {
content: '›';
margin-inline: var(--space-2);
opacity: 0.4;
font-size: var(--font-size-xs);
}
.breadcrumb-item a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s ease;
}
.breadcrumb-item a:hover { color: var(--color-primary-300); }
.breadcrumb-item.current span,
.breadcrumb-item span { color: var(--text-secondary); }
/* ── Responsive ── */
@media (max-width: 768px) {
.iph-section { padding-block: var(--space-10) var(--space-8); }
.iph-title { font-size: var(--font-size-2xl); }
}
@media (max-width: 480px) {
.iph-section { padding-block: var(--space-8) var(--space-6); }
.iph-title { font-size: var(--font-size-xl); }
}
/* ==========================================================================
Single Service — Section accent span + pricing block (svs- / svsp-)
========================================================================== */
/* Gradient accent on H2 partial spans across single-service sections */
.svs-accent {
background: linear-gradient(135deg, var(--color-primary-300) 0%, var(--color-primary-500) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Pricing block */
.svsp-price-block {
max-width: 480px;
margin-inline: auto;
text-align: center;
padding: var(--space-10) var(--space-8);
background: rgba(157, 38, 43, 0.07);
border: 1px solid rgba(157, 38, 43, 0.22);
border-radius: var(--radius-2xl);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.svsp-price-block svg { color: var(--color-primary-400); }
.svsp-price-value {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 800;
color: var(--text-primary);
margin: 0;
line-height: 1.2;
}
.svsp-price-note {
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.75;
margin: 0;
}
.svsp-price-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
margin-top: var(--space-3);
}
/* Area tags with icon */
.svs-area-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
@media (max-width: 480px) {
.svsp-price-block { padding: var(--space-7) var(--space-5); }
.svsp-price-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.svsp-price-block { transition: none; }
}
/* ==========================================================================
Light Section — Warm Sand Theme
abt-val-section (About → Our Values) and cti-section (Contact → Info)
each get one light break per page, mirroring the homepage Services rhythm.
Text tokens are scoped via CSS custom properties — all children inherit
dark-navy text automatically without per-element overrides.
========================================================================== */
/* ── About page — Our Values ──────────────────────────────────────────────── */
.abt-val-section {
background: var(--color-sand-50);
/* Scope text tokens — dark navy for readability on sand background */
--text-primary: #1a2232;
--text-secondary: #3d4f65;
--text-muted: #566880;
}
/* Blobs — reduce opacity so crimson/blue halos stay subtle on light bg */
.abt-val-section .abt-val-blob { opacity: 0.04; }
/* Badge — shift to darker crimson for adequate contrast on sand */
.abt-val-section .abt-val-badge { color: var(--color-primary-700); }
/* Title accent — darker gradient so it reads on sand */
.abt-val-section .abt-val-title-accent {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Cards — warm white surface with subtle crimson border */
.abt-val-section .abt-val-card {
background: var(--color-warm-card);
border-color: rgba(157, 38, 43, 0.10);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(157, 38, 43, 0.04);
}
.abt-val-section .abt-val-card:hover {
border-color: rgba(157, 38, 43, 0.28);
box-shadow: 0 14px 40px -10px rgba(157, 38, 43, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Card glow on hover — crimson tint (replaces golden glow from dark theme) */
.abt-val-section .abt-val-card-glow {
background: radial-gradient(circle at 50% 0%, rgba(157, 38, 43, 0.06), transparent 65%);
}
/* Icon background — crimson wash instead of golden on light cards */
.abt-val-section .abt-val-icon { background: rgba(157, 38, 43, 0.08); }
.abt-val-section .abt-val-card:hover .abt-val-icon {
box-shadow: 0 6px 18px rgba(157, 38, 43, 0.28);
}
/* ── Contact page — Contact Info ──────────────────────────────────────────── */
.cti-section {
background: var(--color-sand-50);
/* Scope text tokens — dark navy for readability on sand background */
--text-primary: #1a2232;
--text-secondary: #3d4f65;
--text-muted: #566880;
}
/* Blobs — reduce opacity on light bg */
.cti-section .cti-blob { opacity: 0.04; }
/* Badge — darker crimson for contrast on sand */
.cti-section .cti-badge { color: var(--color-primary-700); }
/* Title accent — darker gradient */
.cti-section .cti-title-accent {
background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Cards — warm white surface */
.cti-section .cti-card {
background: var(--color-warm-card);
border-color: rgba(157, 38, 43, 0.10);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(157, 38, 43, 0.04);
}
.cti-section .cti-card:hover {
border-color: rgba(157, 38, 43, 0.28);
box-shadow: 0 14px 40px -10px rgba(157, 38, 43, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Phone/email links — crimson on hover (visible on light bg) */
.cti-section .cti-card-link:hover { color: var(--color-primary-600); }
/* Social icon buttons — visible background/border on sand */
.cti-section .cti-social-link {
background: rgba(157, 38, 43, 0.07);
border-color: rgba(157, 38, 43, 0.18);
color: var(--color-primary-700);
}
.cti-section .cti-social-link:hover {
background: rgba(157, 38, 43, 0.13);
border-color: rgba(157, 38, 43, 0.32);
color: var(--color-primary-600);
}
/* WhatsApp social icon — stays green, slightly darker hue for light-bg contrast */
.cti-section .cti-social-link--wa {
background: rgba(29, 185, 84, 0.09);
border-color: rgba(29, 185, 84, 0.22);
color: hsl(142, 68%, 38%);
}
.cti-section .cti-social-link--wa:hover {
background: rgba(29, 185, 84, 0.17);
border-color: rgba(29, 185, 84, 0.42);
color: hsl(142, 68%, 32%);
}
@media (prefers-reduced-motion: reduce) {
.abt-val-section .abt-val-blob,
.cti-section .cti-blob { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Phase 4 — Locations System
═══════════════════════════════════════════════════════════════════════════ */
/* ── archive-location.php grid (light sand bg) ─────────────────────────── */
.loc-arc-section {
padding-block: var(--space-20) var(--space-16);
background: var(--color-sand-50);
--text-primary: #1a2232;
--text-secondary: #3d4f65;
--text-muted: #566880;
}
.loc-arc-section .service-filter-tabs { margin-bottom: var(--space-10); }
/* ag-card on light sand */
.loc-arc-section .ag-card {
background: var(--color-warm-card, #FFFDF9);
border-color: rgba(157, 38, 43, 0.10);
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(157, 38, 43, 0.04);
}
.loc-arc-section .ag-card:hover {
border-color: rgba(157, 38, 43, 0.28);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.10), 0 0 36px rgba(157, 38, 43, 0.10);
}
.loc-arc-section .ag-card-link:hover,
.loc-arc-section .ag-card:hover .ag-card-link { color: var(--color-primary-600); }
.loc-arc-section .ag-card-cta { color: var(--color-primary-600); }
.loc-arc-section .ag-card-cta:hover { color: var(--color-primary-700); }
.loc-arc-section .ag-cta {
background: var(--color-warm-card, #FFFDF9);
border-color: rgba(157, 38, 43, 0.18);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* ── location-services.php (light sand, svc-card--featured-light) ──────── */
.loc-svc-section {
padding-block: var(--space-16);
background: var(--color-sand-50);
--text-primary: #1a2232;
--text-secondary: #3d4f65;
--text-muted: #566880;
}
.loc-svc-header {
text-align: center;
margin-bottom: var(--space-12);
}
/* ── single-location: post content ─────────────────────────────────────── */
.loc-content-section { padding-block: var(--space-12); }
.loc-content-inner { max-width: 720px; margin-inline: auto; }
/* ── single-location: features grid ────────────────────────────────────── */
.loc-features-section { padding-block: var(--space-16); }
.loc-feat-header { text-align: center; margin-bottom: var(--space-12); }
/* ── single-location: stats (AMF guarded) ──────────────────────────────── */
.loc-stats-section {
padding-block: var(--space-10);
border-block: 1px solid rgba(255, 255, 255, 0.05);
}
.loc-stats-grid {
display: flex;
justify-content: center;
gap: var(--space-12);
flex-wrap: wrap;
}
.loc-stat-item { text-align: center; }
.loc-stat-num {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-extrabold);
background: linear-gradient(135deg, var(--color-primary-400), var(--color-primary-600));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.loc-stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-top: var(--space-1);
}
/* ── single-location: coverage area tags ───────────────────────────────── */
.loc-coverage-section { padding-block: var(--space-16); }
.loc-cov-header { text-align: center; margin-bottom: var(--space-10); }
.loc-cov-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.loc-cov-tag {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.20);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: background 0.2s ease, border-color 0.2s ease;
}
.loc-cov-tag:hover {
background: rgba(157, 38, 43, 0.14);
border-color: rgba(157, 38, 43, 0.35);
}
.loc-cov-tag svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-primary-400); }
.loc-cov-tag strong { font-weight: var(--font-weight-semibold); }
.loc-cov-tag-desc { color: var(--text-muted); font-size: var(--font-size-xs); }
/* ── single-location: FAQ section ──────────────────────────────────────── */
.loc-faq-section { padding-block: var(--space-16); }
.loc-faq-header { text-align: center; margin-bottom: var(--space-12); }
.loc-faq-inner { max-width: 760px; margin-inline: auto; }
/* ── single-location: nearby areas ─────────────────────────────────────── */
.loc-nearby-section { padding-block: var(--space-16); }
.loc-nearby-header { text-align: center; margin-bottom: var(--space-12); }
/* responsive */
@media (max-width: 768px) {
.loc-arc-section { padding-block: var(--space-14) var(--space-12); }
.loc-svc-section { padding-block: var(--space-14); }
.loc-stats-grid { gap: var(--space-8); }
.loc-stat-num { font-size: var(--font-size-3xl); }
.loc-cov-tags { gap: var(--space-2); }
}
@media (max-width: 480px) {
.loc-stats-grid { gap: var(--space-6); }
.loc-stat-num { font-size: var(--font-size-2xl); }
}
/* ==========================================================================
Phase 5 — Blog / Archive / Search / 404
========================================================================== */
/* ── Blog Archive Section (light sand) ─────────────────────────────────── */
.blog-arc-section {
background-color: var(--color-sand-50, #F5F0E8);
padding-block: var(--space-16);
--text-primary: var(--color-navy-950);
--text-secondary: var(--color-navy-800);
--text-muted: var(--color-navy-600);
}
/* category filter chips */
.blog-arc-cats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
margin-bottom: var(--space-8);
}
.blog-arc-cat {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
border: 1px solid rgba(157, 38, 43, 0.22);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.70);
color: var(--color-primary-600);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.blog-arc-cat:hover {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: #fff;
}
/* card overrides for light bg */
.blog-arc-section .rp-card {
background: var(--color-warm-card, #FFFDF9);
border-color: rgba(157, 38, 43, 0.10);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.blog-arc-section .rp-card:hover {
border-color: rgba(157, 38, 43, 0.30);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12), 0 0 20px rgba(157, 38, 43, 0.05);
}
.blog-arc-section .rp-card--featured {
border-color: rgba(157, 38, 43, 0.18);
}
.blog-arc-section .rp-card-placeholder {
background: linear-gradient(135deg, var(--color-sand-50, #F5F0E8) 0%, #e8e2d8 100%);
color: rgba(157, 38, 43, 0.25);
}
.blog-arc-section .rp-card-title a { color: var(--color-navy-950); }
.blog-arc-section .rp-card-title a:hover { color: var(--color-primary-600); }
.blog-arc-section .rp-card-excerpt { color: var(--color-navy-700); }
.blog-arc-section .rp-date { color: var(--color-navy-600); }
.blog-arc-section .rp-read-more { color: var(--color-primary-600); }
.blog-arc-section .rp-read-more:hover { color: var(--color-primary-700); }
/* empty state */
.blog-arc-empty {
text-align: center;
padding-block: var(--space-16);
}
.blog-arc-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.18);
color: var(--color-primary-600);
margin: 0 auto var(--space-5);
}
.blog-arc-empty h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-navy-950);
margin-bottom: var(--space-3);
}
.blog-arc-empty p {
color: var(--color-navy-600);
font-size: var(--font-size-base);
max-width: 400px;
margin-inline: auto;
}
/* soft CTA strip */
.blog-soft-cta {
text-align: center;
padding-block: var(--space-12) var(--space-4);
}
.blog-soft-cta p {
font-size: var(--font-size-base);
color: var(--color-navy-600);
margin-bottom: var(--space-5);
}
/* ── Shared Pagination ──────────────────────────────────────────────────── */
.arc-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
padding-block: var(--space-10) var(--space-4);
}
.arc-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding-inline: var(--space-3);
border-radius: var(--radius-lg);
border: 1px solid rgba(157, 38, 43, 0.20);
background: rgba(255, 255, 255, 0.70);
color: var(--color-navy-700);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.arc-pagination .page-numbers:hover,
.arc-pagination .page-numbers.current {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
color: #fff;
}
.arc-pagination .page-numbers.dots {
border: none;
background: none;
color: var(--color-navy-500);
}
/* ── Generic Archive Section ────────────────────────────────────────────── */
.arc-section {
background-color: var(--color-sand-50, #F5F0E8);
padding-block: var(--space-16);
--text-primary: var(--color-navy-950);
--text-secondary: var(--color-navy-800);
--text-muted: var(--color-navy-600);
}
.arc-section .rp-card { background: var(--color-warm-card, #FFFDF9); border-color: rgba(157, 38, 43, 0.10); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.arc-section .rp-card:hover { border-color: rgba(157, 38, 43, 0.30); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12); }
.arc-section .rp-card-placeholder { background: linear-gradient(135deg, var(--color-sand-50, #F5F0E8) 0%, #e8e2d8 100%); color: rgba(157, 38, 43, 0.25); }
.arc-section .rp-card-title a { color: var(--color-navy-950); }
.arc-section .rp-card-title a:hover { color: var(--color-primary-600); }
.arc-section .rp-card-excerpt { color: var(--color-navy-700); }
.arc-section .rp-date { color: var(--color-navy-600); }
.arc-section .rp-read-more { color: var(--color-primary-600); }
.arc-empty {
text-align: center;
padding-block: var(--space-16);
}
.arc-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.18);
color: var(--color-primary-600);
margin: 0 auto var(--space-5);
}
.arc-empty h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-navy-950);
margin-bottom: var(--space-3);
}
.arc-empty p {
color: var(--color-navy-600);
max-width: 380px;
margin-inline: auto;
}
/* ── Post Hero (single.php dark) ────────────────────────────────────────── */
.post-hero {
position: relative;
background: var(--color-navy-950, #0A0F1C);
padding-block: var(--space-14) var(--space-10);
overflow: hidden;
}
.post-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.post-hero-beam {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-primary-700) 20%,
var(--color-primary-500) 55%,
var(--color-primary-700) 80%,
transparent 100%
);
}
.post-hero-glow {
position: absolute;
top: -120px;
inset-inline-end: 5%;
width: 440px;
height: 440px;
background: radial-gradient(ellipse, rgba(157, 38, 43, 0.10) 0%, transparent 68%);
}
.post-hero-inner {
position: relative;
z-index: 1;
}
.post-hero-cats {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.post-hero-cat {
display: inline-flex;
align-items: center;
padding: 4px var(--space-3);
background: rgba(157, 38, 43, 0.18);
border: 1px solid rgba(157, 38, 43, 0.36);
border-radius: var(--radius-full);
color: var(--color-primary-300);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: background 0.22s ease;
}
.post-hero-cat:hover { background: rgba(157, 38, 43, 0.32); color: #fff; }
.post-hero-title {
font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
font-weight: var(--font-weight-bold);
color: #fff;
line-height: 1.4;
margin-bottom: var(--space-5);
}
.post-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
color: rgba(255, 255, 255, 0.55);
font-size: var(--font-size-sm);
}
.post-hero-meta-item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.post-hero-meta-item svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--color-primary-400);
}
.post-hero-img {
margin-top: var(--space-8);
border-radius: var(--radius-2xl);
overflow: hidden;
max-height: 480px;
}
.post-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── Post Body Section ──────────────────────────────────────────────────── */
.post-body-section {
background: var(--color-warm-card, #FFFDF9);
padding-block: var(--space-12);
}
.post-body-wrap {
max-width: 780px;
margin-inline: auto;
}
/* Arabic prose typography */
.post-body-wrap .entry-content {
font-size: var(--font-size-base);
line-height: 1.9;
color: var(--color-navy-800);
}
.post-body-wrap .entry-content h2,
.post-body-wrap .entry-content h3,
.post-body-wrap .entry-content h4 {
color: var(--color-navy-950);
font-weight: var(--font-weight-bold);
margin-block: var(--space-6) var(--space-3);
line-height: 1.4;
}
.post-body-wrap .entry-content h2 {
font-size: var(--font-size-xl);
border-inline-end: 3px solid var(--color-primary-600);
padding-inline-end: var(--space-3);
}
.post-body-wrap .entry-content h3 { font-size: var(--font-size-lg); }
.post-body-wrap .entry-content h4 { font-size: var(--font-size-base); color: var(--color-primary-700); }
.post-body-wrap .entry-content p { margin-bottom: var(--space-4); }
.post-body-wrap .entry-content a {
color: var(--color-primary-600);
text-decoration: underline;
text-underline-offset: 3px;
}
.post-body-wrap .entry-content a:hover { color: var(--color-primary-700); }
.post-body-wrap .entry-content ul,
.post-body-wrap .entry-content ol {
padding-inline-start: var(--space-5);
margin-bottom: var(--space-4);
}
.post-body-wrap .entry-content li {
margin-bottom: var(--space-2);
line-height: 1.8;
}
.post-body-wrap .entry-content ul li::marker { color: var(--color-primary-600); }
.post-body-wrap .entry-content blockquote {
border-inline-start: 4px solid var(--color-primary-500);
background: rgba(157, 38, 43, 0.04);
padding: var(--space-4) var(--space-5);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
margin-block: var(--space-6);
font-style: italic;
color: var(--color-navy-700);
}
.post-body-wrap .entry-content img {
width: 100%;
height: auto;
border-radius: var(--radius-xl);
margin-block: var(--space-5);
}
.post-body-wrap .entry-content table {
width: 100%;
border-collapse: collapse;
margin-block: var(--space-6);
font-size: var(--font-size-sm);
}
.post-body-wrap .entry-content th {
background: var(--color-primary-600);
color: #fff;
padding: var(--space-3) var(--space-4);
text-align: start;
font-weight: var(--font-weight-semibold);
}
.post-body-wrap .entry-content td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid rgba(157, 38, 43, 0.10);
color: var(--color-navy-700);
}
.post-body-wrap .entry-content tr:nth-child(even) td {
background: rgba(157, 38, 43, 0.03);
}
/* post tags */
.post-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgba(157, 38, 43, 0.12);
}
.post-tags-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-navy-600);
}
.post-tag {
display: inline-flex;
align-items: center;
padding: 4px var(--space-3);
background: rgba(157, 38, 43, 0.07);
border: 1px solid rgba(157, 38, 43, 0.18);
border-radius: var(--radius-full);
color: var(--color-primary-700);
font-size: var(--font-size-xs);
text-decoration: none;
transition: background 0.2s ease;
}
.post-tag:hover { background: rgba(157, 38, 43, 0.14); }
/* post navigation prev/next */
.post-nav {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgba(157, 38, 43, 0.12);
}
.post-nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.post-nav-item {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border: 1px solid rgba(157, 38, 43, 0.14);
border-radius: var(--radius-xl);
background: rgba(157, 38, 43, 0.03);
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease;
}
.post-nav-item:hover {
background: rgba(157, 38, 43, 0.07);
border-color: rgba(157, 38, 43, 0.28);
}
.post-nav-item--prev { text-align: end; }
.post-nav-item--next { text-align: start; }
.post-nav-direction {
font-size: var(--font-size-xs);
color: var(--color-navy-500);
font-weight: var(--font-weight-medium);
}
.post-nav-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-navy-800);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* post soft CTA */
.post-soft-cta {
background: linear-gradient(135deg, rgba(157, 38, 43, 0.06) 0%, rgba(157, 38, 43, 0.02) 100%);
border: 1px solid rgba(157, 38, 43, 0.14);
border-radius: var(--radius-2xl);
padding: var(--space-8) var(--space-6);
text-align: center;
margin-top: var(--space-10);
}
.post-soft-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.10);
border: 1px solid rgba(157, 38, 43, 0.22);
color: var(--color-primary-600);
margin: 0 auto var(--space-4);
}
.post-soft-cta h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-navy-950);
margin-bottom: var(--space-2);
}
.post-soft-cta p {
font-size: var(--font-size-sm);
color: var(--color-navy-600);
margin-bottom: var(--space-5);
}
/* ── Related Posts Section ──────────────────────────────────────────────── */
.post-related-section {
padding-block: var(--space-16);
}
.post-related-header {
text-align: center;
margin-bottom: var(--space-10);
}
/* ── Search Section ─────────────────────────────────────────────────────── */
.srch-section {
background-color: var(--color-sand-50, #F5F0E8);
padding-block: var(--space-16);
--text-primary: var(--color-navy-950);
--text-secondary: var(--color-navy-800);
--text-muted: var(--color-navy-600);
}
.srch-section .rp-card { background: var(--color-warm-card, #FFFDF9); border-color: rgba(157, 38, 43, 0.10); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.srch-section .rp-card:hover { border-color: rgba(157, 38, 43, 0.30); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12); }
.srch-section .rp-card-placeholder { background: linear-gradient(135deg, var(--color-sand-50, #F5F0E8) 0%, #e8e2d8 100%); color: rgba(157, 38, 43, 0.25); }
.srch-section .rp-card-title a { color: var(--color-navy-950); }
.srch-section .rp-card-title a:hover { color: var(--color-primary-600); }
.srch-section .rp-card-excerpt { color: var(--color-navy-700); }
.srch-section .rp-date { color: var(--color-navy-600); }
.srch-section .rp-read-more { color: var(--color-primary-600); }
.srch-empty {
text-align: center;
padding-block: var(--space-14);
}
.srch-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(157, 38, 43, 0.08);
border: 1px solid rgba(157, 38, 43, 0.18);
color: var(--color-primary-600);
margin: 0 auto var(--space-5);
}
.srch-empty h2 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-navy-950);
margin-bottom: var(--space-3);
}
.srch-empty p {
color: var(--color-navy-600);
margin-bottom: var(--space-6);
max-width: 420px;
margin-inline: auto;
}
.srch-empty .search-form {
display: flex;
gap: var(--space-3);
max-width: 480px;
margin-inline: auto;
}
.srch-empty .search-field {
flex: 1;
padding: var(--space-3) var(--space-4);
border: 1px solid rgba(157, 38, 43, 0.22);
border-radius: var(--radius-lg);
background: #fff;
color: var(--color-navy-950);
font-size: var(--font-size-base);
font-family: inherit;
}
.srch-empty .search-field:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: 0 0 0 3px rgba(157, 38, 43, 0.10);
}
.srch-empty .search-submit {
padding: var(--space-3) var(--space-5);
background: var(--color-primary-600);
color: #fff;
border: none;
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
font-family: inherit;
cursor: pointer;
transition: background 0.22s ease;
}
.srch-empty .search-submit:hover { background: var(--color-primary-700); }
/* ── 404 Page ───────────────────────────────────────────────────────────── */
.nf-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--color-navy-950, #0A0F1C);
overflow: hidden;
padding-block: var(--space-20);
}
.nf-bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.nf-beam {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
var(--color-primary-700) 20%,
var(--color-primary-500) 55%,
var(--color-primary-700) 80%,
transparent 100%
);
}
.nf-glow {
position: absolute;
top: -160px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(ellipse, rgba(157, 38, 43, 0.12) 0%, transparent 70%);
}
.nf-inner {
position: relative;
z-index: 1;
text-align: center;
}
.nf-code {
font-size: clamp(96px, 18vw, 180px);
font-weight: var(--font-weight-bold);
line-height: 1;
background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-600) 50%, var(--color-primary-800) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-2);
letter-spacing: -0.04em;
}
.nf-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: #fff;
margin-bottom: var(--space-3);
}
.nf-subtitle {
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.55);
max-width: 440px;
margin-inline: auto;
margin-bottom: var(--space-8);
line-height: 1.7;
}
.nf-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
}
.nf-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.72);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.nf-link:hover {
background: rgba(157, 38, 43, 0.18);
border-color: rgba(157, 38, 43, 0.40);
color: #fff;
}
.nf-link svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-primary-400); }
.nf-search {
max-width: 480px;
margin-inline: auto;
margin-bottom: var(--space-8);
}
.nf-search .search-form {
display: flex;
gap: var(--space-2);
}
.nf-search .search-field {
flex: 1;
padding: var(--space-3) var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: var(--font-size-base);
font-family: inherit;
}
.nf-search .search-field::placeholder { color: rgba(255, 255, 255, 0.35); }
.nf-search .search-field:focus {
outline: none;
border-color: var(--color-primary-500);
background: rgba(255, 255, 255, 0.10);
}
.nf-search .search-submit {
padding: var(--space-3) var(--space-5);
background: var(--color-primary-600);
color: #fff;
border: none;
border-radius: var(--radius-lg);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
font-family: inherit;
cursor: pointer;
transition: background 0.22s ease;
}
.nf-search .search-submit:hover { background: var(--color-primary-700); }
.nf-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
/* ── Phase 5 Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
.blog-arc-section { padding-block: var(--space-12); }
.arc-section { padding-block: var(--space-12); }
.srch-section { padding-block: var(--space-12); }
.post-hero { padding-block: var(--space-10) var(--space-8); }
.post-hero-title { font-size: var(--font-size-2xl); }
.post-hero-img { max-height: 280px; }
.post-body-section { padding-block: var(--space-10); }
.post-nav-links { grid-template-columns: 1fr; }
.post-nav-item--next { text-align: end; }
.post-related-section { padding-block: var(--space-12); }
.nf-section { padding-block: var(--space-16); }
.nf-title { font-size: var(--font-size-xl); }
.nf-links { gap: var(--space-2); }
}
@media (max-width: 640px) {
.blog-arc-cats { gap: var(--space-1); }
.srch-empty .search-form { flex-direction: column; }
.nf-search .search-form { flex-direction: column; }
.nf-actions { flex-direction: column; align-items: center; }
.post-soft-cta { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 480px) {
.blog-arc-section { padding-block: var(--space-10); }
.nf-code { font-size: clamp(72px, 20vw, 96px); }
.nf-subtitle { font-size: var(--font-size-sm); }
.post-body-wrap .entry-content h2 { font-size: var(--font-size-lg); }
}