/* --- Core Brand Tokens --- */
:root {
    --bp-primary: #111111;
    --bp-accent: #e97d05;
    --bp-bg: #fdfdfd;
    --bp-surface: #ffffff;
    --bp-text: #1a1a1a;
    --bp-muted: #000;
    --bp-border: #e0e0e0;
    --bp-cta: #333; 
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    line-height: 1.6; 
    color: var(--bp-text);
    background-color: var(--bp-bg);
}

/* --- Structural Base Layout --- */
header {
    width: 100%;
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo a {
    font-weight: 700;
    font-size: 20px;
    color: var(--bp-primary);
    text-decoration: none;
    letter-spacing: -0.5px;
}
nav a {
    margin-left: 24px;
    text-decoration: none;
    color: var(--bp-muted);
    font-weight: 500;
    transition: color 0.2s;
}

a { color: var(--bp-muted); }
nav a:hover, nav a.active { color: var(--bp-primary); }

main {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.hero{
    padding:1rem 0;
    max-width:760px;
}

.hero h1{
    font-size:clamp(2.8rem,6vw,4.5rem);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:1.5rem;
}

.hero p{
    font-size:1.2rem;
    color:var(--bp-muted);
    margin-bottom:2rem;
}

:root{

--space-xs:.5rem;
--space-sm:1rem;
--space-md:2rem;
--space-lg:4rem;
--space-xl:6rem;
--space-2xl:8rem;

}

.section{

padding:var(--space-xl) 0;

}

/* =====================================================
COMPONENT: Feature Grid
Future:
components/FeatureGrid.astro
===================================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
    align-items:stretch;
}

.card{
    background:white;
    border:1px solid var(--bp-border);
    border-radius:16px;
    padding:2rem;
    max-width:none;
    margin:0;
    transition:all .25s ease;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.card-icon{
    font-size:2rem;
    margin-bottom:1rem;
}

@media(max-width:1000px){

    .card-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:640px){

    .card-grid{
        grid-template-columns:1fr;
    }

}

/* ===================================================== Feature Grid*/

/* =====================================================
COMPONENT: Service Grid
Future:
components/ServiceGrid.astro
===================================================== */

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

.service-card{
    background:white;
    border:1px solid var(--bp-border);
    border-radius:16px;
    padding:2rem;
    transition:.25s;
}

.service-grid a{
	text-decoration: none;
}

.service-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.service-card h3{
    margin-bottom:1rem;
}

.service-card ul{
    margin-top:1rem;
    padding-left:1.2rem;
}

.service-outcome{
    margin-top:1.5rem;
    padding-top:1rem;
    border-top:1px solid var(--bp-border);
    font-size:.9rem;
    color:var(--bp-accent);
    font-weight:600;
}

@media(max-width:768px){

    .service-grid{
        grid-template-columns:1fr;
    }

}

/* ===================================================== Feature Grid*/

.section-heading{

max-width:700px;

margin:0 auto 4rem;

text-align:center;

}

.container{

width:min(1200px,92%);

margin-inline:auto;

}


/* --- Layout Types --- */
/* Type 1: Full Width Section */
.layout-full {
    width: 100%;
}

/* Type 2: Content with Sidebar */
.layout-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}
@media (max-width: 768px) {
    .layout-sidebar { grid-template-columns: 1fr; }
}

/* --- Shared Presentation Blocks --- */
.content-body h1 { font-size: 36px; margin-bottom: 16px; color: var(--bp-primary); letter-spacing: -0.5px; }
.content-body h2 { font-size: 24px; margin: 32px 0 16px; color: var(--bp-primary); }
.content-body p { margin-bottom: 20px; color: var(--bp-muted); font-size: 16px; }

.sidebar-panel {
    background: var(--bp-surface);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--bp-border);
    height: fit-content;
}
.sidebar-panel h3 { font-size: 18px; margin-bottom: 16px; color: var(--bp-primary); }
.sidebar-list { list-style: none; }
.sidebar-list li { margin-bottom: 12px; }
.sidebar-list a { text-decoration: none; color: var(--bp-cta); font-weight: 500; }

/* Call To Action Buttons */
.btn-primary {
    display: inline-block;
    background: var(--bp-cta);
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
	min-height: 50px;
	cursor: pointer;
}

.btn-secondary {
    display: inline-block;
    background: var(--bp-accent);
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}
.btn-primary:hover, .btn-secondary:hover { opacity: 0.9; background: var(--bp-muted); }

.button-primary .btn-secondary{

border:1px solid var(--bp-border);
}

/* =====================================================
COMPONENT: Consultation Modal
Future:
components/ConsultationModal.astro
===================================================== */

.mybp-modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;

    background:rgba(0,0,0,.65);

    justify-content:center;
    align-items:center;

    padding:1rem;
}

.mybp-modal.active{
    display:flex;
}

.modal-content{
    width:100%;
    max-width:600px;

    background:white;

    border-radius:20px;

    padding:2rem;

    position:relative;

    box-shadow:
    0 20px 60px rgba(0,0,0,.25);
}

.close-modal{
    position:absolute;
    top:1rem;
    right:1rem;

    border:none;
    background:none;

    font-size:2rem;
    cursor:pointer;
}

#consultation-form{
    display:flex;
    flex-direction:column;
    gap:1rem;

    margin-top:1.5rem;
}

#consultation-form input,
#consultation-form textarea{

    width:100%;
    padding:1rem;

    border:1px solid var(--bp-border);
    border-radius:10px;

    font-size:1rem;
}

#consultation-form input:focus,
#consultation-form textarea:focus{

    outline:none;
    border-color:var(--bp-accent);
}

.honeypot{
    display:none;
}

.form-status{
    margin-top:1rem;
    font-size:.9rem;
}
/* --- Footer Layout --- */

footer{
    background:var(--bp-primary);
    color:white;
    margin-top:6rem;
}

.footer-social{
    padding:2rem;
    display:flex;
    justify-content:center;
    gap:2rem;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.footer-social a{
    color:white;
    text-decoration:none;
    opacity:.8;
}

.footer-social a:hover{
    opacity:1;
}

.footer-bottom{
    text-align:center;
    padding:1.5rem;
    font-size:.9rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 40px;
}
@media (max-width: 768px) {
    .footer-container { grid-template-columns: 1fr; }
}
.footer-brand h2 { margin-bottom: 12px; font-size: 20px; }
.footer-brand p { color: #888; font-size: 14px; max-width: 320px; }
.footer-links h4 { margin-bottom: 16px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #888;}
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #ccc; text-decoration: none; font-size: 14px; }
.footer-links a:hover { color: white; }
.footer-bottom {
    max-width: 1200px;
    margin: 20px auto 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

.logo{
    display:flex;
    align-items:center;
    gap:.75rem;
    text-decoration:none;
}

.logo img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.logo-title{
    font-weight:700;
    color:var(--bp-primary);
}

.hidden-field{
    display:none;
}