@import url('fonts.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+Toto:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Great+Vibes&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@700&display=swap');


/* 
===============================================
  LawHub - Foundational Styles
  Phase 1: Global Setup & Navbar
===============================================
*/

:root {
    /* Exact Robinsons HVAC Color Palette */
    --blue: #0877b5;
    --blue-dark: #075c8c;
    --navy: #092f49;
    --red: #e94248;
    --ink: #153448;
    --muted: #526675;
    --pale: #f1f6f9;
    --line: #dce5eb;
    --white: #ffffff;
    --black: #000000;

    /* Theme Mapping */
    --clr-bg-dark: #ffffff;
    --clr-bg-darker: #f1f6f9;
    --clr-bg-secondary: #f1f6f9;
    --clr-accent: #0877b5;
    --clr-accent-hover: #075c8c;
    --clr-navy: #092f49;
    --clr-text-white: #153448;
    --clr-text-light: #153448;
    --clr-text-muted: #526675;
    --clr-text-gray: #526675;
    --clr-border: #dce5eb;
    --clr-overlay: rgba(9, 47, 73, 0.75);
    --clr-transparent: transparent;
    
    /* Typography */
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-serif: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-pill: 'Plus Jakarta Sans', sans-serif;
    --font-clash: 'Plus Jakarta Sans', sans-serif;
    --font-inter: 'Plus Jakarta Sans', sans-serif;

    /* Layout & Spacing */
    --max-width: 1200px;
    --nav-height-desktop: 74px;
    --nav-height-mobile: 64px;
    --section-padding: 32px;
    
    /* Effects */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-full: 999px;
    --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--clr-bg-dark);
    color: #adadad;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.5px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.5px;
    color: #adadad;
}

@media (max-width: 1199px) {
    body, p {
        font-size: 16px;
    }
}

ul {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

img, svg {
    max-width: 100%;
    display: block;
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--clr-text-light);
    font-weight: 700;
    line-height: 1.2;
}

.text-accent {
    color: var(--clr-accent);
}

/* 
===============================================
  Navbar Styles
===============================================
*/
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 8px 24px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 74px;
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 0 16px;
    border: 1px solid #2a2a2a;
    height: 58px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

.nav-logo-icon {
    width: 18px;
    height: 18px;
    fill: var(--clr-text-light);
}

.nav-logo-text {
    font-family: var(--font-body); /* Logo text ~16px */
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-text-light);
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* Desktop Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 20px; /* Tight, premium spacing */
}

.nav-link {
    font-family: var(--font-body);
    font-size: 14px; /* Nav links ~14px */
    color: #cccccc; /* Color #ccc */
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0px;
}

.nav-link:hover, 
.nav-link.active {
    color: #0877b5; /* Active or "Home" in orange */
}

.nav-link-icon {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

/* Call CTA in Nav */
/* Call CTA in Nav */
.nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    height: auto;
}

.nav-cta-icon-wrapper {
    background-color: #0877b5;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-cta-icon {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

.nav-cta-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.nav-cta-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.nav-cta-number {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
}

/* Mobile Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--clr-text-light);
    cursor: pointer;
}

/* Responsive */
@media (max-width: 991px) {
    .nav-links, .nav-cta {
        display: none;
    }
    
    .nav-inner {
        position: relative;
    }
    
    .nav-links.active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 56px; /* Positioned directly below the compact nav-inner */
        left: 0;
        right: 0;
        background-color: rgba(17, 17, 17, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid #2a2a2a;
        border-radius: 12px;
        padding: 20px;
        gap: 16px;
        z-index: 1000;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        animation: navSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    
    .nav-links.active li {
        width: 100%;
        display: block;
    }
    
    .nav-links.active .nav-link {
        font-size: 16px;
        padding: 8px 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        display: flex;
        justify-content: space-between;
    }
    
    .nav-links.active li:last-child .nav-link {
        border-bottom: none;
    }
    
    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: rgba(255,255,255,0.05);
    }
}

@keyframes navSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .nav-logo-text {
        font-size: 11px !important;
    }
    .nav-logo-img {
        height: 24px !important;
    }
    .mobile-toggle {
        width: 32px;
        height: 32px;
    }
}

/* 
===============================================
  Shared Components
===============================================
*/
.section {
    padding: var(--section-padding) 0;
    position: relative;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 999px;
    backdrop-filter: blur(5px);
    margin-bottom: 24px;
}

.tag-circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #0877b5;
}

.tag-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #cccccc;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--clr-accent);
    color: #111111;
    padding: 14px 14px 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600; /* Inter SemiBold */
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: #e5b484;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 163, 115, 0.3);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
    border: 1px solid var(--clr-accent);
    color: var(--clr-accent);
    padding: 14px 28px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500; /* Inter Medium */
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: rgba(212, 163, 115, 0.08);
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.btn-icon {
    width: 36px;
    height: 36px;
    background-color: var(--clr-bg-dark);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--clr-text-white);
}

.section-intro.center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1.2px;
    color: #ffffff;
}

@media (max-width: 1199px) {
    .section-title {
        font-size: 26px;
    }
}

@media (max-width: 699px) {
    .section-title {
        font-size: 24px;
        letter-spacing: -0.8px;
    }
}

.section-title .text-light {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    display: inline;
}

.section-title .text-muted-body,
.section-title .text-muted {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #777777;
    display: inline;
}

/* 
===============================================
  01. Hero Section
===============================================
*/
.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible !important;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 65%, #000000 100%), linear-gradient(105deg, rgba(8,8,8,0.65) 0%, rgba(8,8,8,0.45) 35%, rgba(8,8,8,0.1) 60%, transparent 100%);
    z-index: 1;
}

.hero-lady-logo {
    position: absolute;
    right: 15%;
    top: 45%;
    transform: translateY(-50%);
    width: 45%;
    height: 80%;
    background-image: url('assets/flag-texture.webp');
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url('assets/lady-justice-alpha.png');
    mask-image: url('assets/lady-justice-alpha.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center right;
    mask-position: center right;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    z-index: 0;
    opacity: 0.8;
}

.hero-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 600px;
    padding-top: 80px;
    padding-bottom: 120px;
    padding-left: 80px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 20px;
    width: fit-content;
}

.hero-badge .dot {
    color: #0877b5;
    font-size: 8px;
}

.hero-title {
    font-family: var(--font-clash);
    font-size: clamp(42px, 4.5vw, 58px);
    line-height: 1.08;
    margin-bottom: 16px;
    font-weight: 700;
    color: #ffffff;
    max-width: 540px;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.65;
    color: #999999;
    max-width: 400px;
    margin-top: 18px;
    margin-bottom: 0;
    letter-spacing: -0.01em;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

.hero-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    background-color: #0877b5;
    color: #ffffff;
    padding: 14px 18px 14px 28px;
    border-radius: 999px;
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    line-height: 1;
}

.hero-actions .btn-primary:hover {
    background-color: #d8894b;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(200, 120, 58, 0.3);
}

.hero-actions .btn-icon {
    width: 36px;
    height: 36px;
    background-color: rgba(0,0,0,0.35);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.hero-actions .btn-icon svg {
    width: 14px;
    height: 14px;
    fill: #ffffff;
}

/* Featured Ticker sits at the bottom */
.hero-featured {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 80px;
    z-index: 3;
}

.featured-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.featured-circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #0877b5;
}

.featured-label h5 {
    color: #ffffff;
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

.ticker-wrapper {
    flex-grow: 1;
    overflow: visible !important;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ticker-track {
    display: flex;
    gap: 32px;
    animation: scrollTicker 30s linear infinite;
    width: max-content;
    align-items: center;
}

.ticker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    opacity: 0.4;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.ticker-item:hover {
    opacity: 0.8;
    filter: none;
}

.ticker-item svg {
    height: 38px;
    width: auto;
    color: #ffffff;
    transition: color 0.3s ease;
}

.ticker-item svg path {
    fill: currentColor !important;
}

.ticker-item:hover svg {
    color: #ffffff;
}

@keyframes scrollTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 16px)); }
}

/* Helpers & Mobile Adjustments */
.desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* 
===============================================
  02. Services Section
===============================================
*/
.services-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.service-category {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 40px;
}

.category-header {
    display: flex;
    flex-direction: column;
}

.category-title {
    font-family: var(--font-heading);
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: -1.2px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--clr-accent);
}

@media (max-width: 1199px) {
    .category-title {
        font-size: 26px;
    }
}

@media (max-width: 699px) {
    .category-title {
        font-size: 24px;
        letter-spacing: -0.8px;
    }
}

.category-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: #aaaaaa;
    margin-bottom: 24px;
    max-width: 350px;
}

.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: var(--transition);
}

.arrow-up-right {
    width: 14px;
    height: 14px;
    fill: #ffffff;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-text:hover {
    color: var(--clr-accent);
}

.btn-text:hover .arrow-up-right {
    transform: translate(3px, -3px);
    fill: var(--clr-accent);
}

.category-items {
    display: flex;
    flex-direction: column;
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    border-bottom: 1px solid #222222;
    border-left: 2px solid transparent;
    border-radius: 6px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 4px;
}

.service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.service-card-body {
    display: none !important;
}

.service-card:first-child {
    border-top: 1px solid #222222;
}

.service-name {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.3px;
    color: #ffffff;
    transition: color 0.3s ease;
}

@media (max-width: 1199px) {
    .service-name {
        font-size: 16px;
    }
}

.service-arrow {
    width: 16px;
    height: 16px;
    fill: #ffffff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease;
}

.service-card:hover {
    z-index: 20;
    background-color: rgba(200, 120, 58, 0.05);
    border-left-color: var(--clr-accent);
    padding-left: 20px;
}

.service-card:hover .service-name {
    color: var(--clr-accent);
}

.service-card:hover .service-arrow {
    transform: rotate(45deg) translate(2px, -2px);
    fill: var(--clr-accent);
}

/* Static Service Image Preview Card */
.service-hover-card {
    position: absolute;
    top: 50%;
    right: 4%; /* Float beautifully at the end of the row on the right */
    width: 280px;
    height: 190px;
    border-radius: 20px;
    overflow: visible !important;
    background-color: #161515;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 12px 30px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    /* Start state: translated left (closer to name), scaled down, tilted -12deg */
    transform: translate3d(-30px, -50%, 0) scale(0.7) rotate(-12deg);
    transform-origin: center center;
    will-change: transform, opacity;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-hover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover state: Fades in, zooms up (scales to 1), slides right (translate(0)), and rests at a premium tilt angle */
.service-card:hover .service-hover-card {
    opacity: 1;
    transform: translate3d(0, -50%, 0) scale(1) rotate(-8deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(200, 120, 58, 0.25);
}

.service-card:hover .service-hover-card img {
    transform: scale(1.08);
}

/* Hide on touch devices and small viewports */
@media (max-width: 991px) {
    .service-hover-card {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .service-category {
        grid-template-columns: 1fr 1.6fr;
        gap: 16px;
    }
    .category-header {
        max-width: 100%;
    }
    .category-title {
        font-size: 15px !important;
        line-height: 1.2 !important;
        margin-bottom: 6px;
    }
    .category-desc {
        font-size: 11px !important;
        line-height: 1.4 !important;
        max-width: 100%;
    }
    .category-items {
        width: 100%;
        max-width: 220px; /* Bring the arrows closer by narrowing the items column */
        margin-left: auto;
    }
    .service-name {
        font-size: 12px !important;
    }
    .service-arrow {
        width: 12px;
        height: 12px;
    }
}

/* 
===============================================
  03. Team Section
===============================================
*/
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.team-card {
    position: relative;
    overflow: visible !important;
    aspect-ratio: 4/5;
    background-color: rgba(255, 255, 255, 0.05);
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
}

.team-card:hover .team-img {
    transform: scale(1.05);
}

.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 40px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: #F5F1EB;
}

.team-role {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.6px;
    color: var(--clr-accent);
    text-transform: uppercase;
}

/* 
===============================================
  04. Our Process Section
===============================================
*/
.process {
    padding: var(--section-padding) 0; 
}

.process .section-intro {
    margin-bottom: 48px; 
}

.process .tag-badge {
    background-color: #1a1a1a;
    border: 1px solid #333333;
}

.process .tag-text {
    font-size: 11px;
    color: #888888;
    letter-spacing: 1px;
}

.process .section-title {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -1px;
}

.process .section-title .text-muted {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #777777;
}

.process-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    gap: 32px;
    width: 100%;
    align-items: flex-start;
    position: relative;
    padding-bottom: 40px; /* Reduced gap to approx 40px */
}

.process-step:last-child {
    padding-bottom: 0;
}

/* Vertical connected line */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 31px; /* Exact center of 64px icon (32px - 1px for line width) */
    top: 64px; /* Exact bottom of the 64px icon */
    bottom: 0;
    width: 2px; /* 2px thick */
    background-color: #444444; /* Dark grey */
}

.step-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #0877b5; /* Orange */
    position: relative;
    z-index: 2;
}

.step-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.step-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px; /* Adjust alignment to center visually with 64px icon */
}

.step-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 0;
}

@media (max-width: 1199px) {
    .step-title {
        font-size: 18px;
    }
}

@media (max-width: 699px) {
    .step-title {
        font-size: 18px;
        letter-spacing: 0px;
    }
}

.step-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #aaaaaa;
    margin: 0;
    max-width: 450px;
}

@media (max-width: 767px) {
    .process .section-title {
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -0.5px;
    }
    .process .section-intro {
        margin-bottom: 32px;
    }
    .process-steps {
        padding: 0 16px;
        max-width: 460px;
        margin: 0 auto;
    }
    .process-step {
        gap: 16px;
        padding-bottom: 32px;
    }
    .process-step:not(:last-child)::after {
        left: 18px; /* Center of smaller icon */
        top: 36px;
    }
    .step-icon {
        width: 36px;
        height: 36px;
    }
    .step-icon svg {
        width: 16px;
        height: 16px;
    }
    .step-content {
        padding-top: 6px;
    }
    .step-title {
        font-size: 15px !important;
        letter-spacing: -0.2px;
    }
    .step-desc {
        font-size: 12.5px;
        line-height: 1.5;
    }
}

/* 
===============================================
  05. FAQ Section
===============================================
*/
.faq-layout {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: flex-start;
}

.faq-left {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-right {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 8px; /* 8px gap between cards */
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: #111111;
    border: 1px solid #333333;
    border-radius: var(--radius-full);
    width: fit-content;
    margin-bottom: 24px;
}

.faq-badge .tag-text {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #aaaaaa;
}

.faq-main-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #ffffff;
    margin: 0;
}

.faq-main-title .text-muted {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #777777;
    display: block;
}

.faq-accordion {
    width: 100%;
}

.faq-item {
    background-color: #1a1a1a; /* Dark card background */
    border-radius: 12px; /* Rounded corners */
    overflow: visible !important;
    transition: background-color var(--transition);
}

.faq-item.active {
    background-color: #222222; /* Slightly lighter background when open */
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.5px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

@media (max-width: 1199px) {
    .faq-question {
        font-size: 18px;
    }
}

@media (max-width: 699px) {
    .faq-question {
        font-size: 18px;
        letter-spacing: 0px;
    }
}

.faq-icon {
    width: 32px;
    height: 32px;
    background-color: #0877b5; /* Orange background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #121212; /* Dark arrow */
    flex-shrink: 0;
}

.faq-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform var(--transition);
}

/* SVG is up by default, rotate 180 to point down when active */
.faq-item.active .faq-icon svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: visible !important;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 24px 24px 72px; /* Indent slightly past the icon */
    opacity: 1;
}

.faq-answer p {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #aaaaaa;
    margin: 0;
    max-width: 600px;
}

@media (max-width: 991px) {
    .faq-layout {
        flex-direction: column;
        gap: 40px;
    }
    .faq-left, .faq-right {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .faq-layout {
        padding: 0 16px;
        gap: 28px;
    }
    .faq-main-title {
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -0.5px;
    }
    .faq-badge {
        margin-bottom: 12px;
    }
    .faq-question {
        padding: 14px 18px !important;
        font-size: 14px !important;
        gap: 12px;
    }
    .faq-icon {
        width: 24px;
        height: 24px;
    }
    .faq-icon svg {
        width: 12px;
        height: 12px;
    }
    .faq-item.active .faq-answer {
        padding: 0 18px 16px 54px;
    }
    .faq-answer p {
        font-size: 12.5px;
        line-height: 1.5;
    }
}

/* 
===============================================
  06. Testimonials Section
===============================================
*/
.testimonials {
    background-color: #000000; /* Very dark background */
    padding: var(--section-padding) 0;
    overflow: visible !important;
}

.testimonials-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px; /* Space between header and cards */
}

/* Testimonials Pill */
.testimonials-pill {
    background-color: #111111;
    border: 1px solid #333333;
    border-radius: var(--radius-full);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.pill-dot {
    width: 6px;
    height: 6px;
    background-color: #0877b5; /* orange dot */
    border-radius: 50%;
}

.pill-text {
    font-family: var(--font-serif);
    font-size: 10px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--clr-accent);
}

.testimonials-heading {
    max-width: 650px;
    font-family: var(--font-heading);
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #ffffff;
    font-weight: 700;
    margin: 0;
}

.testimonials-heading .text-white {
    color: #ffffff;
}

.testimonials-heading .text-muted {
    color: #777777 !important;
}

.testimonials-heading span,
.testimonials-heading .fw-bold,
.testimonials-heading .fw-light {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

.testimonials-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.testimonials-track-wrapper {
    max-width: 1420px;
    margin: 0 auto;
    overflow: visible !important; /* Hide horizontal scroll */
    position: relative;
}

.testimonials-track-wrapper::before,
.testimonials-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
    opacity: 0;
}

.testimonials-track-wrapper::after {
    right: 0;
    background: linear-gradient(to right, transparent, #141414);
}

.testimonials-track-wrapper::before {
    left: 0;
    background: linear-gradient(to left, transparent, #141414);
}

.testimonials-track-wrapper.fade-right::after {
    opacity: 1;
}

.testimonials-track-wrapper.fade-left::before {
    opacity: 1;
}

.testimonials-track {
    display: flex;
    gap: 20px;
    width: max-content;
    padding: 0 80px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-card {
    width: 300px; /* fixed exactly 300px */
    flex-shrink: 0;
    background-color: #1a1a1a;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: none; /* No visible border */
}

.testimonial-stars {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.testimonial-stars .star {
    width: 16px;
    height: 16px;
}

.testimonial-stars .star.filled {
    fill: #0877b5; /* Orange */
}

.testimonial-stars .star.empty {
    fill: #3a3a3a; /* Dark grey */
}

.testimonial-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    color: #aaaaaa;
    margin: 0;
    margin-bottom: 24px;
    flex-grow: 1;
    max-width: 600px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.author-name {
    font-family: var(--font-body);
    color: #F5F1EB;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
}

.author-role {
    font-family: var(--font-body);
    color: var(--clr-text-gray);
    font-size: 13px;
    margin: 0;
    line-height: 1;
}

.slider-arrow-btn {
    position: absolute;
    right: 2vw; /* Sit on the right edge */
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #0877b5;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.slider-arrow-btn.is-flipped {
    right: auto;
    left: 2vw;
    transform: translateY(-50%) rotate(180deg);
}

.slider-arrow-btn:hover {
    background-color: #075c8c; /* slightly darker orange */
}

.slider-arrow-btn svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

.testimonials-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.testimonials-pagination .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2a2a2a;
    transition: var(--transition);
}

.testimonials-pagination .dot.active {
    width: 10px;
    height: 10px;
    background-color: #0877b5;
}

@media (max-width: 767px) {
    .slider-arrow-btn {
        display: none; 
    }
    .testimonials-track-wrapper {
        overflow-x: auto;
        padding-right: 5vw;
        scrollbar-width: none;
    }
    .testimonials-track-wrapper::-webkit-scrollbar {
        display: none;
    }
    .testimonials-track {
        transition: none; 
    }
}

/* 
===============================================
  07. Contact Section
===============================================
*/
.contact {
    padding: var(--section-padding) 0;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
}

.contact-header {
    text-align: center;
}

.contact-header .contact-pill {
    margin-bottom: 12px;
}

.contact-form-section {
    width: 100%;
}

.contact-details-section {
    width: 100%;
    margin-top: 10px;
}

/* Horizontal details stack below the form on desktop */
.horizontal-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
}

.horizontal-details .info-block {
    flex: 1;
    border-bottom: none;
    padding-bottom: 0;
    border-right: 1px solid #2a2a2a;
    padding-right: 16px;
    box-sizing: border-box;
}

.horizontal-details .info-block:last-child {
    border-right: none;
    padding-right: 0;
}

/* Phone Input & Custom Dropdown Styles */
.phone-input-wrapper {
    display: flex;
    gap: 8px;
    position: relative;
    width: 100%;
}

.country-select-dropdown {
    position: relative;
    flex-shrink: 0;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    color: #ffffff;
    font-size: 14px;
    transition: border-color 0.3s ease;
    height: 100%;
}

.dropdown-trigger:hover {
    border-color: #0877b5;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.country-select-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-list-wrapper {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 290px;
    background-color: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    padding: 12px;
    box-sizing: border-box;
}

.country-select-dropdown.open .dropdown-list-wrapper {
    display: block;
}

.country-search-input {
    width: 100%;
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: inherit;
}

.country-search-input:focus {
    outline: none;
    border-color: #0877b5;
}

.country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #333333 #161616;
}

.country-list::-webkit-scrollbar {
    width: 6px;
}

.country-list::-webkit-scrollbar-track {
    background: #161616;
}

.country-list::-webkit-scrollbar-thumb {
    background-color: #333333;
    border-radius: 3px;
}

.country-item {
    padding: 8px 10px;
    font-size: 13px;
    color: #aaaaaa;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
    user-select: none;
}

.country-item:hover {
    background-color: #1e1e1e;
    color: #ffffff;
}

.country-item.hidden {
    display: none;
}

.phone-number-input {
    flex-grow: 1;
}

/* Service specification input */
.hidden-other-service {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-card {
    background-color: #1c1c1c;
    border-radius: 20px;
    padding: 48px;
    margin: 0 auto;
    width: calc(100% - 160px);
    max-width: 1100px;
    display: flex;
    gap: 7%;
    align-items: center;
}

.contact-left {
    width: 38%;
}

.contact-pill {
    background-color: #111111;
    border: 1px solid #333333;
    border-radius: var(--radius-full);
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.contact-pill .pill-dot {
    width: 6px;
    height: 6px;
    background-color: #0877b5;
    border-radius: 50%;
}

.contact-pill .pill-text {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #aaaaaa;
}

.contact-heading {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 28px 0;
}

.contact-heading .text-muted {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #777777;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-block {
    display: flex;
    gap: 16px;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 20px;
    width: 100%;
}

.info-icon {
    width: 20px;
    flex-shrink: 0;
    display: flex;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-family: var(--font-body);
    color: var(--clr-accent);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.info-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
    margin: 0;
}

.info-link {
    color: #ffffff;
    font-size: 14px;
    text-decoration: underline;
    margin-top: 4px;
    transition: color 0.3s ease;
}

.info-link:hover {
    color: #0877b5;
}

.tel-link {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tel-link:hover {
    color: #0877b5;
}

.contact-right {
    width: 55%;
}

.form-card {
    background-color: #161616;
    border: 1px solid #252525;
    border-radius: 14px;
    padding: 24px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    background-color: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #ffffff;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-input::placeholder {
    color: #555555;
}

.form-input:focus {
    outline: none;
    border-color: #0877b5;
}

.form-textarea {
    height: 140px;
    resize: vertical;
}

.select-wrapper {
    position: relative;
    width: 100%;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.submit-btn {
    background-color: #0877b5;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    height: 50px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 8px;
}

.submit-btn:hover {
    background-color: #b8845c;
}

@media (max-width: 991px) {
    .contact-card {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 32px 20px;
        width: calc(100% - 32px);
    }
    .contact-left {
        display: contents; /* Pull out children so they can be ordered individually */
    }
    .contact-pill {
        order: 1;
        margin-bottom: 0;
    }
    .contact-heading {
        order: 2;
        font-size: 24px !important;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .contact-right {
        order: 3;
        width: 100%;
    }
    .contact-info-list {
        order: 4;
        width: 100%;
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .info-block {
        margin-bottom: 0;
    }
    .horizontal-details {
        flex-direction: column;
        gap: 20px;
    }
    .horizontal-details .info-block {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #2a2a2a;
        padding-bottom: 16px;
    }
    .horizontal-details .info-block:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}
@media (max-width: 600px) {
    .contact-info-list {
        grid-template-columns: 1fr;
    }
}

/* 
===============================================
  08. Blog Section
===============================================
*/
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

.blog-card {
    background-color: var(--clr-bg-secondary);
    border-radius: var(--radius-md);
    overflow: visible !important;
    border: 1px solid var(--clr-border);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(200, 120, 58, 0.5);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.blog-img-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    overflow: visible !important;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.05);
}

.blog-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--clr-accent);
    color: #111111;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.blog-title {
    font-size: 1.5rem;
    color: #F5F1EB;
    font-family: var(--font-heading);
    font-weight: 600;
}

.blog-excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
    margin-bottom: 16px;
    flex-grow: 1;
    max-width: 600px;
}

/* 
===============================================
  09. Footer Section
===============================================
*/
/* Hide footer branding elements globally */
.footer-made-by,
.footer-built-with,
.framer-badge {
    display: none !important;
}

.footer-warm {
    position: relative;
    z-index: 2000;
    background-color: #092f49; /* Solid lower color */
    overflow: visible !important;
}

.footer-hero {
    position: relative; z-index: 999;
    height: 300px;
    width: 100%;
    overflow: visible !important;
    background: linear-gradient(180deg, #ffffff 0%, #092f49 95%, #092f49 100%);
}

.footer-watermark {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 230px; /* Made a little smaller */
    font-weight: 900;
    color: #092f49; /* Color matches the lower solid color of footer */
    opacity: 1;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.footer-badge {
    position: absolute;
    top: 60%;
    z-index: 2;
    background-color: #1a1a1a;
    border-radius: 50px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.badge-left {
    left: 20%;
    top: 55%; /* Adjusted for lowered watermark */
}

.badge-right {
    right: 20%;
    top: 72%; /* Adjusted for lowered watermark */
}

.badge-icon {
    width: 24px;
    height: 24px;
    background-color: #2a2a2a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-badge span {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.footer-nav-container {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 40px 60px;
    gap: 40px;
    background: transparent;
    max-width: 1100px;
    margin: 0 auto;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.col-heading {
    font-family: var(--font-serif);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5a3a1a;
    font-weight: 700;
    margin-bottom: 20px;
}

.col-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.col-links a, .col-links span.built-with {
    font-size: 15px;
    color: #3a2010;
    text-decoration: none;
    line-height: 2;
    font-weight: 500; /* Matches LawHub's elegant medium weight */
    transition: color 0.2s ease;
}

.col-links a:hover {
    color: #1a0f05;
}

.footer-made-by {
    font-size: 15px;
    color: #3a2010;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.footer-signature {
    font-family: 'Great Vibes', cursive;
    font-size: 26px;
    color: #231206;
    margin-left: 6px;
    display: inline-block;
    line-height: 1;
    transform: translateY(-2px);
}

.footer-socials {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.social-btn {
    width: 36px;
    height: 36px;
    background-color: #1a1a1a;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.social-btn:hover {
    background-color: #333333;
}

.framer-badge {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background-color: #ffffff;
    color: #111111;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    font-family: var(--font-body);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.framer-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    color: #000000;
}

.framer-badge svg {
    display: block;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .footer-hero {
        height: 180px !important;
        overflow: visible !important;
        background: linear-gradient(
        180deg,
        rgba(9, 47, 73, 0) 0%,
        rgba(9, 47, 73, 0) 15%,
        rgba(9, 47, 73, 0.01) 25%,
        rgba(9, 47, 73, 0.03) 33%,
        rgba(9, 47, 73, 0.07) 41%,
        rgba(9, 47, 73, 0.14) 49%,
        rgba(9, 47, 73, 0.24) 57%,
        rgba(9, 47, 73, 0.37) 65%,
        rgba(9, 47, 73, 0.52) 73%,
        rgba(9, 47, 73, 0.68) 81%,
        rgba(9, 47, 73, 0.83) 88%,
        rgba(9, 47, 73, 0.94) 94%,
        rgba(9, 47, 73, 0.99) 98%,
        #092f49 100%
    ), #ffffff !important; /* Gradient starts as soon as color touches bottom of text */
    }
    .footer-watermark {
        font-size: 90px !important; /* Made a little smaller */
        top: 76% !important; /* Positioned clearly above lower solid color */
        color: #092f49 !important; /* Color matches the lower solid color of footer */
        opacity: 0.9 !important;
        -webkit-text-fill-color: initial !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
    }
    .footer-nav-container {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px !important;
        padding: 55px 32px 35px 32px !important; /* Pulled links down, side padding increased, total height same */
    }
    .col-heading {
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        color: #231206 !important;
    }
    .col-links a, .col-links span.built-with {
        font-size: 13px !important;
        font-weight: 500 !important; /* Matches LawHub */
        color: #2b160a !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .footer-badge {
        padding: 8px 14px !important;
        gap: 6px !important;
    }
    .badge-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .badge-icon svg {
        width: 12px !important;
        height: 12px !important;
    }
    .footer-badge span {
        font-size: 11.5px !important;
    }
    .badge-left { left: 15%; top: 32%; } /* Pulled badges down */
    .badge-right { right: 15%; top: 84%; }
}

@media (max-width: 767px) {
    .footer-hero {
        height: 180px !important;
        overflow: visible !important;
        background: linear-gradient(
        180deg,
        rgba(9, 47, 73, 0) 0%,
        rgba(9, 47, 73, 0) 15%,
        rgba(9, 47, 73, 0.01) 25%,
        rgba(9, 47, 73, 0.03) 33%,
        rgba(9, 47, 73, 0.07) 41%,
        rgba(9, 47, 73, 0.14) 49%,
        rgba(9, 47, 73, 0.24) 57%,
        rgba(9, 47, 73, 0.37) 65%,
        rgba(9, 47, 73, 0.52) 73%,
        rgba(9, 47, 73, 0.68) 81%,
        rgba(9, 47, 73, 0.83) 88%,
        rgba(9, 47, 73, 0.94) 94%,
        rgba(9, 47, 73, 0.99) 98%,
        #092f49 100%
    ), #ffffff !important; /* Gradient starts as soon as color touches bottom of text */
    }
    .footer-watermark {
        font-size: 85px !important; /* Made a little smaller */
        top: 76% !important; /* Lowered watermark */
        color: #092f49 !important; /* Color matches the lower solid color of footer */
        opacity: 0.9 !important;
        -webkit-text-fill-color: initial !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
    }
    .footer-nav-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 40px 24px !important;
        padding: 64px 32px 48px 32px !important; /* Pulled links down, side padding increased, total height same */
    }
    .col-heading {
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        margin-bottom: 12px !important;
        color: #231206 !important;
    }
    .col-links a, .col-links span.built-with {
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.8 !important;
        color: #2b160a !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .footer-badge {
        padding: 6px 12px !important;
        gap: 6px !important;
    }
    .badge-icon {
        width: 18px !important;
        height: 18px !important;
    }
    .badge-icon svg {
        width: 10px !important;
        height: 10px !important;
    }
    .footer-badge span {
        font-size: 10px !important;
        font-weight: 600 !important;
    }
    .badge-left {
        left: 10% !important;
        top: 65% !important; /* Lowered badges to overlap with lowered watermark */
    }
    .badge-right {
        right: 10% !important;
        top: 82% !important;
    }
}

/* 
===============================================
  10. JavaScript Animation Utilities (Framer Style)
===============================================
*/
.reveal-up {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }


/* ==============================================
   11. Subpages CSS Styles
================================================ */

/* Subpage Hero */
.subpage-hero {
    background-color: var(--clr-bg-dark);
    padding: 110px 0 60px 0;
    border-bottom: 1px solid var(--clr-border);
    position: relative;
    text-align: center;
}
.subpage-hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.subpage-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(212, 163, 115, 0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    margin-bottom: 20px;
}

.subpage-hero-pill span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.subpage-hero-title {
    font-family: var(--font-heading);
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 16px;
    letter-spacing: -1px;
    font-weight: 700;
    line-height: 1.15;
}
.subpage-hero-breadcrumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--clr-text-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.subpage-hero-breadcrumbs a {
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: var(--transition);
}
.subpage-hero-breadcrumbs a:hover {
    color: var(--clr-accent);
}
.subpage-hero-separator {
    color: var(--clr-text-gray);
}

/* About Stats Section */
.about-stats-section {
    padding: 60px 0;
    background-color: var(--clr-bg-darker);
    border-bottom: 1px solid var(--clr-border);
}
.about-stats-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background-color: var(--clr-bg-secondary);
    overflow: visible !important;
}
.stat-card {
    padding: 40px;
    text-align: center;
    border-right: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    transition: var(--transition);
}
.stat-card:last-child {
    border-right: none;
}
.stat-number {
    font-family: var(--font-heading);
    font-size: 56px; /* Elite bold statistics */
    color: #F5F1EB;
    font-weight: 700;
}
.stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text-gray);
    text-transform: uppercase;
    letter-spacing: 2px;
}
@media (max-width: 768px) {
    .about-stats-grid {
        grid-template-columns: 1fr;
    }
    .stat-card {
        border-right: none;
        border-bottom: 1px solid var(--clr-border);
        padding: 30px;
    }
    .stat-card:last-child {
        border-bottom: none;
    }
}

/* Vision & Mission Section */
.vision-mission-section {
    padding: var(--section-padding) 0;
    background-color: var(--clr-bg-dark);
}
.vision-mission-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.vision-mission-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.vision-mission-row:nth-child(even) {
    direction: rtl;
}
.vision-mission-row:nth-child(even) .vision-mission-content {
    direction: ltr;
}
.vision-mission-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vision-mission-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(212, 163, 115, 0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    width: max-content;
}

.vision-mission-label-pill span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.vision-mission-title {
    font-family: var(--font-heading);
    font-size: 32px;
    color: var(--clr-text-white);
    letter-spacing: -1px;
    line-height: 1.25;
    font-weight: 700;
}
.vision-mission-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
    max-width: 600px;
}
.vision-mission-image {
    width: 100%;
    height: 420px;
    border-radius: var(--radius-md);
    overflow: visible !important;
    border: 1px solid var(--clr-border);
}
.vision-mission-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}
.vision-mission-image:hover img {
    transform: scale(1.03);
}
@media (max-width: 768px) {
    .vision-mission-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .vision-mission-row:nth-child(even) {
        direction: ltr;
    }
    .vision-mission-image {
        height: 280px;
    }
}

/* Founder Section */
.founder-section {
    padding: var(--section-padding) 0;
    background-color: #000000;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}
.founder-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: center;
}
.founder-image-wrapper {
    position: relative;
    border-radius: var(--radius-md);
    overflow: visible !important;
    border: 1px solid var(--clr-border);
    height: 450px;
}
.founder-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.founder-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.founder-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(212, 163, 115, 0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    width: max-content;
}

.founder-label-pill span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.founder-title {
    font-family: var(--font-heading);
    font-size: 32px;
    color: var(--clr-text-white);
    letter-spacing: -1px;
    line-height: 1.25;
    font-weight: 700;
}
.founder-quote {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
}
.founder-signature {
    margin-top: 10px;
    border-top: 1px solid var(--clr-border);
    padding-top: 15px;
}
.founder-name {
    font-family: var(--font-heading);
    font-size: 28px;
    color: #F5F1EB;
    margin-bottom: 4px;
    font-weight: 600; /* Inter SemiBold */
}
.founder-role {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-accent);
    letter-spacing: 2px;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .founder-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }
    .founder-image-wrapper {
        width: 100% !important;
        max-width: 260px !important; /* Make the portrait image nice and big but centered */
        height: auto !important;
        aspect-ratio: 3 / 4 !important;
        max-height: none !important;
        margin: 0 auto !important;
    }
    .founder-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }
    .founder-label-pill {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .founder-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
    .founder-quote {
        text-align: center !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    .founder-quote p {
        font-size: 12px !important;
        line-height: 1.55 !important;
        margin-bottom: 12px !important;
    }
    /* Hide 3rd and 4th paragraphs on mobile to shorten the text */
    .founder-quote p:nth-child(n+3) {
        display: none !important;
    }
    .founder-signature {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 8px !important;
        padding-top: 12px !important;
        border-top: 1px solid var(--clr-border) !important;
    }
    .founder-name {
        font-size: 18px !important;
    }
    .founder-role {
        font-size: 11px !important;
    }
}

/* Service Details Layout */
.service-page-wrapper {
    padding: 80px 0;
    background-color: #000000;
    display: flex;
    justify-content: center;
}
.service-container-card {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px;
    background-color: #161515;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.service-card-header {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}
.service-badge-container {
    display: flex;
    justify-content: flex-start;
}
.service-badge-pill {
    background-color: rgba(212, 163, 115, 0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.service-badge-pill .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--clr-accent);
}
.service-badge-pill .pill-text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.service-badge-pill .pill-arrow {
    color: var(--clr-accent);
    font-size: 13px;
    font-weight: 500;
    transition: transform 0.3s ease;
}
.service-badge-pill:hover .pill-arrow {
    transform: translate(2px, -2px);
}
.service-badge-pill:hover {
    background-color: rgba(212, 163, 115, 0.12);
    border-color: rgba(212, 163, 115, 0.4);
}
.service-page-title {
    font-family: var(--font-heading);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.service-page-intro {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
    margin: 0;
    max-width: 800px;
}
.service-card-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    width: 100%;
}
.service-featured-image {
    width: 100%;
    border-radius: 16px;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.service-featured-image img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
}
.service-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 48px;
    margin-top: 8px;
}
.service-content-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.service-content-left h3 {
    font-family: var(--font-heading);
    font-size: 34px;
    color: #F5F1EB;
    margin: 32px 0 16px 0;
    font-weight: 600;
}
.service-content-left h4 {
    font-family: var(--font-heading);
    font-size: 26px;
    color: #F5F1EB;
    margin: 24px 0 12px 0;
    font-weight: 600;
}
.service-content-left h5 {
    font-family: var(--font-heading);
    font-size: 20px;
    color: #F5F1EB;
    margin: 0;
    font-weight: 600;
    display: inline-block;
}
.service-content-left p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #aaaaaa;
    margin: 0 0 16px 0;
    max-width: 600px;
}
.service-content-left ol {
    list-style: none;
    counter-reset: service-counter;
    padding-left: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.service-content-left ol > li {
    position: relative;
    padding-left: 28px;
    counter-increment: service-counter;
}
.service-content-left ol > li::before {
    content: counter(service-counter) ".";
    position: absolute;
    left: 0;
    top: -1px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.service-content-left ul {
    list-style: none;
    padding-left: 18px;
    margin: 12px 0 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.service-content-left ul > li {
    position: relative;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #adadad;
    margin: 0;
}
.service-content-left ul > li::before {
    content: "•";
    position: absolute;
    left: -14px;
    top: 0;
    color: #adadad;
    font-size: 14px;
    line-height: 1.6;
}
.service-content-left strong {
    color: #ffffff;
    font-weight: 600;
}
.service-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ceo-profile-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ceo-profile-img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ceo-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.ceo-profile-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ceo-profile-name {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    color: #F5F1EB;
    margin: 0;
}
.ceo-profile-role {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}
.ceo-stats-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ceo-stats-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ceo-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.ceo-stat-num {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    color: #F5F1EB;
    line-height: 1;
}
.ceo-stat-lbl {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--clr-text-gray);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.ceo-consultation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #0877b5;
    color: #000000;
    padding: 14px 24px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}
.ceo-consultation-btn:hover {
    background-color: #dcb38a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 149, 108, 0.2);
}
.ceo-consultation-btn .btn-arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #000000;
    color: #0877b5;
    transition: all 0.3s ease;
}
.ceo-consultation-btn:hover .btn-arrow-circle {
    transform: rotate(45deg);
    background-color: #ffffff;
    color: #000000;
}
.ceo-consultation-btn .btn-arrow-circle svg {
    width: 12px;
    height: 12px;
}
@media (max-width: 991px) {
    .service-container-card {
        padding: 32px;
    }
    .service-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .service-sidebar-right {
        flex-direction: row;
        gap: 24px;
    }
    .ceo-profile-card, .ceo-stats-card {
        flex: 1;
    }
}
@media (max-width: 768px) {
    .service-container-card {
        padding: 24px;
    }
    .service-page-title {
        font-size: 28px;
    }
    .service-sidebar-right {
        flex-direction: column;
    }
    .ceo-profile-card, .ceo-stats-card {
        width: 100%;
    }
}

/* Blog Post Layout */
.blog-post-layout {
    padding: var(--section-padding) 0;
    background-color: var(--clr-bg-dark);
}
.blog-post-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}
.blog-post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--clr-text-gray);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.blog-post-author {
    display: flex;
    align-items: center;
    gap: 10px;
}
.blog-post-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--clr-border);
}
.blog-post-author-name {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.blog-post-image {
    width: 100%;
    height: 450px;
    border-radius: var(--radius-md);
    overflow: visible !important;
    border: 1px solid var(--clr-border);
    margin-bottom: 40px;
}
.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-post-content {
    font-family: var(--font-body);
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.6;
}
.blog-post-content p {
    margin-bottom: 24px;
    max-width: 600px;
}
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    font-family: var(--font-heading);
    color: var(--clr-text-white);
    margin-top: 40px;
    margin-bottom: 16px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.blog-post-content h2 { font-size: 28px; }
.blog-post-content h3 { font-size: 22px; }
.blog-post-content h4 { font-size: 18px; }

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 24px;
    padding-left: 24px;
}
.blog-post-content li {
    margin-bottom: 10px;
}
.blog-post-content blockquote {
    border-left: 3px solid var(--clr-accent);
    padding: 10px 0 10px 24px;
    font-style: italic;
    color: var(--clr-text-light);
    margin: 35px 0;
    font-size: 16px;
}
@media (max-width: 768px) {
    .blog-post-image {
        height: 280px;
    }
}

/* Subpage Bottom CTA Section */
.subpage-cta-section {
    padding: 60px 0;
    background-color: var(--clr-bg-darker);
    border-top: 1px solid var(--clr-border);
}
.subpage-cta-card {
    max-width: var(--max-width);
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.05);
    border: 0.5px solid var(--clr-border);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--radius-md);
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}
.subpage-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(212, 163, 115, 0.05);
    border: 1px solid rgba(212, 163, 115, 0.2);
    border-radius: var(--radius-full);
    padding: 8px 16px;
}
.subpage-cta-pill .circle {
    width: 6px;
    height: 6px;
    background-color: var(--clr-accent);
    border-radius: 50%;
}
.subpage-cta-pill span {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.subpage-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4.5vw, 56px);
    color: #F5F1EB;
    max-width: 600px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.subpage-cta-title span {
    color: var(--clr-text-gray);
}
@media (max-width: 768px) {
    .subpage-cta-section {
        padding: 40px 0;
    }
    .subpage-cta-card {
        padding: 40px 24px;
        margin: 0 16px;
        border-radius: var(--radius-sm);
        gap: 20px;
    }
    .subpage-cta-title {
        font-size: 28px;
    }
}

/* Attorneys Subpage Layout */
.attorneys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: var(--section-padding) 0;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
.attorney-card {
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: var(--transition);
}
.attorney-card:hover {
    transform: translateY(-5px);
    border-color: var(--clr-accent);
}
.attorney-img-wrapper {
    width: 100%;
    height: 320px;
    overflow: visible !important;
    border-bottom: 1px solid var(--clr-border);
}
.attorney-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: var(--transition);
}
.attorney-card:hover .attorney-img-wrapper img {
    transform: scale(1.03);
}
.attorney-info {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
}
.attorney-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.attorney-name {
    font-family: var(--font-heading);
    font-size: 34px;
    color: #F5F1EB;
    font-weight: 600;
}
.attorney-role {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--clr-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}
.attorney-bio {
    font-size: 14px;
    color: var(--clr-text-muted);
    line-height: 1.6;
    flex-grow: 1;
}
.attorney-action {
    margin-top: auto;
}
.attorney-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background-color: rgba(227, 169, 121, 0.05);
    border: 1px solid rgba(227, 169, 121, 0.2);
    border-radius: var(--radius-sm);
    color: var(--clr-accent);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: var(--transition);
}
.attorney-btn:hover {
    background-color: var(--clr-accent);
    color: var(--clr-text-white);
    border-color: var(--clr-accent);
}

/* Service Detail Pages Layout */
.subpage-hero {
    padding: 120px 0 60px 0;
    background-color: #0A0A0A;
    text-align: center;
    border-bottom: 1px solid #1c1c1c;
}
.subpage-hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.subpage-hero-pill {
    background-color: rgba(200, 120, 58, 0.05);
    border: 1px solid rgba(200, 120, 58, 0.15);
    padding: 6px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.subpage-hero-pill span {
    font-family: var(--font-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.subpage-hero-title {
    font-family: var(--font-heading);
    font-size: 42px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.2;
    margin: 0;
}

.service-detail-layout {
    padding: 60px 0 100px 0;
    background-color: #0A0A0A;
}
.service-detail-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left Column - Content */
.service-content {
    display: flex;
    flex-direction: column;
}
.service-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #777777;
    margin-bottom: 24px;
}
.service-breadcrumbs a {
    color: #ffffff;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: 4px;
}
.service-breadcrumbs a:hover {
    color: var(--clr-accent);
}
.service-breadcrumbs .breadcrumb-arrow {
    color: var(--clr-accent);
    font-size: 11px;
}
.service-breadcrumbs .breadcrumb-dot {
    color: #333333;
}
.service-detail-title {
    font-family: var(--font-heading);
    font-size: 32px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.service-detail-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: #adadad;
    margin-bottom: 24px;
}
.service-main-image {
    width: 100%;
    border-radius: 16px;
    overflow: visible !important;
    margin-bottom: 36px;
    border: 1px solid #1c1c1c;
    aspect-ratio: 16/9;
}
.service-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-detail-subtitle {
    font-family: var(--font-heading);
    font-size: 22px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-top: 36px;
    margin-bottom: 20px;
}

/* Bullet list checkmark/arrows grid */
.service-bullets-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 24px 0 36px 0;
}
.service-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.service-bullet-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--clr-accent);
    margin-top: 2px;
}
.service-bullet-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}
.service-bullet-desc {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.5;
    color: #adadad;
}

/* Blockquote */
.service-content blockquote {
    border-left: 2px solid var(--clr-accent);
    padding: 16px 24px;
    font-style: italic;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.01);
    border-radius: 0 8px 8px 0;
    margin: 32px 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Inner CTA card at bottom of left column */
.service-inner-cta {
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    padding: 40px;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    position: relative;
    overflow: visible !important;
}
.service-inner-cta-pill {
    background-color: rgba(200, 120, 58, 0.05);
    border: 1px solid rgba(200, 120, 58, 0.15);
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--clr-accent);
}
.service-inner-cta-title {
    font-family: var(--font-heading);
    font-size: 26px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.8px;
    max-width: 480px;
}
.service-inner-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #0877b5;
    color: #000000;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}
.service-inner-cta-btn:hover {
    background-color: #dcb38a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(200, 149, 108, 0.2);
}
.service-inner-cta-btn .btn-arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #000000;
    color: #0877b5;
    transition: all 0.3s ease;
}
.service-inner-cta-btn:hover .btn-arrow-circle {
    transform: rotate(45deg);
    background-color: #ffffff;
    color: #000000;
}
.service-inner-cta-btn .btn-arrow-circle svg {
    width: 12px;
    height: 12px;
}

/* Right Column - Sidebar */
.service-sidebar {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: sticky;
    top: 96px;
}

/* CEO / Founder Card */
.ceo-card {
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ceo-card-image {
    width: 100%;
    aspect-ratio: 1.1/1;
    border-radius: 12px;
    overflow: visible !important;
    border: 1px solid var(--clr-border);
}
.ceo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.ceo-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ceo-card-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--clr-accent);
}
.ceo-card-role {
    font-family: var(--font-heading);
    font-size: 12px;
    color: #777777;
    font-weight: 500;
}
.ceo-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    border-top: 1px solid #1f1f1f;
    border-bottom: 1px solid #1f1f1f;
    padding: 16px 0;
}
.ceo-card-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ceo-card-number {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}
.ceo-card-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: #777777;
    font-weight: 500;
}
.ceo-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #0877b5;
    color: #000000;
    padding: 14px 20px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}
.ceo-card-btn:hover {
    background-color: #dcb38a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 149, 108, 0.15);
}

/* Sibling Navigation Card */
.sidebar-nav-card {
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sidebar-nav-title {
    font-family: var(--font-heading);
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.sidebar-nav-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-nav-category-title {
    font-family: var(--font-serif);
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    color: var(--clr-accent);
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 8px;
}
.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav-item {
    border-bottom: 1px solid #191919;
}
.sidebar-nav-item:last-child {
    border-bottom: none;
}
.sidebar-nav-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    color: #aaaaaa;
    transition: var(--transition);
}
.sidebar-nav-item a:hover,
.sidebar-nav-item.active a {
    color: var(--clr-accent);
    padding-left: 4px;
}
.sidebar-nav-item.active a {
    font-weight: 600;
    border-bottom: 1px solid var(--clr-accent);
}
.sidebar-nav-arrow {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: var(--transition);
}
.sidebar-nav-item a:hover .sidebar-nav-arrow {
    transform: translate(2px, -2px);
}

@media (max-width: 991px) {
    .service-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .service-sidebar {
        position: relative;
        top: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }
    .ceo-card, .sidebar-nav-card {
        flex: 1 1 300px;
    }
}

@media (max-width: 768px) {
    .service-sidebar {
        flex-direction: column;
    }
    .ceo-card, .sidebar-nav-card {
        width: 100%;
    }
    .subpage-hero-title {
        font-size: 32px;
    }
    .service-detail-title {
        font-size: 26px;
    }
}

/* Custom Portrait Video Section */
.about-video-section {
    padding: 80px 0;
    background-color: var(--clr-bg-dark);
}

.video-about-card {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: center;
    background-color: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 48px;
    position: relative;
    overflow: visible !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.video-card-header {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
}

@media (max-width: 991px) {
    .about-video-section {
        padding: 40px 0;
    }
    .video-about-card {
        grid-template-columns: 220px 1fr !important;
        gap: 32px !important;
        padding: 32px !important;
    }
    .video-card-header {
        grid-column: span 2 !important;
    }
    .custom-video-player {
        max-width: 220px !important;
    }
}

@media (max-width: 767px) {
    .video-about-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 24px !important;
    }
    .details-column {
        display: contents !important;
    }
    .video-about-card .tag-badge {
        order: 1 !important;
        margin: 0 auto !important;
    }
    .video-about-card .section-title {
        order: 2 !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }
    .video-column {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 8px 0 !important;
    }
    .custom-video-player {
        max-width: 280px !important; /* Make the video player center and big */
        width: 100% !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 auto !important;
    }
    .about-card-desc {
        order: 4 !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    .about-card-desc p {
        font-size: 12px !important; /* Small description below video */
        line-height: 1.55 !important;
    }
    .about-card-desc p:nth-child(n+2) {
        display: none !important; /* Hide second paragraph to keep it small and short */
    }
    .card-cta-btn {
        order: 5 !important;
        margin-top: 8px !important;
    }
    .video-controls-overlay {
        padding: 10px !important;
    }
    .play-center-btn {
        width: 50px !important;
        height: 50px !important;
    }
    .play-center-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
}

.video-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.custom-video-player {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Controls Overlay */
.video-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    padding: 16px;
    pointer-events: none;
}

.custom-video-player:hover .video-controls-overlay,
.custom-video-player.controls-active .video-controls-overlay {
    opacity: 1;
}

.video-controls-overlay * {
    pointer-events: auto;
}

/* Centered play button */
.play-center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgba(200, 120, 58, 0.9);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
    pointer-events: auto;
    border: none;
}

.play-center-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: var(--clr-accent);
}

.play-center-btn.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events: none;
}

.play-center-btn svg {
    width: 28px;
    height: 28px;
}

/* Bottom controls bar */
.video-controls-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

/* Custom timeline scrubber styling */
.timeline-container {
    position: relative;
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.timeline-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 4;
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--clr-accent);
    border-radius: 3px;
    z-index: 2;
    pointer-events: none;
}

.controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.control-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.control-btn:hover {
    color: var(--clr-accent);
}

.control-btn svg {
    width: 20px;
    height: 20px;
}

.time-display {
    font-family: var(--font-inter);
    font-size: 11px;
    color: #ccc;
    font-weight: 500;
    letter-spacing: 0.5px;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

/* Details column */
.details-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.about-card-desc {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-card-desc p {
    color: var(--clr-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.card-cta-btn {
    margin-top: 12px;
}

/* 
===============================================
  12. Custom Refinements (Morph, Modal, Reveals)
===============================================
*/

/* Mobile Menu Toggle Morph */
.mobile-toggle svg line {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.mobile-toggle svg line:nth-child(1) {
    transform-origin: 12px 6px;
}
.mobile-toggle svg line:nth-child(2) {
    transform-origin: 12px 12px;
}
.mobile-toggle svg line:nth-child(3) {
    transform-origin: 12px 18px;
}
.mobile-toggle.active svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-toggle.active svg line:nth-child(2) {
    opacity: 0;
}
.mobile-toggle.active svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Custom Success Modal (Glassmorphic) */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 8, 8, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.custom-modal-card {
    background: rgba(18, 17, 17, 0.85);
    border: 1px solid rgba(200, 120, 58, 0.25);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    max-width: 440px;
    width: 90%;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(200, 120, 58, 0.08);
}
.custom-modal-overlay.show .custom-modal-card {
    transform: scale(1) translateY(0);
}
.custom-modal-icon-wrapper {
    width: 60px;
    height: 60px;
    border: 2px solid #0877b5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
    color: #0877b5;
    background-color: rgba(200, 120, 58, 0.05);
    box-shadow: 0 0 20px rgba(200, 120, 58, 0.15);
}
.custom-modal-icon-wrapper svg {
    width: 28px;
    height: 28px;
}
.custom-modal-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.custom-modal-body {
    font-family: var(--font-inter);
    font-size: 14px;
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-bottom: 28px;
}
.custom-modal-btn {
    background: linear-gradient(135deg, #0877b5, #A65F2B);
    border: none;
    color: #ffffff;
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(200, 120, 58, 0.2);
}
.custom-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(200, 120, 58, 0.35);
    background: linear-gradient(135deg, #d38546, #b86b32);
}

/* Multi-Directional Reveal Animations */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.is-revealed {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.is-revealed {
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
}

/* ==============================================
   12. Premium Visual Enhancements & Custom UI
================================================ */

/* Smooth fade-in page entry */
body {
    animation: fadeInPage 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Textured Background noise/grain overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.015; /* Even softer for elegance and performance */
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    transform: translate3d(0, 0, 0); /* Force GPU compositing */
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: auto;
}

/* Custom premium scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f0e0e;
}
::-webkit-scrollbar-thumb {
    background: #2a2826;
    border-radius: 4px;
    border: 2px solid #0f0e0e;
}
::-webkit-scrollbar-thumb:hover {
    background: #0877b5;
}

/* Navbar Scrolled State - Keep outside transparent as requested */
.navbar,
.navbar.navbar-scrolled {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Disable noise overlay on mobile to keep scroll extremely smooth */
@media (max-width: 991px) {
    .noise-overlay {
        display: none !important;
    }
}

/* Interactive Card Mouse Glow Border Tracking */
.faq-item, .contact-form-wrapper, .stat-card, 
.team-card, .testimonial-card, .contact-card, .blog-card, 
.ceo-profile-card, .ceo-stats-card, .subpage-cta-card, 
.attorney-card, .ceo-card, .sidebar-nav-card, .video-about-card {
    position: relative;
}

.faq-item::before, .contact-form-wrapper::before, 
.stat-card::before, .team-card::before, .testimonial-card::before, 
.contact-card::before, .blog-card::before, .ceo-profile-card::before, 
.ceo-stats-card::before, .subpage-cta-card::before, .attorney-card::before, 
.ceo-card::before, .sidebar-nav-card::before, .video-about-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(
        400px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
        rgba(200, 120, 58, 0.06),
        transparent 80%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.faq-item:hover::before, .contact-form-wrapper:hover::before,
.stat-card:hover::before, .team-card:hover::before, .testimonial-card:hover::before,
.contact-card:hover::before, .blog-card:hover::before, .ceo-profile-card:hover::before,
.ceo-stats-card:hover::before, .subpage-cta-card:hover::before, .attorney-card:hover::before,
.ceo-card:hover::before, .sidebar-nav-card:hover::before, .video-about-card:hover::before {
    opacity: 1;
}

/* ==========================================================================
   TABLET & MOBILE UI OVERHAUL (max-width: 991px)
   Aligns layout, chevrons, FAQs, process lines, and forms with reference design
   ========================================================================== */
@media (max-width: 991px) {
    /* 1. Global Spacings & Typography */
    :root {
        --section-padding: 48px;
    }
    
    body {
        font-size: 13.5px;
    }

    /* 2. Navbar Overhaul */
    .navbar {
        height: 60px;
        padding: 0 16px;
    }

    .nav-inner {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-logo-img {
        height: 24px !important;
        width: auto !important;
    }

    .nav-logo-text {
        font-size: 12px !important;
        letter-spacing: -0.3px;
    }

    .mobile-toggle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
    }

    .nav-links.active {
        top: 64px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background-color: rgba(12, 12, 12, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 16px;
        padding: 24px;
        gap: 20px;
    }

    /* 3. Hero Section Overhaul - Perfect Mockup Structure Match */
    .hero {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding-top: 80px !important;
        padding-bottom: 24px !important;
        background-color: #000000 !important;
        box-sizing: border-box !important;
    }

    .hero-bg-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: center !important;
    }

    .hero-overlay {
        background: linear-gradient(to bottom, transparent 0%, transparent 65%, #000000 100%), linear-gradient(105deg, rgba(8,8,8,0.65) 0%, rgba(8,8,8,0.45) 35%, rgba(8,8,8,0.1) 60%, transparent 100%) !important;
        z-index: 1;
    }

    .hero-lady-logo {
        width: 80% !important;
        right: 10% !important;
        top: 45% !important;
        opacity: 0.15 !important;
        background-position: left center !important;
    }
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        flex-grow: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 36px !important; /* Shifts the left-aligned layout slightly inward from the screen edge */
        margin: 0 !important;
        box-sizing: border-box !important;
        z-index: 2;
    }

    .hero-content {
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .hero-badge {
        display: inline-flex !important;
        align-items: center !important;
        background-color: rgba(12, 12, 12, 0.85) !important;
        border: 1.5px solid rgba(200, 120, 58, 0.7) !important;
        border-radius: 50px !important;
        padding: 8px 18px !important;
        font-family: var(--font-body) !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: #ffffff !important; /* Highly visible pure white text matching modern premium design */
        margin-bottom: 24px !important;
        gap: 8px !important;
        align-self: flex-start !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    }

    .hero-badge .dot {
        color: var(--clr-accent) !important;
        font-size: 8px !important;
    }

    .hero-title {
        font-family: var(--font-clash) !important;
        font-size: clamp(38px, 9.5vw, 44px) !important;
        line-height: 1.1 !important;
        letter-spacing: -1.5px !important;
        margin: 0 0 16px 0 !important;
        color: #ffffff !important;
        text-align: left !important;
        max-width: 100% !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #bbbbbb !important;
        margin: 0 0 28px 0 !important;
        text-align: left !important;
        max-width: 100% !important;
    }

    .hero-actions {
        width: 100%;
        display: flex !important;
        justify-content: flex-start !important;
    }

    /* Primary CTA Pill Button matching reference */
    .hero-actions .btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: var(--clr-accent) !important;
        color: #000000 !important;
        font-weight: 700 !important;
        font-size: 13.5px;
        padding: 6px 6px 6px 20px !important;
        border-radius: 50px !important;
        border: none !important;
        gap: 14px !important;
        min-width: 210px !important;
        box-shadow: 0 8px 24px rgba(200, 120, 58, 0.25) !important;
    }

    .hero-actions .btn-icon {
        width: 36px !important;
        height: 36px !important;
        background-color: #000000 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--clr-accent) !important;
    }

    .hero-actions .btn-icon svg {
        width: 14px !important;
        height: 14px !important;
        fill: currentColor !important;
    }

    /* Featured bottom ticker bar matching mockup overlay exactly */
    .hero-featured {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 0 !important;
        margin-top: 32px !important;
        width: 100% !important;
        position: relative !important;
        border: none !important;
        background: none !important;
        text-align: left !important;
    }

    .featured-label {
        flex-shrink: 0 !important;
        background: rgba(12, 12, 12, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50px !important;
        padding: 6px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        align-self: flex-start !important;
    }

    .featured-circle {
        display: inline-block !important;
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background-color: var(--clr-accent) !important;
    }

    .featured-label h5 {
        font-size: 11px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    .ticker-wrapper {
        overflow: visible !important !important;
        width: 100% !important;
        height: 42px !important;
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
        -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent) !important;
    }

    .ticker-track {
        animation: scrollTicker 8s linear infinite !important; /* Sped up to 8s for premium active flow */
        gap: 40px !important;
    }

    .ticker-item svg {
        height: 32px !important; /* Enlarged for premium readability and brand trust */
        width: auto !important;
        opacity: 0.85 !important;
        color: #ffffff !important;
    }

    /* 4. Services Section Overhaul: Chevrons List format matching reference */
    .services {
        padding: 56px 0 !important;
        background-color: #000000 !important;
    }

    .services .container {
        padding: 0 36px !important; /* Exact same padding as hero to keep it slightly away from side */
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .services .section-intro {
        padding: 0 !important;
        margin-bottom: 36px !important;
        text-align: center !important; /* Centered badge and header to match mockup! */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centered! */
        width: 100% !important;
    }

    .services .section-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.6px !important;
        font-weight: 700 !important;
        text-align: center !important; /* Centered! */
    }

    .services .tag-badge {
        background-color: rgba(12, 12, 12, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 6px 14px !important;
        margin-bottom: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .services .tag-text {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        color: var(--clr-accent) !important; /* Gold/Accent text matching badge in screenshot */
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
    }

    .services-list {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Force left-set! */
        justify-content: flex-start !important;
        gap: 56px !important; /* Increased gap to start the next set (Corporate & Employment) with a distinct separation */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .service-category {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Force left-set! */
        justify-content: flex-start !important;
        gap: 0 !important; /* Removed container gap to pull items closer to parent text */
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .category-header {
        margin-bottom: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Force left-set! */
        justify-content: flex-start !important;
    }

    .category-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 21px !important;
        font-weight: 800 !important;
        font-style: normal !important; /* Forces non-italicized geometric sans-serif style! */
        letter-spacing: -0.5px !important;
        margin-bottom: 6px !important; /* Reduced gap */
        color: var(--clr-accent) !important;
        text-align: left !important; /* Force left-set! */
    }

    .category-desc {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #888888 !important;
        margin-bottom: 10px !important; /* Reduced gap */
        max-width: 100% !important;
        width: 100% !important;
        text-align: left !important; /* Force left-set! */
    }

    .category-header .btn-text {
        display: inline-flex !important; /* Restore 'Assessment / Learn More' text link in header */
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-decoration: underline !important;
        text-underline-offset: 4px !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 12px !important; /* Reduced gap to pull services close to parent link */
        padding: 0 !important;
        transition: all 0.3s ease !important;
    }

    .category-header .btn-text svg {
        width: 12px !important;
        height: 12px !important;
        fill: #ffffff !important;
    }

    .category-items {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Force left-set! */
        justify-content: flex-start !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Text list row service links matching image 100% */
    .service-card {
        background: none !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        padding: 16px 0 !important; /* Symmetrical padding, no margins, zero indent */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Force left-set! */
        width: 100% !important;
        box-shadow: none !important;
        margin: 0 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        text-align: left !important; /* Guaranteed left-set! */
    }

    .service-card-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important; /* Force left-set! */
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        text-align: left !important; /* Guaranteed left-set! */
    }

    .service-card:hover {
        transform: none !important;
        background: none !important;
        padding-left: 0 !important; /* Zero indentation on hover! */
    }

    .service-name {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 15px !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        text-align: left !important; /* Guaranteed left-set! */
        display: inline-block !important;
    }

    .service-arrow {
        width: 13px !important;
        height: 13px !important;
        fill: var(--clr-accent) !important; /* Gold arrow matching mockup next to text */
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    .service-card-body {
        display: none !important; /* Hide description dropdown under child items - they are direct links */
    }

    .service-hover-card {
        display: none !important; /* Block all popups on mobile */
    }

    @keyframes serviceSlideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 5. Process / Methodology Section */
    .process {
        padding: 64px 0 !important;
        background-color: #000000 !important;
    }

    .process .container {
        padding: 0 20px !important; /* 20px padding to maximize width for 3 lines to fit perfectly */
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .process .section-intro {
        margin-bottom: 44px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important; /* Zero padding to maximize available horizontal space */
    }

    .process .tag-badge {
        background-color: rgba(12, 12, 12, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 6px 14px !important;
        margin-bottom: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .process .tag-text {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        color: var(--clr-accent) !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
    }

    .process-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 24px !important; /* Set to 24px so the long middle line fits strictly on 1 line on mobile */
        line-height: 1.25 !important;
        font-weight: 700 !important;
        letter-spacing: -0.6px !important;
        color: #ffffff !important;
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .process-title .text-muted {
        color: #888888 !important; /* Slightly lighter/premium gray */
    }

    .process-steps {
        padding: 0 24px !important;
        max-width: 100% !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .process-step {
        position: relative !important;
        display: flex !important;
        gap: 24px !important; /* Premium spacing between icon and content */
        padding-bottom: 48px !important; /* Generous breathing room */
        align-items: flex-start !important;
    }

    .process-step:last-child {
        padding-bottom: 0 !important;
    }

    /* Central vertical connector line */
    .process-step:not(:last-child)::after {
        content: '' !important;
        position: absolute !important;
        left: 24px !important; /* Perfect center of 48px icon */
        top: 48px !important; /* Start from bottom edge of icon */
        bottom: -8px !important;
        width: 1px !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        z-index: 1 !important;
    }

    .step-icon {
        width: 48px !important; /* Larger step icon */
        height: 48px !important; /* Larger step icon */
        border-radius: 50% !important;
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2 !important;
        flex-shrink: 0 !important;
    }

    .step-icon svg {
        width: 20px !important; /* Larger inside icon */
        height: 20px !important; /* Larger inside icon */
        fill: var(--clr-accent) !important;
    }

    .step-content {
        padding-top: 6px !important; /* visual alignment offset */
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .step-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 18px !important; /* Bigger step title */
        font-weight: 700 !important;
        letter-spacing: -0.3px !important;
        color: #ffffff !important;
        margin-bottom: 0 !important;
    }

    .step-desc {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13.5px !important; /* Bigger step description */
        line-height: 1.55 !important;
        color: #888888 !important;
    }

    /* 6. FAQ (Insights & Clarifications) Section */
    .faq {
        padding: 56px 0 !important;
        background-color: #000000 !important;
    }

    .faq-layout {
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .faq-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centered! */
        text-align: center !important; /* Centered! */
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    .faq-badge {
        align-self: center !important; /* Center the tag badge pill */
        background-color: rgba(12, 12, 12, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 6px 14px !important;
        margin-bottom: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .faq-badge .tag-text {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        color: var(--clr-accent) !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
    }

    .faq-main-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.6px !important;
        font-weight: 700 !important;
        text-align: center !important; /* Centered! */
        color: #ffffff !important;
        margin: 0 auto !important;
    }

    .faq-right {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important; /* Reduced layout gap between each accordion item */
        width: 100% !important;
    }

    .faq-item {
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important; /* Removed margin-bottom to avoid double spacing with flexbox gap */
    }

    .faq-question {
        padding: 14px 18px !important; /* Compact, premium padding */
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
    }

    /* Custom Number Circle matching reference image */
    .faq-icon {
        width: 32px !important;
        height: 32px !important;
        background: none !important;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        color: var(--clr-accent) !important;
        font-family: var(--font-heading) !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .faq-item.active .faq-icon {
        background-color: var(--clr-accent) !important;
        border-color: var(--clr-accent) !important;
        color: #000000 !important;
    }

    .faq-title {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        color: #ffffff !important;
        line-height: 1.4 !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 18px 16px 64px !important; /* visual alignment match */
    }

    .faq-answer p {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        color: #aaaaaa !important;
    }

    /* 7. Testimonials (Client Stories) Section */
    /* 7. Testimonials (Client Stories) Section */
    .testimonials {
        padding: 56px 0 !important;
        background-color: #000000 !important;
    }

    .testimonials-header {
        padding: 0 20px !important;
        margin-bottom: 32px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .testimonials-pill {
        align-self: center !important;
        background-color: rgba(12, 12, 12, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 6px 14px !important;
        margin-bottom: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .testimonials-pill .pill-text {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        color: var(--clr-accent) !important;
        font-weight: 700 !important;
        letter-spacing: 0.12em !important;
    }

    .testimonials-heading {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.6px !important;
        font-weight: 700 !important;
        text-align: center !important;
        color: #ffffff !important;
    }

    /* Carousel layout where next card is visible on right half */
    .testimonials-container {
        overflow: visible !important !important; /* Contain track bleeding */
        width: 100% !important;
        position: relative !important;
        padding: 0 !important;
    }

    .testimonials-track-wrapper {
        padding: 0 !important;
        overflow: visible !important; /* Allow adjacent cards to bleed and remain visible */
        width: 100% !important;
        position: relative !important;
    }

    .testimonials-track {
        display: flex !important;
        gap: 16px !important;
        width: max-content !important;
        padding: 0 !important; /* Managed dynamically via JS alignment */
        margin: 0 !important;
    }

    .testimonial-card {
        width: 270px !important; /* Fixed W matching 3:4 portrait shape */
        min-height: 360px !important; /* Fixed min-H matching 3:4 portrait shape */
        box-sizing: border-box !important;
        padding: 24px !important;
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        opacity: 0.35 !important; /* Inactive cards faded out */
        transition: opacity 0.4s ease, transform 0.4s ease !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .testimonial-card.active {
        opacity: 1 !important; /* Active centered card fully opaque */
    }

    .testimonial-stars {
        display: flex !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }

    .testimonial-text {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
        color: #aaaaaa !important;
        flex-grow: 1 !important;
    }

    .testimonial-author {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Absolute overlapping navigation arrows */
    .slider-arrow-btn {
        display: flex !important; /* Make visible on mobile */
        width: 40px !important;
        height: 40px !important;
        background-color: var(--clr-accent) !important; /* Orange background */
        border: none !important;
        border-radius: 50% !important;
        justify-content: center !important;
        align-items: center !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 15 !important; /* Float on top of adjacent faded cards */
        cursor: pointer !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .slider-arrow-btn.prev-btn {
        left: 20px !important; /* Positioned overlapping left card area */
        right: auto !important;
    }

    .slider-arrow-btn.next-btn {
        right: 20px !important; /* Positioned overlapping right card area */
        left: auto !important;
    }

    .slider-arrow-btn.prev-btn.is-flipped {
        transform: translateY(-50%) !important; /* Overriding desktop flip since SVG is already correct */
    }

    .slider-arrow-btn svg {
        width: 18px !important;
        height: 18px !important;
        fill: #ffffff !important;
    }

    .testimonials-pagination {
        margin-top: 24px !important;
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Dots visibility logic */
    .testimonials-pagination .dot {
        display: block !important;
        width: 6px !important;
        height: 6px !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        transition: background-color 0.3s ease, transform 0.3s ease !important;
    }

    .testimonials-pagination .dot.active {
        background-color: var(--clr-accent) !important;
        transform: scale(1.2) !important;
    }

    /* 8. Contact Section Overhaul - Perfect ordering & dark inputs */
    .contact {
        padding: 56px 0;
        background-color: #000000;
    }

    .contact-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        padding: 0 20px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    /* Mobile ordering: Header -> Form -> Details */
    .contact-left {
        display: contents !important;
    }

    .contact-pill {
        order: 1 !important;
        margin-bottom: 12px;
        align-self: flex-start;
    }

    .contact-heading {
        order: 2 !important;
        font-size: 24px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.6px !important;
        margin-bottom: 28px;
    }

    /* Info list placed perfectly below the form */
    .contact-info-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        order: 4 !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    .info-block {
        display: flex;
        gap: 16px;
        margin-bottom: 0 !important;
    }

    .info-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: rgba(200, 120, 58, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .info-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .info-label {
        font-size: 11px;
        letter-spacing: 0.5px;
        color: #888888;
        font-weight: 700;
    }

    .info-text {
        font-size: 13px;
        color: #ffffff;
        margin: 0;
    }

    .info-link, .tel-link {
        font-size: 12.5px;
        color: var(--clr-accent);
        font-weight: 600;
        text-decoration: none;
    }

    /* Form container matches premium dark card */
    .contact-right {
        order: 3 !important;
        width: 100% !important;
    }

    .form-card {
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 16px !important;
        padding: 24px !important;
    }

    .form-group {
        margin-bottom: 18px;
    }

    .form-label {
        font-size: 12.5px;
        color: #aaaaaa;
        margin-bottom: 8px;
    }

    .form-input {
        background-color: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        height: 44px !important;
        padding: 0 16px !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
    }

    .form-input:focus {
        border-color: var(--clr-accent) !important;
    }

    .form-textarea {
        height: 100px !important;
        padding: 12px 16px !important;
        resize: none;
    }

    .select-arrow {
        right: 16px !important;
    }

    .submit-btn {
        width: 100% !important;
        height: 46px !important;
        border-radius: 50px !important;
        background-color: var(--clr-accent) !important;
        color: #000000 !important;
        font-weight: 700 !important;
        font-size: 13.5px !important;
        border: none !important;
        box-shadow: 0 8px 20px rgba(200, 120, 58, 0.2);
        margin-top: 8px;
    }

    /* Hide footer branding elements on mobile/tablet viewports */
    .footer-made-by,
    .footer-built-with,
    .framer-badge {
        display: none !important;
    }
}

/* Added to ensure proper badge rendering */
.footer-badge { z-index: 9999 !important; }
.badge-left { box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; }
.badge-right { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; }

/* Mobile badges resize */
@media (max-width: 768px) {
    .footer-badge { padding: 6px 12px !important; gap: 6px !important; }
    .footer-badge span { font-size: 11px !important; }
    .badge-icon { width: 18px !important; height: 18px !important; }
    .badge-icon svg { width: 12px !important; height: 12px !important; }
}

/* Fix horizontal scroll and zoom glitch on mobile */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Deep Navy Shine for Cards */
.contact-form-wrapper,
.services-list-container,
.testimonial-card,
.faq-item {
    box-shadow: 0 10px 40px rgba(7, 30, 61, 0.15) !important;
}


/* ========================================================
   ROBINSONS HVAC - CUSTOM REFINED COMPONENTS
======================================================== */

/* Nav Request Service CTA Button */
.nav-request-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    background: var(--clr-accent, #0877b5) !important;
    color: #ffffff !important;
    border: 1px solid var(--clr-accent, #0877b5) !important;
    box-shadow: 0 4px 14px rgba(200, 149, 108, 0.25) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}
.nav-request-btn:hover {
    background: #dfaa7e !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(200, 149, 108, 0.4) !important;
}

/* Hero Secondary Call Now Button */
.hero-call-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}
.hero-call-btn:hover {
    border-color: var(--clr-accent, #0877b5) !important;
    color: var(--clr-accent, #0877b5) !important;
    background: rgba(200, 149, 108, 0.12) !important;
    transform: translateY(-2px) !important;
}
.hero-call-btn .phone-icon-svg {
    fill: currentColor !important;
    flex-shrink: 0;
}

/* Hero Bottom Tagline */
.hero-bottom-tagline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    font-size: 14px;
    color: #cccccc;
    font-weight: 500;
}
.hero-bottom-dash {
    display: inline-block;
    width: 24px;
    height: 2.5px;
    background: var(--clr-accent, #0877b5);
    border-radius: 2px;
    flex-shrink: 0;
}
.hero-meta-link {
    color: var(--clr-accent, #0877b5);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    transition: color 0.2s ease;
}
.hero-meta-link:hover {
    color: #dfaa7e;
}

/* Quick Services Horizontal Strip */
.quick-services-strip {
    background: #111110;
    border-top: 1px solid rgba(200, 149, 108, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 25;
}
.quick-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
}
.quick-service-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    color: #f5f5f5;
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.quick-service-box:last-child {
    border-right: none;
}
.quick-service-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-accent, #0877b5);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.quick-service-icon svg {
    width: 100%;
    height: 100%;
}
.quick-service-label {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #f0f0f0;
    transition: color 0.25s ease;
}
.quick-service-box:hover {
    background: rgba(200, 149, 108, 0.08);
}
.quick-service-box:hover .quick-service-label {
    color: var(--clr-accent, #0877b5);
}
.quick-service-box:hover .quick-service-icon {
    transform: scale(1.18);
}
@media (max-width: 900px) {
    .quick-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .quick-service-box:nth-child(2) {
        border-right: none;
    }
    .quick-service-box:nth-child(1),
    .quick-service-box:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
}
@media (max-width: 540px) {
    .quick-services-grid {
        grid-template-columns: 1fr;
    }
    .quick-service-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        justify-content: flex-start;
        padding: 16px 20px;
    }
}

/* Refined 4-Service Cards with Increased Height & Static Image */
.services-list {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.service-category {
    display: grid !important;
    grid-template-columns: 4fr 6.5fr !important;
    gap: 48px !important;
    align-items: start !important;
}

.service-category .category-header {
    position: sticky;
    top: 120px;
}

.category-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.service-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: 24px 24px 24px 30px !important; /* Increased height */
    min-height: 175px !important; /* Generous luxury height */
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-left: 3px solid transparent !important;
    border-radius: 12px !important;
    background: #151413 !important;
    position: relative !important;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 4px !important;
}

.service-card:hover {
    z-index: 10 !important;
    background: #1c1a18 !important;
    border-color: rgba(200, 149, 108, 0.3) !important;
    border-left-color: var(--clr-accent, #0877b5) !important;
    padding-left: 38px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 25px rgba(200, 149, 108, 0.1) !important;
    transform: translateY(-2px) !important;
}

.service-card-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.service-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.service-card .service-name {
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

.service-card:hover .service-name {
    color: var(--clr-accent, #0877b5) !important;
}

.service-card .service-arrow {
    width: 16px !important;
    height: 16px !important;
    fill: #ffffff !important;
    flex-shrink: 0 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), fill 0.3s ease !important;
}

.service-card:hover .service-arrow {
    transform: rotate(45deg) translate(2px, -2px) !important;
    fill: var(--clr-accent, #0877b5) !important;
}

.service-card .service-desc {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #a0a0a0 !important;
    margin: 8px 0 12px 0 !important;
    max-width: 440px !important;
    transition: color 0.3s ease !important;
}

.service-card:hover .service-desc {
    color: #dddddd !important;
}

.service-card .service-learn-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--clr-accent, #0877b5) !important;
    transition: transform 0.3s ease !important;
}

.service-card:hover .service-learn-more {
    transform: translateX(4px) !important;
}

.service-card-image-box {
    flex-shrink: 0 !important;
    width: 220px !important;
    height: 145px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-right: 6px !important; /* static on right corner, slightly not to the corner with a slight gap */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
    background: #181818 !important;
}

.service-static-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-card:hover .service-static-photo {
    transform: scale(1.08) !important;
}

@media (max-width: 991px) {
    .service-category {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .service-category .category-header {
        position: static !important;
    }
}

@media (max-width: 600px) {
    .service-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }
    .service-card-image-box {
        width: 100% !important;
        height: 140px !important;
        margin-right: 0 !important;
        margin-top: 14px !important;
    }
}


/* Ensure navbar background outside the floating pill is 100% transparent at all times */
#navbar,
#navbar.navbar-scrolled,
.navbar,
.navbar.navbar-scrolled {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* ========================================================
   HOMEPAGE NEW SECTIONS: FINANCING, COVERAGE SPLIT, PRE-FOOTER CTA
======================================================== */

/* 1. Financing Promo Card (Below Services) */
.financing-promo-section {
    padding: 30px 0 40px 0;
    position: relative;
    z-index: 5;
}
.financing-promo-card {
    background: linear-gradient(135deg, #171615 0%, #1f1c19 100%);
    border: 1px solid rgba(200, 149, 108, 0.25);
    border-radius: 16px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(200, 149, 108, 0.08);
}
.financing-promo-content {
    flex: 1;
    min-width: 0;
}
.financing-promo-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #ffffff;
    margin: 10px 0 8px 0;
}
.financing-promo-text {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #b5b5b5;
    max-width: 580px;
    margin: 0;
}
.financing-promo-action {
    flex-shrink: 0;
}
@media (max-width: 860px) {
    .financing-promo-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px;
    }
}

/* 2. Coverage Section 2-Column Split (With Home Photo) */
.coverage-section {
    padding: 70px 0 60px 0;
    background: #100f0e;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 5;
}
.coverage-grid-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}
.coverage-left-content {
    display: flex;
    flex-direction: column;
}
.coverage-right-photo {
    width: 100%;
}
.coverage-photo-box {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(200, 149, 108, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(200, 149, 108, 0.1);
    background: #181716;
    aspect-ratio: 16 / 11;
}
.coverage-home-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.coverage-photo-box:hover .coverage-home-img {
    transform: scale(1.05);
}
.chip-primary {
    background: rgba(200, 149, 108, 0.15);
    border: 1px solid var(--clr-accent);
    color: var(--clr-accent);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}
.chip-regular {
    background: #181716;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d0d0d0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}
.coverage-ask-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-top: 8px;
    transition: all 0.25s ease;
}
.coverage-ask-link:hover {
    color: #dfaa7e;
    transform: translateX(4px);
}
@media (max-width: 900px) {
    .coverage-grid-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

/* 3. Pre-Footer Action Strip ("Let’s get your home comfortable.") */
.cta-comfortable-strip {
    background: linear-gradient(90deg, #161514 0%, #1e1b18 50%, #161514 100%);
    border-top: 1px solid rgba(200, 149, 108, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 44px 0;
    position: relative;
    z-index: 10;
}
.cta-comfortable-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.cta-comfortable-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: #ffffff;
    margin: 0 0 6px 0;
}
.cta-comfortable-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    color: #aaaaaa;
    margin: 0;
}
.cta-comfortable-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
@media (max-width: 860px) {
    .cta-comfortable-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .cta-comfortable-title {
        font-size: 26px;
    }
}


/* ========================================================
   UNIFIED BACKGROUND & SECTION SEAM DIVIDERS
======================================================== */

/* 1. Global Single Background Color Across Entire Site */
body,
html,
main,
#main,
.section,
section,
.quick-services-strip,
.about-video-section,
.services,
.financing-promo-section,
.coverage-section,
.founder-section,
.faq,
.blog-section,
.testimonials,
.contact {
    background: #0b0a0a !important;
    background-color: #0b0a0a !important;
}

/* 2. Small Seams / Lines Dividing Every Section Cleanly */
.quick-services-strip,
.about-video-section,
.services,
.financing-promo-section,
.coverage-section,
.founder-section,
.faq,
.blog-section,
.testimonials,
.contact {
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative;
}

/* Ensure cards and interactive modules sit cleanly on unified canvas */
.video-about-card,
.financing-promo-card,
.contact-card,
.founder-integrated-card {
    background: #141312 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.service-card {
    background: #141312 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 3px solid transparent !important;
}
.service-card:hover {
    border-left-color: var(--clr-accent, #0877b5) !important;
    background: #191816 !important;
}


/* ========================================================
   ROBINSONS HVAC - COMPREHENSIVE BRAND COLOR OVERHAUL
   (White Background, Brand Blue #0877b5, Dark Navy #092f49)
======================================================== */

body {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: var(--ink, #153448) !important;
    font-family: var(--font-body);
}

html, main, #main {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Headings & Text */
h1, h2, h3, h4, h5, h6,
.section-title,
.category-title,
.contact-heading,
.founder-title,
.subpage-hero-title {
    color: var(--ink, #153448) !important;
}

.text-accent,
.tag-text,
.service-link-label,
.service-learn-more,
.info-link,
.coverage-link {
    color: var(--blue, #0877b5) !important;
}

.text-light {
    color: var(--ink, #153448) !important;
}

.text-muted,
.text-muted-body,
p,
.service-desc,
.category-desc,
.info-text,
.faq-answer,
.step-desc {
    color: var(--muted, #526675) !important;
}

/* Sections Divider Seams */
.section {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--line, #dce5eb) !important;
    padding: 60px 0 !important;
}

/* Topbar */
.topbar {
    background: var(--navy, #092f49) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
}
.topbar a {
    color: #ffffff !important;
}

/* Navbar */
.navbar {
    background: transparent !important;
    border: none !important;
}
.navbar.navbar-scrolled {
    background: transparent !important;
    box-shadow: none !important;
}
.nav-inner {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 4px 20px rgba(9, 47, 73, 0.08) !important;
    backdrop-filter: blur(12px) !important;
}
.nav-logo-text {
    color: var(--ink, #153448) !important;
    font-weight: 800 !important;
}
.nav-links .nav-link {
    color: var(--ink, #153448) !important;
    font-weight: 600 !important;
}
.nav-links .nav-link:hover,
.nav-links .nav-link.active {
    color: var(--blue, #0877b5) !important;
}
.nav-cta-label {
    color: var(--muted, #526675) !important;
}
.nav-cta-number {
    color: var(--ink, #153448) !important;
}
.nav-cta-icon-wrapper {
    background-color: var(--blue, #0877b5) !important;
}
.nav-cta-icon {
    fill: #ffffff !important;
}
.nav-request-btn {
    background: var(--blue, #0877b5) !important;
    border-color: var(--blue, #0877b5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(8, 119, 181, 0.25) !important;
}
.nav-request-btn:hover {
    background: var(--blue-dark, #075c8c) !important;
    color: #ffffff !important;
}

/* Hero Section (Atmospheric Navy Overlay over home photo) */
.hero {
    background-color: var(--navy, #092f49) !important;
}
.hero-overlay {
    background: linear-gradient(105deg, rgba(9,47,73,0.92) 0%, rgba(9,47,73,0.72) 48%, rgba(9,47,73,0.2) 80%, transparent 100%),
                linear-gradient(180deg, transparent 65%, rgba(9,47,73,0.95) 100%) !important;
}
.hero-content h1,
.hero-title,
.hero-content p,
.hero-subtitle {
    color: #ffffff !important;
}
.hero-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #8cd5ff !important;
}
.hero-badge .dot {
    color: #8cd5ff !important;
}
.hero-bottom-tagline {
    color: #d8e6ee !important;
}
.hero-bottom-dash {
    background: #8cd5ff !important;
}
.hero-meta-link {
    color: #8cd5ff !important;
}

/* Primary and Secondary Buttons */
.btn-primary,
.button,
.hero-actions .btn-primary {
    background-color: var(--blue, #0877b5) !important;
    border: 1px solid var(--blue, #0877b5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(8, 119, 181, 0.25) !important;
}
.btn-primary:hover,
.button:hover,
.hero-actions .btn-primary:hover {
    background-color: var(--blue-dark, #075c8c) !important;
    border-color: var(--blue-dark, #075c8c) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(8, 119, 181, 0.35) !important;
}
.btn-outline,
.btn-secondary,
.hero-call-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}
.btn-outline:hover,
.btn-secondary:hover,
.hero-call-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Light Section Button Outlines */
.section .hero-call-btn {
    background: #ffffff !important;
    border: 1px solid var(--line, #dce5eb) !important;
    color: var(--ink, #153448) !important;
}
.section .hero-call-btn:hover {
    border-color: var(--blue, #0877b5) !important;
    color: var(--blue, #0877b5) !important;
}

/* Quick Services Strip (Robinson's Brand Blue Strip) */
.quick-services-strip {
    background: var(--blue, #0877b5) !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.2) !important;
}
.quick-service-box {
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.quick-service-box:hover {
    background: var(--blue-dark, #075c8c) !important;
}
.quick-service-icon {
    color: #ffffff !important;
}
.quick-service-label {
    color: #ffffff !important;
}
.quick-service-box:hover .quick-service-label {
    color: #ffffff !important;
}

/* Tag Badges / Eyebrows */
.tag-badge {
    background: #eaf3f8 !important;
    border: 1px solid #d2e4ef !important;
    color: var(--blue, #0877b5) !important;
}
.tag-circle {
    background: var(--blue, #0877b5) !important;
}
.tag-text {
    color: var(--blue, #0877b5) !important;
}

/* Video About / Meet Robinsons Section */
.about-video-section {
    background-color: #ffffff !important;
}
.video-about-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}
.video-portrait-wrapper {
    background: #f1f6f9 !important;
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 12px 30px rgba(9, 47, 73, 0.1) !important;
}
.founder-integrated-card {
    background: var(--pale, #f1f6f9) !important;
    border: 1px solid var(--line, #dce5eb) !important;
}
.founder-integrated-card img {
    border: 2px solid var(--blue, #0877b5) !important;
}

/* Service Cards */
.services {
    background-color: #ffffff !important;
}
.service-card {
    background: #ffffff !important;
    border: 1px solid var(--line, #dce5eb) !important;
    border-left: 3px solid transparent !important;
    box-shadow: 0 4px 18px rgba(9, 47, 73, 0.04) !important;
}
.service-card:hover {
    background: #fbfdfe !important;
    border-color: #c7d8e2 !important;
    border-left-color: var(--blue, #0877b5) !important;
    box-shadow: 0 12px 32px rgba(9, 47, 73, 0.1) !important;
}
.service-card .service-name {
    color: var(--ink, #153448) !important;
}
.service-card:hover .service-name {
    color: var(--blue, #0877b5) !important;
}
.service-card .service-desc {
    color: var(--muted, #526675) !important;
}
.service-card-image-box {
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 4px 14px rgba(9, 47, 73, 0.08) !important;
    background: var(--pale, #f1f6f9) !important;
}

/* Financing Promo Card */
.financing-promo-section {
    background-color: #ffffff !important;
    padding: 30px 0 50px 0 !important;
}
.financing-promo-card {
    background: var(--pale, #f1f6f9) !important;
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 8px 25px rgba(9, 47, 73, 0.05) !important;
}
.financing-promo-title {
    color: var(--ink, #153448) !important;
}
.financing-promo-text {
    color: var(--muted, #526675) !important;
}

/* Coverage Map Section (Dark Navy #092f49 in Screenshot 2!) */
.coverage-section {
    background: var(--navy, #092f49) !important;
    background-color: var(--navy, #092f49) !important;
    color: #ffffff !important;
    padding: 80px 0 !important;
    border-top: none !important;
    border-bottom: none !important;
}
.coverage-section h1,
.coverage-section h2,
.coverage-section h3,
.coverage-section h4,
.coverage-section .text-light {
    color: #ffffff !important;
}
.coverage-section .text-accent {
    color: #8cd5ff !important;
}
.coverage-section p,
.coverage-section .coverage-lead {
    color: #ffffff !important;
}
.coverage-section .coverage-desc {
    color: #d8e6ee !important;
}
.coverage-section .tag-badge {
    background: rgba(140, 213, 255, 0.15) !important;
    border: 1px solid rgba(140, 213, 255, 0.3) !important;
    color: #8cd5ff !important;
}
.coverage-section .tag-circle {
    background: #8cd5ff !important;
}
.coverage-section .tag-text {
    color: #8cd5ff !important;
}
.coverage-section .chip-primary {
    background: var(--blue, #0877b5) !important;
    color: #ffffff !important;
    border: 1px solid var(--blue, #0877b5) !important;
}
.coverage-section .chip-regular {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.coverage-section .coverage-ask-link {
    color: #8cd5ff !important;
}
.coverage-section .coverage-photo-box {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

/* Founder Section (Full) */
.founder-section {
    background-color: #ffffff !important;
}
.founder-label-pill {
    background: #eaf3f8 !important;
    border: 1px solid #d2e4ef !important;
    color: var(--blue, #0877b5) !important;
}
.founder-title {
    color: var(--ink, #153448) !important;
}
.founder-quote p {
    color: var(--muted, #526675) !important;
}
.founder-signature .founder-name {
    color: var(--ink, #153448) !important;
}
.founder-signature .founder-role {
    color: var(--blue, #0877b5) !important;
}

/* FAQ Section */
.faq {
    background-color: #ffffff !important;
}
.faq-item {
    background: var(--pale, #f1f6f9) !important;
    border: 1px solid var(--line, #dce5eb) !important;
}
.faq-question {
    color: var(--ink, #153448) !important;
}
.faq-answer {
    color: var(--muted, #526675) !important;
}
.faq-toggle svg {
    fill: var(--blue, #0877b5) !important;
}

/* Blog / Guides Section */
.blog-section {
    background-color: #ffffff !important;
}
.methodology-card {
    background: var(--pale, #f1f6f9) !important;
    border: 1px solid var(--line, #dce5eb) !important;
}
.methodology-card h4 {
    color: var(--ink, #153448) !important;
}
.methodology-card p {
    color: var(--muted, #526675) !important;
}

/* Testimonials / Reviews */
.testimonials {
    background-color: var(--pale, #f1f6f9) !important;
}
.testimonial-card {
    background: #ffffff !important;
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 6px 20px rgba(9, 47, 73, 0.05) !important;
}
.testimonial-text {
    color: var(--ink, #153448) !important;
}
.author-name {
    color: var(--ink, #153448) !important;
}
.author-role {
    color: var(--blue, #0877b5) !important;
}
.quote-mark {
    color: #eaf3f8 !important;
}

/* Contact Section */
.contact {
    background-color: #ffffff !important;
}
.contact-card {
    background: var(--pale, #f1f6f9) !important;
    border: 1px solid var(--line, #dce5eb) !important;
    box-shadow: 0 10px 35px rgba(9, 47, 73, 0.06) !important;
}
.contact-pill {
    background: #eaf3f8 !important;
    border: 1px solid #d2e4ef !important;
}
.contact-pill .pill-dot {
    background: var(--blue, #0877b5) !important;
}
.contact-pill .pill-text {
    color: var(--blue, #0877b5) !important;
}
.contact-heading {
    color: var(--ink, #153448) !important;
}
.contact-heading .text-muted {
    color: var(--muted, #526675) !important;
}
.info-label {
    color: var(--muted, #526675) !important;
}
.info-text,
.info-text .tel-link {
    color: var(--ink, #153448) !important;
    font-weight: 700 !important;
}
.info-link {
    color: var(--blue, #0877b5) !important;
}
.form-card {
    background: #ffffff !important;
    border: 1px solid var(--line, #dce5eb) !important;
    border-radius: 14px !important;
    padding: 32px !important;
    box-shadow: 0 6px 20px rgba(9, 47, 73, 0.04) !important;
}
.form-label {
    color: var(--ink, #153448) !important;
    font-weight: 600 !important;
}
.form-input {
    background: #ffffff !important;
    border: 1px solid var(--line, #dce5eb) !important;
    color: var(--ink, #153448) !important;
}
.form-input:focus {
    border-color: var(--blue, #0877b5) !important;
    box-shadow: 0 0 0 3px rgba(8, 119, 181, 0.15) !important;
    outline: none !important;
}
.form-input::placeholder {
    color: #9cb0be !important;
}

/* Global Footer - updated below */


/* ==========================================================================
   ROBINSONS PRECISION STYLES (HERO, VIDEO, SERVICES, FAQ, TESTIMONIALS, FOOTER)
   ========================================================================== */

/* 1. EXACT HERO MATCHING ROBINSONS LIVE WEBSITE */
.hero {
    position: relative !important;
    background-color: #092f49 !important;
    min-height: 570px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 105px !important;
    padding-bottom: 60px !important;
    overflow: hidden !important;
}

.hero-bg-wrapper {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

.hero-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right center !important;
}

/* Scraped live overlay: Deep navy on left, fades smoothly to reveal heat pump & trees */
.hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(90deg, 
        rgba(4, 28, 45, 0.94) 0%, 
        rgba(4, 28, 45, 0.82) 38%, 
        rgba(4, 28, 45, 0.30) 75%, 
        rgba(4, 28, 45, 0.10) 100%) !important;
}

.hero-container {
    max-width: var(--max-width, 1200px) !important;
    margin: 0 auto !important;
    padding: 0 40px !important; /* Parallel alignment with navbar pill left edge */
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.hero-content {
    max-width: 640px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

/* Eyebrow: light blue text without pill capsule */
.hero-eyebrow {
    color: #9cdaff !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    display: block !important;
}

.hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 18px !important;
    background: rgba(140, 213, 255, 0.14) !important;
    border: 1px solid rgba(140, 213, 255, 0.35) !important;
    border-radius: 999px !important;
    color: #9cdaff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 18px !important;
    text-transform: uppercase !important;
}

.hero-badge .dot {
    color: #8cd5ff !important;
}

/* Heading: Line 1 white, Line 2 light blue */
.hero-title {
    font-size: clamp(2.6rem, 4.4vw, 3.8rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    margin: 0 0 18px 0 !important;
}

.hero-title span {
    color: #8cd5ff !important;
    display: inline-block !important;
}

/* Subheading */
.hero-subtitle {
    font-size: 17.5px !important;
    line-height: 1.6 !important;
    color: #e8f1f6 !important;
    max-width: 540px !important;
    margin: 0 0 28px 0 !important;
    font-weight: 400 !important;
}

/* Actions: Rectangular buttons with slightly rounded corners (4px - 6px) */
.hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 0 0 28px 0 !important;
}

/* Request Service Button */
.hero-actions .hero-btn-req,
.hero-actions .btn-primary {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 13px 26px !important;
    border-radius: 4px !important; /* Blocked edges with slight curve matching navbar */
    background-color: var(--blue, #0877b5) !important;
    border: 1px solid var(--blue, #0877b5) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.hero-actions .hero-btn-req:hover,
.hero-actions .btn-primary:hover {
    background-color: var(--blue-dark, #075c8c) !important;
    border-color: var(--blue-dark, #075c8c) !important;
    box-shadow: 0 4px 12px rgba(9, 47, 73, 0.2) !important;
    transform: none !important;
}

/* Call Now Button */
.hero-actions .hero-call-btn {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 13px 24px !important;
    border-radius: 4px !important; /* Blocked edges with slight curve matching navbar */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    backdrop-filter: none !important;
    transition: background 0.2s, border-color 0.2s !important;
}

.hero-actions .hero-call-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: none !important;
}

/* Bottom Tagline */
.hero-bottom-tagline {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #d4e5ef !important;
    margin: 0 !important;
}

.hero-bottom-dash {
    width: 28px !important;
    height: 2px !important;
    background: #e94248 !important;
    display: inline-block !important;
}

.hero-meta-link {
    color: #d4e5ef !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.hero-meta-link:hover {
    color: #ffffff !important;
}


/* 2. VIDEO & MEET ROBINSONS SECTION - Pop out with light blue container & ink text */
.about-video-section {
    background-color: #ffffff !important;
    padding: 60px 0 !important;
}

.video-about-card {
    background: linear-gradient(135deg, #f0f7fc 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 20px !important;
    padding: 48px !important;
    box-shadow: 0 10px 32px rgba(8, 119, 181, 0.08) !important;
}

.video-portrait-wrapper {
    background: #e6f0f7 !important;
    border: 1.5px solid #bdd7ea !important;
    box-shadow: 0 12px 32px rgba(9, 47, 73, 0.14) !important;
}

.video-about-card .section-title .text-light {
    color: var(--ink, #153448) !important;
    font-weight: 800 !important;
}

.video-about-card .section-title .text-accent {
    color: var(--blue, #0877b5) !important;
    font-weight: 800 !important;
}

.video-about-card .about-card-desc p {
    color: var(--muted, #526675) !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}

.founder-integrated-card {
    background: #ffffff !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.07) !important;
    padding: 20px !important;
}

.founder-integrated-card img {
    border: 2.5px solid var(--blue, #0877b5) !important;
}

.founder-integrated-card span {
    color: var(--blue, #0877b5) !important;
    font-weight: 700 !important;
}

.founder-integrated-card div {
    color: var(--ink, #153448) !important;
}


/* 3. SERVICES SECTION - Light blue background tint & visible seam */
.services {
    background-color: #ffffff !important;
    padding: 70px 0 !important;
}

.services-list .text-light {
    color: var(--ink, #153448) !important;
    font-weight: 800 !important;
}

.services-list .text-accent {
    color: var(--blue, #0877b5) !important;
    font-weight: 800 !important;
}

.service-card {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.07) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-bottom: 20px !important;
}

.service-card:hover {
    border-color: var(--blue, #0877b5) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 34px rgba(8, 119, 181, 0.16) !important;
}

.service-card .service-name {
    color: var(--ink, #153448) !important;
    font-size: 21px !important;
    font-weight: 700 !important;
}

.service-card:hover .service-name {
    color: var(--blue, #0877b5) !important;
}

.service-card .service-desc {
    color: var(--muted, #526675) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.service-card .service-learn-more {
    color: var(--blue, #0877b5) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
}

.service-card-image-box {
    border: 1.5px solid #bdd7ea !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(8, 119, 181, 0.1) !important;
}


/* 4. FAQ SECTION - Blue numbered badges (01, 02, 03, 04) & clean cards */
.faq {
    background-color: #ffffff !important;
}

.faq-icon {
    width: 36px !important;
    height: 36px !important;
    background-color: var(--blue, #0877b5) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(8, 119, 181, 0.3) !important;
}

.faq-item {
    background: #ffffff !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(8, 119, 181, 0.05) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.faq-item.active {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border-color: var(--blue, #0877b5) !important;
    box-shadow: 0 8px 24px rgba(8, 119, 181, 0.12) !important;
}

.faq-question {
    color: var(--ink, #153448) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}

.faq-answer p {
    color: var(--muted, #526675) !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
}


/* 5. TESTIMONIALS SECTION - Dark Ink heading & Blue Slider Buttons */
.testimonials {
    background-color: #ffffff !important;
    padding: 70px 0 !important;
}

.testimonials-heading .text-white,
.testimonials-heading h3,
.testimonials-heading span.fw-bold {
    color: var(--ink, #153448) !important;
    font-weight: 800 !important;
}

.testimonials-heading .text-muted {
    color: var(--muted, #526675) !important;
    font-weight: 400 !important;
}

.slider-arrow-btn {
    background-color: var(--blue, #0877b5) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.35) !important;
}

.slider-arrow-btn:hover {
    background-color: var(--blue-dark, #075c8c) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.slider-arrow-btn.is-flipped:hover {
    transform: translateY(-50%) rotate(180deg) scale(1.05) !important;
}

.slider-arrow-btn svg {
    fill: #ffffff !important;
}

.testimonial-card {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.07) !important;
}

.testimonial-text {
    color: var(--ink, #153448) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

.testimonial-author-name {
    color: var(--ink, #153448) !important;
    font-weight: 700 !important;
}

.testimonial-author-location {
    color: var(--muted, #526675) !important;
}

.testimonial-stars svg,
.testimonial-stars path {
    fill: var(--blue, #0877b5) !important;
}



/* ==========================================================================
   ORIGINAL TAINA VALE FOOTER LAYOUT (PEACH #e6a268 SWAPPED TO DARK BLUE #092f49)
   ========================================================================== */

.footer-warm {
    position: relative !important;
    z-index: 2000 !important;
    background-color: #092f49 !important; /* Solid lower color - swapped from #e6a268 */
    border: none !important;
    border-top: none !important;
    overflow: visible !important;
}

.footer-hero {
    position: relative !important;
    z-index: 999 !important;
    height: 300px !important;
    width: 100% !important;
    overflow: visible !important;
    border: none !important;
    /* Ultra-smooth 21-stop C2-continuous fade from #ffffff (0%) to #092f49 (100%) */
    background: linear-gradient(
        180deg,
        rgba(9, 47, 73, 0) 0%,
        rgba(9, 47, 73, 0.004) 5%,
        rgba(9, 47, 73, 0.012) 10%,
        rgba(9, 47, 73, 0.025) 15%,
        rgba(9, 47, 73, 0.045) 20%,
        rgba(9, 47, 73, 0.072) 25%,
        rgba(9, 47, 73, 0.106) 30%,
        rgba(9, 47, 73, 0.148) 35%,
        rgba(9, 47, 73, 0.198) 40%,
        rgba(9, 47, 73, 0.256) 45%,
        rgba(9, 47, 73, 0.322) 50%,
        rgba(9, 47, 73, 0.396) 55%,
        rgba(9, 47, 73, 0.476) 60%,
        rgba(9, 47, 73, 0.562) 65%,
        rgba(9, 47, 73, 0.652) 70%,
        rgba(9, 47, 73, 0.742) 75%,
        rgba(9, 47, 73, 0.828) 80%,
        rgba(9, 47, 73, 0.902) 85%,
        rgba(9, 47, 73, 0.958) 90%,
        rgba(9, 47, 73, 0.99) 95%,
        #092f49 100%
    ), #ffffff !important;
}

.footer-watermark {
    position: absolute !important;
    top: 75% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 170px !important;
    letter-spacing: -0.02em !important;
    font-weight: 900 !important;
    color: #092f49 !important; /* Swapped from #e6a268 to dark blue #092f49 */
    opacity: 0.9 !important;
    z-index: 1 !important;
    white-space: nowrap !important;
    user-select: none !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

.footer-badge {
    position: absolute !important;
    top: 60% !important;
    z-index: 2 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 10px 25px rgba(9, 47, 73, 0.15) !important;
}

.badge-left {
    left: 12% !important;
    top: 32% !important;
}

.badge-right {
    right: 12% !important;
    top: 32% !important;
}

.footer-badge span {
    color: #153448 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

.footer-badge .badge-icon {
    width: 26px !important;
    height: 26px !important;
    background-color: #0877b5 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-badge .badge-icon svg {
    fill: #ffffff !important;
    width: 13px !important;
    height: 13px !important;
}

/* Lower footer links container - NO border seam */
.footer-nav-container {
    background-color: #092f49 !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    margin-top: -1px !important;
    padding: 50px 24px 40px 24px !important;
}

.footer-col .col-heading {
    color: #8cd5ff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin-bottom: 18px !important;
}

.footer-col .col-links a {
    color: #d8e6ee !important;
    font-size: 14.5px !important;
    transition: color 0.2s ease !important;
}

.footer-col .col-links a:hover {
    color: #ffffff !important;
}

.footer-socials .social-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
}

.footer-socials .social-btn svg path {
    fill: #8cd5ff !important;
}

.framer-badge {
    background: #062235 !important;
    color: rgba(216, 230, 238, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 16px !important;
    text-align: center !important;
    font-size: 13px !important;
}

@media (max-width: 991px) {
    .footer-hero {
        height: 180px !important;
        background: linear-gradient(
        180deg,
        rgba(9, 47, 73, 0) 0%,
        rgba(9, 47, 73, 0.004) 5%,
        rgba(9, 47, 73, 0.012) 10%,
        rgba(9, 47, 73, 0.025) 15%,
        rgba(9, 47, 73, 0.045) 20%,
        rgba(9, 47, 73, 0.072) 25%,
        rgba(9, 47, 73, 0.106) 30%,
        rgba(9, 47, 73, 0.148) 35%,
        rgba(9, 47, 73, 0.198) 40%,
        rgba(9, 47, 73, 0.256) 45%,
        rgba(9, 47, 73, 0.322) 50%,
        rgba(9, 47, 73, 0.396) 55%,
        rgba(9, 47, 73, 0.476) 60%,
        rgba(9, 47, 73, 0.562) 65%,
        rgba(9, 47, 73, 0.652) 70%,
        rgba(9, 47, 73, 0.742) 75%,
        rgba(9, 47, 73, 0.828) 80%,
        rgba(9, 47, 73, 0.902) 85%,
        rgba(9, 47, 73, 0.958) 90%,
        rgba(9, 47, 73, 0.99) 95%,
        #092f49 100%
    ), #ffffff !important;
    }
    .footer-watermark {
        color: #092f49 !important;
        font-size: 90px !important;
        opacity: 0.9 !important;
    }
    .footer-nav-container {
        border-top: none !important;
        margin-top: -1px !important;
    }
}

@media (max-width: 767px) {
    .footer-hero {
        height: 180px !important;
        background: linear-gradient(
        180deg,
        rgba(9, 47, 73, 0) 0%,
        rgba(9, 47, 73, 0.004) 5%,
        rgba(9, 47, 73, 0.012) 10%,
        rgba(9, 47, 73, 0.025) 15%,
        rgba(9, 47, 73, 0.045) 20%,
        rgba(9, 47, 73, 0.072) 25%,
        rgba(9, 47, 73, 0.106) 30%,
        rgba(9, 47, 73, 0.148) 35%,
        rgba(9, 47, 73, 0.198) 40%,
        rgba(9, 47, 73, 0.256) 45%,
        rgba(9, 47, 73, 0.322) 50%,
        rgba(9, 47, 73, 0.396) 55%,
        rgba(9, 47, 73, 0.476) 60%,
        rgba(9, 47, 73, 0.562) 65%,
        rgba(9, 47, 73, 0.652) 70%,
        rgba(9, 47, 73, 0.742) 75%,
        rgba(9, 47, 73, 0.828) 80%,
        rgba(9, 47, 73, 0.902) 85%,
        rgba(9, 47, 73, 0.958) 90%,
        rgba(9, 47, 73, 0.99) 95%,
        #092f49 100%
    ), #ffffff !important;
    }
    .footer-watermark {
        color: #092f49 !important;
        font-size: 85px !important;
        opacity: 0.9 !important;
    }
    .footer-nav-container {
        border-top: none !important;
        margin-top: -1px !important;
    }
}


/* ==========================================================================
   SUBPAGES PRECISION STYLING (FINANCING, SERVICES, BLOG, SERVICE DETAILS, CONTACT)
   ========================================================================== */

/* 1. Subpage Hero (.subpage-hero on Financing, Service Details, Contact, Privacy) */
.subpage-hero {
    background: linear-gradient(135deg, #062235 0%, #092f49 55%, #0b3c5d 100%) !important;
    background-color: #092f49 !important;
    padding: 140px 0 70px 0 !important;
    border-bottom: 1.5px solid #bdd7ea !important;
    text-align: center !important;
    position: relative !important;
}

.subpage-hero-container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}

.subpage-hero-pill {
    background: rgba(140, 213, 255, 0.14) !important;
    border: 1px solid rgba(140, 213, 255, 0.35) !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 4px !important;
}

.subpage-hero-pill span {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #9cdaff !important;
}

.subpage-hero-title,
.subpage-hero h1 {
    font-family: var(--font-heading) !important;
    font-size: clamp(2.4rem, 4.6vw, 3.6rem) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.12 !important;
    margin: 0 0 8px 0 !important;
}

.subpage-hero-breadcrumbs {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #9cdaff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.subpage-hero-breadcrumbs span {
    color: #9cdaff !important;
}

.subpage-hero-breadcrumbs a {
    color: #d8e6ee !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.subpage-hero-breadcrumbs a:hover {
    color: #ffffff !important;
}

.subpage-hero-separator {
    color: rgba(216, 230, 238, 0.45) !important;
}


/* 2. Subpage Hero Banner (.subpage-hero-banner on Services, Blog, and Blog Articles) */
header.subpage-hero-banner,
.section.hero.subpage-hero-banner {
    background: linear-gradient(135deg, #062235 0%, #092f49 55%, #0b3c5d 100%) !important;
    background-color: #092f49 !important;
    min-height: 440px !important;
    padding: 130px 0 65px 0 !important;
    border-bottom: 1.5px solid #bdd7ea !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.subpage-hero-banner > .container {
    position: relative !important;
    z-index: 3 !important;
}

.subpage-hero-banner .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 34, 53, 0.84) 0%, rgba(9, 47, 73, 0.93) 100%) !important;
}

/* Preserve centered alignment on About Us hero */
.hero-container[style*="text-align: center"] {
    align-items: center !important;
    text-align: center !important;
}
.hero-container[style*="text-align: center"] .hero-content {
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.subpage-hero-banner h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.subpage-hero-banner h1 span {
    color: #8cd5ff !important;
}

.subpage-hero-banner p {
    color: #d8e6ee !important;
}

.subpage-hero-banner .tag-badge {
    background: rgba(140, 213, 255, 0.14) !important;
    border: 1px solid rgba(140, 213, 255, 0.35) !important;
}

.subpage-hero-banner .tag-text {
    color: #9cdaff !important;
}

.subpage-hero-banner .tag-circle {
    background: #9cdaff !important;
}

.subpage-hero-banner .btn-primary {
    border-radius: 4px !important;
    padding: 13px 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.subpage-hero-banner .hero-call-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 13px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.subpage-hero-banner .hero-call-btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}


/* 3. Financing & Service Detail Subpage Content (.subpage-content, .value-card, .methodology-card) */
.subpage-content {
    background-color: #ffffff !important;
    padding: 75px 0 !important;
    border-bottom: 1px solid #dce5eb !important;
}

.subpage-text-col h2,
.subpage-text-col .section-title {
    color: #153448 !important;
    font-weight: 800 !important;
    font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
    line-height: 1.2 !important;
}

.subpage-text-col p {
    color: #526675 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.subpage-img-col img {
    border: 1.5px solid #bdd7ea !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(8, 119, 181, 0.12) !important;
}

/* Fix Secondary & Outline Buttons on Light Backgrounds (Financing, Services, CTA) */
.subpage-content .btn-secondary,
.subpage-content .btn-outline,
.section .btn-secondary,
.cta .btn-secondary {
    background: #f0f7fd !important;
    border: 1.5px solid #0877b5 !important;
    color: #0877b5 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 13px 26px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(8, 119, 181, 0.08) !important;
    transition: all 0.2s ease !important;
}

.subpage-content .btn-secondary:hover,
.subpage-content .btn-outline:hover,
.section .btn-secondary:hover,
.cta .btn-secondary:hover {
    background: #0877b5 !important;
    border-color: #0877b5 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(8, 119, 181, 0.25) !important;
}

.subpage-content .btn-primary,
.cta .btn-primary {
    border-radius: 6px !important;
    padding: 13px 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Value Cards (Financing "Flexible Payment Solutions" & Service "What Can We Help With?") */
.values-grid {
    gap: 24px !important;
}

.value-card {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.07) !important;
    transition: all 0.25s ease !important;
}

.value-card:hover {
    border-color: #0877b5 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(8, 119, 181, 0.14) !important;
}

.value-card .value-icon {
    width: 40px !important;
    height: 40px !important;
    background: #0877b5 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 12px rgba(8, 119, 181, 0.25) !important;
}

.value-card .value-title,
.value-card h4 {
    color: #153448 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.value-card .value-desc,
.value-card p {
    color: #526675 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Methodology / Process Cards ("Getting Started with Financing" / "How We Work") */
.methodology {
    background-color: #ffffff !important;
}

.methodology-title {
    color: #153448 !important;
    font-weight: 800 !important;
    font-size: clamp(1.9rem, 3.2vw, 2.5rem) !important;
}

.methodology-card {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-top: 3.5px solid #0877b5 !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 6px 20px rgba(8, 119, 181, 0.07) !important;
    transition: all 0.25s ease !important;
}

.methodology-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 28px rgba(8, 119, 181, 0.14) !important;
}

.methodology-card .step-num {
    color: #0877b5 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    font-family: var(--font-heading) !important;
}

.methodology-card .step-title,
.methodology-card h4 {
    color: #153448 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 12px 0 10px 0 !important;
}

.methodology-card .step-desc,
.methodology-card p {
    color: #526675 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Subpage CTA Section (.section.cta) */
.section.cta {
    background: linear-gradient(135deg, #eaf4fc 0%, #f4f9fd 100%) !important;
    border-top: 1.5px solid #bdd7ea !important;
    border-bottom: 1.5px solid #bdd7ea !important;
    padding: 80px 0 !important;
}

.section.cta .cta-title,
.section.cta h2 {
    color: #153448 !important;
    font-weight: 800 !important;
}

.section.cta .cta-desc,
.section.cta p {
    color: #526675 !important;
}


/* 4. Services Page (.service-detail-card on services.html) */
.service-detail-card {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 18px !important;
    padding: 40px !important;
    box-shadow: 0 8px 26px rgba(8, 119, 181, 0.08) !important;
    transition: all 0.25s ease !important;
}

.service-detail-card:hover {
    border-color: #0877b5 !important;
    box-shadow: 0 14px 36px rgba(8, 119, 181, 0.14) !important;
}

.service-detail-card h3 {
    color: #153448 !important;
    font-weight: 800 !important;
}

.service-detail-card p {
    color: #526675 !important;
}

.service-detail-card ul li {
    color: #153448 !important;
    font-weight: 500 !important;
}

.service-detail-card .btn-primary {
    border-radius: 6px !important;
    font-weight: 700 !important;
}

.service-detail-card .hero-call-btn {
    background: #ffffff !important;
    border: 1.5px solid #0877b5 !important;
    color: #0877b5 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

.service-detail-card .hero-call-btn:hover {
    background: #0877b5 !important;
    color: #ffffff !important;
}


/* 5. Blog Index & Blog Article Pages */
main section article:not(.zing-blog-article) {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 6px 22px rgba(8, 119, 181, 0.07) !important;
    transition: all 0.25s ease !important;
}

main section article:not(.zing-blog-article):hover {
    border-color: #0877b5 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(8, 119, 181, 0.15) !important;
}

.zing-blog-article .faq-item {
    background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
    border: 1.5px solid #bdd7ea !important;
    border-radius: 14px !important;
    padding: 22px 26px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 14px rgba(8, 119, 181, 0.06) !important;
}

.zing-blog-article .faq-item strong {
    display: block !important;
    color: #153448 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

.zing-blog-article .faq-item p {
    color: #526675 !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}


/* ==========================================================================
   MOBILE & TABLET PRECISION OVERHAUL (STRICTLY <= 991px, DESKTOP UNTOUCHED)
   ========================================================================== */

@media (max-width: 991px) {
    /* 1. Compact Section Spacing (Prevent excessive vertical elongation) */
    .section,
    .subpage-content,
    .about-video-section,
    .services,
    .faq,
    .testimonials,
    .contact,
    .methodology {
        padding: 40px 0 !important;
        background-color: #ffffff !important;
    }

    .container {
        padding: 0 16px !important;
    }

    /* 2. Mobile Navbar & Dropdown Menu */
    .navbar {
        height: auto !important;
        padding: 10px 12px !important;
    }

    .nav-container {
        padding: 0 !important;
    }

    .nav-inner {
        height: 54px !important;
        padding: 0 14px !important;
        background-color: rgba(255, 255, 255, 0.97) !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(9, 47, 73, 0.1) !important;
    }

    .nav-logo-img {
        height: 28px !important;
        width: auto !important;
    }

    .nav-logo-text {
        font-size: 13.5px !important;
        color: #153448 !important;
        font-weight: 800 !important;
    }

    .mobile-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 8px !important;
        background-color: #f0f7fd !important;
        border: 1.5px solid #bdd7ea !important;
        color: #153448 !important;
    }

    .nav-links.active {
        top: 62px !important;
        left: 0 !important;
        right: 0 !important;
        background-color: #ffffff !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 14px !important;
        padding: 16px 18px !important;
        gap: 6px !important;
        box-shadow: 0 14px 36px rgba(9, 47, 73, 0.18) !important;
    }

    .nav-links.active .nav-link {
        color: #153448 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 10px 4px !important;
        border-bottom: 1px solid #e6f0f7 !important;
    }

    .nav-links.active .nav-link.active,
    .nav-links.active .nav-link:hover {
        color: #0877b5 !important;
    }

    .nav-links.active .nav-request-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 6px !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
        border-radius: 6px !important;
        background: #0877b5 !important;
        color: #ffffff !important;
    }

    /* 3. Mobile Hero Section (Taller height & generous spacing between elements) */
    .hero {
        min-height: 550px !important;
        padding: 120px 0 60px 0 !important;
        background-color: #092f49 !important;
        justify-content: center !important;
    }

    .hero-overlay {
        background: linear-gradient(90deg,
            rgba(4, 28, 45, 0.95) 0%,
            rgba(4, 28, 45, 0.86) 55%,
            rgba(4, 28, 45, 0.55) 100%) !important;
    }

    .hero-container {
        padding: 0 20px !important;
        justify-content: center !important;
        flex-grow: 0 !important;
    }

    .hero-content {
        margin-bottom: 0 !important;
        max-width: 100% !important;
    }

    .hero-eyebrow {
        font-size: 12px !important;
        letter-spacing: 0.08em !important;
        margin: 0 0 18px 0 !important;
        color: #9cdaff !important;
    }

    .hero-badge {
        font-size: 11.5px !important;
        padding: 7px 16px !important;
        margin-bottom: 18px !important;
        background: rgba(140, 213, 255, 0.14) !important;
        border: 1px solid rgba(140, 213, 255, 0.35) !important;
        color: #9cdaff !important;
    }

    .hero-title {
        font-family: var(--font-heading) !important;
        font-size: clamp(2.35rem, 8.5vw, 3rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.025em !important;
        margin: 0 0 20px 0 !important;
        color: #ffffff !important;
    }

    .hero-title span {
        color: #8cd5ff !important;
    }

    .hero-subtitle {
        font-size: 15.5px !important;
        line-height: 1.6 !important;
        color: #e8f1f6 !important;
        margin: 0 0 28px 0 !important;
    }

    .hero-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin: 0 0 28px 0 !important;
    }

    .hero-actions .hero-btn-req,
    .hero-actions .btn-primary {
        padding: 13px 22px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 4px !important;
        background-color: #0877b5 !important;
        border: 1px solid #0877b5 !important;
        color: #ffffff !important;
        min-width: 0 !important;
        box-shadow: none !important;
    }

    .hero-actions .hero-call-btn {
        padding: 13px 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 4px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        color: #ffffff !important;
    }

    .hero-bottom-tagline {
        font-size: 13px !important;
        gap: 10px !important;
        color: #d4e5ef !important;
        margin-top: 2px !important;
    }

    .hero-bottom-dash {
        width: 24px !important;
        background: #e94248 !important;
    }

    /* 4. Quick Services Strip: STRICTLY Single Horizontal Row of 4 Items on Mobile! */
    .quick-services-strip {
        background: #0877b5 !important;
        padding: 0 !important;
    }

    .quick-services-strip .container {
        padding: 0 4px !important;
        max-width: 100% !important;
    }

    .quick-services-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
    }

    .quick-service-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 5px !important;
        padding: 10px 4px !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
    }

    .quick-service-box:nth-child(2) {
        border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
    }

    .quick-service-box:last-child {
        border-right: none !important;
    }

    .quick-service-icon {
        width: 18px !important;
        height: 18px !important;
        color: #ffffff !important;
    }

    .quick-service-label {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-align: center !important;
        letter-spacing: -0.2px !important;
    }

    /* 5. Video & Meet Robinsons Section (9:16 video, hide Meet Our Founder on mobile) */
    .video-about-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
        padding: 28px 20px !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, #f0f7fc 0%, #f7fbfe 100%) !important;
        border: 1.5px solid #bdd7ea !important;
    }

    .video-portrait-wrapper {
        width: 265px !important;
        max-width: 85% !important;
        aspect-ratio: 9 / 16 !important;
        margin: 8px auto 12px auto !important;
    }

    .video-about-card .about-card-desc {
        order: 4 !important;
    }

    .video-about-card .btn {
        order: 5 !important;
        margin: 8px auto 0 auto !important;
    }

    .founder-integrated-card,
    #home ~ .founder-section {
        display: none !important;
    }

    /* Hide Homeowner Guides on Mobile Homepage (#guides), moved to About Us */
    #guides {
        display: none !important;
    }

    /* 6. Services Section on Home (Fix tag-badge pill color & compact light-blue cards) */
    .services .tag-badge,
    .tag-badge {
        background: #eaf3f8 !important;
        background-color: #eaf3f8 !important;
        border: 1px solid #bdd7ea !important;
        color: #0877b5 !important;
    }

    .services .tag-text,
    .tag-text {
        color: #0877b5 !important;
    }

    .services .tag-circle,
    .tag-circle {
        background: #0877b5 !important;
    }

    .services .container {
        padding: 0 16px !important;
    }

    .services-list {
        gap: 24px !important;
    }

    .service-category {
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
    }

    .category-items {
        border-top: none !important;
        gap: 12px !important;
    }

    .service-card {
        background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 14px !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        box-shadow: 0 4px 14px rgba(8, 119, 181, 0.06) !important;
    }

    .service-card-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .service-card .service-name {
        color: #153448 !important;
        font-size: 16.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    .service-card .service-desc {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #526675 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 5px 0 8px 0 !important;
    }

    .service-card .service-learn-more {
        font-size: 12.5px !important;
        color: #0877b5 !important;
        font-weight: 700 !important;
    }

    .service-card-image-box {
        width: 92px !important;
        height: 82px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        flex-shrink: 0 !important;
    }

    /* 7. Financing Promo Card & Coverage Section on Mobile */
    .financing-promo-section {
        padding: 10px 0 30px 0 !important;
    }

    .financing-promo-card {
        padding: 22px 18px !important;
        gap: 16px !important;
        border-radius: 14px !important;
    }

    .financing-promo-title {
        font-size: 21px !important;
    }

    .coverage-section {
        padding: 44px 0 !important;
        background-color: #092f49 !important;
    }

    .coverage-grid-split {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .coverage-photo-box {
        aspect-ratio: 16 / 9 !important;
    }

    /* 8. Founder Section on Home & About Us (Compact image, not overly tall) */
    .founder-section {
        padding: 40px 0 !important;
        background-color: #f1f6f9 !important;
    }

    .founder-image-wrapper {
        max-width: 200px !important;
        margin: 0 auto 16px auto !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .founder-title {
        font-size: 22px !important;
        color: #153448 !important;
    }

    .founder-quote p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }

    /* 9. FAQ Section on Mobile (Fix old black/white overrides) */
    .faq {
        background-color: #ffffff !important;
        padding: 40px 0 !important;
    }

    .faq-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 !important;
    }

    .faq-badge {
        background: #eaf3f8 !important;
        border: 1px solid #d2e4ef !important;
    }

    .faq-badge .tag-text {
        color: #0877b5 !important;
    }

    .faq-main-title {
        color: #153448 !important;
        font-size: 24px !important;
    }

    .faq-item {
        background: #ffffff !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 12px !important;
    }

    .faq-item.active {
        background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
        border-color: #0877b5 !important;
    }

    .faq-question {
        padding: 14px 16px !important;
        color: #153448 !important;
    }

    .faq-title {
        color: #153448 !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
    }

    .faq-icon,
    .faq-item.active .faq-icon {
        width: 28px !important;
        height: 28px !important;
        background-color: #0877b5 !important;
        border-color: #0877b5 !important;
        color: #ffffff !important;
        font-size: 12px !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 16px 14px 56px !important;
    }

    .faq-answer p {
        color: #526675 !important;
        font-size: 13.5px !important;
    }

    /* 10. Testimonials Section on Mobile (Fix old black card & white heading overrides) */
    .testimonials {
        background-color: #ffffff !important;
        padding: 40px 0 !important;
    }

    .testimonials-pill {
        background: #eaf3f8 !important;
        border: 1px solid #d2e4ef !important;
    }

    .testimonials-pill .pill-text {
        color: #0877b5 !important;
    }

    .testimonials-heading,
    .testimonials-heading .text-white,
    .testimonials-heading span.fw-bold {
        color: #153448 !important;
        font-size: 23px !important;
    }

    .testimonial-card {
        width: 280px !important;
        min-height: 240px !important;
        padding: 20px !important;
        background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 14px !important;
    }

    .testimonial-text {
        color: #153448 !important;
        font-size: 13.5px !important;
    }

    .slider-arrow-btn {
        background-color: #0877b5 !important;
        width: 36px !important;
        height: 36px !important;
    }

    .testimonials-pagination .dot {
        background-color: #bdd7ea !important;
    }

    .testimonials-pagination .dot.active {
        background-color: #0877b5 !important;
    }

    /* 11. Contact Section on Mobile (Fix old black form overrides) */
    .contact {
        background-color: #ffffff !important;
        padding: 40px 0 !important;
    }

    .contact-card {
        background: linear-gradient(135deg, #f0f7fd 0%, #f7fbfe 100%) !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 16px !important;
        padding: 22px 16px !important;
        width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        gap: 20px !important;
    }

    .contact-pill {
        background: #eaf3f8 !important;
        border: 1px solid #d2e4ef !important;
    }

    .contact-pill .pill-text {
        color: #0877b5 !important;
    }

    .contact-heading {
        color: #153448 !important;
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .form-card {
        background-color: #ffffff !important;
        border: 1.5px solid #bdd7ea !important;
        border-radius: 14px !important;
        padding: 18px !important;
    }

    .form-group {
        margin-bottom: 12px !important;
    }

    .form-label {
        color: #153448 !important;
        font-weight: 600 !important;
        font-size: 12.5px !important;
    }

    .form-input {
        background-color: #f8fbfe !important;
        border: 1px solid #bdd7ea !important;
        color: #153448 !important;
        height: 42px !important;
    }

    textarea.form-input {
        height: auto !important;
        padding: 10px 14px !important;
    }

    .info-icon {
        background-color: #eaf3f8 !important;
    }

    .info-label {
        color: #0877b5 !important;
    }

    .info-text {
        color: #153448 !important;
        font-weight: 600 !important;
    }

    .info-link {
        color: #0877b5 !important;
    }

    /* 12. Subpages (Financing, Services, Blog, Service Details) Mobile Grids */
    .subpage-hero,
    header.subpage-hero-banner,
    .section.hero.subpage-hero-banner {
        padding: 96px 0 38px 0 !important;
        min-height: auto !important;
    }

    .subpage-hero-title,
    .subpage-hero h1,
    .subpage-hero-banner h1 {
        font-size: clamp(1.85rem, 6.5vw, 2.35rem) !important;
        line-height: 1.15 !important;
    }

    .subpage-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .service-detail-card {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 22px 18px !important;
    }

    .service-detail-card img {
        max-height: 190px !important;
    }

    .value-card,
    .methodology-card,
    main section article:not(.zing-blog-article) {
        padding: 22px 18px !important;
    }

    .section.cta {
        padding: 44px 0 !important;
    }

    /* 13. Mobile Footer: Smooth Fade, Compact ROBINSONS, 2-Column Nav Grid */
    .footer-hero {
        height: 165px !important;
        background: linear-gradient(
            180deg,
            rgba(9, 47, 73, 0) 0%,
            rgba(9, 47, 73, 0.004) 5%,
            rgba(9, 47, 73, 0.012) 10%,
            rgba(9, 47, 73, 0.025) 15%,
            rgba(9, 47, 73, 0.045) 20%,
            rgba(9, 47, 73, 0.072) 25%,
            rgba(9, 47, 73, 0.106) 30%,
            rgba(9, 47, 73, 0.148) 35%,
            rgba(9, 47, 73, 0.198) 40%,
            rgba(9, 47, 73, 0.256) 45%,
            rgba(9, 47, 73, 0.322) 50%,
            rgba(9, 47, 73, 0.396) 55%,
            rgba(9, 47, 73, 0.476) 60%,
            rgba(9, 47, 73, 0.562) 65%,
            rgba(9, 47, 73, 0.652) 70%,
            rgba(9, 47, 73, 0.742) 75%,
            rgba(9, 47, 73, 0.828) 80%,
            rgba(9, 47, 73, 0.902) 85%,
            rgba(9, 47, 73, 0.958) 90%,
            rgba(9, 47, 73, 0.99) 95%,
            #092f49 100%
        ), #ffffff !important;
    }

    .footer-watermark {
        font-size: clamp(44px, 12.2vw, 76px) !important;
        letter-spacing: -0.02em !important;
        top: 84% !important;
        color: #092f49 !important;
        opacity: 0.9 !important;
    }

    .coverage-section .tag-badge,
    .subpage-hero-banner .tag-badge {
        background: rgba(140, 213, 255, 0.15) !important;
        border: 1px solid rgba(140, 213, 255, 0.35) !important;
    }

    .coverage-section .tag-text,
    .subpage-hero-banner .tag-text {
        color: #9cdaff !important;
    }

    .coverage-section .tag-circle,
    .subpage-hero-banner .tag-circle {
        background: #9cdaff !important;
    }

    .footer-badge {
        padding: 6px 11px !important;
        gap: 6px !important;
        background-color: #ffffff !important;
        border: 1.5px solid #bdd7ea !important;
    }

    .footer-badge span {
        color: #153448 !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
    }

    .footer-badge .badge-icon {
        width: 18px !important;
        height: 18px !important;
        background-color: #0877b5 !important;
    }

    .footer-badge .badge-icon svg {
        width: 10px !important;
        height: 10px !important;
        fill: #ffffff !important;
    }

    .badge-left {
        left: 5% !important;
        top: 26% !important;
    }

    .badge-right {
        right: 5% !important;
        top: 26% !important;
    }

    /* 2x2 Grid for Footer Navigation Columns on Mobile */
    .footer-nav-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px 20px !important;
        padding: 36px 20px 36px 20px !important;
        background-color: #092f49 !important;
        border-top: none !important;
        margin-top: -1px !important;
    }

    .footer-col .col-heading {
        color: #8cd5ff !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        margin-bottom: 10px !important;
    }

    .footer-col .col-links a {
        color: #d8e6ee !important;
        font-size: 13.5px !important;
        line-height: 1.75 !important;
    }

    .footer-col .col-links a:hover {
        color: #ffffff !important;
    }
}