/* ==========================================================================
ALL SERVICES SYSTEM ENGINE (services.css)
========================================================================== */

/* STREAMING_CHUNK: Declaring typographic base utilities and offsets */
.services-section-title {
font-size: 38px;
font-weight: 800;
line-height: 1.25;
color: var(--text-dark);
margin-bottom: 24px;
letter-spacing: -0.5px;
}

.gold-text {
color: var(--gold) !important;
}

/* STREAMING_CHUNK: Designing services hero section with dark landscape bg */
.services-hero {
position: relative;
background: linear-gradient(rgba(17, 24, 39, 0.88), rgba(17, 24, 39, 0.88)),
url('https://images.unsplash.com/photo-1431540015161-0bf868a2d407?auto=format&fit=crop&w=1600&q=80') no-repeat center center / cover;
padding: 130px 0 110px;
color: var(--white);
}

.services-hero-content {
max-width: 680px;
}

.services-hero-content .hero-title {
font-size: 46px;
font-weight: 800;
line-height: 1.15;
color: var(--white);
margin-bottom: 24px;
letter-spacing: -1px;
}

.services-hero-content .hero-desc {
font-size: 16.5px;
color: #E5E7EB;
line-height: 1.65;
font-weight: 400;
margin-bottom: 30px;
}

/* Checklist badge items */
.hero-badges-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.badge-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
color: #E5E7EB;
}

.badge-icon {
color: var(--gold);
font-size: 16px;
}

/* STREAMING_CHUNK: Structuring standard visual how-we-work columns /
/ 2. Process Flow Section */
.process-section {
padding: 100px 0;
background-color: var(--white);
}

.process-header {
text-align: center;
margin-bottom: 60px;
}

.process-grid {
display: grid;
grid-template-columns: 1.2fr 0.9fr 1.2fr;
gap: 40px;
align-items: center;
}

.process-column {
display: flex;
flex-direction: column;
gap: 36px;
}

.process-step-card {
background-color: var(--white);
padding: 24px;
border-radius: 16px;
transition: transform 0.3s ease;
}

.process-step-card:hover {
transform: translateY(-2px);
}

.step-num {
font-size: 32px;
font-family: var(--font-heading);
font-weight: 800;
color: var(--gold);
margin-bottom: 12px;
}

.process-step-card h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 10px;
}

.process-step-card p {
font-size: 14.5px;
color: var(--text-gray);
line-height: 1.6;
}

.process-media {
position: relative;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

.process-image {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
}

/* STREAMING_CHUNK: Engineering alternating grid rows for exact matching /
/ 3. Expert Solutions Alternating Grid Engine */
.expert-solutions-section {
padding: 100px 0;
background-color: #F9FAFB;
}

.expert-solutions-header {
text-align: center;
margin-bottom: 80px;
}

.service-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-bottom: 90px;
}

.service-row:last-child {
margin-bottom: 0;
}

.row-subtitle {
display: inline-block;
font-size: 13px;
font-weight: 700;
color: var(--gold);
letter-spacing: 1.5px;
margin-bottom: 14px;
}

.service-text-col h2 {
font-size: 32px;
font-weight: 800;
color: var(--text-dark);
line-height: 1.25;
margin-bottom: 18px;
letter-spacing: -0.5px;
}

.service-text-col p {
font-size: 16px;
color: var(--text-gray);
line-height: 1.7;
margin-bottom: 28px;
}

.service-action-link {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
}

.service-action-link:hover {
color: var(--gold);
}

.service-action-link i {
font-size: 13px;
transition: transform 0.3s;
}

.service-action-link:hover i {
transform: translateX(4px);
}

.service-media-col {
position: relative;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.04);
}

.service-media-col img {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}

.service-row:hover .service-media-col img {
transform: scale(1.03);
}

/* Alternating structures override classes */
.layout-media-left .service-media-col {
order: 1;
}

.layout-media-left .service-text-col {
order: 2;
}

.layout-media-right .service-text-col {
order: 1;
}

.layout-media-right .service-media-col {
order: 2;
}

/* STREAMING_CHUNK: Structuring FAQ Accordion visual elements /
/ 4. FAQ Accordion panel architecture */
.faq-section {
padding: 100px 0;
background-color: var(--white);
}

.faq-header {
text-align: center;
margin-bottom: 60px;
}

.faq-accordion-container {
max-width: 820px;
margin: 0 auto;
}

.faq-accordion-item {
border-radius: 12px;
background-color: var(--white);
border: 1px solid var(--border-light);
margin-bottom: 16px;
overflow: hidden;
transition: box-shadow 0.3s, border-color 0.3s;
}

.faq-accordion-item:hover,
.faq-accordion-item.active {
box-shadow: 0 8px 24px rgba(0,0,0,0.02);
border-color: rgba(194, 155, 98, 0.3);
}

.faq-accordion-trigger {
width: 100%;
padding: 24px 28px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
text-align: left;
cursor: pointer;
font-family: var(--font-heading);
font-size: 16.5px;
font-weight: 700;
color: var(--text-dark);
}

.faq-icon-holder {
font-size: 13px;
color: var(--text-gray);
transition: transform 0.3s;
}

.faq-accordion-item.active .faq-icon-holder {
transform: rotate(180deg);
color: var(--gold);
}

.faq-accordion-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-inner-content {
padding: 0 28px 24px;
font-size: 15px;
color: var(--text-gray);
line-height: 1.65;
}

/* STREAMING_CHUNK: Drafting isolated CTA and footer blocks alignment /
/ 5. Embedded Rounded CTA Block Section */
.cta-banner-wrapper {
padding: 40px 0 100px;
background-color: var(--white);
}

.embedded-cta-block {
background: linear-gradient(rgba(17, 21, 31, 0.9), rgba(17, 21, 31, 0.9)),
url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1600&q=80') no-repeat center center / cover;
border-radius: 28px;
padding: 70px 90px;
color: var(--white);
}

.cta-inner-content {
max-width: 640px;
}

.embedded-cta-block h2 {
font-size: 38px;
font-weight: 800;
line-height: 1.25;
color: var(--white);
margin-bottom: 20px;
}

.embedded-cta-block p {
color: #D1D5DB;
font-size: 16px;
line-height: 1.65;
margin-bottom: 36px;
}

.cta-actions-row {
display: flex;
gap: 16px;
}

/* STREAMING_CHUNK: Adding media queries for responsive responsiveness overrides /
/ ==========================================================================
RESPONSIVE DESIGN SYSTEM OVERRIDES
========================================================================== */
@media (max-width: 991px) {
.process-grid {
grid-template-columns: 1fr;
gap: 30px;
}

.process-media {
    order: -1; /* Place graphic at head when columns fall in mobile viewport */
}

.process-image {
    height: 350px;
}

.service-row {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 70px;
}

.layout-media-left .service-media-col,
.layout-media-right .service-media-col {
    order: -1;
}

.layout-media-left .service-text-col,
.layout-media-right .service-text-col {
    order: 1;
}

.service-media-col img {
    height: 340px;
}

.embedded-cta-block {
    padding: 50px 40px;
}


}

@media (max-width: 768px) {
.services-hero {
padding: 90px 0;
}

.services-hero-content .hero-title {
    font-size: 34px;
}

.services-section-title {
    font-size: 30px;
}

.service-text-col h2 {
    font-size: 26px;
}

.faq-accordion-trigger {
    padding: 20px 24px;
    font-size: 15px;
}

.panel-inner-content {
    padding: 0 24px 20px;
}

.embedded-cta-block h2 {
    font-size: 30px;
}

.cta-actions-row {
    flex-direction: column;
    gap: 12px;
}

.cta-actions-row button {
    width: 100%;
    text-align: center;
}


}