/* 
 * Neo-Brutalist Variables & Base Setup 
 */
:root {
	--bg-bone: #F5F3EE;
	--ink-black: #111111;
	--accent-yellow: #E8FF00;
	--accent-red: #FF3B30;
	--border-width: 2px;
	
	/* Typography */
	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'Courier New', Courier, monospace;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--bg-bone);
	color: var(--ink-black);
	font-family: var(--font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 
 * Typography System 
 */
.display-text {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	margin-top: 0;
}

p {
	margin-top: 0;
	font-size: 1rem;
}

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

.mono-small-text {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0;
}

.red-mono-tag {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--accent-red);
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5rem;
}

.yellow-mono-tag {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--accent-yellow);
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.5rem;
}

/* 
 * Utilities & Structure 
 */
.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 2rem;
}

.container-fluid {
	width: 100%;
	padding: 0;
}

.brutal-border-bottom { border-bottom: var(--border-width) solid var(--ink-black); }
.brutal-border-top { border-top: var(--border-width) solid var(--ink-black); }
.brutal-border-left { border-left: var(--border-width) solid var(--ink-black); }
.brutal-border-right { border-right: var(--border-width) solid var(--ink-black); }
.brutal-border-y { border-top: var(--border-width) solid var(--ink-black); border-bottom: var(--border-width) solid var(--ink-black); }

.bg-ink { background-color: var(--ink-black); }
.text-bone { color: var(--bg-bone); }
.bg-gray { background-color: #ddd; }
.text-right { text-align: right; }

/* 
 * Components 
 */
.brutal-button {
	display: inline-block;
	background-color: var(--accent-yellow);
	color: var(--ink-black);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	padding: 1rem 2rem;
	border: var(--border-width) solid var(--ink-black);
	box-shadow: 4px 4px 0 var(--ink-black);
	transition: all 0.05s ease-in-out;
	cursor: pointer;
}

.brutal-button:hover, .brutal-button:focus {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--ink-black);
}

.brutal-button:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--ink-black);
}

.btn-black {
	background-color: var(--ink-black);
	color: var(--bg-bone);
	box-shadow: 4px 4px 0 #000;
	border-color: #000;
}

/* 
 * Header 
 */
.site-header { background: var(--bg-bone); position: relative; z-index: 100; }
.header-inner { display: flex; justify-content: space-between; align-items: stretch; width: 100%; }
.site-branding { padding: 1.5rem 2rem; border-right: var(--border-width) solid var(--ink-black); flex: 1; }
.site-title { margin: 0; font-size: 3rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.site-title a { color: var(--ink-black); text-decoration: none; }
.site-description { margin: 0.5rem 0 0 0; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; color: #555; text-transform: uppercase; }

.header-right { padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: flex-end; }
.cta-header { background-color: var(--accent-yellow); color: var(--ink-black); font-size: 0.9rem; padding: 1rem 2rem; box-shadow: 4px 4px 0 var(--ink-black); }
.cta-header:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-black); }

/* Navigation (Fallback if needed) */
.main-navigation { display: none; } /* Hidden as per screenshot */

/* 
 * Hero Section 
 */
.hero-grid { display: grid; grid-template-columns: 65% 35%; min-height: 85vh; }
.hero-left { padding: 4rem 4rem 6rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.hero-right { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; border-left: var(--border-width) solid var(--ink-black); }

.hero-tags { display: flex; gap: 1rem; margin-bottom: 2rem; }
.solid-bg { background-color: #FF3B30; color: var(--bg-bone); padding: 0.5rem 1rem; font-weight: 700; border: 2px solid var(--ink-black); }
.yellow-mono-tag.solid-bg { background-color: var(--accent-yellow); color: var(--ink-black); }

.hero-headline { font-size: clamp(3rem, 6vw, 6.5rem); line-height: 0.95; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: -0.03em; }
.highlight-yellow { display: inline-block; background-color: var(--accent-yellow); padding: 0 1rem; border: var(--border-width) solid var(--ink-black); margin-top: 0.5rem; }
.brutal-shadow { box-shadow: 8px 8px 0 var(--ink-black); }

.hero-subtext { font-family: var(--font-body); font-size: 1.1rem; font-weight: 500; max-width: 650px; line-height: 1.6; margin-bottom: 3rem; text-transform: uppercase; }

.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-black { background-color: var(--ink-black); color: var(--bg-bone); }
.btn-black:hover { background-color: #333; color: var(--accent-yellow); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink-black); }
.btn-yellow { background-color: var(--accent-yellow); color: var(--ink-black); }

.weaponry-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 2rem; }
.weapon-item p { font-size: 0.85rem; color: #ccc; line-height: 1.5; margin-top: 0.5rem; }
.text-yellow { color: var(--accent-yellow); font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; }

.hero-stat { margin-top: 4rem; }
.stat-number { font-size: 4rem; margin: 0 0 0.5rem 0; line-height: 1; }
.stat-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: #999; }

/* 
 * Marquee 
 */
.marquee-wrapper { 
	overflow: hidden; 
	background: var(--accent-yellow); 
	border-top: 6px solid var(--ink-black); 
	border-bottom: 6px solid var(--ink-black); 
	padding: 1rem 0; 
	display: flex; 
	white-space: nowrap; 
	position: relative; 
	z-index: 50;
	transform: rotate(-3deg) scale(1.05); /* Tilted! */
	transform-origin: center center;
	margin: 2rem -2rem 4rem -2rem; /* Extend outside edges to prevent clipping */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}
.marquee-track { display: flex; animation: scroll-marquee 20s linear infinite; }
.marquee-text { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 800; color: var(--ink-black); text-transform: uppercase; padding-right: 2rem; letter-spacing: -0.02em; }
@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 
 * Work Section 
 */
.work-section { padding: 0; }
.work-header-wrapper { padding: 4rem 0; }
.work-header-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.work-header-left .section-title { font-size: 3rem; margin: 0; }
.work-header-right { max-width: 350px; text-align: right; }
.work-filter-strip { padding: 1rem 0; background-color: var(--bg-bone); }
.filter-container { display: flex; align-items: center; gap: 1.5rem; }
.filter-buttons { display: flex; gap: 0.75rem; }
.filter-btn { font-family: var(--font-mono); font-size: 0.75rem; font-weight: bold; background: transparent; border: var(--border-width) solid var(--ink-black); padding: 0.5rem 1rem; cursor: pointer; text-transform: uppercase; box-shadow: 2px 2px 0 var(--ink-black); transition: all 0.05s linear; }
.filter-btn:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink-black); }
.filter-btn.active { background-color: var(--accent-yellow); }
.work-grid-wrapper { padding: 4rem 0; border-left: var(--border-width) solid var(--ink-black); border-right: var(--border-width) solid var(--ink-black); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.work-item { display: flex; flex-direction: column; gap: 1rem; }
.work-item-top { display: flex; justify-content: space-between; align-items: center; }
.case-tag { background: var(--ink-black); color: var(--bg-bone); font-family: var(--font-display); font-size: 0.75rem; font-weight: bold; padding: 0.2rem 0.5rem; }
.category-tag { font-family: var(--font-mono); font-size: 0.7rem; color: #666; text-transform: uppercase; }
.brutal-card { border: var(--border-width) solid var(--ink-black); background: var(--bg-bone); position: relative; transition: transform 0.05s linear, box-shadow 0.05s linear; }
.work-item:hover .brutal-card { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 var(--ink-black); }
.work-thumbnail { aspect-ratio: 16 / 9; position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.thumbnail-placeholder { width: 100%; height: calc(100% - 30px); background-size: cover; background-position: center; }
.thumbnail-bar { height: 30px; background: var(--ink-black); display: flex; justify-content: space-between; align-items: center; padding: 0 0.5rem; }
.client-name { color: var(--accent-yellow); font-family: var(--font-display); font-weight: bold; font-size: 0.75rem; }
.client-stat { color: #fff; font-family: var(--font-mono); font-size: 0.75rem; }
.work-title { font-size: 1.25rem; line-height: 1.3; margin: 0; text-transform: uppercase; }
.work-item.is-filtered-out { display: none; }

/* 
 * Deliverables Section 
 */
.deliverables-section { padding: 0; }
.deliverables-header-wrapper { padding: 4rem 0; }
.deliverables-header-wrapper .section-title { font-size: 3rem; margin: 0; }
.deliverables-list { display: flex; flex-direction: column; }
.deliverable-row { padding: 3rem 0; }
.deliverable-grid { display: grid; grid-template-columns: 300px 1fr 250px; gap: 2rem; }
.del-col-1 { display: flex; align-items: flex-start; gap: 1rem; }
.del-tag { background: var(--accent-yellow); color: var(--ink-black); font-family: var(--font-display); font-weight: bold; padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.del-title { font-size: 1.5rem; margin: 0; text-transform: uppercase; }
.checkmark-list { list-style: none; padding: 0; margin-top: 1rem; }
.checkmark-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: #ccc; font-size: 0.9rem; }
.checkmark-list li::before { content: '✓'; color: var(--accent-yellow); position: absolute; left: 0; font-weight: bold; }
.del-meta-title { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: #666; text-transform: uppercase; margin-bottom: 0.25rem; text-align: right; }
.del-meta-val { display: block; font-family: var(--font-mono); font-size: 0.85rem; font-weight: bold; text-align: right; }

/* 
 * Workflow Section 
 */
.workflow-section { padding: 0; }
.workflow-header-wrapper { padding: 4rem 0; }
.workflow-header-wrapper .section-title { font-size: 3rem; margin: 0; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: var(--border-width) solid var(--ink-black); border-right: var(--border-width) solid var(--ink-black); }
.workflow-step { padding: 3rem 2rem; display: flex; flex-direction: column; }
.workflow-step:last-child { border-right: none; }
.step-num { font-size: 4rem; font-family: var(--font-display); font-weight: bold; margin-bottom: 1rem; line-height: 1; }
.step-name { font-size: 1.25rem; margin-bottom: 0.25rem; text-transform: uppercase; }
.step-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-red); text-transform: uppercase; margin-bottom: 1.5rem; display: block; }
.step-text { font-size: 0.95rem; color: #444; }

/* 
 * Directive (About) Section 
 */
.directive-section { padding: 0; }
.directive-grid { display: grid; grid-template-columns: 400px 1fr; border-left: var(--border-width) solid var(--ink-black); border-right: var(--border-width) solid var(--ink-black); }
.directive-left { padding: 4rem; display: flex; justify-content: center; align-items: center; }
.photo-wrapper { position: relative; width: 100%; max-width: 300px; border: var(--border-width) solid #000; background: #fff; padding-right: 10px; }
.photo-tag { position: absolute; top: 1rem; left: 1rem; background: var(--ink-black); color: var(--accent-yellow); font-family: var(--font-display); font-size: 0.75rem; padding: 0.25rem 0.5rem; font-weight: bold; z-index: 2; }
.photo-red-strip { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; background: var(--accent-red); z-index: 1; border-left: var(--border-width) solid #000; }
.photo-wrapper img { width: 100%; height: auto; display: block; filter: grayscale(100%); }
.directive-right { padding: 6rem 4rem; }
.directive-right .section-title { font-size: 4rem; margin-bottom: 2rem; }
.directive-text { font-size: 1.125rem; margin-bottom: 1.5rem; max-width: 800px; }

/* 
 * Deposit (Contact) Section 
 */
.deposit-section { padding: 6rem 0; }
.deposit-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
.deposit-left .section-title { font-size: 3rem; margin-bottom: 1.5rem; line-height: 1.1; }
.deposit-desc { font-size: 1.125rem; margin-bottom: 3rem; max-width: 400px; }
.contact-info-block { margin-bottom: 1.5rem; padding-left: 1rem; border-left: 2px solid var(--accent-red); }
.contact-label { font-family: var(--font-mono); font-size: 0.7rem; color: #666; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }
.contact-email { font-family: var(--font-display); font-size: 1.25rem; font-weight: bold; }
.contact-secure { font-family: var(--font-display); font-weight: bold; color: #27ae60; }

.brutal-form-wrapper { border: var(--border-width) solid var(--ink-black); background: var(--bg-bone); box-shadow: 12px 12px 0 var(--ink-black); padding: 2rem; }
.form-row { display: grid; gap: 1.5rem; }
.form-cols-2 { grid-template-columns: 1fr 1fr; }
.form-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.row-span-2 { grid-row: span 2; }
.form-group label { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; font-weight: bold; margin-bottom: 0.5rem; }
.form-group input, .form-group textarea, .form-group select { border: var(--border-width) solid var(--ink-black); padding: 0.75rem; font-family: var(--font-body); font-size: 1rem; background: #fff; outline: none; }
.form-group input:focus, .form-group textarea:focus { background: #fdfdfd; }
.file-drop-zone { border: 1px dashed var(--ink-black); padding: 1rem; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; margin-top: 0.5rem; background: #f9f9f9; cursor: pointer; }
.form-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 2rem; gap: 2rem; }
.form-disclaimer { font-family: var(--font-mono); font-size: 0.75rem; color: #666; max-width: 60%; margin: 0; }
.form-footer button { padding: 1.5rem 3rem; font-size: 1.25rem; }


/* 
 * Footer 
 */
.site-footer { background-color: var(--bg-bone); }
.footer-cta { padding: 8rem 0; text-align: center; }
.footer-heading { font-size: clamp(3rem, 6vw, 5rem); margin-bottom: 3rem; }
.footer-bottom { padding: 2rem 0; display: flex; justify-content: space-between; align-items: center; }
.site-title-footer { font-family: var(--font-display); font-weight: 700; margin: 0; }
.footer-social { display: flex; gap: 1.5rem; }
.brutal-link { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.brutal-link:hover { background-color: var(--ink-black); color: var(--accent-yellow); }

/* 
 * Lightbox Modal 
 */
.brutal-lightbox { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: none; align-items: center; justify-content: center; }
.brutal-lightbox.active { display: flex; }
.lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.9); cursor: pointer; }
.lightbox-content { position: relative; width: 90%; max-width: 1000px; background: var(--bg-bone); z-index: 10; box-shadow: 12px 12px 0 #000; display: flex; flex-direction: column; }
.brutal-border-all { border: var(--border-width) solid var(--ink-black); }
.lightbox-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--ink-black); }
.brutal-button-small { background: var(--accent-yellow); color: var(--ink-black); border: var(--border-width) solid var(--ink-black); font-family: var(--font-display); font-weight: bold; cursor: pointer; padding: 0.25rem 0.5rem; transition: transform 0.05s linear; box-shadow: 2px 2px 0 #000; }
.brutal-button-small:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.lightbox-video-wrapper { aspect-ratio: 16 / 9; width: 100%; background: #000; position: relative; }
.lightbox-video-wrapper iframe,
.lightbox-video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

/* 
 * Scroll Animations 
 */
.scroll-snap-target { opacity: 0; transform: translateY(40px); transition: opacity 0.1s linear, transform 0.1s linear; }
.scroll-snap-target.in-view { opacity: 1; transform: translateY(0); }

/* 
 * Responsive 
 */
@media (max-width: 1024px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-right { border-left: none; border-top: var(--border-width) solid var(--ink-black); padding: 3rem 4rem; }
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.deliverable-grid { grid-template-columns: 1fr; gap: 1rem; }
	.del-col-3 { text-align: left; }
	.del-meta-title, .del-meta-val { text-align: left; }
	.workflow-grid { grid-template-columns: repeat(2, 1fr); }
	.workflow-step { border-right: none; border-bottom: var(--border-width) solid var(--ink-black); }
	.directive-grid { grid-template-columns: 1fr; }
	.deposit-grid { grid-template-columns: 1fr; }
	.form-cols-2 { grid-template-columns: 1fr; }
	.form-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
	.header-inner { flex-direction: column; }
	.site-branding { border-right: none; border-bottom: var(--border-width) solid var(--ink-black); width: 100%; text-align: center; }
	.header-right { width: 100%; justify-content: center; }
	.hero-left { padding: 3rem 2rem; }
	.hero-right { padding: 3rem 2rem; }
	.hero-buttons { flex-direction: column; width: 100%; }
	.hero-buttons a { text-align: center; width: 100%; }
	.marquee-wrapper { transform: rotate(-5deg) scale(1.1); margin: 2rem -1rem; }
	.menu-toggle { display: block; background: none; border: 2px solid var(--ink-black); padding: 0.5rem 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; cursor: pointer; }
	.main-navigation ul { display: none; }
	.work-header-grid { flex-direction: column; align-items: flex-start; }
	.work-header-right { text-align: left; }
	.filter-container { flex-direction: column; align-items: flex-start; }
	.work-grid { grid-template-columns: 1fr; }
	.workflow-grid { grid-template-columns: 1fr; }
	.directive-left, .directive-right { padding: 2rem; }
	.footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}