:root {
    --primary-red: #E63946;
    /* Approximate red/orange from image */
    --primary-orange: #EC4E20;
    --dark-blue: #1D3557;
    --text-grey: #666;
    --bg-light: #f9f9f9;
    --card-red: #E63920;
    --card-purple: #7D4E57;
    --card-blue: #32628d;
    --card-midnight: #1a2035;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form Success Message */
.success-message {
    display: none;
    background: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #c3e6cb;
}

.success-message h2 {
    margin-bottom: 10px;
    color: #155724;
}

body {
    font-family: var(--font-body);
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Header */
.main-header {
    background: #fff;
    padding: 20px 0;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    overflow-y: visible;
}

.logo-circle {
    background: var(--primary-orange);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Brush Script MT', cursive;
    /* Fallback for the script font */
}

/* Menu Toggle (Hamburger) - Hidden on desktop */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 10001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background: #555;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


.main-nav>ul {
    display: flex;
    gap: 20px;
    font-size: 8px;
    text-transform: uppercase;
    color: #555;
    flex-wrap: wrap;
    max-width: 100%;
    overflow-y: visible;
}

/* Explicitly set link font size to prevent variations across pages */
.main-nav ul li a,
.about-nav ul li a {
    font-size: 13px !important;
    font-weight: 500 !important;
}

.btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-block;
}

.btn-primary {
    background: #1a203e;
    color: white;
}

/* Hero */
.hero-section {
    text-align: center;
    padding: 80px 0;
}

.circle-graphic-placeholder {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    /* Placeholder gradient */
    border-radius: 50%;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 4rem;
    font-family: 'Brush Script MT', cursive;
}

.hero-text h1 {
    font-weight: 400;
    letter-spacing: 2px;
    color: #555;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hero-item {
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.hero-item:hover {
    transform: scale(1.1);
    font-weight: 600;
}

.item-media {
    color: var(--card-red);
}

.item-production {
    color: #6d6d80;
}

/* Grey */
.item-events {
    color: var(--card-midnight);
}

.item-exhibitions {
    color: #964B00;
}

/* Digital Residence */
.digital-residence {
    padding: 60px 0;
}

.services-intro {
    padding-right: 20px;
    /* Add some space between text and next card */
}

.services-header {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 30px;
}

.services-header h2 {
    color: var(--primary-orange);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 3rem;
    line-height: 1.1;
}

.services-intro p {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.services-intro {
    grid-column: 1 / 2;
    /* Occupies first slot in grid conceptually, but design has it separate text block. Let's readjust layout. */
    /* The design shows the text block NEXT to the cards in the first row. check image. */
    /* Actually the text block is top left. The first row has 3 cards next to it? No, looking closely at image:
       Row 1: Text Block (left) | Card (Media) | Card (Digital Mkt) | Card (Exhibitions)
       Wait, that's 4 columns?
       Let's re-examine image.
       "OUR DIGITAL RESIDENCE" title + text is on the left.
       To the right of it are 3 small cards? 
       Actually, it looks like:
       Row 1: [Text Block] [Media Sol] [Digital Mkt] [Exhibitions]
       Row 2: [Design] [Production] [Web Dev] [Strategic]
       So it's a 4-column grid.
       Let's adjust.
    */
    display: block;
    /* Make it a block inside the grid item if we treat it as one? */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.services-intro {
    grid-column: span 1;
    display: block;
}

.service-card {
    height: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.service-card h3 {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    z-index: 2;
}

.service-card a {
    font-size: 0.8rem;
    z-index: 2;
}

/* Card Colors */
.service-card.red {
    background-color: var(--card-red);
}

.service-card.purple {
    background-color: var(--card-purple);
}

.service-card.grey {
    background-color: #6d6d80;
}

.service-card.blue {
    background-color: var(--card-blue);
}

.service-card.midnight {
    background-color: var(--card-midnight);
}

/* Case Studies */
.case-studies {
    background-color: #f4f4f4;
    /* Light grey bar top? No, section header seems separate. */
    /* Actually the dark slider is the main part. */
}

.case-studies .section-label {
    padding: 20px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
}

.case-study-slider {
    background: #333;
    padding: 0 40px;
    color: white;
    min-height: 480px;
    transition: transform 0.3s ease;
}

.case-study-slider:hover {
    transform: scale(1.01);
}

.case-study-content {
    text-align: center;
}

.case-study-content h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.case-link {
    color: white;
    text-decoration: underline;
}

/* Clients */
.clients-section {
    padding: 60px 0;
    text-align: center;
}

.clients-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
}

.client-logo {
    min-width: 150px;
    /* Prevent shrinking */
    width: 150px;
    height: 100px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #333;
    flex-shrink: 0;
    /* Important: Don't shrink */
    background: white;
    /* Ensure bg is solid if overlapping happens (unlikely here) */
    font-weight: 500;
    font-size: 0.9rem;
}

.client-logo img {
    max-width: 90%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Footer */
.main-footer {
    background-color: #e84a29;
    /* Red/Orange footer */
    color: white;
    padding: 60px 0;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
}

.footer-brand h2 {
    font-size: 1.5rem;
    margin: 20px 0;
    max-width: 300px;
    font-weight: 600;
}

.logo-circle.white {
    background: white;
    color: var(--primary-orange);
}

.btn-white {
    background: white;
    color: var(--primary-orange);
    margin-bottom: 40px;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-contact p {
    margin-bottom: 20px;
}

.social-icons span {
    margin-right: 10px;
    cursor: pointer;
}

/* Social Icons Container */
.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* Icon links */
.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* background: rgba(255, 255, 255, 0.15); */
    color: white;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Hover effect */
.social-icons a:hover {
    /* background: white; */
    transform: translateY(-3px) scale(1.1);
    /* box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); */
}

/* Individual brand colors on hover (optional) */
/* Fallback if using spans instead of icons - hide the old text */
.social-icons span[class*="fa-"] {
    display: inline-block;
}

/* Dropdown Menu Styles */
.main-nav>ul>li,
.about-nav>ul>li {
    position: relative;
    display: inline-block;
}

.dropdown-arrow {
    font-size: 0.5em;
    margin-left: 2px;
    opacity: 0.7;
}

.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 160px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all 0.15s ease;
    z-index: 9999;
    pointer-events: none;
    margin-top: 0;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 6px 12px;
    color: #555;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 400;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f8f8f8;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background: #d63422;
    color: white;
}

.dropdown:hover>a {
    color: #d63422;
}

/* Make dropdown trigger area larger for better mouse interaction */
.dropdown>a {
    display: inline-block;
    padding: 2px 0;
}

/* Responsive dropdown adjustments */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 10000;
        transition: right 0.3s ease;
        padding: 80px 20px 20px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav>ul {
        flex-direction: column;
        gap: 0;
    }

    .main-nav>ul>li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-nav>ul>li>a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f8f8f8;
        border: none;
        display: none;
        /* Hide by default on mobile, click to toggle? Or just show? User said "when mouse point" but on mobile there is no mouse point. Let's make it show on click or just show all. */
        width: 100%;
        padding-left: 20px;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .main-nav ul li,
    .about-nav ul li {
        position: static;
        display: block;
    }

    .header-container {
        flex-direction: row;
        /* Keep logo and hamburger on same line */
        justify-content: space-between;
        padding: 10px 20px;
    }

    .main-header .btn-primary {
        display: none;
        /* Hide 'Get a quote' from header on mobile? Or put inside menu. Let's keep it clean. */
    }
}


/* About Us Page Styles */

@media (max-width: 480px) {
    .clients-grid {
        gap: 10px;
    }

    .clients-grid.box-grid {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .clients-grid {
        gap: 10px;
    }

    .clients-grid.box-grid {
        gap: 10px;
    }
}

/* About Us Page Styles */

/* About Nav */
.about-nav {
    position: absolute;
    top: 20px;
    right: 40px;
    z-index: 10;
}

.about-nav>ul {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    align-items: center;
}

.about-nav a {
    color: #333;
    text-transform: uppercase;
}

.about-nav a.active {
    font-weight: bold;
}

.mini-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
}

/* About Hero */
.about-hero-wrapper {
    position: relative;
    margin-bottom: 60px;
}

.about-hero {
    display: flex;
    min-height: 500px;
}

.hero-left-col {
    width: 35%;
    background-color: var(--primary-orange);
    color: white;
    padding: 60px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.logo-circle.white-on-red {
    background: white;
    color: var(--primary-orange);
    margin-bottom: 40px;
}

.hero-content-text {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 90%;
}

.page-title {
    margin-top: auto;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}

.hero-right-col {
    width: 65%;
    position: relative;
    background: rgb(233, 189, 21);
    background: linear-gradient(90deg, rgba(233, 189, 21, 1) 0%, rgba(223, 37, 37, 1) 50%, rgba(132, 49, 155, 1) 100%);
    overflow: hidden;
}

.abstract-graphic {
    width: 100%;
    height: 100%;
    /* You would ideally use the actual image here. 
       For now, a complex gradient or placeholder to represent the colorful art */
    background: url('https://via.placeholder.com/1000x600/colorful') center/cover;
    opacity: 0.6;
}

/* Process Section */
.process-section {
    padding: 40px 0;
}

.section-heading {
    color: #444;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 1.2rem;
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: inline-block;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.process-card {
    padding: 20px;
    min-height: 220px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    position: relative;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.process-card:last-child {
    border-right: none;
}

.process-card.yellow {
    background: #fdc500;
    color: #333;
}

.process-card.light-grey {
    background: #e0e0e0;
    color: #333;
}

.process-card.dark-grey {
    background: #889;
    color: white;
}

.process-card.blue {
    background: #55788a;
    color: white;
}

.process-image {
    flex: 0 0 45%;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

.process-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.process-card h3 {
    font-size: 0.95rem;
    margin-bottom: 8px;
    line-height: 1.2;
    font-weight: 700;
}

.process-card p {
    font-size: 0.75rem;
    line-height: 1.3;
    color: inherit;
    opacity: 0.9;
}

.step-number {
    font-size: 0.9rem;
    margin-bottom: 5px;
    opacity: 0.8;
    font-weight: 500;
}

/* Features List */
.features-section {
    padding: 60px 0;
}

.feature-row {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.feature-icon {
    font-size: 1.5rem;
    margin-right: 20px;
    color: #333;
}

.feature-text h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.feature-text p {
    font-size: 0.85rem;
    color: #666;
}


.client-box {
    border: 1px solid #eaeaea;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    background: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    padding: 10px;
    flex-shrink: 0;
    min-width: 150px;
    width: 150px;
}

.client-box img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.client-box span {
    display: block;
    line-height: 1.2;
}



/* CSI Section */
.csi-section {
    padding-bottom: 60px;
}

.csi-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
}

.csi-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csi-btn {
    position: absolute;
    bottom: 30px;
    right: 15%;
    background-color: #d63422;
    border-radius: 4px;
    padding: 10px 25px;
    text-transform: lowercase;
    font-weight: 500;
}

.section-label.red-text {
    color: var(--primary-orange);
    font-size: 1.5rem;
    margin-bottom: 40px;
    display: block;
}

.csi-text-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 50px;
    text-align: justify;
}

.csi-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.csi-gallery-img {
    height: 200px;
    background: #ccc url('https://via.placeholder.com/400x250') center/cover;
    border-radius: 4px;
}

/* Team Section */
.team-section {
    padding-bottom: 60px;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}

.team-card {
    background: #f9f9f9;
    padding-bottom: 20px;
}

.team-img {
    width: 100%;
    height: 400px;
    /* Large portrait aspect setup */
    object-fit: cover;
    margin-bottom: 20px;
}

.team-info {
    padding: 0 20px;
}

.team-info h3 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.team-info .role {
    color: var(--primary-orange);
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 15px;
    line-height: 1.4;
}

.team-info .bio {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .csi-text-columns {
        grid-template-columns: 1fr;
    }

    .csi-gallery {
        grid-template-columns: 1fr;
    }

    .csi-btn {
        right: 5%;
    }

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

/* Services Page Styles */
.services-hero {
    height: 300px;
    background: url('https://via.placeholder.com/1600x400') center/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
}

.hero-overlay-text {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    width: 100%;
    padding: 40px;
    color: white;
}

.hero-overlay-text h1 {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}

.services-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    /* Sidebar 1/3, Main 2/3 */
    gap: 40px;
    margin-bottom: 60px;
}

/* Sidebar */
.services-sidebar {
    background: #fdfdfd;
    padding-right: 20px;
}

.sidebar-title {
    font-size: 1rem;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ccc;
    /* Optional visual separation */
    padding-bottom: 10px;
    display: inline-block;
}

.sidebar-intro {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 30px;
    border-left: 3px solid var(--primary-orange);
}

.sidebar-intro h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #333;
}

.sidebar-intro p {
    font-size: 0.85rem;
    color: #666;
}

.service-detail-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.service-detail-item.last-item {
    border-bottom: none;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.detail-header h3 {
    font-size: 1.1rem;
    color: #333;
}

.sub-label {
    font-size: 0.75rem;
    color: var(--primary-orange);
    text-transform: uppercase;
    font-weight: 600;
}

.service-detail-item p {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
}

.detail-list {
    list-style: disc;
    padding-left: 20px;
    font-size: 0.85rem;
    color: #666;
}

.detail-list li {
    margin-bottom: 5px;
}

.expertise-box {
    background: #333;
    color: white;
    padding: 30px;
    margin-top: 30px;
}

.expertise-box h3 {
    font-size: 1rem;
    margin-bottom: 15px;
}

.expertise-box ul {
    list-style: disc;
    padding-left: 20px;
    font-size: 0.85rem;
}

.expertise-box li {
    margin-bottom: 8px;
}

/* Services Main Grid */
.top-bar-heading {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
    text-align: right;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.services-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Specific card style adjustments for this page if needed */
.service-card.light-grey-text {
    background: url('https://via.placeholder.com/400x300') center/cover;
    color: white;
}

@media (max-width: 768px) {
    .services-layout {
        grid-template-columns: 1fr;
    }

    .top-bar-heading {
        text-align: left;
    }

    .services-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Case Studies Page Styles */
.case-study-hero {
    height: 500px;
    background: url('https://via.placeholder.com/1600x600/333333') center/cover;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero-tabs-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.cnt-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-tab {
    width: 250px;
    padding: 15px 20px;
    color: white;
    cursor: pointer;
    background: #192a46;
    /* Specific dark navy */
    margin-right: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-tab.active {
    background: #e93e28;
    /* Specific bright red */
}

.hero-tab h3 {
    font-size: 0.9rem;
    margin-bottom: 3px;
    font-weight: 500;
}

.hero-tab .tab-link {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: lowercase;
}

.case-hero-content {
    margin-top: auto;
    padding-bottom: 40px;
    color: white;
    padding-left: 15px;
}

.case-title {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;
    max-width: 600px;
}

/* Checkerboard Grid */
.case-content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.grid-item {
    height: auto;
    min-height: 350px;
    overflow: hidden;
}

.text-item {
    padding: 30px;
    background: #fff;
    color: #444;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-item h3 {
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
}

.red-subtitle {
    color: #e93e28;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
}

.text-item p {
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.image-item {
    background-size: cover;
    background-position: center;
}

@media (max-width: 1024px) {
    .case-content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cnt-container {
        flex-direction: column;
    }

    .hero-tab {
        width: 100%;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .case-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Portfolio Page Styles */
.portfolio-hero {
    height: 400px;
    background: url('https://via.placeholder.com/1600x500/111111') center/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    margin-bottom: 50px;
}

.hero-content-wrapper {
    position: relative;
    width: 100%;
}

.hero-red-box {
    background: #d63422;
    color: white;
    padding: 40px;
    width: 360px;
    position: relative;
    bottom: 0;
}

.design-hero {
    background: url('https://via.placeholder.com/1600x500/808080?text=Pencil+Drawing') center/cover;
}

.hero-red-box.design-box {
    background: #7a5e65;
    /* Mauve/Brownish color */
    bottom: -40px;
    /* Slight overlap or offset if needed, or same as original */
    bottom: 0;
}

.hero-red-box h1 {
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
    line-height: 1.1;
}

.hero-link {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: lowercase;
    display: inline-flex;
    align-items: center;
    opacity: 1;
    font-weight: 500;
}

/* Portfolio Grid */
.portfolio-section {
    padding-bottom: 80px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.portfolio-item {
    min-height: 300px;
    background-size: cover;
    background-position: center;
}

.contain-fit {
    background-size: contain !important;
    background-repeat: no-repeat;
    background-color: #f4f4f4;
}

.info-item {
    background: #f4f4f4;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.intro-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 400;
}

.services-title-small {
    color: #d63422;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.services-list-small {
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    line-height: 2;
}

.services-list-small li {
    margin-bottom: 0px;
}

@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

.grid-item {
    min-height: 300px;
}

/* Ribbon Style */
.ribbon-overlay {
    position: relative;
    overflow: hidden;
}

.ribbon-overlay::before {
    content: 'PHASE ONE 80% SOLD!';
    position: absolute;
    top: 25px;
    left: -25px;
    transform: rotate(-45deg);
    background: #ff0000;
    color: white;
    padding: 5px 30px;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Events Section */
.events-hero {
    background: url('https://via.placeholder.com/1600x500/444?text=Live+Event+Crowd') center/cover;
}

.hero-red-box.events-box {
    background: #660000;
    /* Darker Red */
    bottom: 0;
}

/* Digital Marketing Section */
.digital-hero {
    background: url('home%20page%20images/img25.jpg') center/cover;
}

.hero-red-box.digital-box {
    background: #4a5568;
    /* Dark Grey-Blue */
    bottom: 0;
}

/* Web Development Section */
.web-hero {
    background: url('https://via.placeholder.com/1600x500/000?text=Code+Screen') center/cover;
}

.hero-red-box.web-box {
    background: #3B4252;
    bottom: 0;
}

/* Contact Page Styles */
.contact-page-section {
    padding: 60px 0 100px;
    background: #fff;
}

.contact-header {
    margin-bottom: 40px;
}

.contact-title {
    font-size: 2.2rem;
    color: #d63422;
    font-weight: 500;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-subtitle {
    font-size: 1rem;
    color: #333;
    font-weight: 400;
}

.contact-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.contact-map {
    width: 100%;
    min-height: 400px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.contact-form-wrapper {
    width: 100%;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-control {
    width: 100%;
    padding: 15px;
    background: #f4f4f4;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    color: #333;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    outline: none;
    border-color: #d63422;
    background: #fff;
}

.contact-form .form-control::placeholder {
    color: #aaa;
}

.contact-form .form-actions {
    text-align: right;
}

.contact-form .btn-primary {
    background: #d63422;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    color: white;
    font-weight: 500;
}

.contact-form .btn-primary:hover {
    background: #b52b1c;
}

/* Responsive for Contact Page */
@media (max-width: 768px) {
    .contact-content-grid {
        grid-template-columns: 1fr;
    }

    .contact-map {
        min-height: 300px;
    }
}

/* Quote Page Styles */
.quote-page-section {
    padding: 60px 0 100px;
    background: #fff;
}

.quote-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
}

.quote-left {
    padding-top: 10px;
}

.quote-title {
    font-size: 2.2rem;
    color: #d63422;
    font-weight: 500;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.quote-form .form-group {
    margin-bottom: 25px;
}

.quote-form label {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333;
}

.quote-form .required {
    color: #d63422;
    margin-left: 3px;
}

.name-row {
    display: flex;
    gap: 20px;
}

.name-row .form-control {
    width: 100%;
}

.quote-form .form-control {
    width: 100%;
    padding: 12px 15px;
    background: #f4f4f4;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: 'Outfit', sans-serif;
    color: #333;
}

.quote-form .form-control:focus {
    outline: none;
    border-color: #d63422;
    background: #fff;
}

.quote-form .form-control::placeholder {
    color: #bbb;
}

.quote-form .submit-btn {
    width: 100%;
    background: #d63422;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
}

.quote-form .submit-btn:hover {
    background: #b52b1c;
}

.form-note {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

/* Responsive Quote Page */
@media (max-width: 768px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }

    .name-row {
        flex-direction: column;
        gap: 15px;
    }
}


@media (max-width: 992px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }

    .name-row {
        flex-direction: column;
        gap: 15px;
    }
}

/* Strategic Innovation Section */
.innovation-hero {
    background: url('https://via.placeholder.com/1600x500/F2C94C/000?text=Strategic+Innovation') center/cover;
}

.hero-red-box.innovation-box {
    background: #1e2a38;
    /* Dark Navy */
    bottom: 0;
}

/* Detail Sections (Tabbed Interface) */
.detail-section {
    display: none;
    animation: fadeIn 0.5s ease;
}

.detail-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Portfolio Index Section */
.portfolio-index-section {
    padding: 40px 0 60px;
    background: #fff;
}

.portfolio-tabs {
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-tabs a {
    color: #333;
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.3s;
}

.portfolio-tabs a:hover {
    color: #d63422;
}

.portfolio-tabs span {
    color: #d63422;
}

.portfolio-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.portfolio-card {
    display: block;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-5px);
}

.portfolio-card .card-image {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.portfolio-card .card-content {
    padding: 15px;
    color: #fff;
}

.portfolio-card .card-content h3 {
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.portfolio-card .card-content span {
    font-size: 0.8rem;
    display: inline-block;
    opacity: 0.9;
}

/* Card Background Colors */
.bg-red {
    background: #d63422;
}

.bg-brown-red {
    background: #964B00;
}

.bg-purple {
    background: #7a5e65;
}

.bg-grey-blue {
    background: #4B5366;
}

.bg-blue {
    background: #3B4252;
}

.bg-navy {
    background: #1e2a38;
}

.bg-dark-grey {
    background: #3e3e3e;
}

/* Responsive Portfolio Index */
@media (max-width: 900px) {
    .portfolio-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .portfolio-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Scroll Offset for Anchor Links */
.portfolio-hero,
.portfolio-hero.media-hero {
    scroll-margin-top: 100px;
}

/* Media Solutions Section */
.media-hero {
    background: url('home%20page%20images/img28.jpg') center/cover;
}

/* Portfolio Card Styles */
.portfolio-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 250px;
    background: #f0f0f0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.portfolio-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.card-image {
    height: 60%;
    background-size: cover;
    background-position: center;
}

.card-content {
    height: 40%;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

/* Background Utilities */
.bg-red {
    background-color: var(--card-red);
}

.bg-brown-red {
    background-color: #964B00;
}

.bg-purple {
    background-color: var(--card-purple);
}

.bg-grey-blue {
    background-color: #4B5366;
}

.bg-blue {
    background-color: var(--card-blue);
}

.bg-navy {
    background-color: var(--card-midnight);
}

.bg-dark-grey {
    background-color: #444;
}

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

    /* Typography Scaling */
    html {
        font-size: 14px;
    }

    .services-header h2 {
        font-size: 2rem;
    }

    .page-title {
        font-size: 2rem;
    }

    .hero-text h1 {
        font-size: 1rem;
        flex-direction: column;
        gap: 5px;
    }

    /* About Hero Stack */
    .about-hero {
        flex-direction: column;
    }

    .hero-left-col,
    .hero-right-col {
        width: 100%;
    }

    .hero-right-col {
        height: 250px;
    }

    /* Process Grid */
    .process-grid {
        grid-template-columns: 1fr;
    }

    /* Features List */
    .feature-row {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon {
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* General */
    .container {
        padding: 0 15px;
    }

    section,
    .hero-section,
    .digital-residence,
    .clients-section {
        padding: 40px 0;
    }

    .portfolio-grid,
    .services-page-grid,
    .footer-grid,
    .contact-content-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .services-header h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .about-hero-wrapper {
        min-height: auto;
    }

    .about-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #fff;
        z-index: 10000;
        transition: right 0.3s ease;
        padding: 80px 20px 20px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    .about-nav.active {
        right: 0;
    }

    .about-nav>ul {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }

    .about-nav>ul>li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .about-nav a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
    }
}

/* Fix for about.html clients grid - horizontal scrolling */
.clients-grid.box-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.clients-grid.box-grid .client-box {
    flex: 0 0 auto;
    min-width: 150px;
    width: 150px;
    height: 100px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #333;
    background: white;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Responsive Styles for 425px and Downwards - Services Grid Stacked */
@media (max-width: 425px) {
    /* Override grid to single column */
    .services-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Full width for header, intro, and all cards */
    .services-header,
    .services-intro,
    .service-card {
        grid-column: span 1 !important;
        width: 100%;
    }

    /* Reduce heading size */
    .services-header h2 {
        font-size: 1.8rem;
        line-height: 1.2;
        text-align: center;
    }

    /* Improve intro text readability */
    .services-intro p {
        font-size: 0.9rem;
        padding: 0 5px;
        text-align: center;
    }

    /* Cards: auto height, better touch target */
    .service-card {
        height: auto;
        min-height: 180px;
        padding: 20px;
        border-radius: 8px;
        display: flex;
        align-items: flex-end;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Card heading size */
    .service-card h3 {
        font-size: 1.2rem;
        margin-bottom: 5px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    /* Optional: add a subtle overlay to ensure text contrast */
    .service-card {
        position: relative;
        z-index: 1;
    }
    .service-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60%;
        background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
        border-radius: 8px;
        z-index: -1;
        pointer-events: none;
    }

    /* Remove extra hover transforms that might cause layout shift */
    .service-card:hover {
        transform: translateY(-3px);
    }

    /* Adjust container padding for edge-to-edge comfort */
    .digital-residence .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}