/*
================================================================================
# TABLE OF CONTENTS
================================================================================

1. FONTS & VARIABLES
2. GLOBAL RESET & BASE STYLES
3. TYPOGRAPHY (Headings, Giant Text, Badges)
4. NAVIGATION HEADER (Desktop/Mobile)
5. HERO POSTER SECTION (Artifacts, Layout)
6. MOBILE TOGGLE
7. SHUTTER MENU OVERLAY (Mobile Menu)
8. WORK GRIDS (Portfolio Card Base Styles)
9. CLEAN CTA (Call to Action Block)
10. REVIEWS SCROLLER
11. CONTACT MODAL (Global)
12. FOOTER
13. ANIMATIONS & SCROLL REVEAL BASE STYLES
14. PAGE-SPECIFIC OVERRIDES (Logos, Design, Project Detail)
15. INLINE CSS EXPORTS (Generic Helper Classes)
16. ABOUT PAGE SPECIFIC STYLES (Cleaned up from Inline, Process Cards, Signature)
*/

/* =========================================
1. FONTS & VARIABLES
========================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root {
/* IDENTITY PALETTE */
--bg-dark: #0f0303; /* Licorice */
--bg-card: #141414; /* Slightly lighter for cards */
--text-light: #f7f7f9; /* Soft White */
--accent: #cadb2b; /* Acid Green */
--border-dim: rgba(255, 255, 255, 0.05);
--border-bright: rgba(255, 255, 255, 0.2);
--brand-color: var(--accent); /* Default for logo items */

/* SYSTEM MATH */
--radius-ui: 0px; /* Sharp UI elements */
--radius-content: clamp(10px, 2vw, 30px);
--radius-pill: 50px; /* Fully round for tags */

/* FONTS */
--font-heading: 'Playfair Display', serif;
--font-body: 'Open Sans', sans-serif;
--font-tech: 'IBM Plex Mono', monospace;
}

/* =========================================
2. GLOBAL RESET & BASE STYLES
========================================= */

* { box-sizing: border-box; }

body {
background-color: var(--bg-dark);
color: var(--text-light);
font-family: var(--font-body);
/* UPDATED: Increased base font size for readability */
font-size: 1.05rem; 
margin: 0;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
line-height: 1.6; /* Increased line-height for readability */
}

a { text-decoration: none; color: inherit; transition: 0.3s ease; }
a:focus { outline: none; } /* Removed default focus outline for custom styling */

ul { list-style: none; padding: 0; margin: 0; }

button { font-family: inherit; }

img { max-width: 100%; display: block; }

/* =========================================
3. TYPOGRAPHY
========================================= */

h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.1;
margin: 0 0 1rem 0;
}

/* Giant Header (Used on Home & Sub-pages) */
.masthead {
text-align: center;
padding: clamp(5rem, 10vw, 8rem) 4vw;
position: relative;
border-bottom: 1px solid var(--border-dim);
}

.giant-text {
font-size: 15vw;
line-height: 0.85;
text-transform: uppercase;
color: var(--text-light);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
letter-spacing: -0.04em;
}

.giant-text.visible { opacity: 1; transform: translateY(0); }

/* Sticker Badge (The Tech Tag) */
.sticker-badge {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(-5deg) scale(0);
background-color: var(--accent);
color: var(--bg-dark);
font-family: var(--font-tech);
font-weight: 600;
text-transform: uppercase;
padding: 0.6rem 1.5rem;
font-size: clamp(12px, 2vw, 16px);
z-index: 2;
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid var(--text-light);
}

.sticker-badge.visible {
transform: translate(-50%, -50%) rotate(-5deg) scale(1);
}

/* =========================================
4. NAVIGATION HEADER
========================================= */

.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 4vw;
position: sticky;
top: 0;
z-index: 1000;
background: rgba(15, 3, 3, 0.9);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-bright);
}

.brand-logo {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.02em;
color: var(--text-light);
z-index: 2002;
position: relative;
}

/* DESKTOP NAV GROUP (Hidden on Mobile) */
.nav-group {
display: none;
align-items: center;
gap: 40px;
}

.nav-links {
display: none;
}

@media (min-width: 900px) {
.nav-group { display: flex; }
.nav-links {
display: flex;
gap: 40px;
align-items: center;
}
}

.nav-link {
font-family: var(--font-tech);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
color: #888;
position: relative;
padding: 5px 0;
}

.nav-link:hover { color: var(--text-light); }
/* FOCUS STATE FIX */
.nav-link:focus { color: var(--text-light); }

.nav-link.active { color: var(--text-light); }

.nav-link.active::after, 
.nav-link:focus::after {
content: '';
position: absolute; bottom: -4px; left: 0;
width: 100%; height: 2px;
background-color: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.nav-link.active:focus::after {
box-shadow: 0 0 10px var(--accent);
}


/* THE "TECH" CHAT BUTTON */
.chat-btn {
background-color: var(--accent);
color: var(--bg-dark);
font-family: var(--font-tech);
font-weight: 700;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
padding: 14px 28px;
border: none;
border-radius: var(--radius-ui);
cursor: pointer;
/* FOCUS STATE FIX */
outline: 2px solid transparent; 
outline-offset: 2px;
transition: transform 0.2s, box-shadow 0.2s, outline-color 0.2s;

/* The Cyberpunk Corner Cut */
clip-path: polygon(0 0, 100% 0, 100% 80%, 92% 100%, 0 100%);
}

.chat-btn:hover {
transform: translateY(-2px);
box-shadow: 4px 4px 0px rgba(255,255,255,0.2);
}

/* FOCUS STATE FIX */
.chat-btn:focus {
outline-color: var(--accent);
box-shadow: 0 0 15px var(--accent);
transform: translateY(-2px);
}


/* =========================================
5. HERO POSTER SECTION
========================================= */

.hero-poster {
padding: clamp(2rem, 5vh, 4rem) 4vw;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border-dim);
display: flex;
justify-content: center;
align-items: center;
min-height: 85vh;

/* Background Grid Texture */
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
background-position: center top;
}

.poster-container {
position: relative;
max-width: 1400px;
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto 1fr 1fr auto;
gap: 20px;
}

/* Intro Text - UNIVERSAL FIX */
.poster-intro {
grid-column: 1 / 13;
grid-row: 1;
/* ADD PADDING to keep content inside the 4vw bracket boundary */
padding: 0 4vw;

font-family: var(--font-tech);
color: var(--accent);
font-size: clamp(14px, 2vw, 18px);
letter-spacing: 0.2em;
margin-bottom: 10px;
display: flex; align-items: center; gap: 20px;
}

.poster-intro::after {
content: ''; height: 1px; flex-grow: 1;
background-color: var(--accent); opacity: 0.5;
}

/* Layer 1: Hollow Text */
.poster-outline-text {
grid-column: 1 / 13;
grid-row: 2;
font-family: var(--font-heading);
/* Taller line height to consume space */
line-height: 1.1;
font-size: clamp(3rem, 9vw, 10rem);
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 2px var(--text-light);
position: relative;
z-index: 1;
margin-left: -0.05em;
white-space: nowrap;
text-align: left;
display: flex;
align-items: flex-end; /* Align bottom */
}

/* Layer 2: Solid Block Text */
.poster-solid-block {
grid-column: 1 / 13;
grid-row: 3;
background-color: var(--accent);
color: var(--bg-dark);
font-family: var(--font-heading);
/* Taller line height */
line-height: 1.1;
font-size: clamp(3rem, 9vw, 10rem);
text-transform: uppercase;
padding: 10px 30px;
margin-top: 2vh;
margin-left: 2vw;
position: relative;
z-index: 2;
width: fit-content;
transform: rotate(-1deg); /* Subtle rotation */
box-shadow: 20px 20px 0px rgba(0,0,0,0.5);
white-space: nowrap;
}

/* --- HERO MOBILE FIXES --- */
@media (max-width: 1024px) {
.poster-container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
gap: 30px; /* Spread out vertically on mobile too */
}


.poster-outline-text, .poster-solid-block {
width: 100%;
font-size: 14vw;
white-space: normal;
word-break: break-word;
line-height: 1.1;
text-align: left;
}


.poster-outline-text { margin-bottom: 0; }

.poster-solid-block {
margin-top: 0;
transform: rotate(0deg);
margin-left: 0;
padding: 10px 15px;
box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
width: auto;
max-width: 100%;
}


.tech-coords { display: none; }


/* Remove redundant padding on mobile where container is already full width */
.poster-intro {
padding: 0;
grid-column: auto;
grid-row: auto;
}
}


/* Vertical Deco Line */
.poster-vertical-deco {
position: absolute; right: 0; top: 0; bottom: 0;
writing-mode: vertical-rl; text-orientation: mixed;
font-family: var(--font-tech); font-size: 12px; color: #444;
letter-spacing: 0.3em; border-left: 1px solid #222; padding-left: 20px;
display: none;
}
@media (min-width: 900px) { .poster-vertical-deco { display: block; } }

/* Hero Artifacts */
.poster-deco-circle {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: clamp(300px, 40vw, 600px); height: clamp(300px, 40vw, 600px);
border: 1px solid rgba(202, 219, 43, 0.2); border-radius: 50%;
z-index: 0; pointer-events: none;
}
.poster-deco-circle::after {
content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 70%; height: 70%; border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 50%; animation: spin 60s linear infinite;
}
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.corner-bracket {
position: absolute; width: 20px; height: 20px;
border-color: var(--accent); border-style: solid; pointer-events: none; opacity: 0.8;
}
.cb-tl { top: 4vw; left: 4vw; border-width: 2px 0 0 2px; }
.cb-tr { top: 4vw; right: 4vw; border-width: 2px 2px 0 0; }
.cb-bl { bottom: 4vw; left: 4vw; border-width: 0 0 2px 2px; }
.cb-br { bottom: 4vw; right: 4vw; border-width: 0 2px 2px 0; }

.tech-barcode {
grid-column: 1 / 3; grid-row: 3;
display: flex; flex-direction: column; justify-content: flex-end;
gap: 5px; opacity: 0.6; margin-bottom: 20px;
}
.barcode-lines {
height: 30px; width: 100px;
background: repeating-linear-gradient(90deg, var(--text-light), var(--text-light) 2px, transparent 2px, transparent 4px);
}
.barcode-text { font-family: var(--font-tech); font-size: 10px; color: var(--accent); }

.tech-coords {
position: absolute; bottom: 4vw; right: 6vw;
font-family: var(--font-tech); font-size: 10px; color: #666; text-align: right;
}

/* =========================================
6. MOBILE TOGGLE
========================================= */

.mobile-toggle {
display: flex; align-items: center; justify-content: center;
font-family: var(--font-tech); font-weight: 700; font-size: 14px;
color: var(--text-light); background: transparent;
border: 1px solid rgba(255,255,255,0.2); padding: 10px 15px; cursor: pointer;
z-index: 2002; position: relative; overflow: hidden; min-width: 100px;
/* FOCUS STATE FIX */
outline: 2px solid transparent; 
outline-offset: 2px;
transition: border-color 0.3s, outline-color 0.3s;
}

@media (min-width: 900px) { .mobile-toggle { display: none; } }

.mobile-toggle:hover { border-color: var(--accent); color: var(--accent); }
/* FOCUS STATE FIX */
.mobile-toggle:focus { border-color: var(--accent); color: var(--accent); outline-color: var(--accent); }

.mobile-toggle span { display: inline-block; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); }

.toggle-bracket { color: var(--text-light); font-weight: 400; }

.toggle-text { margin: 0 5px; }

body.menu-open .toggle-bracket-left { transform: translateX(-12px); }

body.menu-open .toggle-bracket-right { transform: translateX(12px); }

body.menu-open .toggle-text { color: var(--accent); }

/* =========================================
7. SHUTTER MENU OVERLAY (Mobile)
========================================= */

.shutter-menu {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
z-index: 2000; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr);
}

.shutter-col {
background-color: var(--bg-dark); height: 100%; width: 100%;
transform: translateY(-100%); border-right: 1px solid var(--border-dim);
transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
}
.shutter-col:nth-child(1) { transition-delay: 0s; }
.shutter-col:nth-child(2) { transition-delay: 0.1s; }
.shutter-col:nth-child(3) { transition-delay: 0.2s; }
.shutter-col:nth-child(4) { transition-delay: 0.3s; border-right: none; }
body.menu-open .shutter-menu { pointer-events: auto; }
body.menu-open .shutter-col { transform: translateY(0); }
.shutter-content {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: center; align-items: center;
z-index: 2001; opacity: 0; transition: opacity 0.5s ease 0.6s;
}
body.menu-open .shutter-content { opacity: 1; }
.shutter-links a {
display: block; font-family: var(--font-heading); font-size: 3rem; font-weight: 700;
color: var(--text-light); margin-bottom: 20px; text-align: center;
transform: translateY(40px); opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease, color 0.3s;
}
/* FOCUS STATE FIX */
.shutter-links a:hover,
.shutter-links a:focus,
.shutter-links a.active-mobile { 
    color: var(--accent); 
    font-style: italic; 
    text-decoration: underline; 
}


body.menu-open .shutter-links a { transform: translateY(0); opacity: 1; }

body.menu-open .shutter-links a:nth-child(1) { transition-delay: 0.7s; }

body.menu-open .shutter-links a:nth-child(2) { transition-delay: 0.8s; }

body.menu-open .shutter-links a:nth-child(3) { transition-delay: 0.9s; }

.shutter-chat-btn {
margin-top: 40px; transform: scale(0);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s;
}

body.menu-open .shutter-chat-btn { transform: scale(1); }

/* =========================================
8. WORK GRIDS
========================================= */

.work-grid {
display: grid; grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 4rem);
padding: 0 clamp(1rem, 2vw, 2rem) 100px;
border-top: 1px solid var(--border-dim);
}
@media (min-width: 640px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .work-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .work-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

/* Locked 2-Col Grid (Homepage) */
.work-grid-2col {
display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); padding: 0 4vw;
}
@media (min-width: 768px) { .work-grid-2col { grid-template-columns: 1fr 1fr; } }

.portfolio-card {
display: block; position: relative; opacity: 0;
transform: translateY(30px); 
/* FOCUS STATE FIX */
transition: box-shadow 0.3s ease, opacity 0.6s ease, transform 0.6s ease;
outline: 2px solid transparent; 
outline-offset: 5px;
}

.portfolio-card.visible { opacity: 1; transform: translateY(0); }

.card-img-wrapper {
width: 100%; aspect-ratio: 4/3; border-radius: var(--radius-content);
overflow: hidden; position: relative; background-color: #1a1a1a;
}

.card-img-wrapper img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-card:hover .card-img-wrapper img {
transform: scale(1.05);
}

/* FOCUS STATE FIX */
.portfolio-card:focus {
outline-color: var(--accent);
box-shadow: 0 0 20px rgba(202, 219, 43, 0.5); 
}


.card-meta {
margin-top: 20px; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid #222; padding-bottom: 10px;
}

.card-title { font-weight: 700; font-size: 1.1rem; color: var(--text-light); }

.card-category { 
    font-family: var(--font-tech); 
    /* UPDATED: Increased font size */
    font-size: 0.9rem; 
    color: #666; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* FOCUS STATE FIX */
.portfolio-card:hover .card-title,
.portfolio-card:focus .card-title { 
    color: var(--accent); 
    transition: 0.3s; 
}


/* =========================================
9. CLEAN CTA
========================================= */

.cta-poster-section {
padding: 120px 4vw;
background-color: var(--bg-dark);
position: relative;
overflow: hidden;
border-top: 1px solid var(--border-dim);
border-bottom: 1px solid var(--border-dim);
display: flex; justify-content: center; align-items: center;
}

.cta-poster-section::before {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 60px 60px; opacity: 0.5; pointer-events: none;
}
.cta-container { position: relative; width: 100%; max-width: 1200px; text-align: center; }
.cta-solid-layer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; }

.cta-title {
font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 5rem);
line-height: 1; color: var(--text-light); margin: 0; text-transform: uppercase;
}

.cta-big-btn {
display: inline-flex; align-items: center; gap: 15px;
background-color: var(--accent); color: var(--bg-dark);
padding: 20px 50px; font-family: var(--font-tech); font-size: 1.2rem;
font-weight: 700; text-transform: uppercase; text-decoration: none;
/* FOCUS STATE FIX */
outline: 2px solid transparent; 
outline-offset: 5px;
transition: transform 0.3s, box-shadow 0.3s, outline-color 0.3s;

clip-path: polygon(0 0, 100% 0, 100% 75%, 95% 100%, 0 100%);
}

.cta-big-btn:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 30px rgba(202, 219, 43, 0.3); }
/* FOCUS STATE FIX */
.cta-big-btn:focus {
    outline-color: var(--text-light);
    box-shadow: 0 0 25px var(--accent); 
    transform: translateY(-5px) scale(1.02); 
}


.cta-arrow { font-size: 1.5rem; transition: transform 0.3s; }

.cta-big-btn:hover .cta-arrow { transform: translateX(10px); }
/* FOCUS STATE FIX */
.cta-big-btn:focus .cta-arrow { transform: translateX(10px); }


/* --- CTA ANIMATION: PERIOD TO QUESTION MARK FLIP --- */
.punct-flip {
display: inline-block;
position: relative;
min-width: 0.4em; /* Prevents text jumping */
color: var(--accent);
}

/* Hide the original character so we can animate the pseudo-element */
.punct-flip span { opacity: 0; }

.punct-flip::after {
content: ".";
position: absolute;
left: 0; bottom: 0;
width: 100%;
text-align: center;
animation: flipPunctuation 5s infinite ease-in-out;
transform-origin: center center;
}

@keyframes flipPunctuation {
0% { transform: rotateX(0deg); content: "."; }
45% { transform: rotateX(0deg); content: "."; }
50% { transform: rotateX(90deg); content: "."; } /* Rotate out */
51% { transform: rotateX(90deg); content: "?"; } /* Swap content while invisible */
55% { transform: rotateX(0deg); content: "?"; } /* Rotate in */
95% { transform: rotateX(0deg); content: "?"; }
100% { transform: rotateX(90deg); content: "?"; } /* Rotate out to loop */
}

/* =========================================
10. REVIEWS SCROLLER
========================================= */

.reviews-section { padding: 80px 0; overflow: hidden; }
.reviews-header { padding: 0 4vw; margin-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; }
.reviews-scroller {
display: flex; gap: 30px; overflow-x: auto; padding: 10px 4vw 30px 4vw;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
}
.reviews-scroller::-webkit-scrollbar { display: none; }
.review-card {
flex: 0 0 auto; width: 85vw; max-width: 450px;
background-color: var(--bg-card); border-radius: var(--radius-content);
padding: 40px; scroll-snap-align: center; border: 1px solid var(--border-dim);
display: flex; flex-direction: column;
}
.review-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; }
.review-avatar img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.review-logo-placeholder { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--text-light); opacity: 0.8; }
.review-author h4 { margin: 0; font-size: 1.2rem; color: var(--text-light); }
.review-author p { 
    margin: 5px 0 20px 0; 
    font-family: var(--font-tech); 
    color: #888; 
    /* Should follow the general category font sizing */
    font-size: 0.9rem; 
    text-transform: uppercase; 
}
.review-quote { font-size: 1.1rem; line-height: 1.6; font-style: italic; color: #ddd; flex-grow: 1; }
/* DOTS NAVIGATION STYLES */
.reviews-nav-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 0 4vw;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    display: block; 
}
/* FOCUS STATE FIX */
.dot:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dot.active {
    background-color: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 5px var(--accent);
}


/* =========================================
11. CONTACT MODAL (Global)
========================================= */

.contact-overlay {
position: fixed; top: 0; right: 0; width: 100%; height: 100%;
z-index: 3000; pointer-events: none; display: flex; justify-content: flex-end;
}

.contact-panel {
background-color: var(--bg-dark); width: 90%; max-width: 450px; height: 100%;
border-left: 1px solid #333; transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
pointer-events: auto; padding: 60px 40px; color: var(--text-light);
position: relative; overflow-y: auto; display: flex; flex-direction: column;
}

.contact-overlay.active .contact-panel { transform: translateX(0); box-shadow: -20px 0 50px rgba(0,0,0,0.8); }

.close-btn {
position: absolute; top: 30px; right: 30px; font-size: 24px;
background: none; border: none; cursor: pointer; color: var(--text-light); font-family: var(--font-tech);
/* FOCUS STATE FIX */
outline: 2px solid transparent;
outline-offset: 2px;
transition: color 0.3s, outline-color 0.3s;
}

.close-btn:hover { color: var(--accent); }
.close-btn:focus { color: var(--accent); outline-color: var(--accent); }


.contact-form label { display: block; margin-bottom: 30px; font-family: var(--font-tech); font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 1px; }

.contact-form input, .contact-form textarea {
width: 100%; border: none; border-bottom: 2px solid #333; background: transparent;
padding: 15px 0; font-family: var(--font-body); font-size: 18px; color: var(--text-light);
outline: none; transition: border-color 0.3s; border-radius: 0;
}

.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--accent); }

.contact-form textarea { min-height: 100px; resize: none; }

.submit-btn {
width: 100%; background-color: var(--text-light); color: var(--bg-dark); border: none; border-radius: 0;
padding: 20px; margin-top: 20px; font-family: var(--font-tech); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: 0.3s;
/* FOCUS STATE FIX */
outline: 2px solid transparent; 
outline-offset: 2px;
transition: background-color 0.3s, box-shadow 0.3s, outline-color 0.3s;
}

.submit-btn:hover { background-color: var(--accent); box-shadow: 0 0 15px var(--accent); }
.submit-btn:focus { background-color: var(--accent); box-shadow: 0 0 15px var(--accent); outline-color: var(--text-light); }


.success-ripples { position: absolute; inset: 0; pointer-events: none; display: none; }

.contact-overlay.success .success-ripples { display: block; }

.ripple {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0);
border: 1px solid var(--accent); border-radius: 50%; aspect-ratio: 1/1; opacity: 0; transition: 0.8s ease-out;
}

.contact-overlay.success .ripple { transform: translate(-50%, -50%) scale(1); opacity: 0; }

.success-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: 0.5s 0.3s; }

.contact-overlay.success .success-msg { opacity: 1; }


/* =========================================
12. FOOTER
========================================= */

footer {
border-top: 1px solid var(--border-dim); padding: 80px 4vw; background-color: var(--bg-dark);
}

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

@media (min-width: 768px) { .footer-container { grid-template-columns: 1fr 1fr 1fr; } }

.footer-brand h4 { font-size: 1.5rem; color: var(--text-light); margin-bottom: 20px; }

.footer-brand p { color: #888; max-width: 300px; }

.footer-links h5 { 
    font-family: var(--font-tech); 
    color: #666; 
    /* Should follow the general subtitle font sizing */
    font-size: 0.85rem; 
    text-transform: uppercase; 
    margin-bottom: 20px; 
}

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

.footer-links a { font-size: 14px; color: #ccc; }

.footer-links a:hover { color: var(--accent); }
/* FOCUS STATE FIX */
.footer-links a:focus { color: var(--accent); }


.footer-bottom {
margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border-dim);
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: #666; font-family: var(--font-tech);
}

/* --- NEW: Styling for the text social links to match footer theme --- */

/* Style the container for the vertical text links */
.connect-links-text {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
    /* Ensures the list items stack correctly */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between the link names */
}

/* Style the anchor tag (the link name itself) */
.connect-links-text a {
    /* Uses the same font size as general footer links */
    font-size: 14px; 
    color: #ccc; /* Default color: light grey */
    transition: color 0.3s ease;
    /* Removes the text-transform from the global .footer-links a style if applied */
    text-transform: none;
}

/* Hover and Focus State */
.connect-links-text a:hover,
.connect-links-text a:focus {
    color: var(--accent); /* Acid Green hover color */
}

/* =========================================
13. ANIMATIONS & SCROLL REVEAL BASE STYLES
========================================= */

@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

/* 13.1 SCROLL REVEAL BASE STYLES */
.animate-on-scroll {
/* Initial state before element is in view */
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll.in-view {
/* Final state when element is in view */
opacity: 1;
transform: translateY(0);
}

/* 13.2 SCROLL REVEAL DELAYS (for staggered effects) */
.animate-on-scroll.delay-1 { transition-delay: 0.05s; }
.animate-on-scroll.delay-2 { transition-delay: 0.1s; }
.animate-on-scroll.delay-3 { transition-delay: 0.15s; }
.animate-on-scroll.delay-4 { transition-delay: 0.2s; }
.animate-on-scroll.delay-5 { transition-delay: 0.25s; }


.sub-nav { display: flex; gap: 10px; margin-bottom: 20px; }
.sub-pill {
padding: 8px 20px; border: 1px solid #333; border-radius: var(--radius-pill);
font-size: 12px; text-transform: uppercase; color: #888;
}
.sub-pill.active { background: var(--accent); color: var(--bg-dark); border-color: var(--accent); }

/* =========================================
14. PAGE-SPECIFIC OVERRIDES
========================================= */

/* --- Logos Page Hero --- */
.logos-hero .poster-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.logos-hero .poster-intro { justify-content: center; width: 100%; grid-column: auto; }
.logos-hero .poster-outline-text { justify-content: center; text-align: center; width: 100%; }
.logos-hero .poster-solid-block {
margin-left: 0 !important; margin-right: 0 !important;
transform: rotate(-2deg); /* Standard tilt */
}
.logos-hero .tech-barcode {
align-items: center; justify-content: center; width: 100%;
margin-top: 40px; opacity: 0.4;
}

/* --- Design Page Hero --- */
.design-hero .poster-container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.design-hero .poster-intro { justify-content: center; width: 100%; grid-column: auto; }
.design-hero .poster-outline-text { justify-content: center; text-align: center; width: 100%; }
.design-hero .poster-solid-block {
margin-left: 0 !important; margin-right: 0 !important;
transform: rotate(2deg); /* Opposite tilt for variety */
background-color: var(--accent); /* Acid Green */
color: var(--bg-dark);
}
.design-hero .poster-deco-circle {
/* Override for the design page to make the circle dashed */
border-style: dashed !important;
}
.design-hero .tech-barcode {
align-items: center; justify-content: center; width: 100%;
margin-top: 40px; opacity: 0.4;
}

/* --- Design Page Grid (Brand Wall) --- */
.brand-wall-grid {
display: grid;
grid-template-columns: 1fr;
/* REDUCED GAP TO MAKE IMAGES LARGER */
gap: clamp(1rem, 2vw, 2rem);
padding: 0 4vw 100px;
}
@media (min-width: 768px) {
.brand-wall-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.brand-wall-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.brand-wall-item {
display: block;
position: relative;
overflow: hidden;
/* FOCUS STATE FIX */
transition: box-shadow 0.3s ease;
outline: 2px solid transparent; 
outline-offset: 5px;
}
/* FOCUS STATE FIX */
.brand-wall-item:focus {
outline-color: var(--accent);
box-shadow: 0 0 20px rgba(202, 219, 43, 0.5); /* Subtle glow */
}

.brand-img-wrapper {
/* Matches the landscape ratio from your screenshot */
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
/* Uses the new reduced rounding variable */
border-radius: var(--radius-content);
background-color: #1a1a1a;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Add subtle shadow */
}

.brand-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
/* Reuse the smooth zoom transition */
transition: transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-wall-item:hover .brand-img-wrapper img,
/* FOCUS STATE FIX */
.brand-wall-item:focus .brand-img-wrapper img {
transform: scale(1.05);
}


/* --- Project Detail Page Styles --- */
.project-hero-info {
/* Adjust height for detail page top section */
min-height: auto;
padding: 80px 4vw;
align-items: flex-start;
}
/* NEW: Mobile specific override for Project Hero (Detail Pages) */
@media (max-width: 767px) {
    .project-hero-info {
        /* Reduce the top/bottom padding to collapse the section onto its content */
        padding-top: 40px; 
        padding-bottom: 40px;
    }
}


.project-info-grid {
/* Top text section: Title left, Description right */
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding: 0;
}
/* NEW RULE: Collapse grid rows on mobile to prevent unnecessary height */
@media (max-width: 767px) {
    .project-info-grid {
        grid-template-rows: auto;
        height: auto; 
    }
}


@media (min-width: 900px) {
.project-info-grid {
grid-template-columns: 1fr 2fr; /* 1/3 for title, 2/3 for description */
}
}


.info-title-block .project-title {
font-size: clamp(2.5rem, 5vw, 4rem);
text-transform: uppercase;
margin-bottom: 10px;
}

.info-description-block {
/* Standard padding for large text block */
max-width: 700px;
font-size: 1.1rem;
line-height: 1.7;
color: #ccc;
}

.info-heading {
font-family: var(--font-tech);
color: var(--accent);
font-size: 14px;
text-transform: uppercase;
margin-top: 30px;
margin-bottom: 10px;
}

.deliverables-list {
list-style: none;
padding: 0;
font-family: var(--font-tech);
font-size: 14px;
color: #999;
}
.deliverables-list li::before {
content: '-';
color: var(--accent);
margin-right: 10px;
}


/* --- Work Photo Grid (Showcase) --- */
.work-photo-grid {
display: grid;
grid-template-columns: 1fr; /* Default to full width on mobile */
gap: clamp(2rem, 4vw, 4rem);
padding: 0 4vw 100px;
}

@media (min-width: 768px) {
.work-photo-grid {
grid-template-columns: repeat(12, 1fr); /* 12-column foundation */
}
}
/* New: Allow photo item height to be determined by content and add centering */
.photo-item {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* MODIFIED: Added max-height constraint and adjusted sizing logic */
.photo-item img {
    /* Base sizing: Allow to be constrained by width first */
    max-width: 100%;
    
    /* Allow browser to calculate the best fit based on max-width and max-height */
    width: auto; 
    height: auto;
    
    object-fit: contain; 
    border-radius: var(--radius-content);
    /* Reuse the smooth zoom transition */
    transition: transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* NEW MEDIA QUERY: Only apply the tight height constraint on larger screens (Tablet/Desktop) */
@media (min-width: 768px) {
    .photo-item img {
        /* Re-apply max-height constraint ONLY where it's needed to prevent desktop scrolling */
        max-height: 85vh;
    }
}


.photo-item:hover img {
transform: scale(1.02); /* Very subtle zoom on large images */
}


/* Sizing Modifiers */
.photo-large {
grid-column: 1 / -1; /* Full width on large screens (12 columns) */
}


.photo-small {
grid-column: 1 / -1; /* Full width on mobile */
}


@media (min-width: 768px) {
.photo-small {
grid-column: span 6; /* Half width on tablet/desktop (6 columns) */
}
}


/* --- Logo Page Grid (Simplified Single PNG Display) --- */
.logo-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(3rem, 5vw, 6rem);
padding: 0 4vw 100px;
}
@media (min-width: 640px) { .logo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .logo-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .logo-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }


.logo-item {
display: flex;
flex-direction: column;
text-decoration: none;
position: relative;
aspect-ratio: 1/1;
border-radius: var(--radius-content);
background-color: var(--bg-dark);
/* FOCUS STATE FIX */
outline: 2px solid transparent; 
outline-offset: 5px;
transition: background-color 0.3s, outline-color 0.3s;
}
/* FOCUS STATE FIX */
.logo-item:focus {
outline-color: var(--accent);
}


.logo-img-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}


.logo-img-wrapper img {
/* Single image styling */
width: 100%;
height: 100%;
object-fit: contain;
padding: 40px;
transition: transform 0.3s ease; /* Keep transform for hover effect */
}


.logo-item:hover .logo-img-wrapper img,
/* FOCUS STATE FIX */
.logo-item:focus .logo-img-wrapper img {
transform: scale(1.05);
}


.logo-text {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
z-index: 5;
transition: opacity 0.5s;
pointer-events: none;
}
.logo-text h3, .logo-text p {
text-align: center;
color: var(--text-light);
margin: 0;
}
.logo-text p {
font-family: var(--font-tech);
/* Should follow the general category font sizing */
font-size: 0.9rem;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}

/* --- NEW: Barcode Centering Wrap (Used on Index/Home) --- */
.barcode-centering-wrap {
    /* Takes up the full width of the poster-container */
    grid-column: 1 / 13; 
    
    /* Places it at the very bottom */
    grid-row: 4; 

    /* Ensures the container uses flex to center its contents */
    display: flex;
    justify-content: center;
    
    /* Adds padding to prevent it from hugging the bottom/sides */
    padding: 20px 4vw; 
    margin-top: 20px;
}

.barcode-centering-wrap .tech-barcode {
    /* Override standard tech-barcode positioning for centering */
    position: static; 
    grid-column: auto;
    grid-row: auto;
    /* Resets any conflicting margins/positioning */
    left: auto; 
    bottom: auto;
    margin: 0;
    
    /* Ensures the text inside the barcode block is centered */
    align-items: center; 
    text-align: center;
}

/* =========================================
15. INLINE CSS EXPORTS
========================================= */

/* --- General Content Styles (From index.php, design.php) --- */
.section-padding { padding: 80px 0; }

.work-section-header {
margin-bottom: 40px;
padding: 0 4vw;
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.section-title {
font-size: 2rem;
margin: 0;
text-transform: uppercase;
}

.section-subtitle-dim {
font-family: var(--font-tech);
color: #666;
/* UPDATED: Increased font size */
font-size: 0.85rem; 
}

.section-subtitle-accent {
font-family: var(--font-tech);
color: var(--accent);
}

.accent-color { color: var(--accent); }

.design-section-padding {
/* Used on the design page */
padding: 0 4vw 100px;
}

/* --- Contact Modal Styles (From header.php) --- */
.contact-title {
font-family: var(--font-heading);
font-size: 3rem;
margin-bottom: 40px;
color: var(--text-light);
}
.success-title {
font-size: 2rem;
margin-bottom: 10px;
color: var(--accent);
}
.success-subtitle {
font-family: var(--font-tech);
color: #888;
}
/* Ripple delay classes (Fixed element configuration in header.php) */
.ripple:nth-child(1) { width: 100px; transition-delay: 0s; }
.ripple:nth-child(2) { width: 300px; transition-delay: 0.1s; }
.ripple:nth-child(3) { width: 600px; transition-delay: 0.2s; }
.ripple:nth-child(4) { width: 900px; transition-delay: 0.3s; }


/* --- Footer Styles (From footer.php) --- */
.footer-grid-layout {
/* Defines the 3-column layout override */
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: start;
}
.footer-brand-content {
/* Ensures text alignment */
text-align: left;
}
.footer-tech-tag {
margin-top: 20px;
font-family: var(--font-tech);
font-size: 12px;
color: #666;
}
.footer-logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.footer-logo-text {
font-size: 4rem;
margin: 0;
line-height: 1;
letter-spacing: -2px;
color: var(--text-light);
}
.accent-dot { color: var(--accent); }

.footer-links-group {
display: flex;
gap: 40px;
justify-content: flex-end;
}


/* --- Logo Color Classes (From logos.php) --- */
/* These classes define the --brand-color variable for each logo item */
.brand-blue { --brand-color: #3b82f6; }
.brand-orange { --brand-color: #f97316; }
.brand-red { --brand-color: #ef4444; }
.brand-purple { --brand-color: #a855f7; }
.brand-gold { --brand-color: #eab308; }
.brand-cyan { --brand-color: #06b6d4; }
.brand-green { --brand-color: #22c55e; }
.brand-dark-red { --brand-color: #dc2626; }


/* =========================================
16. ABOUT PAGE SPECIFIC STYLES (Cleaned up from Inline)
========================================= */

/* --- General Layout & Text Blocks --- */

/* Sets the standard padding for all sections below the hero */
.about-section-content {
    padding: 0 4vw;
}

/* Adjusts section headers to align left (was center in some default styles) */
.about-header-start {
    align-items: center; 
    justify-content: flex-start !important;
}

/* Constrains the main philosophy text block width */
.about-text-block {
    max-width: 900px;
}


/* --- Process Card Customization --- */

/* Initial state for the process cards to prepare for a custom scroll reveal */
.process-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Custom In-View Scroll Effect for Process Cards */
.process-card.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), 
                transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.process-card.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Dynamic Hover Effect */
.process-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 10px var(--accent);
    border-color: var(--accent);
}

/* Ensure focus state (keyboard navigation) also gets the lift */
.process-card:focus {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 10px var(--accent);
    border-color: var(--accent);
}

/* Sets base styles for all process cards */
.process-card-base {
    background-color: var(--bg-card);
    padding: 35px;
    border: 1px solid var(--border-dim);
}

/* Styles the meta group containing the number and titles */
.process-card-meta {
    border-bottom: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}

/* Styles the large number (01, 02, etc.) */
.process-card-number {
    font-size: 3rem;
    color: var(--accent);
    margin-right: 15px;
    opacity: 0.6;
}

/* Groups the title and category */
.process-card-title-group {
    display: block; 
}

/* Styles the main title of the process step */
.process-card-title {
    font-size: 1.5rem;
    display: block;
    margin: 0;
}

/* Styles the category/tagline of the process step */
.process-card-category {
    font-size: 0.9rem; /* Follows site-wide category size update */
    color: #666;
}

/* Styles the paragraph text in the card */
.process-card-text {
    color: #ccc; 
    margin-top: 0; 
    font-size: 0.95rem;
}


/* --- Signature Card Customization (Parker Atwood Card) --- */

/* Constrains the grid width for the signature card container */
.signature-section-width {
    max-width: 700px;
    margin: 0 auto;
}

/* Sets base styles for the signature card */
.signature-card-base {
    background-color: var(--bg-card);
    padding: 35px;
    border: 1px solid var(--border-dim);
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styles the wrapper around the avatar image */
.signature-avatar-wrapper {
    aspect-ratio: 1/1;
    border-radius: 50%;
    max-width: 120px;
    margin-bottom: 25px;
}

/* Styles the main meta block that holds the name and logo */
.signature-meta-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #222;
    margin-bottom: 20px;
}

/* Styles the name and title group on the left */
.signature-name-group {
    text-align: left;
}

/* Styles the name (Parker Atwood) */
.signature-name {
    font-size: 1.6rem;
    color: var(--accent);
    margin: 0;
}

/* Styles the title (Founder & Creative Director) */
.signature-title {
    display: block;
    font-size: 0.9rem; /* Follows site-wide category size update */
    color: #888;
}

/* Styles the ID. logo on the right */
.signature-logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
}

/* Styles the accent dot within the logo */
.signature-logo .accent-color {
    font-size: 2.5rem;
}

/* Styles the descriptive paragraph text */
.signature-text-block {
    color: #ccc;
    text-align: center;
    margin-top: 0;
    font-size: 1rem; /* Follows site-wide body text size update */
}

/* --- CLASS PAGE ELEMENTS --- */

.class-doc-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
}

.doc-viewer-container {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    height: 600px; /* Adjusted for better PDF visibility */
    width: 100%;
}

.doc-download-btn {
    display: inline-block;
    margin-top: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 2px;
    border: 1px solid var(--accent-color);
    padding: 12px 20px;
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.doc-download-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

/* --- ACKNOWLEDGMENTS STYLING --- */

.acknowledgment-bg {
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.02));
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dedication-text-block {
    max-width: 900px;
    margin: 0 auto;
}

.dedication-text-block .info-heading {
    color: var(--accent-color);
    margin-top: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    font-size: 1.1rem;
}

.dedication-text-block p {
    line-height: 1.8;
    margin-bottom: 20px;
    color: #ccc;
    font-size: 1.05rem;
}

/* Specific highlight for Travis and Jada's mentions */
.dedication-text-block p strong {
    color: #fff;
}

/* Prevent hover states from blocking clicks on touch devices */
@media (hover: none) {
    .nav-link:hover, 
    .chat-btn:hover, 
    .submit-btn:hover,
    .shutter-links a:hover {
        /* Reset any hover-specific layout changes here if necessary */
        background: inherit;
        color: inherit;
    }
}

/* Ensure the browser knows these are clickable */
#mobile-toggle, .chat-trigger, .shutter-links a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Mobile Content Safety Zone */
@media (max-width: 768px) {
    /* Target the main containers on the class page */
    .class-hero-info, 
    .resources-grid, 
    .resource-section,
    .info-description-block {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box; /* Ensures padding doesn't increase width */
    }

    /* Optional: If your lists are also hitting the edge */
    .deliverables-list, .resources-list {
        padding-left: 15px; 
        margin-left: 10px;
    }
}