:root {
    --bg: #F5F6F3;
    --ink: #12211C;
    --line: #D8DAD3;
    --font-main: "Cormorant Garamond", serif;
    --bg:#F5F6F3;
    /* --bg:#FFFFFF; */
    --ink:#12211C;
    --teal:#1C4F45;
    /* --teal-dark:#0E332C; */
    --teal-dark: #12211C;
    --gold:#C98A2E;
    --coral:#D2572E;
    --coral-dark:#A6421F;
    --line:#D8DAD3;
    --card-bg:#FFFFFF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul {padding-left: 25px; margin-bottom: 15px;}
body, textarea, input { font-family: var(--font-main); background: var(--bg); color: var(--ink); line-height: 1.6; padding-top:144px;}
/* Target all sections that have an ID used for anchor links */
#Services, #About, #Contact {
  scroll-margin-top: 144px; 
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 0px; }
a { color: var(--ink); text-decoration: underline; }

/* Perfect Logo Alignment */
/* 1. Global Reset Fixes */
body { 
    font-family: var(--font-main); 
    background: var(--card-bg); 
    color: var(--ink); 
    line-height: 1.6; 
    padding-top: 114px; /* Leaves headroom for the fixed navigation bar footprint */
}

.wrap { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 40px; 
}

/* 2. Fixed Outer Navigation Shell (Spans Edge to Edge) */
header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background: var(--bg); 
    border-bottom: 1px solid var(--line); 
    z-index: 1000; 
}

/* 3. Inner Navigation Flex Containment Block (Keeps links lined up with center margins) */
.nav-container { 
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 40px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
}

/* 4. Full Width Grid Alignment for Content Blocks */
.full-width-divider {
    width: 100%;
    border-top: 1px solid var(--line);
    padding: 60px 0;
}

/* Fixes your broken hero component architecture */
.hero-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

/* Target content tracking adjustments */
.hero-left-content {
    display: flex;
    flex-direction: column;
}

/* Remove original nested border to prevent collision bugs */
#About {
    border-top: 1px solid var(--line);
}

/* 5. Responsive Styles Cleanups */
@media (max-width: 860px) {
    .hero-grid-layout { 
        grid-template-columns: 1fr; 
    }
    .hero-visual { 
        height: 260px; 
        order: -1; 
    }
    h1 { 
        font-size: 34px; 
    }
    nav { 
        display: none; 
    }
}

.logo { display: flex; align-items: center; font-size: 2rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.logomark { font-family: "Mr Dafoe", cursive; font-size: 2.75rem; margin-right: 18px; margin-top: -0.35em; }
.logo-law { opacity: 0.20; }

/* Navigation */
nav { display: flex; align-items: center; z-index: 1000; }
nav a { margin-left: 30px; text-decoration: none; color: var(--ink); font-size: 1.2rem; }

/* Hero & Button with Phone */
/* .hero { padding: 80px 0; } */
.btn { 
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 15px 30px; background: var(--teal); color: #fff; 
    text-decoration: none; border-radius: 2px;
    white-space: nowrap; text-align: center;
}
.btn .phone { 
    /* font-size: 0.85rem;  */
    /* opacity: 0.8;  */
    font-family: lato, sans-serif;
    margin-top: 4px;  
    font-weight: bold;  
}

.btn-outline { 
    background: transparent; 
    border: 1px solid var(--line); 
    color: var(--ink); 
}

/* Responsive Mobile Menu */
.menu-toggle { display: none; cursor: pointer; font-size: 1.5rem; }
@media (max-width: 1024px) {
    .menu-toggle { display: block; }
    nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: 20px; }
    nav.active { display: flex; position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background: var(--bg); 
        padding: 20px; 
        border-bottom: 1px solid var(--line);
        z-index: 999;}
    nav a { margin: 10px 0; }
    .btn {min-width: auto;}
}


.full-width-divider {
    width: 100%;
    border-top: 0px solid var(--line);
    padding-top: 19px;
    padding-bottom: 0px;
}

.full-width-divider ~ .full-width-divider {
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 60px;
    padding-bottom: 60px;
}


.eyebrow{
    font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--gold);margin-bottom:18px;
    margin-top:10px;
}
h1{
    font-size:48px;font-weight:700;letter-spacing:-0.02em;line-height:1.08;
    /* margin-bottom:22px; */
}
.hero-sub{font-size:18px;color:var(--ink);opacity:0.78;max-width:480px;margin-bottom:32px; margin-top: 12px;}
.hero-ctas{display:flex;gap:14px;align-items:center;margin-bottom:28px;}
.hero-credibility{font-size:13px;color:var(--ink);opacity:0.55;}

.hero-visual{
    position:relative;
    height:640px;
    background:var(--teal);
    clip-path:polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
    overflow:hidden;
}
.hero-visual svg{position:absolute;bottom:0;left:0;width:100%;height:70%;}
.hero-visual .tag{
    position:absolute;top:24px;right:24px;
    background:rgba(255,255,255,0.12);
    color:#fff;font-size:12px;font-weight:500;
    padding:6px 12px;border-radius:100px;
}

@media (max-width:860px){
    .hero-grid-layout {grid-template-columns:1fr;}
    .hero-visual{height:260px;order:-1;}
    h1{font-size:34px;}
    .cards{grid-template-columns:repeat(2,1fr);}
    .credibility .wrap{grid-template-columns:repeat(2,1fr);row-gap:24px;}
    .credibility .stat:nth-child(3){border-left:none;padding-left:0;}
    .how-steps{grid-template-columns:1fr;}
    nav{display:none;}
}





footer {
    border-top: 1px solid #ddd;
    margin-top: 80px;
    padding-top: 40px;
    background-color: var(--bg); 
}

.footer-top {
  display: flex;         /* Activates flexbox */
  gap: 20px;             /* Adds space between your columns */
}

.footer-bottom {
    border-top: 1px solid #ddd;
    margin-top: 80px;
    padding-top: 40px;
}

.third-column {
  flex: 1;               /* Distributes space equally among columns */
  /* padding: 15px;         Adds internal spacing */
  /* background: #f4f4f4;   For visibility */
}

.third-column-contact {
    border-left: 1px solid #ddd;
    padding-left: 20px;
}


/* About Section Grid Layout */
.about-grid-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    align-items: start;
}

/* .about-intro-title-index {

} */

.about-intro-title {
    margin: 320px 0px 40px 0px;
}

.about-intro-title h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 8px;
}

.about-name {
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--teal);
    line-height: 1.1;
}

.about-hero-photo-placeholder {
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0% 100%) !important;
    
}

.about-right-content .bio-preview {
    font-size: 20px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.9;
    margin-bottom: 24px;
}

.about-right-content .credentials-snippet {
    font-size: 15px;
    font-family: sans-serif;
    letter-spacing: 0.02em;
    color: var(--ink);
    opacity: 0.6;
    margin-bottom: 32px;
}

/* Elegant Text-Based Link Button */
.btn-text-link {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-text-link:hover {
    color: var(--coral);
    border-color: var(--coral);
}

@media (max-width: 860px) {
    .about-grid-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .about-name { font-size: 34px; }
}



/* About Page Full-Width Hero */
.about-hero-bg {
    width: 100%;
    /* background: var(--teal-dark); */
    /* color: #ffffff; */
    padding: 25px 0;
    margin-top: -6px;
     /* Seals any gaps from the fixed navigation bar header */
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Gives the profile picture an elegant, narrow column weight */
    gap: 60px;
    align-items: center;
}

.about-hero-text h1 {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    /* color: #ffffff; */
    margin-top: 8px;
}

/* Premium Placeholder Block for Your Professional Portrait Photo */
.about-hero-photo-placeholder {
    width: 100%;
    height: 480px;
    background: linear-gradient(135deg, var(--teal) 0%, #122c27 100%);
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* color: rgba(255, 255, 255, 0.4); */
    font-family: sans-serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Two-Column Split Layout Grid for Body Content */
.profile-body-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Keeps standard reading text wide, credentials narrow */
    gap: 80px;
    align-items: start;
}

.profile-overview-text p {
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 24px;
    /* color: var(--ink); */
}

/* Sidebar Styling Block */
/* .profile-sidebar-credentials {
    /* background: var(--card-bg); */
    /* border: 1px solid var(--line); */
    /* padding: 32px; */
/* } */ 

.profile-sidebar-credentials h3 {
    font-size: 20px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--gold);
    padding-bottom: 8px;
}

.credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credentials-list li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--ink);
}

.credentials-list li strong {
    display: block;
    color: var(--teal-dark);
    font-size: 17px;
}

/* Responsive Structural Breakdowns */
@media (max-width: 900px) {
    .about-hero-grid, 
    .profile-body-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    .about-hero-photo-placeholder {
        height: 320px;
    }
    .about-hero-text h1 {
        font-size: 42px;
    }
}




.hero.full-width-divider {
    padding: 0;
    overflow: hidden;
}

/* 
   The Fix: Use calc to measure from the screen edge to the center margin.
   Column 1 (Left Margin): Matches your centered grid starting line.
   Column 2 (Text): Takes up a clean half of your 1000px layout width.
   Column 3 (Graphic): Fills all remaining space to the right edge of the screen.
*/
.hero-asymmetric-grid {
    display: grid;
    /* Changed tracks: This forces the graphic container to occupy more central territory */
    grid-template-columns: 
        calc((100vw - 1000px) / 2) 
        1fr 
        1.2fr;
    align-items: center;
}

.hero-left-content {
    grid-column: 2;
    padding: 80px 20px 80px 40px; /* Reduced right padding to allow text closer to the graphic edge */
    display: flex;
    flex-direction: column;
    z-index: 5; /* Ensures text stays cleanly on top of any overlapping element layers */
}

.hero-bleed-visual {
    grid-column: 3 / span 2;
    position: relative;
    height: 640px;
    background: var(--teal);
    background: linear-gradient(135deg, var(--teal) 0%, #122c27 100%);
    
    /* MODIFIED: Adjusted the angle slant back to 8% to match the closer overlap */
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    align-items: flex-end;
    width: 100%;
}

.hero-bleed-visual svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
}

.hero-bleed-visual .tag {
    position: absolute;
    top: 24px;
    right: 24px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 100px;
    z-index: 10;
}

/* 📱 Responsive Balance Breakpoint */
@media (max-width: 1040px) {
    /* If the screen drops under 1000px, fall back to standard margins */
    .hero-asymmetric-grid {
        grid-template-columns: 40px 1.1fr 0.9fr;
    }
    .hero-left-content {
        padding: 60px 20px 60px 0;
    }
}

@media (max-width: 860px) {
    .hero-asymmetric-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-left-content {
        grid-column: 1;
        padding: 40px;
    }
    
    .hero-bleed-visual {
        grid-column: 1;
        height: 320px;
        order: -1; 
        position: relative;
        background: var(--teal);
        
        /* 1. KEEP THE ORIGINAL ANGLE: Your exact homepage slant direction */
        clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); 
        
        /* 2. THE HORIZONTAL SHIFT: Slides the entire shape over to pull away from the left edge */
        width: calc(100% - 40px); /* Reduces width by your site's standard margin size */
        margin-left: 40px;        /* Shifts the whole box right, anchoring the bottom corner to the margin line */
        
        display: flex;
        align-items: flex-end;
    }
    
    .hero-bleed-visual svg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75%;
    }
}





/* Clean out outer box parameters on your hero wrapper */
.about-hero-center-split {
    width: 100%;
    background: #FFFFFF; 
    padding: 0;
    overflow: hidden;
}

/* 
   The Perfect 50/50 Split Rule: 
   Divides the browser viewport exactly into two equal halves down the screen axis.
*/
.about-split-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Keeps the profile picture an elegant, narrow column weight */
    align-items: center;
}

.about-hero-center-split {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.about-split-grid {
    align-items: stretch !important;
}
.about-graphic-left-pane {
    /* height: auto !important; */
    min-height: 100% !important;
}
.about-text-content-limiter {
    padding: 60px 40px 60px 60px;
}

.private-emergency-page .about-graphic-left-pane {
    height: auto !important;
    min-height: 100% !important;
    background: #8B3A2B !important;
}
.private-emergency-page .about-graphic-canvas {
    /* background: #A74131 !important; */
    width: calc(100% - 40px);
    height: 100%;
    /* clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%); */
}

/* Graphic spans the left half of the viewport frame precisely */
.about-graphic-left-pane {
        grid-column: 1;
        height: 640px;
        margin-top: 0px;
        position: relative;
        background: var(--teal);
        background: linear-gradient(135deg, var(--teal) 0%, #122c27 100%);
        
        display: flex;
        align-items: flex-end;

        /* 1. KEEP THE ORIGINAL ANGLE: Your exact about page slant direction */
        clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
        
        /* 2. THE HORIZONTAL SHIFT: Slides the entire shape over to pull away from the right edge */
        width: calc(100% - 40px); /* Reduces width to create a whitespace buffer on the right */
        margin-right: 40px;       /* Shifts the whole box left, anchoring the bottom corner to the margin line */
    }

.about-graphic-left-pane svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
}

/* Text block tracking system wrapper on the right half column */
.about-text-right-pane {
    grid-column: 2;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

/* 
   The Content Margin Alignment Key:
   This matches your site's standard 1000px centered padding calculations 
   and keeps text exactly aligned with the lower sections.
*/
.about-text-content-limiter {
    max-width: 500px; /* Exactly half of your 1000px layout row */
    padding: 80px 40px 80px 60px; /* Wide left padding pushes content away from the diagonal line */
    display: flex;
    flex-direction: column;
}

.about-text-content-limiter h1 {
    color: var(--ink);
    font-size: 54px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-top: 8px;
    margin-bottom: 20px;
}

.about-text-content-limiter p {
    font-size: 21px;
    opacity: 0.85;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.6;
}

.desktop-only { display: inline; }

/* 📱 Complete Responsive Mobile Grid Fallbacks */
@media (max-width: 1040px) {
    .about-text-content-limiter {
        padding: 60px 40px 60px 40px;
    }
    .about-text-content-limiter h1 {
        font-size: 44px;
    }
}

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

    /* Main Layout Grid Block Re-stacking Rules */
    .about-split-grid {
        grid-template-columns: 1fr;
    }
    
    .about-text-right-pane {
        grid-column: 1;
    }
    
    .about-text-content-limiter {
        max-width: 100%;
        padding: 40px;
    }

    /* 
       The Container Frame: 
       This element handles the full-bleed layout behavior out to the absolute left 
       edge of the mobile viewport, keeping it flat against the screen border.
    */
    .about-graphic-left-pane {
        grid-column: 1;
        width: 100%;
        height: 320px;
        margin-top: 0; /* Align directly under your nav bar to eliminate whitespace gaps */
        position: relative;
        background: transparent;
        display: block;
    }

    /* 
       The Asymmetric Chop Layer:
       This inner class processes your custom parallel slant direction on mobile.
       By setting width to calculation properties, the shape pulls inward away from 
       the right boundary wall, landing exactly on your 40px text container margin line.
    */
    .about-graphic-canvas {
        width: calc(100% - 40px); /* Tucks the right edge in away from the mobile screen line */
        height: 100%;
        background: var(--teal);
        
        /* RESTORED PARALLEL CHOP: Keeps your exact branding angle intact on small screens */
        clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%); 
        
        display: flex;
        align-items: flex-end;
        position: relative;
    }

    .about-graphic-canvas svg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 75%;
    }
}


@media (max-width: 860px) {
    .private-emergency-page .about-graphic-left-pane {
        background: transparent !important;
    }
    .private-emergency-page .about-graphic-left-pane .about-graphic-canvas {
        width: calc(100% - 40px) !important;
        /* background: #A74131 !important; */
        clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%) !important;
    }

    .about-intro-title {
        margin: 40px 0px 40px 0px;
    }
    
}