/* 🌍 General Styles */
:root {
    --primary-color: #497BA3;
    --secondary-color: #D4AF37;
    --dark-blue: #193B73;
    --dark-slate: #2c3e50;
    --alt-bg-color: #f1f5f9; /* Light shade of blue-gray */
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.6;
}

/* 🌍 Navigation Bar */
header {
    position: sticky;
    z-index: 9000;
    top: 0;
    background: #4978a3;
    padding: 10px 0; /* Added padding for better mobile spacing */
    text-align: center;
    display: flex; /* Ensure header can contain logo and nav */
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Style the logo container */
.logo-container {
    float: left; /* Push logo to the left */
    margin-left: 15px; /* Add spacing between logo and navigation */
    margin-right: 15px; /* Add spacing between logo and navigation */
    padding-top: 10px;
}

.site-icon {
    width: 75px; /* Adjust icon size */
    height: auto; /* Adjust icon size (same as width for proportion) */
    display: block;
}

.brand-text {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}


nav {
    padding: 20px 0;
    display: flex;
    flex-grow: 1; /* Allow nav to take available space */
    justify-content: center;
    align-items: center;
}
/* Basic nav styles */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.nav-main {
    margin: 0 auto; /* Centers the main links */
}

.nav-right {
    margin-left: auto; /* Pushes the language list to the far right */
    padding-right: 20px;
}

nav ul li {
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: #ffff; /* Adjust based on your theme */
    padding: 10px 5px;
    display: block;
    line-height: 1;
}

/* Dropdown menu styling */
.dropdown:hover .dropdown-menu {
    display: block;
}
/* Keep hover behavior, also show when JS adds .open */
.dropdown.open .dropdown-menu { display: block; }

.news-icon {
    width: 100%;
    max-width: 640px;
    height: auto;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #ffffff; /* Background of dropdown */
        z-index: 9999; /* Ensures it overlays other content */
        min-width: 150px;
        left: 0; /* Default alignment for other dropdowns */
    }

    /* Specific fix for Language dropdown on the far right */
    .nav-right .dropdown-menu {
        left: auto; /* Undo left alignment */
        right: 0;   /* Align right edge of menu to right edge of icon */
    }

    .dropdown-menu li {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 9999; /* Ensures it overlays other content */
    min-width: 150px;
}

.dropdown-menu li {
    padding: 5px 15px;
    text-align: left;
}

.dropdown-menu li a {
    padding: 5px 10px;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background-color: #f4f4f4; /* Highlight color for hover */
    color: #000;
}
nav ul li a:hover {
    color: #f4a261;
}

/* 📱 Responsive Navigation Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 32px; /* Made slightly larger for thumbs */
    cursor: pointer;
    padding: 0 15px;
    z-index: 9001;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show hamburger on mobile */
    }

    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #497BA3;
        flex-direction: column;
        display: none; /* Hide by default on mobile */
        padding: 0;
    }

    body.menu-open nav {
        display: flex; /* Show when toggle is clicked */
    }

    nav ul.nav-main,
    nav ul.nav-right {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    nav ul li {
        width: 100%;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    nav ul li a {
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile Dropdowns */
    .dropdown-menu {
        position: static; /* Stack dropdowns vertically on mobile */
        width: 100%;
        box-shadow: none;
        background: #3a6282; /* Slightly darker to show hierarchy */
    }
}
/* Keep your existing :hover behavior on desktop,
   but also show submenu when JS adds .open */
.dropdown.open > .dropdown-menu {
    display: block;
}

/* Accessibility: make tap targets comfy */
nav a {
    display: inline-flex;
    align-items: center;
}

/* 🎙️ Hero Section */
#hero {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 20px 20px;
}

#hero h1 {
    font-size: 36px;
}

.featured-episode {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    margin: 20px auto;
    max-width: 1000px;
    border-radius: 8px;
}

.featured-episode img {
    width: 100%;
    border-radius: 8px;
}
.featured-episode video {
    width: 100%;
    max-width: 1000px;
    height: auto;
}
    .listen-now {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 15px;
        background: #D4AF37;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .listen-now:hover {
        background: #C5A028;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

/* General Section */
#news {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9;
}

/* Grid Layout */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Spacing between grid items */
    max-width: 1200px;
    margin: 0 auto; /* Center the grid */
    padding: 20px;
}

/* Grid Box */
.grid-box {
    padding: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.show-summary {
    background-color: #dddddd;
    color: #000;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Article Layout */
.articles {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.article {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
.article h4 {
    font-size: 1.2rem;
    margin-bottom: 0px;
    color: #333;
}

.article:last-child {
    border-bottom: none; /* Remove underline for the last article */
}

/* Article Image */
.article img {
    width: 125px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
}

/* Article Content */
.article-content {
    text-align: left;
    flex: 1; /* Take up full remaining horizontal space */
}

.article-content h4 {
    font-size: 1rem;
    margin-bottom: 0px;
    color: #345;
}

.article-content p {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: #666;
}

.article-content a {
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.article-content a:hover {
    text-decoration: underline;
}

.main-brief-image {
    width: 100%;
    height: auto;
    max-width: 640px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr; /* Single column for smaller screens */
    }

    .article {
        flex-direction: column; /* Stack image and text for narrow screens */
        align-items: flex-start;
    }

    .article img {
        width: 100%; /* Full width for smaller screens */
        height: auto;
    }
}

/* Dark Background for Latest Interviews */
#latest-interviews {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: #ffffff; /* White text for contrast */
    padding: 40px 20px; /* Add padding for better spacing */
}

/* Center the Section Header */
#latest-interviews h2 {
    text-align: center; /* Center-align header text */
    font-size: 2rem; /* Large font size for visibility */
    color: #f9f9f9; /* Bright white text */
    margin-bottom: 30px; /* Space below the header */
}

/* Two Column Grid Styling */
.interviews-container {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 30px; /* Space between items */
    max-width: 1200px; /* Restrict container width */
    margin: 0 auto; /* Ensure the entire container is centered */
    justify-items: center; /* Center the items inside each grid cell */
    align-items: center; /* Vertically center-align content if needed */
}

/* Individual Interview Boxes */
.interview {
    text-align: center; /* Center-align text inside each box */
    padding: 20px; /* Add padding around the content */
    max-width: 500px; /* Restrict the width of each box */
    border-radius: 10px; /* Rounded corners for the boxes */
    background-color: #2a2a2a; /* Slightly lighter dark color for the boxes */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Subtle box shadow for depth */
    overflow: hidden; /* Ensure no content overflows */
}

/* Image Styling */
.interview-image {
    max-width: 100%; /* Prevent images from exceeding parent width */
    height: auto; /* Maintain proper aspect ratio */
    border-radius: 10px; /* Rounded edges */
    margin-bottom: 15px; /* Add space below images */
}

/* Text Styling */
.interview h3 {
    font-size: 1.5rem; /* Header text size */
    color: #ffffff; /* White text */
    margin-bottom: 10px; /* Add space below headers */
}

.interview p {
    color: #cccccc; /* Grey text for body paragraphs */
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .interviews-container {
        grid-template-columns: 1fr; /* Switch to single column for small screens */
        justify-items: center; /* Ensure items remain centered */
    }

    #latest-interviews h2 {
        font-size: 1.5rem; /* Adjust header size for smaller screens */
    }
}

/* 💬 Community & Shop */
#community {
    padding: 40px 20px;
    background: white;
    text-align: center;
}

#community a {
    color: #e76f51;
    font-weight: bold;
}

#community a:hover {
    text-decoration: underline;
}
#shop {
    padding: 40px 20px;
    background: white;
    text-align: center;
}

#shop a {
    color: #e76f51;
    font-weight: bold;
}

#shop a:hover {
    text-decoration: underline;
}
/* 📌 Footer */
footer {
    background: #222;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    color: white;
    text-align: center;
    padding: 20px;
}

/* 🌙 Dark Mode Styles */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-mode header,
.dark-mode footer {
    background-color: #181818;
}

.dark-mode nav ul li a {
    color: #f4a261;
}

.dark-mode .category,
.dark-mode .interview-card {
    background: #222;
    color: #e0e0e0;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1);
}

    .dark-mode .listen-now {
        background: #D4AF37;
        color: #1a1a1a;
    }

    .dark-mode .listen-now:hover {
        background: #C5A028;
    }

/* 🌙 Dark Mode Toggle Button */
#dark-mode-toggle {
    position: fixed;
    top: 15px;
    right: 20px;
    background: #f4a261;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

#dark-mode-toggle:hover {
    background: #e76f51;
}

/* Footer Styles */
#footer {
    position: sticky;
    z-index: 1000;
    bottom: 0;
    background-color: #497BA3;
    color: #fff; /* White text for contrast */
    text-align: center; /* Center-align the text */
    padding: 15px 10px; /* Space around the text */
    font-size: 0.9rem; /* Slightly smaller text size */
}

#footer .footer-content p {
    margin: 0; /* Remove default margins to keep things tidy */
    font-family: Arial, sans-serif; /* Use a clean, readable font */
}
/* Grid Layout */
#all-episodes {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#all-episodes h1 {
    font-size: 36px;
}
.episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px;
    margin: 0 auto;
}
.guest-grid {
    display: grid;
    color: black;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px;
    margin: 0 auto;
}
/* Episode Card */
.episode-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.episode-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.episode-card img {
    width: 100%;
    height: auto;
    display: block;
}

.episode-card-content {
    padding: 20px;
}
.guest-card-content {
    padding: 20px;
}
.episode-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

.episode-card .guests {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
}

.episode-card .summary {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}
.episode-card p {
    color: #000;
}

/* Tags Section */
.tags {
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.tags span {
    display: inline-block;
    background: #007bff;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: background 0.3s ease;
}

.tags span:hover {
    background: #0056b3;
}


/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
    .episode-card h3 {
        font-size: 1.2rem;
    }

    .episode-card .guests,
    .episode-card .summary,
    .tags span {
        font-size: 0.85rem;
    }

    .episode-card a {
        font-size: 0.85rem;
    }
}
#one-brief {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#one-brief h1 {
    font-size: 36px;
}

#one-episode {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#one-episode h1 {
    font-size: 36px;
}
.brief-container {
    max-width: 1280px;
    text-align: left;
    margin: 0 auto;
    background: #ddd;
    color: #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.episode-container {
    max-width: 1200px;
    text-align: left;
    margin: 0 auto;
    background: #fff;
    color: #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-container,
.podcast-container {
    margin-bottom: 20px;
}

.transformation-container {
    max-width: 1200px;
    margin: 2rem auto;
    background: #497ba3;
    color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.transformation-container h2 {
    color: #ffffff;
    border-bottom: 2px solid #497BA3;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

#GraphicRep {
    background-color: #ffffff;
    color: #123456;
}
.highlight-box {
    background: #f8fafc;
    color: #000;
    border-left: 5px solid #497BA3;
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
}

.video-container iframe {
    width: 100%;
    height: 720px;
    border: none;
    border-radius: 10px;
}

.watch-on-youtube {
    margin-top: 10px;
    text-align: center;
}

.watch-on-youtube a {
    text-decoration: none;
    color: #007BFF;
    font-weight: bold;
    transition: color 0.3s ease;
}

.watch-on-youtube a:hover {
    color: #0056B3;
}

.podcast-container audio {
    width: 100%;
    height: 40px;
}

.tags {
    margin-bottom: 15px;
}

.tags span {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: background 0.3s ease;
}

.tags span:hover {
    background: #0056B3;
}

.guests {
    margin-bottom: 20px;
}

.guests a {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
    color: #007BFF;
    padding: 4px 8px;
    border: 1px solid #007BFF;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

.guests a:hover {
    background: #007BFF;
    color: white;
}

#one-episode,
section:has(.show-summary) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Improve Typography and readability */
.show-notes {
    text-align: left; /* Ensure it is not centered */
    line-height: 1.6;
    color: #333;
    background: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1200px; /* Optional: narrower text is easier to read than ultra-wide lines */
    margin: 40px 0; /* Space it out from summary */
}

.show-notes h2 {
    margin-top: 2em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}

.show-notes p {
    margin-bottom: 1.5em;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .video-container iframe {
        height: auto;
    }
}
#one-guest {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#one-guest h1 {
    font-size: 36px;
}
.guest-container {
    text-align: left;
    max-width: 1280px;
    margin: 0 auto;
    background: #fff;
    color: #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

.profile-header img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-right: 20px;
}

.profile-header .guest-info {
    flex: 1;
}

.profile-header .linkedIn-link {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #007BFF;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    transition: background 0.3s ease;
}

.profile-header .linkedIn-link:hover {
    background: #0056B3;
}

.biography {
    margin-bottom: 20px;
    line-height: 1.6;
}
#guests {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#guests h1 {
    font-size: 36px;
}
.guests-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
}
.guests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px;
    margin: 0 auto;
}
.guest-card {
    display: flex;
    align-items: center;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.guest-card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-right: 20px;
}

.guest-info {
    flex: 1;
}

.guest-info h3 {
    margin: 0;
    margin-bottom: 5px;
    font-size: 1.2rem;
    color: #333;
}

.guest-info h3 a {
    text-decoration: none;
    color: #007BFF;
    transition: color 0.3s ease;
}

.guest-info h3 a:hover {
    color: #0056B3;
}

.guest-info .topics {
    margin-bottom: 10px;
}

/* Container for the tags */
.guest-card .tags {
    display: flex;          /* or inline-flex if you prefer */
    flex-wrap: wrap;        /* allow wrapping to multiple lines */
    gap: 0.25rem 0.5rem;    /* optional spacing between tags */
    margin-top: 0.5rem;     /* optional */
}

/* The individual tag links */
.guest-card .tags a {
    display: inline-flex;        /* keeps span + text together */
    align-items: center;
    max-width: 100%;             /* don't overflow the card */
    white-space: normal;         /* allow text to wrap if needed */
    text-decoration: none;       /* style as you like */
}

.guest-info .topics span {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    transition: background 0.3s ease;
}

.guest-info .topics span:hover {
    background: #0056B3;
}

.guest-info .episode-count {
    font-size: 0.9rem;
    color: #555;
}

/* Media Queries for Mobile */
@media (max-width: 600px) {
    .guest-card {
        flex-direction: column;
        text-align: center;
    }

    .guest-card img {
        margin: 0 auto 10px auto;
    }

    .guest-info {
        text-align: center;
    }
}
#all-guests {
    background: linear-gradient(180deg, #497BA3, #193B73);
    color: white;
    text-align: center;
    padding: 50px 20px;
}

#all-guests h1 {
    font-size: 36px;
}
.search-results-count {
    font-size: 0.8rem;
    font-style: italic;
}

.show-card {
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 3rem auto;
    flex-wrap: wrap;
}
.show-card.reverse {
    flex-direction: row-reverse;
}
.show-image img {
    max-width: 320px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.show-content {
    flex: 1;
    min-width: 260px;
}
.show-content h2 {
    margin-top: 0;
}
.show-links {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}
.show-links .btn {
    background: #2563eb;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
}
.show-links .btn:hover {
    background: #1e40af;
}
@media (max-width: 768px) {
    .show-card {
        flex-direction: column;
        text-align: center;
    }
    .show-card.reverse {
        flex-direction: column;
    }
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 2rem 0;
    justify-items: center;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pillar-hero-highlight {
    max-width: 800px;
    margin: 1rem auto;
    font-size: 1.25rem;
    font-weight: bold;
    color: #8b6508;
}

.pillar-hero-bullets {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    display: inline-block;
    color: white;
    list-style: circle;
    line-height: 1.6;
}

.pillar-domain-grid {
    display: grid;
    grid-template-areas:
        'strat strat'
        'org proc'
        'digi phys';
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.pillar-domain-strat { grid-area: strat; border-top: 5px solid #003366; }
.pillar-domain-org   { grid-area: org;   border-top: 5px solid #228B22; }
.pillar-domain-proc  { grid-area: proc;  border-top: 5px solid #ff6f00; }
.pillar-domain-digi  { grid-area: digi;  border-top: 5px solid #6a0dad; }
.pillar-domain-phys  { grid-area: phys;  border-top: 5px solid #708090; }

.pillar-domain-grid h3 {
    margin-top: 0;
    font-size: 1.3rem;
}
.pillar-header-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    justify-content: center;
}

.pillar-header-diagram {
    flex: 0 0 200px;
    text-align: center;
}

.pillar-header-definition {
    flex: 1;
    min-width: 280px;
}

.authoritative-definition {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #ffffffff;
    margin: 0;
    border-left: 4px solid #8b6508;
    padding-left: 20px;
}

/************************************************************
  HOST PROFILE PAGE STYLES
*************************************************************/

/* ---------------- HERO ---------------- */
.host-hero {
    text-align: center;
    padding: 4rem 1rem 2rem;
    background: #f5f9ff;
    color: white;
}

.host-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.3rem;
    color: white;
}

.host-hero .her0d213fo-subtitle {
    font-size: 1.15rem;
    max-width: 760px;
    margin: 0 auto;
    color: white;
    line-height: 1.6;
}


/* ---------------- MAIN LAYOUT ---------------- */
.host-main {
    padding: 3rem 1.5rem;
}

.host-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
    justify-content: center;
}


/* ---------------- PHOTO + CTA ---------------- */
.host-photo {
    flex: 0 0 280px;
    text-align: center;
}

.host-photo img {
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 4px solid #fff;
}

.host-photo-actions {
    margin-top: 1.5rem;
}

.primary-cta {
    display: inline-block;
    background: #003366;
    color: #fff;
    padding: 0.8rem 1.3rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.primary-cta:hover {
    background: #00214c;
}


/* ---------------- BIO ---------------- */
.host-bio {
    flex: 1;
    min-width: 300px;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #ffffff;
}


/* ---------------- QUOTE ---------------- */
.host-quote {
    margin: 0 0 1.5rem;
    padding: 1.2rem 1.5rem;
    border-left: 4px solid #193B73;
    background: #eef4fb;
    border-radius: 6px;
}

.host-quote blockquote {
    margin: 0;
    font-style: italic;
    color: #193B73;
    font-weight: 500;
}


/* ---------------- PILLARS SECTION ---------------- */
.host-pillars {
    padding: 3rem 1.5rem;
    background-color: #f8fafc;
}

.section-title {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 1.7rem;
    font-weight: 600;
    color: #0d213f;
}

/* grid container inherited – we just reinforce spacing */
.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.grid-box {
    flex: 0 0 300px;
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-top-width: 4px;
    border-top-style: solid;
}

.grid-box h3 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.25rem;
    color: #0d213f;
    font-weight: 600;
}

.grid-box p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}

/* brand-aligned pillar border accents */
.intel-pillar { border-top-color: #003366; }
.vanderbilt-pillar { border-top-color: #8b6508; }
.opengroup-pillar { border-top-color: #497BA3; }

.brand {
    margin: 10px;
}
.brand img {
    width: 50px;
}

/* ---------------- RESPONSIVE ADJUSTMENTS ---------------- */
@media (max-width: 768px) {

    .host-hero h1 {
        font-size: 2rem;
        color: white;
    }

    .host-layout {
        gap: 30px;
    }

    .primary-cta {
        width: 100%;
        text-align: center;
    }

    .grid-box {
        flex: 1 1 calc(100% - 20px);
    }
}

/************************************************************
  ABOUT PAGE STYLES
*************************************************************/

/* ---------- HERO ---------- */

.about-hero {
    text-align: center;
    padding: 4rem 1rem 2.5rem;
    background: #f5f9ff;
}

.about-hero h1 {
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    color: #0d213f;
}

.about-hero .hero-subtitle {
    font-size: 1.15rem;
    max-width: 760px;
    margin: 0 auto;
    color: #ffffff;
    line-height: 1.6;
}

/* ---------- GENERIC LAYOUT HELPERS ---------- */

.center-text {
    text-align: center;
}

.center-text.narrow,
.center-text.narrow p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Slightly tighter for mission/intro blocks */
.about-mission .center-text,
.about-serve .center-text {
    max-width: 900px;
    margin: 0 auto;
}

/* ---------- MISSION / PROVIDE / VALUES / SERVE ---------- */

.about-mission {
    padding: 3rem 1.5rem 2.5rem;
}

.about-provide {
    padding: 3rem 1.5rem;
}

.about-values {
    padding: 3rem 1.5rem;
}

.about-serve {
    padding: 3rem 1.5rem 4rem;
}

/* Reuse global section title, but ensure spacing */
.about-mission h2,
.about-provide .section-title,
.about-values .section-title,
.about-serve .section-title {
    text-align: center;
    margin-bottom: 1.75rem;
}

/* Refine about “What We Provide” cards */
.about-box {
    border-top: 4px solid #193B73;
}

/* You can differentiate by nth-child if you want subtle color variation */
.about-provide .grid-box:nth-child(2) { border-top-color: #497BA3; }
.about-provide .grid-box:nth-child(3) { border-top-color: #B8860B; }
.about-provide .grid-box:nth-child(4) { border-top-color: #6a0dad; }

/* ---------- PRINCIPLES LIST ---------- */

.principles {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 840px;
}

.principles li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 1.6rem;
    line-height: 1.6;
    color: #123456;
}

.principles li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #193B73;
    font-size: 1.3rem;
    line-height: 1.2;
}

/* ---------- CARDS FOR “WHO WE SERVE” ---------- */

.about-serve .grid-container {
    margin-top: 1.5rem;
}

.about-serve .grid-box {
    text-align: center;
    border-top: 4px solid #497BA3;
}

/* ---------- RESPONSIVE TWEAKS ---------- */

@media (max-width: 768px) {
    .about-hero {
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .about-hero h1 {
        font-size: 2rem;
    }

    .about-hero .hero-subtitle {
        font-size: 1.05rem;
    }

    .about-mission,
    .about-provide,
    .about-values,
    .about-serve {
        padding-inline: 1rem;
    }

    .principles {
        padding-inline: 0.5rem;
    }
}

.pillar-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.pillar-related ul.related-links {
    list-style: none;
    padding: 0;
    margin: 1rem auto 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.pillar-related ul.related-links li a {
    color: #193B73;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.pillar-related ul.related-links li a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

.breadcrumbs {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: #334155;
}

.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: #193B73;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs li::after {
    content: "/";
    margin-left: 0.5rem;
    color: #94a3b8;
}

.breadcrumbs li:last-child::after {
    content: "";
}

/* --- HERO AREA --- */
.hero {
    padding: 1rem 2rem 2rem;
    text-align: center;
}

.hero-subtitle {
    max-width: 850px;
    margin: 0.5rem auto 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.6;
}


/* --- GRID LAYOUT --- */
.grid-container {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin-top: 2rem;
}

.grid-box {
    background: #fff;
    color: #123456;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(0,0,0,0.12);
}

.section-title {
    font-size: 1.9rem;
    text-align: center;
    margin-bottom: 1rem;
    color: #ffffff;
}

/* --- CTA BUTTONS --- */
.primary-cta {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: 8px;
    background: #193B73;
    color: white !important;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1.2rem;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.primary-cta:hover {
    opacity: 0.9;
    background: #0F274C;
}

/* --- FAQ INDENTATION & SPACING --- */
.faq-section {
    margin-top: 3rem;
}

.faq-section h3 {
    margin-bottom: 0.75rem;
}

.faq-section details {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 4px solid #193B73;
}


.breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: #193B73;
    text-decoration: none;
    font-weight: 500;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs li::after {
    content: "/";
    margin-left: 0.5rem;
    color: #94a3b8;
}

.breadcrumbs li:last-child::after {
    content: "";
}

/* --- ODXA DOMAIN TAG BADGES (optional use) --- */
.domain-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    margin: 0.25rem 0.3rem 0 0;
    border-radius: 6px;
    font-size: 0.75rem;
    background: #E2E8F0;
    color: #1E293B;
    font-weight: 600;
}

.domain-badge.digital { background: #c6e1ff; }
.domain-badge.physical { background: #ffe4c4; }
.domain-badge.process { background: #e9d5ff; }
.domain-badge.organizational { background: #d1f7c4; }
.domain-badge.strategic { background: #fbcfe8; }

.meta {
    margin-top: 1rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #56789a;
}
/* --- UL spacing for maturity & dependencies --- */
.metadata-list {
    margin-top: 0.75rem;
    padding-left: 1.1rem;
}

.metadata-list li {
    margin-bottom: 0.25rem;
}

.gear-layout-container {
    padding: 30px;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

.gear-layer-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    height: 100%;
    width: 100%;
}

.gear-layer-box-dark {
    color: black;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 5em;
    border-radius: 8pt;
}

.gear-layer-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 5em;
    border-radius: 8pt;
}

.gear-layer-title {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    flex-grow: 1;
    text-align: center;
    align-self: flex-start;
    font-size: x-large;
}
.gear-layer-title-dark {
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    flex-grow: 1;
    text-align: center;
    align-self: flex-start;
    font-size: x-large;
}

.gear-layer-children {
    height: 100%;
    width: 100%;
}

.week-arc { max-width: 920px; margin: 0 auto 1.25rem; }

.week-grid{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

@media (max-width: 1024px){
    .week-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
    .week-grid{ grid-template-columns: 1fr; }
}

.week-card {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    text-align: left;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    height: 100%; /* Ensure all cards in a row are same height */
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* 1. Day at the very top */
.week-day {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: #193B73;
    margin-bottom: 2px;
}

.week-card-top {
    padding: 12px;
    background: #f8fafc; /* Subtle background for the header area */
    border-bottom: 1px solid #eee;
}

/* 3. Standardized Text Location */
.week-card-body {
    padding: 16px;
    flex-grow: 1;         /* Pushes content to fill space */
    display: flex;
    flex-direction: column;
}

.week-title {
    font-weight: 800;
    margin-bottom: 8px;
    min-height: 2.8em;    /* Reserve space for 2 lines of title so text starts at same spot */
    line-height: 1.2;
}

.week-summary {
    opacity: 0.85;
    font-size: 0.95rem;
    line-height: 1.5;
    /* Limit summary to 3 lines for clean alignment */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.week-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
}

.week-card.is-selected{
    border-color: rgba(73,123,163,.75);
    box-shadow: 0 10px 22px rgba(73,123,163,.22);
}

.week-card:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.week-card-top{
    padding:12px 12px 8px;
}

.week-badge{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}

.week-day{ font-weight:800; }
.week-intent{ opacity:.85; font-size:.9rem; }
.week-show{ margin-top:6px; font-weight:700; }

.week-image{
    width:100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display:block;
}

.week-card-body{ padding:12px; }
.week-title{ font-weight:800; margin-bottom:4px; }
.week-date{ opacity:.75; font-size:.9rem; margin-bottom:8px; }
.week-summary{ opacity:.95; }

.week-details{
    margin-top: 16px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:16px;
    padding: 14px;
}
.week-details-content{
    background:#fff;
    color: #444444;
}

.week-details-inner{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items:start;
}

@media (max-width: 768px){
    .week-details-inner{ grid-template-columns: 1fr; }
}

.week-details-image{
    width:100%;
    border-radius:12px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display:block;
}

.week-details-title{ margin:0 0 6px; }
.week-details-meta{ opacity:.75; margin-bottom: 10px; }
.week-details-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.week-details-guests{ margin-top: 10px; }

/* ===========================
   Editorial Brief page styles
   (for brief.ejs “Editorial Brief” layout)
   =========================== */

.brief-editorial {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

/* HERO */
.brief-hero {
    padding: 24px 0 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.brief-hero h1 {
    margin: 0;
    line-height: 1.15;
    font-size: 2rem;
    color: #0d213f;
}

.brief-date {
    font-weight: 600;
    opacity: 0.8;
}

@media (max-width: 600px) {
    .brief-hero h1 {
        font-size: 1.6rem;
    }
}

.brief-subtitle {
    margin: 10px 0 14px;
    font-size: 1.05rem;
    opacity: 0.9;
}

.brief-glance {
    margin: 14px 0 14px;
}

.brief-glance p {
    margin: 0 0 10px;
}

.brief-glance .architect-take {
    border-left: 3px solid rgba(0,0,0,0.12);
    padding-left: 12px;
    margin-top: 10px;
    opacity: 0.95;
}

/* CTAs */
.brief-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 10px;
}

/* Pillar chips (anchors or tags) */
.pillar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.pillar-chips a {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.15);
    text-decoration: none;
    font-size: 0.95rem;
    opacity: 0.95;
}

.pillar-chips a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* SECTION HEADERS */
.brief-top-stories,
.brief-pillars,
.brief-handoff {
    padding: 18px 0 0;
}

.brief-top-stories h2,
.brief-pillars h2,
.brief-handoff h2 {
    margin: 0 0 12px;
}

/* TOP STORIES (editorial picks) */
.top-story {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid rgba(0,0,0,0.10);
}

.top-story:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.top-story img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.top-story-content h3 {
    margin: 0 0 6px;
    line-height: 1.25;
}

.top-story-content p {
    margin: 0 0 10px;
    opacity: 0.95;
}

.story-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.story-links a {
    text-decoration: none;
}

.story-links a:hover {
    text-decoration: underline;
}

.story-pillar {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* FULL COVERAGE BY PILLAR */
.pillar-section {
    padding: 14px 0 6px;
    border-top: 1px solid rgba(0,0,0,0.10);
}

.pillar-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.pillar-section h3 {
    margin: 0 0 10px;
}

.pillar-article {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    padding: 12px 0;
}

.pillar-article + .pillar-article {
    border-top: 1px solid rgba(0,0,0,0.08);
}

.pillar-article img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.pillar-article-content h4 {
    margin: 0 0 6px;
    line-height: 1.25;
}

.pillar-article-content p {
    margin: 0 0 10px;
    opacity: 0.95;
    max-width: 85ch;
}

/* HANDOFF CTA */
.brief-handoff {
    margin-top: 8px;
    padding-bottom: 18px;
    border-top: 1px solid rgba(0,0,0,0.10);
}

.brief-handoff p {
    max-width: 78ch;
    opacity: 0.95;
}

/* RESPONSIVE */
@media (max-width: 740px) {
    .top-story,
    .pillar-article {
        grid-template-columns: 1fr;
    }

    .top-story img,
    .pillar-article img {
        border-radius: 14px;
    }
}
/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.9rem;
    margin: 0 0 1rem;
    color: rgba(0,0,0,0.6);
}

.breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.breadcrumbs li::after {
    content: "›";
    margin-left: 0.35rem;
    opacity: 0.6;
}

.breadcrumbs li:last-child::after {
    content: "";
}

/* Slight polish on hero */
.brief-hero {
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.brief-hero h1 {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
}

.brief-date {
    font-weight: 600;
    opacity: 0.8;
}

.brief-glance {
    margin-top: 1rem;
    max-width: 60rem;
    font-size: 1rem;
    line-height: 1.6;
}

/* Chips */
.pillar-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pillar-chips a {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.1);
    text-decoration: none;
}

/* Make stories feel like cards if not already */
.top-story,
.pillar-article {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr);
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.top-story img,
.pillar-article img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

@media (max-width: 700px) {
    .top-story,
    .pillar-article {
        grid-template-columns: 1fr;
    }

    .brief-hero h1 {
        font-size: 1.6rem;
    }
}

.brief-editorial {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
}

/* HERO layout */
.brief-hero {
    padding: 22px 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.75rem;
    align-items: flex-start;
}

.brief-hero-main h1 {
    margin: 0;
    line-height: 1.15;
    font-size: 2rem;
}

.brief-date {
    font-weight: 600;
    opacity: 0.8;
}

.brief-glance {
    margin-top: 1rem;
    max-width: 60rem;
    line-height: 1.6;
}

.brief-ctas {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Chips */
.pillar-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pillar-chips a {
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.12);
    text-decoration: none;
}

/* Media column */
.brief-hero-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-audio iframe {
    width: 100%;
    border-radius: 10px;
}

/* Mobile: stack hero, keep media full width */
@media (max-width: 900px) {
    .brief-hero {
        grid-template-columns: 1fr;
    }

    .brief-hero-side {
        order: 3; /* Title + summary first, then media, then chips */
    }

    .brief-hero-main h1 {
        font-size: 1.6rem;
    }
}