
:root {
    --brand: #E85D26;
    --dark: #2D2D2D;
    --darker: #1A1A1A;
    --light: #F0EDEA;
    --white: #FFFFFF;
    --font-head: 'Bebas Neue', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-body); background: var(--light); color: var(--darker); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.mt-5 { margin-top: 3rem; display: inline-block; }

/* Brutal Header */
.brutal-header { position: sticky; top: 0; background: var(--light); display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; border-bottom: 4px solid var(--darker); z-index: 100; }
.logo a { font-family: var(--font-head); font-size: 2.5rem; letter-spacing: 2px; color: var(--darker); }
.menu-toggle { font-family: var(--font-head); font-size: 1.5rem; background: var(--brand); color: var(--white); border: 4px solid var(--darker); padding: 5px 15px; cursor: pointer; transition: transform 0.1s; }
.menu-toggle:active { transform: translate(4px, 4px); box-shadow: none; }
.menu-toggle { box-shadow: 4px 4px 0px var(--darker); }

/* Overlay Nav */
.overlay-nav { position: fixed; top:0; left:0; width:100%; height:100%; background: var(--darker); color: var(--white); z-index: 200; display: none; flex-direction: column; justify-content: center; align-items: center; }
.nav-content { display: flex; flex-direction: column; gap: 30px; text-align: center; }
.nav-link { font-family: var(--font-head); font-size: 4rem; letter-spacing: 4px; transition: color 0.2s; }
.nav-link:hover { color: var(--brand); }
.close-menu { font-family: var(--font-head); font-size: 1.5rem; background: transparent; color: var(--white); border: 2px solid var(--white); padding: 5px 15px; cursor: pointer; margin-top: 40px; }
.close-menu:hover { background: var(--white); color: var(--darker); }
.nav-footer { margin-top: 50px; font-weight: 900; letter-spacing: 1px; }
.nav-footer a { color: var(--brand); }

/* Buttons */
.btn-brutal { font-family: var(--font-head); font-size: 1.5rem; background: var(--brand); color: var(--white); border: 4px solid var(--darker); padding: 10px 25px; cursor: pointer; display: inline-block; box-shadow: 4px 4px 0px var(--darker); transition: transform 0.1s; text-transform: uppercase; }
.btn-brutal:active { transform: translate(4px, 4px); box-shadow: none; }
.btn-outline-brutal { font-family: var(--font-head); font-size: 1.5rem; background: transparent; color: var(--darker); border: 4px solid var(--darker); padding: 10px 25px; cursor: pointer; display: inline-block; box-shadow: 4px 4px 0px var(--darker); transition: all 0.1s; text-transform: uppercase; }
.btn-outline-brutal:hover { background: var(--darker); color: var(--white); }
.btn-outline-brutal:active { transform: translate(4px, 4px); box-shadow: none; }
.big-btn { font-size: 2rem; padding: 15px 40px; box-shadow: 6px 6px 0px var(--darker); }
.wide-btn { width: 100%; text-align: center; }

/* Hero */
.hero-brutal { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 4px solid var(--darker); min-height: 80vh; }
.hero-content { padding: 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; border-right: 4px solid var(--darker); background: var(--light); }
.hero-content h1 { font-family: var(--font-head); font-size: 5rem; line-height: 0.9; margin-bottom: 30px; letter-spacing: -1px; }
.hero-content p { font-size: 1.2rem; font-weight: 600; margin-bottom: 40px; max-width: 400px; text-transform: uppercase; }
.hero-image-bg { width: 100%; height: 100%; position: relative; }
.hero-image-bg img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.2) sepia(0.2) hue-rotate(-20deg); }

/* Asymmetric Grid */
.asymmetric-grid { padding: 80px 40px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; border-bottom: 4px solid var(--darker); }
.grid-header { grid-column: 1 / 13; margin-bottom: 40px; }
.grid-header h2 { font-family: var(--font-head); font-size: 4rem; margin-bottom: 20px; }
.grid-header p { font-size: 1.2rem; font-weight: 600; max-width: 600px; }
.item-1 { grid-column: 1 / 8; position: relative; border: 4px solid var(--darker); box-shadow: 8px 8px 0px var(--brand); }
.item-1 img { width: 100%; height: 500px; object-fit: cover; display: block; filter: grayscale(100%); }
.grid-caption { position: absolute; bottom: 20px; left: 20px; background: var(--brand); color: var(--white); padding: 5px 15px; font-family: var(--font-head); font-size: 1.2rem; border: 2px solid var(--darker); }
.item-2 { grid-column: 9 / 13; padding: 40px; background: var(--white); border: 4px solid var(--darker); display: flex; flex-direction: column; justify-content: center; }
.item-2 h3 { font-family: var(--font-head); font-size: 2.5rem; margin-bottom: 20px; }
.item-2 p { margin-bottom: 30px; font-weight: 600; }

/* Brutal Form */
.lead-form-section { padding: 80px 40px; background: var(--brand); border-bottom: 4px solid var(--darker); }
.form-wrapper-brutal { max-width: 800px; margin: 0 auto; background: var(--light); padding: 60px; border: 4px solid var(--darker); box-shadow: 12px 12px 0px var(--darker); }
.form-wrapper-brutal h2 { font-family: var(--font-head); font-size: 3rem; margin-bottom: 10px; }
.form-wrapper-brutal p { font-weight: 900; margin-bottom: 30px; text-transform: uppercase; }
.brutal-form .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.brutal-form input, .brutal-form select { width: 100%; font-family: var(--font-body); font-weight: 900; border: 4px solid var(--darker); padding: 15px; background: var(--white); font-size: 1rem; text-transform: uppercase; }
.brutal-form input:focus, .brutal-form select:focus { outline: none; background: #fffcf0; }

/* Page Titles */
.page-title-brutal { padding: 100px 40px 60px; border-bottom: 4px solid var(--darker); background: var(--darker); color: var(--brand); }
.page-title-brutal h1 { font-family: var(--font-head); font-size: 6rem; letter-spacing: 2px; }

/* Pricing */
.pricing-brutal { padding: 80px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.price-card { border: 4px solid var(--darker); background: var(--white); display: flex; flex-direction: column; box-shadow: 8px 8px 0px var(--darker); }
.card-head { padding: 30px; border-bottom: 4px solid var(--darker); background: var(--light); text-align: center; position: relative; }
.card-head h3 { font-family: var(--font-head); font-size: 2.5rem; }
.price-tag { font-size: 3rem; font-family: var(--font-head); color: var(--brand); }
.badge { position: absolute; top: -15px; right: -15px; background: var(--brand); color: var(--white); font-family: var(--font-head); padding: 5px 10px; border: 2px solid var(--darker); transform: rotate(5deg); }
.card-body { padding: 30px; flex-grow: 1; }
.card-body ul { list-style: none; }
.card-body li { padding: 10px 0; border-bottom: 2px dashed var(--darker); font-weight: 900; text-transform: uppercase; }
.card-foot { padding: 30px; border-top: 4px solid var(--darker); text-align: center; }

/* Detail */
.detail-brutal { padding: 80px 40px; }
.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.text-side h2 { font-family: var(--font-head); font-size: 4rem; margin-bottom: 30px; }
.text-side p { font-weight: 600; margin-bottom: 20px; font-size: 1.1rem; }
.action-box { display: flex; align-items: center; justify-content: space-between; padding: 30px; border: 4px solid var(--darker); margin-top: 40px; background: var(--light); }
.cost { font-family: var(--font-head); font-size: 3rem; color: var(--brand); }
.img-side img { width: 100%; border: 4px solid var(--darker); box-shadow: 12px 12px 0px var(--darker); }

/* Blog */
.blog-list-brutal { padding: 80px 40px; }
.post-row { display: grid; grid-template-columns: 2fr 5fr 2fr; align-items: center; border-bottom: 4px solid var(--darker); padding: 30px 0; }
.post-meta { font-weight: 900; color: var(--brand); }
.post-title h2 { font-family: var(--font-head); font-size: 3rem; }
.post-title a:hover { color: var(--brand); }
.post-action { text-align: right; }
.article-brutal { padding: 80px 40px; }
.content-block { max-width: 800px; }
.content-block h2 { font-family: var(--font-head); font-size: 3rem; margin-bottom: 30px; margin-top: 40px; }
.content-block p { font-size: 1.2rem; font-weight: 600; line-height: 1.6; margin-bottom: 20px; }

/* Map */
.map-brutal { padding: 80px 40px; border-bottom: 4px solid var(--darker); }
.map-header { margin-bottom: 40px; }
.map-header h2 { font-family: var(--font-head); font-size: 3rem; }
.map-header p { font-weight: 900; font-size: 1.2rem; text-transform: uppercase; }
.map-brutal iframe { border: 4px solid var(--darker) !important; filter: grayscale(100%); }

/* Footer */
.brutal-footer { background: var(--darker); color: var(--white); overflow: hidden; }
.footer-wrap { padding: 60px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-block h2 { font-family: var(--font-head); font-size: 3rem; color: var(--brand); margin-bottom: 20px; }
.footer-block p { font-weight: 900; letter-spacing: 1px; margin-bottom: 10px; }
.footer-block a { text-decoration: underline; }
.footer-links { text-align: right; display: flex; flex-direction: column; gap: 20px; font-weight: 900; font-size: 1.5rem; justify-content: flex-end; }
.footer-links a:hover { color: var(--brand); }

/* Ticker Animation */
.ticker-wrap { width: 100%; border-top: 4px solid var(--brand); padding: 15px 0; background: var(--darker); white-space: nowrap; font-family: var(--font-head); font-size: 2rem; color: var(--brand); }
.ticker { display: inline-block; animation: ticker 20s linear infinite; }
.ticker__item { display: inline-block; padding: 0 40px; }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

/* Cookie Banner */
.cookie-banner-brutal { position: fixed; bottom: 20px; left: 20px; background: var(--white); border: 4px solid var(--darker); padding: 20px; display: none; align-items: center; gap: 20px; font-weight: 900; box-shadow: 8px 8px 0px var(--darker); z-index: 1000; border-left: 10px solid var(--brand); }

@media (max-width: 900px) {
    .brutal-header { padding: 15px 20px; }
    .hero-brutal { grid-template-columns: 1fr; }
    .hero-content { border-right: none; border-bottom: 4px solid var(--darker); padding: 40px 20px; }
    .hero-content h1 { font-size: 4rem; }
    .asymmetric-grid { grid-template-columns: 1fr; padding: 40px 20px; }
    .item-1, .item-2 { grid-column: 1; }
    .brutal-form .input-row { grid-template-columns: 1fr; }
    .pricing-brutal { grid-template-columns: 1fr; padding: 40px 20px; }
    .detail-split, .footer-wrap { grid-template-columns: 1fr; }
    .post-row { grid-template-columns: 1fr; gap: 10px; }
    .post-action { text-align: left; }
    .footer-links { text-align: left; justify-content: flex-start; }
    .cookie-banner-brutal { flex-direction: column; width: calc(100% - 40px); }
    .page-title-brutal h1 { font-size: 4rem; }
}
