/* 1. BACKGROUND COLOR */
body, .site, #page {
    background-color: #f9f9f9 !important;
}

/* 2. THE UNBLOCKER: Allows scroll animations to work in WordPress */
html, body, .site, #page {
    overflow-x: clip !important;
}

/* 3. THE MASTER LANE: Keeps everything in the 1180px frame */
.site-header .container, 
.entry-content, 
.anthropic-card, 
.wp-block-columns {
    max-width: 1180px !important;
    width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. LOGO & TEXT SYNC: Snap them to the left edge */
.site-branding, 
.entry-content h1, 
.entry-content h2, 
.entry-content p {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* 5. THE SUBTEXT: Style for "Finding vulnerabilities..." inside the card */
.anthropic-card p.anthropic-subtext {
    font-family: "Times New Roman", Times, Georgia, serif !important;
    font-size: 19px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    max-width: 400px !important;
    margin: 0 auto 35px auto !important;
    line-height: 1.5 !important;
    text-align: center !important;
}
/* 6. ONLY THE BLACK CARD: Breakout, Layout & TIMING FIX */
.anthropic-card {
    background-color: #000000 !important;
    margin-top: 50px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* THE BREAKOUT: Forces the box to the edges of the monitor */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* THE CONTENT LOCK: Keeps your text aligned with the 1180px lane */
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    padding-left: calc(50vw - 590px + 80px) !important;
    padding-right: calc(50vw - 590px + 80px) !important;

    /* THE TIMING FIX: Forces the animation to wait for you to scroll */
    view-timeline-name: --revealing;
    view-timeline-axis: block;
    animation: expandFull linear both;
    animation-timeline: --revealing;
    animation-range: cover 10% cover 50%; 
}

/* 7. THE EXPANSION: Exact 1180px Start Size */
@keyframes expandFull {
    from {
        /* EXACT MATH: 100vw minus 50vw minus 590px forces it to start precisely at 1180px */
        clip-path: inset(0 calc(50vw - 590px) 0 calc(50vw - 590px) round 28px);
    }
    to {
        /* Opens fully to the extreme screen edges */
        clip-path: inset(0 0vw 0 0vw round 0px);
    }
}

/* 8. SOLID HEADER COVER: Prevents scrolling text from mixing with the logo */
.site-header, 
header.wp-block-template-part,
header {
    background-color: #f9f9f9 !important; /* Matches your site's off-white background */
    z-index: 9999 !important;             /* Forces the header to sit above all other content */
    position: sticky !important;          /* Keeps it locked at the top of the screen */
    top: 0 !important;
}

/* 9. THE CENTER LANE: Forces the title and grid away from the screen edge */
.frost-center-lane {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 40px !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 10. THE TITLE: Aligning 'Latest Research' */
.frost-center-lane h1, 
.frost-center-lane h2 {
    text-align: left !important;
    margin-top: 80px !important;
    margin-bottom: 40px !important;
    font-size: 38px !important;
    font-weight: 600 !important;
}
/* 11. THE BEIGE CARDS: Final Left-Alignment & Shape Polish */
.frost-news-card {
    background-color: #efefef !important;
    border-radius: 32px !important;
    padding: 50px 40px !important;
    height: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
    
    /* 1. This aligns the container content to the left */
    align-items: flex-start !important; 
    text-align: left !important;
}

/* 2. This 'Kill Switch' forces every heading and paragraph inside to the left */
.frost-news-card h1, 
.frost-news-card h2, 
.frost-news-card h3, 
.frost-news-card p, 
.frost-news-card div,
.frost-news-card span {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* 3. Forces 'Latest Research' heading to align with your logo */
.frost-center-lane h1, 
.frost-center-lane h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block !important;
}

.frost-news-card:hover {
    transform: translateY(-5px) !important;
}

/* Specifically targets all text blocks inside the card to kill the centering */
.frost-news-card h1, 
.frost-news-card h2, 
.frost-news-card h3, 
.frost-news-card p, 
.frost-news-card a {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Adjusts the 'Latest Research' heading to align with your top-left logo */
.frost-center-lane h1, 
.frost-center-lane h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.frost-news-card:hover {
    transform: translateY(-5px) !important;
}

/* Fixes the text alignment inside the card */
.frost-news-card * {
    text-align: left !important;
    margin-left: 0 !important;
}

.frost-center-lane {
    margin-top: 120px !important; /* This creates a premium 'gap' below the header */
}

/* 13. ABOUT PAGE CLEANUP: The final vanish */
.page-title, 
.entry-title, 
.wp-block-post-title, 
header.entry-header h1 {
    display: none !important;
}

.about-label {
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 10px !important;
    font-weight: 600 !important;
    opacity: 0.6;
}

/* Pushes the whole hero down so it's not hitting the logo */
.frost-center-lane {
    margin-top: 100px !important;
}

/* 15. THE JAILBREAK: Forces the outer group to span the entire monitor */
.frost-center-lane {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 16. THE RED LINE LOCK: Forces the columns to be exactly 1180px wide */
.frost-center-lane .wp-block-columns {
    width: 100% !important;
    max-width: 1180px !important; /* The exact width of your logo/header */
    margin-left: auto !important; /* Centers the 1180px box on the screen */
    margin-right: auto !important;
    padding-left: 20px !important; /* Safe padding for mobile */
    padding-right: 20px !important;
    gap: 80px !important;
    display: flex !important;
}

/* 17. TEXT ALIGNMENT: Pushes the text to the absolute left wall of the 1180px box */
.frost-center-lane h1, 
.frost-center-lane p, 
.frost-center-lane .about-label {
    text-align: left !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* 18. HEADING SCALE */
.frost-center-lane h1 {
    font-size: 80px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    word-break: keep-all !important;
}

/* 19. TOM'S PHOTO */
.tom-hero-photo img {
    width: 100% !important;
    max-width: 550px !important;
    height: auto !important;
    border-radius: 32px !important;
}

/* 20. CLOSE THE GAP: Pulls the hero up into the empty title space */
.frost-center-lane {
    margin-top: -180px !important; /* Adjust this number (e.g., -80px or -120px) to slide it exactly where you want it */
}

/* 21. CLOSE THE LABEL GAP */
.tom-name-label {
    margin-bottom: 5px !important; /* Pulls the role text right up to the name */
}


/* 5. RESEARCH PAGE TEXT CONSTRAINT */
.ff-aligned-text {
    max-width: 1180px !important; 
    width: 100% !important;
    margin: 0 auto !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    box-sizing: border-box !important;
    display: block !important;
}

.ff-aligned-text > * {
    max-width: 800px !important;
    margin-left: 0 !important;
}

/* 1. Flatten the multi-column row into a standard, centered block */
.ff-clean-center {
    display: block !important;
    width: 100% !important;
    max-width: 850px !important; /* Perfect width to match the content below */
    margin: 60px auto !important; /* The 'auto' tags lock it perfectly in the center */
}

/* 2. Strip the side-by-side column rules so they stack naturally */
.ff-clean-center .wp-block-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* 3. Force the header and paragraphs to line up dead-center */
.ff-clean-center h1,
.ff-clean-center p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Target every possible Meks / Typology identifier for the header sidebar button */
.mks-sidebar-toggle,
.mks-menu-toggle,
.header-sidebar-toggle,
.typology-sidebar-toggle,
header a[href*="sidebar"],
header [class*="sidebar-toggle"],
header [class*="sidebar-trigger"],
header [class*="menu-toggle"] {
    display: none !important;
}

/* Target the specific FontAwesome / graphic bar icon used by the theme framework */
header .fa-bars,
header .fa-navicon,
header .mks-icon,
header svg[data-icon="bars"],
header .mks-sidebar-action {
    display: none !important;
}