/**
 * REINTEGRAL MASTER DESIGN SYSTEM SPECIFICATION
 * Premium Dark Green Architectural Identity & Global Typography Upscale
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* --- 1. DESIGN TOKEN CONFIGURATIONS (RICH ARCHITECTURAL GREEN) --- */
:root {
    --color-ink: #11261a;          /* Deep architectural pine-green slate background */
    --color-canvas: #f4f4f5;       /* Light secondary gallery grey asset framework */
    --color-surface: #ffffff;      /* Pure crisp white structural card canvas */
    --color-line: #e4e4e7;         /* Minimalist hairline layout border separator */
    --color-muted: #a1a1aa;        /* Soft editorial secondary descriptive typography */
    --color-accent: #cd853f;       /* Premium desaturated Terracotta accent highlight */
    --color-accent-light: #f4b46c; /* Vibrant terracotta responsive hover element glow */
}

/* --- 2. GLOBAL RESET BOUNDS & SYSTEM FONTS --- */
html, body {
    background-color: var(--color-ink) !important;
    color: #ffffff !important;
    font-family: 'Source Sans 3', sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 3. DYNAMIC CLASS COMPONENT INJECTIONS & UPSCALE --- */
p, 
.text-\[15px\], 
.text-\[16px\], 
textarea, 
label, 
span {
    font-size: 1.25rem !important;      
    line-height: 1.85 !important;       
}

.text-xs, button, input {
    font-size: 0.95rem !important;
}

#reframe-quote, 
.font-display.italic {
    font-size: 2.1rem !important;       
    line-height: 1.5 !important;
    color: #ffffff !important;
}

/* WEBSITE-WIDE LEGIBILITY SYSTEM FIX */
.font-light {
    font-weight: 400 !important;
}

/* Core System Color Utility Mapping */
.bg-canvas  { background-color: var(--color-canvas); }
.text-canvas { color: var(--color-canvas); }
.bg-ink     { background-color: var(--color-ink); }
.text-ink    { color: var(--color-ink); }
.bg-surface { background-color: var(--color-surface); }
.text-surface { color: var(--color-surface); }
.border-line { border-color: var(--color-line); }
.bg-line     { background-color: var(--color-line); }
.text-muted   { color: var(--color-muted); }
.border-muted { border-color: var(--color-muted); }
.bg-accent     { background-color: var(--color-accent); }
.text-accent   { color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }
.hover\:text-accent:hover { color: var(--color-accent); }

.font-sans    { font-family: 'Source Sans 3', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }

/* --- 4. ENGINE LAYOUT CONTROLS --- */
.fade-in {
    animation: premiumFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes premiumFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* UNIFIED BACKGROUND CONTROLS */
img#hero-bg,
img#services-bg,
img#quote-bg,
img#cta-bg {
    filter: brightness(0.55) contrast(1.15) saturate(0.65) !important; 
    opacity: 0.65 !important;                                           
    mix-blend-mode: normal !important;   
    transition: filter 0.3s ease;
}

/* PORTRAIT SYSTEM CONTROL */
img#about-img {
    filter: none !important;
    opacity: 1.00 !important;
    mix-blend-mode: normal !important;
}

/* HERO CAPTION PROTECTION */
h1#hero-headline {
    text-shadow: 
        0 2px 4px rgba(17, 38, 26, 0.65), 
        0 4px 12px rgba(17, 38, 26, 0.40),
        0 12px 24px rgba(17, 38, 26, 0.20) !important;
}

p#hero-description {
    text-shadow: 
        0 1px 3px rgba(17, 38, 26, 0.70), 
        0 3px 8px rgba(17, 38, 26, 0.45) !important;
}

/* CONTRAST & DENSITY OVERRIDES */
#diag-foot {
    color: var(--color-ink) !important;
    font-size: 1.75rem !important; 
    font-weight: 500 !important;   
}

#about-quote {
    color: var(--color-ink) !important;
}

/* 🛠️ TESTIMONIAL SYSTEM GRID RECONSTRUCTIONS: Elevates dynamic card contrast, framing, and animations */
#testimonials-grid > div {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-line) !important;
    border-top: 4px solid var(--color-accent) !important; /* Premium terracotta geometric head-strip */
    padding: 2.5rem 2rem !important;
    position: relative !important;
    border-radius: 0px !important;
    box-shadow: 0 4px 6px -1px rgba(17, 38, 26, 0.02), 0 2px 4px -1px rgba(17, 38, 26, 0.01) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Micro-interaction Hover Treatment */
#testimonials-grid > div:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 30px -10px rgba(17, 38, 26, 0.08) !important;
}

/* Scales up and brightens the double quote icon anchors cleanly */
#testimonials-grid div.opacity-20,
#testimonials-grid text,
#testimonials-grid span {
    color: var(--color-accent) !important;
    font-size: 2.25rem !important;
    font-family: 'Playfair Display', serif !important;
    opacity: 0.60 !important;
}

/* Hardens client attribution subtitles to uppercase spacing */
#testimonials-grid p.text-xs,
#testimonials-grid p:last-child {
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    color: var(--color-ink) !important;
    opacity: 0.85 !important;
    margin-top: 1.5rem !important;
}

/* Custom Scrollbar Interface Component */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-ink);
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 3px;
}

/* Hardened Backend Bot Defense Perimeter */
.oh-no-robots {
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
}

.hidden { display: none !important; }