/* --- 1.0 STRICT ROOT DEFINITION (Global Colors) --- */

/* --- 2.0 PAGE SPECIFIC ROOT (No Colors) --- */
:root {
    --srv-easing: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* VANGUARD INTEGRATION VARS */
    --text-display: var(--heading-font-size);
    --text-h2: clamp(2rem, 4vw, 3.5rem);
    --text-h3: clamp(1.25rem, 2vw, 1.75rem);
    --text-small: 0.875rem;
    --spacer-element: 2rem;
    /* Specific for Dark Mode Cards */
    --color-card-background: #262626;
}

/* --- 3.0 RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, html.lenis {
    height: auto;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    line-height: 1.5;
}

h1, h2, h3, h4, .serif {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.1;
}

a { text-decoration: none; color: currentColor; cursor: pointer; }


/* --- 4.0 LAYOUT UTILITIES --- */
.section {
    width: var(--section-width);
    margin: 0 auto;
    padding: var(--section-padding-y) 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.flex-split {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-standard);
    width: 100%;
}

.flex-col-left { flex: 1; min-width: 200px; }
.flex-col-right { flex: 3; }

.border-top {
    border-top: 1px solid var(--color-text-muted);
    opacity: 0.3;
    width: 100%;
    height: 1px;
    margin-bottom: 1.5rem;
}

/* --- 5.0 SECTION STYLING --- */

/* HERO SECTION */
.hero {     min-height: 60vh;
    justify-content: flex-end;
    padding: 0;}
.hero-title {
    font-size: clamp(2.6rem, 8vw, 7rem);
    font-family: var(--font-primary);
    font-weight: 300;
    line-height: 1;
    text-align: center;
    width: 75%;
    margin: auto;
}
.hero-title i, .hero-title em { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.hero-meta { position: absolute; bottom: 20px; display: flex; justify-content: flex-end; width: 100%; }

/* STORY SECTION */
.story-section { margin-top: var(--section-padding-y) !important; display: flex; justify-content: center; }
.story-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; width: 100%; align-items: start; }
.story-title h2 { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; color: var(--color-text-primary); }
.story-content p { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.5; margin-bottom: 2.5rem; font-weight: 300; color: var(--color-text-primary); opacity: 0.9; }

/* SERVICES LIST */
.group-header { position: sticky; top: 6rem; align-self: start; }
.group-title { font-family: var(--font-primary); font-size: var(--text-small); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.service-items { display: flex; flex-direction: column; width: 100%; }

.service-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Adjusted for light theme visibility */
    padding: 2.5rem 0; 
    transition: padding-left var(--transition-medium), border-color var(--transition-medium); 
    cursor: default; 
}
.service-row:hover { border-color: var(--color-text-primary); padding-left: 20px; }
.service-name { font-size: var(--text-h2); font-family: var(--font-serif); margin-right: 2rem; color: var(--color-text-primary); }
.service-desc { font-family: var(--font-primary); color: var(--color-text-muted); max-width: 300px; font-size: var(--text-small); line-height: 1.6; text-align: right; }

/* --- 6.0 BENTO GRID (HOW WE DO IT) --- */
.bento-section {
    width: var(--section-width);
    margin: 0 auto;
    padding: var(--section-padding-y) 0;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(300px, auto);
    gap: 20px;
    width: 100%;
}

/* Card Styles */
.bento-card {
    background-color: var(--color-card-background); /* Dark background */
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--srv-easing), box-shadow 0.4s ease;
    color: #ffffff; /* Force white text in cards */
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Grid Spans */
.span-col-2 { grid-column: span 2; }
.span-row-2 { grid-row: span 2; }

/* Typography in Cards */
.card-content { position: relative; z-index: 2; margin-top: auto; }
.card-title {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.card-desc {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    max-width: 95%;
}

/* Visual Placeholders */
.card-visual {
    position: absolute;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    color: #ffffff;
}
.card-tall .card-visual { top: 40px; left: 30px; width: 140px; height: 140px; }
.card-wide .card-visual { top: 50%; transform: translateY(-50%); right: 40px; width: 160px; height: 160px; }
.card-std .card-visual { top: 20px; right: 20px; width: 80px; height: 80px; }


/* --- 7.0 NAVIGATION & FOOTER UTILS --- */
.services-page-wrapper { position: relative; z-index: 1; background-color: var(--color-text-secondary); color: var(--color-text-primary); }
.bottom-bar-ms { position: fixed; bottom: 5vh; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; width: var(--nav-width); margin: auto; z-index: 900; padding-bottom: 15px; border-bottom: 1px solid var(--color-text-primary); transition: color 0.4s ease, border-bottom-color 0.4s ease; }
.leftbtn-btm, .rightbtn-btm { all: unset; box-sizing: border-box; color: var(--color-text-primary); font-family: var(--font-serif); text-transform: uppercase; font-size: calc(100% + 2px); transition: color 0.3s ease; cursor: pointer; }



/* RESPONSIVE */
@media (max-width: 1024px) {
    .service-desc { display: none; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .span-row-2 { grid-row: span 1; }
}
@media (max-width: 768px) {
    .flex-split, .flex-quad, .blogs-grid, .story-grid { display:flex;flex-direction: column; gap: 40px; }
    .manifesto-text { font-size: 1.5rem; text-indent: 0; }
    .group-header { position: static; margin-bottom: 1rem; }
    .service-name { font-size: 2rem; }
    .services-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .another-span { width: 100%; text-align: left; }
    .hero {
    min-height: 40vh;
     margin-top: 40px;
    justify-content: flex-end;
}
    .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .span-col-2 { grid-column: span 1; }
    .span-row-2 { grid-row: span 1; }
    .bento-card { min-height: 320px; padding: 30px 20px; }
    .card-visual { width: 80px; height: 80px; position: relative; top: 0; right: 0; transform: none; margin-bottom: 20px; }
    .card-wide .card-visual { transform: none; }
}