/* ==========================================================================
KAZZY & KO HAULING — VIBRANT ROYAL BLUE & SHINY METALLIC GOLD 3D THEME
========================================================================== */

:root {
/* Vibrant Royal Blue Palette */
--royal-900: #102a63;
--royal-800: #16367d;
--royal-700: #1e40af;
--royal-600: #1d4ed8;
--royal-500: #2563eb;
--royal-400: #3b82f6;
--royal-300: #60a5fa;

/* Shiny Metallic Yellow-Gold Palette */
--gold-100: #fefce8;
--gold-200: #fef08a;
--gold-300: #fde047;
--gold-400: #facc15;
--gold-500: #eab308;
--gold-600: #ca8a04;
--gold-700: #a16207;

/* Surfaces & Text */
--text-dark: #0f2557;
--text-body: #1e3a8a;
--slate-700: #1e3a8a;
--slate-600: #254799;
--white: #ffffff;

/* Curvy Rounded Edges */
--radius-sm: 14px;
--radius-md: 20px;
--radius-lg: 26px;
--radius-xl: 32px;
--radius-pill: 9999px;

/* 3D Dual Borders (Vibrant Royal Blue + Metallic Gold) */
--shadow-3d:
0 0 0 3px var(--royal-500),
0 7px 0 3px var(--gold-500),
0 16px 30px rgba(22, 54, 125, 0.24);

--shadow-hover:
0 0 0 3px var(--royal-400),
0 10px 0 3px var(--gold-400),
0 22px 40px rgba(22, 54, 125, 0.35);
}

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* STRICT VERTICAL-ONLY SCROLL LOCK (PREVENTS HORIZONTAL SLIDING) */
html, body {
width: 100% !important;
max-width: 100vw !important;
overflow-x: clip !important;
position: relative;
scroll-behavior: smooth;
touch-action: pan-y;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 50%, #dbeafe 100%);
color: var(--text-dark);
line-height: 1.65;
padding-bottom: 84px;
}

@media (min-width: 768px) {
body {
padding-bottom: 0;
}
}

.site-header, main, footer, section {
width: 100% !important;
max-width: 100vw !important;
overflow-x: clip !important;
}

h1, h2, h3, h4, .brand-title-snazzy {
font-family: 'Plus Jakarta Sans', sans-serif;
line-height: 1.15;
letter-spacing: -0.02em;
}

a {
color: inherit;
text-decoration: none;
}

ul {
list-style: none;
}

.container {
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding: 0 0.85rem;
}

@media (min-width: 768px) {
.container {
padding: 0 1.25rem;
}
}

.hidden-honeypot {
display: none !important;
}

/* ==========================================================================
STICKY HEADER — ZERO OVERLAP BETWEEN TITLE & GET QUOTE BUTTON
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: linear-gradient(135deg, var(--royal-800) 0%, var(--royal-600) 55%, var(--royal-500) 100%);
border-bottom: 4px solid var(--gold-400);
box-shadow: 0 4px 0 var(--royal-900), 0 10px 25px rgba(16, 42, 99, 0.45);
}

.header-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 76px;
gap: 0.45rem !important;
width: 100%;
}

/* Clean Borderless Logo + Brand Name */
.brand-logo {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
border-radius: 0 !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}

.logo-img {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: none !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
background: transparent !important;
flex-shrink: 0 !important;
}

.brand-title-snazzy {
display: block !important;
font-size: 0.96rem !important;
font-weight: 900 !important;
background: linear-gradient(180deg, #ffffff 0%, var(--gold-200) 45%, var(--gold-400) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 4px rgba(16, 42, 99, 0.55));
line-height: 1.12 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}

.mobile-only-br {
display: inline;
}

@media (min-width: 768px) {
.brand-logo {
gap: 0.75rem !important;
}
.logo-img {
width: 64px !important;
height: 64px !important;
}
.brand-title-snazzy {
font-size: 1.35rem !important;
white-space: nowrap !important;
}
.mobile-only-br {
display: none;
}
}

.main-nav {
display: none;
align-items: center;
gap: 0.35rem;
}

@media (min-width: 1120px) {
.main-nav {
display: flex;
}
}

.nav-link {
color: var(--white);
font-weight: 800;
font-size: 0.92rem;
padding: 0.5rem 0.85rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
transition: all 0.2s ease;
}

.nav-link:hover, .nav-link[aria-current="page"] {
background: rgba(255, 255, 255, 0.18);
color: var(--gold-200);
border-color: var(--gold-300);
box-shadow: 0 3px 0 var(--gold-500);
}

.nav-dropdown {
position: relative;
}

.dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 270px;
background: linear-gradient(160deg, var(--royal-700) 0%, var(--royal-800) 100%);
border: 3px solid var(--gold-400);
border-radius: var(--radius-md);
box-shadow: 0 6px 0 var(--royal-900), 0 18px 36px rgba(16, 42, 99, 0.5);
padding: 0.65rem;
z-index: 200;
}

.nav-dropdown:hover .dropdown-menu {
display: block;
}

.dropdown-menu a {
display: block;
padding: 0.65rem 0.95rem;
color: var(--white);
font-size: 0.88rem;
font-weight: 700;
border-radius: var(--radius-sm);
transition: all 0.15s ease;
}

.dropdown-menu a:hover {
background: linear-gradient(90deg, var(--gold-200), var(--gold-400));
color: var(--royal-900);
font-weight: 900;
}

/* Header CTA — Compact Pill Buttons on Mobile & Desktop */
.header-cta {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
margin-left: auto !important;
flex-shrink: 0 !important;
}

@media (min-width: 1120px) {
.header-cta {
margin-left: 0 !important;
gap: 0.65rem !important;
}
}

.header-phone {
display: none;
color: var(--gold-200);
font-weight: 800;
font-size: 0.9rem;
padding: 0.5rem 0.95rem;
border-radius: var(--radius-pill);
background: rgba(16, 42, 99, 0.55);
border: 2px solid var(--gold-300);
box-shadow: 0 3px 0 var(--royal-900);
}

@media (min-width: 768px) {
.header-phone {
display: inline-flex;
}
}

.header-cta .btn {
padding: 0.48rem 0.78rem !important;
font-size: 0.78rem !important;
white-space: nowrap !important;
line-height: 1.1 !important;
}

@media (min-width: 768px) {
.header-cta .btn {
padding: 0.6rem 1.2rem !important;
font-size: 0.9rem !important;
}
}

.mobile-menu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, var(--royal-500) 0%, var(--royal-800) 100%);
color: var(--gold-200);
font-weight: 900;
font-size: 0.78rem;
line-height: 1.1;
padding: 0.48rem 0.72rem;
border-radius: var(--radius-pill);
border: 2px solid var(--gold-300);
box-shadow: 0 4px 0 var(--gold-600), 0 6px 14px rgba(16, 42, 99, 0.35);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}

@media (min-width: 1120px) {
.mobile-menu-btn {
display: none;
}
}

.mobile-drawer {
display: none;
background: linear-gradient(180deg, var(--royal-700) 0%, var(--royal-800) 100%);
border-top: 3px solid var(--gold-400);
padding: 1.2rem;
}

.mobile-drawer.open {
display: block;
}

.mobile-drawer ul {
display: grid;
gap: 0.6rem;
}

.mobile-drawer a {
display: block;
padding: 0.8rem 1.1rem;
color: var(--white);
font-weight: 800;
background: linear-gradient(135deg, var(--royal-500) 0%, var(--royal-700) 100%);
border: 2.5px solid var(--gold-300);
border-radius: var(--radius-pill);
box-shadow: 0 4px 0 var(--royal-900);
text-align: center;
}

/* ==========================================================================
SHINY METALLIC GOLD 3D CURVY BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 900;
font-size: 1rem;
padding: 0.9rem 1.6rem;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.18s ease;
text-align: center;
letter-spacing: -0.01em;
position: relative;
max-width: 100%;
}

.btn:active {
transform: translateY(3px);
}

/* Ultra-Shiny Metallic Gold Button */
.btn-primary {
background: linear-gradient(
180deg,
#ffffff 0%,
#fef08a 18%,
#facc15 52%,
#eab308 82%,
#fde047 100%
);
color: var(--royal-900) !important;
border: 2.5px solid #ffffff;
box-shadow:
inset 0 2px 3px rgba(255, 255, 255, 0.95),
inset 0 -2px 4px rgba(161, 98, 7, 0.35),
0 5px 0 var(--gold-700),
0 8px 0 var(--royal-700),
0 12px 24px rgba(250, 204, 21, 0.5);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-primary:hover {
background: linear-gradient(
180deg,
#ffffff 0%,
#fef9c3 22%,
#fde047 55%,
#facc15 88%,
#fef08a 100%
);
transform: translateY(-2px);
box-shadow:
inset 0 3px 5px rgba(255, 255, 255, 1),
0 7px 0 var(--gold-700),
0 10px 0 var(--royal-600),
0 16px 32px rgba(250, 204, 21, 0.7);
}

/* Vibrant Royal Blue & Shiny Gold Trim Secondary Button */
.btn-outline-light {
background: linear-gradient(
180deg,
#60a5fa 0%,
#2563eb 45%,
#1d4ed8 100%
);
color: var(--white) !important;
border: 2.5px solid var(--gold-300);
box-shadow:
inset 0 2px 2px rgba(255, 255, 255, 0.45),
0 5px 0 var(--gold-600),
0 8px 0 var(--royal-900),
0 12px 24px rgba(16, 42, 99, 0.45);
}

.btn-outline-light:hover {
background: linear-gradient(
180deg,
#ffffff 0%,
#fef08a 20%,
#facc15 60%,
#eab308 100%
);
color: var(--royal-900) !important;
border-color: var(--white);
transform: translateY(-2px);
}

.btn-navy {
background: linear-gradient(180deg, var(--royal-400) 0%, var(--royal-600) 45%, var(--royal-800) 100%);
color: var(--gold-200) !important;
border: 3px solid var(--gold-300);
box-shadow:
inset 0 2px 2px rgba(255, 255, 255, 0.4),
0 5px 0 var(--gold-600),
0 8px 0 var(--royal-900),
0 14px 26px rgba(29, 78, 216, 0.35);
}

.btn-navy:hover {
transform: translateY(-2px);
color: var(--white) !important;
}

.btn-block {
display: flex;
width: 100%;
}

.btn-sm {
padding: 0.65rem 1.2rem;
font-size: 0.9rem;
}

/* ==========================================================================
HERO SECTION — VIBRANT ELECTRIC ROYAL BLUE & GOLD
========================================================================== */
.hero {
background:
radial-gradient(circle at 18% 20%, rgba(96, 165, 250, 0.55) 0%, transparent 45%),
radial-gradient(circle at 85% 22%, rgba(250, 204, 21, 0.32) 0%, transparent 40%),
linear-gradient(145deg, var(--royal-800) 0%, var(--royal-600) 52%, var(--royal-500) 100%);
color: var(--white);
padding: 2.5rem 0 4rem;
border-bottom: 5px solid var(--gold-400);
box-shadow: inset 0 -5px 0 var(--royal-700);
}

.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}

@media (min-width: 992px) {
.hero-grid {
grid-template-columns: 1.1fr 0.9fr;
gap: 3rem;
}
}

.eyebrow {
display: inline-block !important;
max-width: 100% !important;
background: linear-gradient(135deg, var(--royal-700) 0%, var(--royal-900) 100%) !important;
color: var(--gold-300) !important;
border: 2.5px solid var(--gold-400) !important;
border-radius: 20px !important;
padding: 0.45rem 1rem !important;
font-size: 0.78rem !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 1.15rem;
box-shadow: 0 4px 0 var(--gold-500), 0 6px 16px rgba(16, 42, 99, 0.35) !important;
}

.hero h1 {
font-size: clamp(2rem, 4.8vw, 3.4rem);
font-weight: 900;
margin-bottom: 1.1rem;
color: var(--white);
text-shadow: 0 4px 16px rgba(16, 42, 99, 0.5);
}

.hero h1 .accent {
display: inline-block;
background: linear-gradient(180deg, #ffffff 0%, var(--gold-200) 35%, var(--gold-400) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 3px 6px rgba(16, 42, 99, 0.45));
}

.hero-lead {
font-size: 1.05rem;
color: #f0f7ff;
margin-bottom: 1.6rem;
max-width: 60ch;
font-weight: 500;
}

.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
margin-bottom: 2rem;
}

/* ==========================================================================
CURVY 3D PHOTO FRAMES — SHINY GOLD + VIBRANT BLUE BORDERS
========================================================================== */
.photo-fallback {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}

.photo-frame {
display: block !important;
position: relative !important;
width: calc(100% - 10px) !important;
margin-left: auto !important;
margin-right: auto !important;
border-radius: var(--radius-lg) !important;
border: 4px solid var(--gold-400) !important;
box-shadow:
0 0 0 3px var(--royal-500),
0 7px 0 3px var(--gold-500),
0 16px 30px rgba(16, 42, 99, 0.45) !important;
overflow: hidden !important;
background: linear-gradient(135deg, var(--royal-700), var(--royal-500)) !important;
padding: 0 !important;
}

.photo-frame img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: inherit !important;
object-fit: cover !important;
object-position: center !important;
border-radius: calc(var(--radius-lg) - 4px) !important;
margin: 0 !important;
}

.photo-tag {
position: absolute;
top: 12px;
left: 12px;
z-index: 10;
background: linear-gradient(135deg, var(--royal-600) 0%, var(--royal-900) 100%);
color: var(--gold-200);
border: 2.5px solid var(--gold-300);
border-radius: var(--radius-pill);
padding: 0.35rem 0.95rem;
font-size: 0.74rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 3px 0 var(--gold-500), 0 6px 14px rgba(16, 42, 99, 0.55);
}

/* ==========================================================================
3D QUOTE FORM CARD & CURVY BORDERED INPUT PROMPTS
========================================================================== */
.quote-card {
background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
color: var(--text-dark);
border-radius: var(--radius-xl);
border: 4px solid var(--gold-400);
box-shadow:
0 0 0 3px var(--royal-500),
0 9px 0 3px var(--gold-500),
0 22px 44px rgba(16, 42, 99, 0.5);
padding: 1.75rem 1.35rem;
position: relative;
width: calc(100% - 10px);
margin: 0 auto;
}

.quote-card-header {
background: linear-gradient(135deg, var(--royal-700) 0%, var(--royal-500) 100%);
color: var(--white);
margin: -1.75rem -1.35rem 1.4rem;
padding: 1.4rem 1.35rem;
border-radius: calc(var(--radius-xl) - 5px) calc(var(--radius-xl) - 5px) 22px 22px;
border-bottom: 4px solid var(--gold-400);
box-shadow: 0 4px 0 var(--royal-600);
}

.quote-card-header h2 {
font-size: 1.5rem;
color: var(--gold-200);
margin-bottom: 0.25rem;
}

.quote-card-header p {
font-size: 0.9rem;
color: #eff6ff;
font-weight: 600;
}

.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
}

@media (min-width: 640px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}

.form-group {
margin-bottom: 1rem;
}

.form-label {
display: block;
font-weight: 800;
font-size: 0.88rem;
color: var(--royal-800);
margin-bottom: 0.4rem;
}

/* Curvy 3D Dual-Bordered Input Prompts */
.form-control, .file-input-wrapper {
width: 100%;
padding: 0.8rem 1.05rem;
font-size: 0.95rem;
font-family: inherit;
font-weight: 600;
color: var(--text-dark);
background: var(--white);
border: 2.5px solid var(--royal-500);
outline: 2px solid var(--gold-400);
outline-offset: 0px;
border-radius: 18px;
box-shadow: 0 4px 0 var(--royal-600), 0 6px 12px rgba(29, 78, 216, 0.12);
transition: all 0.2s ease;
}

.form-control:focus {
border-color: var(--gold-500);
outline: 2.5px solid var(--royal-500);
box-shadow: 0 5px 0 var(--gold-600), 0 0 0 5px rgba(37, 99, 235, 0.25);
transform: translateY(-1px);
}

textarea.form-control {
min-height: 94px;
resize: vertical;
}

.file-input-wrapper {
background: linear-gradient(180deg, #f8fbff 0%, #e6f0ff 100%);
border: 2.5px dashed var(--royal-500);
outline: 2px solid var(--gold-400);
text-align: center;
cursor: pointer;
}

.form-microcopy {
text-align: center;
font-size: 0.82rem;
color: var(--royal-800);
margin-top: 0.85rem;
font-weight: 700;
}

/* ==========================================================================
PAYMENT DISCLAIMER BUBBLE — WIDE VERTICAL MARGINS SO IT NEVER OVERLAPS
========================================================================== */
.payment-disclaimer {
display: block !important;
position: relative !important;
z-index: 5 !important;
text-align: center !important;
font-size: 0.85rem !important;
line-height: 1.5 !important;
color: var(--royal-900) !important;
background: linear-gradient(180deg, #ffffff 0%, #fef9c3 100%) !important;
border: 3px solid var(--gold-400) !important;
box-shadow:
0 0 0 2.5px var(--royal-500),
0 5px 0 2.5px var(--gold-500),
0 12px 24px rgba(16, 42, 99, 0.2) !important;
border-radius: 9999px !important;
padding: 0.85rem 1.35rem !important;
width: calc(100% - 12px) !important;
max-width: 580px !important;
margin-top: 2.75rem !important;
margin-bottom: 2.75rem !important;
margin-left: auto !important;
margin-right: auto !important;
font-weight: 800 !important;
}

/* ==========================================================================
TRUST STRIP — VIBRANT ROYAL BLUE & GOLD 3D PILLS
========================================================================== */
.trust-strip {
background: linear-gradient(90deg, var(--royal-800) 0%, var(--royal-600) 50%, var(--royal-800) 100%);
padding: 1.75rem 0;
border-bottom: 4px solid var(--gold-400);
box-shadow: 0 4px 0 var(--royal-500);
}

.trust-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

@media (min-width: 768px) {
.trust-metrics {
grid-template-columns: repeat(4, 1fr);
}
}

.metric-box {
background: linear-gradient(145deg, var(--royal-500) 0%, var(--royal-700) 100%);
border: 3px solid var(--gold-300);
border-radius: var(--radius-lg);
padding: 0.95rem 0.75rem;
text-align: center;
box-shadow: 0 4px 0 var(--royal-400), 0 7px 0 var(--gold-500), 0 12px 22px rgba(16, 42, 99, 0.35);
}

.metric-box strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.2rem;
font-weight: 900;
color: var(--gold-200);
margin-bottom: 0.15rem;
}

.metric-box span {
font-size: 0.8rem;
color: var(--white);
font-weight: 700;
}

/* ==========================================================================
SECTIONS & 3D ROUNDED CARDS (SERVICES, PRICING, REVIEWS)
========================================================================== */
.section {
padding: 4rem 0;
background: linear-gradient(180deg, #e8f2ff 0%, #d8e8ff 100%);
}

.section-alt {
background:
radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.2) 0%, transparent 45%),
linear-gradient(180deg, #d0e4ff 0%, #eaf3ff 100%);
border-top: 4px solid var(--gold-400);
border-bottom: 4px solid var(--gold-400);
box-shadow: inset 0 4px 0 var(--royal-500), inset 0 -4px 0 var(--royal-500);
}

.section-navy {
background:
radial-gradient(circle at 85% 15%, rgba(96, 165, 250, 0.45) 0%, transparent 42%),
linear-gradient(155deg, var(--royal-800) 0%, var(--royal-600) 52%, var(--royal-500) 100%);
color: var(--white);
border-top: 5px solid var(--gold-400);
border-bottom: 5px solid var(--gold-400);
box-shadow: inset 0 4px 0 var(--royal-700), inset 0 -4px 0 var(--royal-700);
}

.section-header {
text-align: center;
max-width: 780px;
margin: 0 auto 2.75rem;
}

.section-header h2 {
font-size: clamp(1.85rem, 4vw, 2.7rem);
font-weight: 900;
color: var(--royal-800);
margin-bottom: 0.8rem;
}

.section-navy .section-header h2 {
color: var(--gold-200);
text-shadow: 0 3px 14px rgba(16, 42, 99, 0.45);
}

.section-header p {
font-size: 1.04rem;
color: var(--text-body);
font-weight: 600;
}

.section-navy .section-header p {
color: #eff6ff;
}

.grid-2, .grid-3, .grid-4 {
display: grid;
grid-template-columns: 1fr;
gap: 2.15rem;
}

@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* 3D Curvy Cards with Dual Yellow-Gold & Vibrant Blue Borders */
.service-card, .pricing-card, .review-card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
border-radius: var(--radius-lg);
border: 3.5px solid var(--gold-400);
box-shadow: var(--shadow-3d);
padding: 1.8rem 1.45rem;
transition: transform 0.22s ease, box-shadow 0.22s ease;
position: relative;
width: calc(100% - 10px);
margin: 0 auto;
}

.service-card:hover, .pricing-card:hover, .review-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}

.service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 18px;
background: linear-gradient(135deg, var(--royal-400) 0%, var(--royal-700) 100%);
color: var(--gold-200);
border: 2.5px solid var(--gold-300);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 900;
font-size: 1.12rem;
margin-bottom: 1.1rem;
box-shadow: 0 4px 0 var(--gold-500), 0 6px 12px rgba(29, 78, 216, 0.35);
}

.service-card h3, .pricing-card h3 {
font-size: 1.35rem;
font-weight: 900;
color: var(--royal-800);
margin-bottom: 0.65rem;
}

.service-card p {
color: var(--text-body);
font-size: 0.96rem;
margin-bottom: 1.1rem;
font-weight: 500;
}

/* Shiny Gold & Blue Pill Links inside Service Cards */
.card-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.15rem;
padding: 0.8rem 1.3rem;
background: linear-gradient(180deg, var(--royal-400) 0%, var(--royal-600) 50%, var(--royal-700) 100%);
color: var(--gold-200);
font-weight: 800;
font-size: 0.92rem;
border-radius: var(--radius-pill);
border: 2.5px solid var(--gold-300);
box-shadow:
inset 0 2px 2px rgba(255, 255, 255, 0.35),
0 4px 0 var(--gold-500),
0 6px 14px rgba(29, 78, 216, 0.25);
transition: all 0.18s ease;
}

.card-link:hover {
background: linear-gradient(180deg, #ffffff 0%, var(--gold-200) 25%, var(--gold-400) 75%, var(--gold-500) 100%);
color: var(--royal-900);
border-color: var(--royal-600);
transform: translateY(-2px);
}

/* Featured Pricing Cards — Vibrant Royal Blue + Gold 3D Pop */
.pricing-card.featured {
background: linear-gradient(155deg, var(--royal-700) 0%, var(--royal-500) 100%);
color: var(--white);
border: 4px solid var(--gold-300);
box-shadow:
0 0 0 3px var(--royal-400),
0 8px 0 3px var(--gold-500),
0 22px 40px rgba(29, 78, 216, 0.45);
}

.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured .check-list li {
color: var(--white) !important;
}

.popular-tag {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #ffffff 0%, var(--gold-200) 25%, var(--gold-400) 75%, var(--gold-500) 100%);
color: var(--royal-900);
font-weight: 900;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.35rem 1.25rem;
border-radius: var(--radius-pill);
border: 2.5px solid var(--royal-600);
box-shadow: 0 4px 10px rgba(16, 42, 99, 0.35);
white-space: nowrap;
}

.price-amount {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.55rem;
font-weight: 900;
color: var(--royal-600);
margin: 0.4rem 0;
}

.pricing-card.featured .price-amount {
color: var(--gold-200);
text-shadow: 0 3px 10px rgba(16, 42, 99, 0.4);
}

.price-amount span {
font-size: 0.95rem;
font-weight: 700;
color: var(--royal-700);
}

/* CLEAN CHECKLISTS */
.check-list {
margin: 1.1rem 0 1.4rem;
display: grid;
gap: 0.65rem;
list-style: none !important;
}

.check-list li {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--text-body);
font-weight: 700;
line-height: 1.45;
padding: 0.4rem 0.75rem !important;
background: rgba(37, 99, 235, 0.08);
border-left: 4px solid var(--gold-400);
border-radius: 10px;
}

.pricing-card.featured .check-list li {
background: rgba(255, 255, 255, 0.15);
border-left: 4px solid var(--gold-300);
}

.check-list li::before {
content: none !important;
display: none !important;
}

/* HIGH-CONTRAST ROYAL BLUE FEATURE BANNERS (WITH CLEAR TOP MARGIN) */
.royal-feature-box {
background: linear-gradient(145deg, var(--royal-800) 0%, var(--royal-600) 55%, var(--royal-500) 100%) !important;
color: var(--white) !important;
padding: 2rem 1.45rem !important;
border-radius: var(--radius-xl) !important;
border: 4px solid var(--gold-400) !important;
box-shadow: var(--shadow-3d) !important;
width: calc(100% - 10px) !important;
margin-top: 2.75rem !important;
margin-left: auto !important;
margin-right: auto !important;
}

.royal-feature-box h2,
.royal-feature-box h3 {
color: var(--gold-300) !important;
text-shadow: 0 2px 10px rgba(16, 42, 99, 0.45);
}

.royal-feature-box p,
.royal-feature-box li,
.royal-feature-box strong {
color: var(--white) !important;
}

.royal-feature-box .check-list li {
background: rgba(16, 42, 99, 0.45) !important;
border-left: 4px solid var(--gold-300) !important;
}

/* ==========================================================================
GALLERY CARDS — VIBRANT ROYAL BLUE & GOLD FRAMES
========================================================================== */
.gallery-card {
background: linear-gradient(165deg, var(--royal-600) 0%, var(--royal-800) 100%);
border-radius: var(--radius-lg);
border: 3.5px solid var(--gold-400);
box-shadow:
0 0 0 3px var(--royal-400),
0 8px 0 3px var(--gold-500),
0 20px 36px rgba(16, 42, 99, 0.45);
overflow: hidden;
padding: 0.9rem;
width: calc(100% - 10px);
margin: 0 auto;
}

.gallery-card .photo-frame {
width: 100% !important;
height: 250px;
border-radius: var(--radius-md) !important;
border: 3px solid var(--gold-300) !important;
box-shadow: 0 4px 0 var(--royal-500) !important;
}

.gallery-body {
padding: 1.35rem 0.65rem 0.65rem;
}

.gallery-body h3 {
color: var(--gold-200);
font-size: 1.25rem;
margin-bottom: 0.5rem;
}

.gallery-body p {
color: #f0f7ff;
font-size: 0.95rem;
}

/* ==========================================================================
REVIEWS & FAQ ACCORDIONS
========================================================================== */
.stars {
color: var(--gold-500);
font-size: 1.35rem;
letter-spacing: 2px;
margin-bottom: 0.7rem;
text-shadow: 0 2px 4px rgba(234, 179, 8, 0.3);
}

.review-quote {
font-size: 1.02rem;
font-style: italic;
color: var(--text-dark);
font-weight: 600;
margin-bottom: 1.15rem;
}

.reviewer-meta {
font-weight: 800;
color: var(--royal-600);
font-size: 0.94rem;
}

.reviewer-meta span {
display: block;
font-weight: 600;
font-size: 0.82rem;
color: var(--slate-600);
}

.faq-list {
max-width: 840px;
margin: 0 auto;
display: grid;
gap: 1.35rem;
}

.faq-item {
background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
border: 3.5px solid var(--gold-400);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-3d);
padding: 1.35rem 1.45rem;
width: calc(100% - 10px);
margin: 0 auto;
}

.faq-item summary {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 1.1rem;
color: var(--royal-800);
cursor: pointer;
}

.faq-item p {
margin-top: 0.9rem;
color: var(--text-body);
font-weight: 500;
}

/* ==========================================================================
FOOTER & MOBILE BAR — VIBRANT ROYAL BLUE
========================================================================== */
.site-footer {
background: linear-gradient(160deg, var(--royal-700) 0%, var(--royal-800) 60%, var(--royal-900) 100%);
color: var(--white);
padding: 3.75rem 0 2.25rem;
border-top: 5px solid var(--gold-400);
box-shadow: inset 0 4px 0 var(--royal-500);
}

.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.2rem;
margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
}

.footer-col h3 {
color: var(--gold-300);
font-size: 1.08rem;
margin-bottom: 0.95rem;
}

.footer-links {
display: grid;
gap: 0.6rem;
}

.footer-links a {
color: #eff6ff;
font-size: 0.92rem;
font-weight: 600;
transition: color 0.15s ease;
}

.footer-links a:hover {
color: var(--gold-200);
}

.footer-bottom {
border-top: 1px solid rgba(250, 204, 21, 0.35);
padding-top: 1.5rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
font-size: 0.86rem;
color: #dbeafe;
}

.mobile-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
z-index: 999;
background: linear-gradient(90deg, var(--royal-800) 0%, var(--royal-600) 100%);
border-top: 3.5px solid var(--gold-400);
box-shadow: 0 -4px 0 var(--royal-500), 0 -10px 24px rgba(16, 42, 99, 0.5);
padding: 0.65rem 0.9rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}

@media (min-width: 768px) {
.mobile-sticky-bar {
display: none;
}
}