/* Design Tokens */
:root{
  --red-brand: #E60000;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --red-500: #EF4444;

  --black: #000000;
  --white: #FFFFFF;

  --gray-50: #F9FAFB;
  --gray-200: #E5E7EB;
  --gray-400: #9CA3AF;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-900: #111827;

  --radius: 16px;
  --radius-sm: 10px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.14);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.65 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--gray-900); background:var(--white); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:1200px; margin:0 auto; padding:0 18px}
.section{padding: min(12vw, 120px) 0; scroll-margin-top: 92px}
.hide-sm{display:none} @media (min-width:1000px){ .hide-sm{display:block}}

/* Navbar */
.nav{position:sticky; top:0; z-index:100; height:78px; display:flex; align-items:center; background:var(--white); border-bottom:1px solid var(--gray-200)}
.nav .inner{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand .logo{height:32px; width:auto}
.wordmark{font-weight:800; letter-spacing:.06em}
.menu{display:flex; align-items:center; gap:24px}
.link{appearance:none; background:none; border:0; font:inherit; color:var(--gray-700); cursor:pointer}
.link:hover{color:var(--red-600)}
.cta{appearance:none; border:1px solid var(--black); background:linear-gradient(135deg, #0B0B0B, #111827 70%, #2b0000); color:var(--white); font-weight:800; padding:.7rem 1.1rem; border-radius:999px; transition: filter .2s ease, transform .04s ease}
.cta:hover{filter:brightness(1.15)} .cta:active{transform:translateY(1px)}
.burger{display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--gray-200); background:var(--white); cursor:pointer; position:relative}
.burger-bar{position:absolute; left:10px; right:10px; height:2px; background:#111; border-radius:2px; transition:transform .2s, opacity .2s}
.burger-bar:nth-child(1){top:13px} .burger-bar:nth-child(2){top:21px} .burger-bar:nth-child(3){top:29px}
@media (max-width: 960px){ .menu{display:none} .burger{display:block} }
.drawer-overlay{position:fixed; inset:78px 0 0 0; background:rgba(0,0,0,.35); display:none; z-index:95}
.drawer{position:fixed; left:0; right:0; top:78px; background:#fff; border-bottom:1px solid var(--gray-200); display:none; z-index:96}
.drawer.open, .drawer-overlay.open{display:block}
.drawer .item{display:block; width:100%; text-align:left; padding:14px 18px; font:inherit; background:#fff; border:0; border-top:1px solid var(--gray-200)}
.drawer .item:hover{background:var(--gray-50)}

/* Hero */
.hero{position:relative; min-height:78vh; display:flex; align-items:center; color:var(--white); border-bottom:1px solid var(--gray-200)}
.hero-bg{position:absolute; inset:0; background: radial-gradient(1000px 700px at 15% 0%, rgba(230,0,0,.20) 0%, transparent 60%), linear-gradient(135deg, #000000 0%, #111827 65%, #1a0a0a 100%); z-index:-2}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35) 70%, rgba(0,0,0,.6)); z-index:-1}
.hero-grid{display:grid; gap:28px; grid-template-columns:1fr}
@media (min-width:1000px){ .hero-grid{grid-template-columns:1.1fr .9fr} }
.eyebrow{color:#d1d5db; letter-spacing:.18em; text-transform:uppercase; font-size:12px; margin:0}
.display{font-weight:900; letter-spacing:-.02em; line-height:1.02; font-size: clamp(40px, 7.4vw, 88px); margin: 6px 0 10px}
.accent{color:var(--red-brand)}
.lead{max-width:720px; color:#e5e7eb; font-size:clamp(16px, 2.2vw, 18px)}
.row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.btn-primary{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:999px; border:2px solid var(--black); background:var(--red-brand); color:var(--white); font-weight:800; text-decoration:none; transition: background .15s, transform .04s, box-shadow .15s; box-shadow: var(--shadow-sm)}
.btn-primary:hover{background:var(--red-600)} .btn-primary:active{transform:translateY(1px)}
.btn-outline{display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.2rem; border-radius:999px; border:2px solid var(--white); color:var(--white); text-decoration:none; font-weight:800; background:transparent}
.card{border:2px solid var(--black); border-radius:20px; overflow:hidden; background:#0b0b0b; box-shadow: var(--shadow-md)}
.media{position:relative; width:100%; overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover; transform:scale(1.0); transition: transform .6s ease}
.ar-3x4{aspect-ratio: 3 / 4} .ar-4x3{aspect-ratio: 4 / 3}

/* Sections */
.section-head{margin-bottom:20px}
.title{font-size:clamp(28px, 4vw, 48px); margin:0 0 6px}
.sub{font-size:18px; color:var(--gray-600); margin:0}
.text-gray{color:var(--gray-600)}
.section-light{background:var(--gray-50); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200)}
.contrast{color:var(--white)}
.grid-3{display:grid; gap:18px} @media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.tile{background:#fff; border:2px solid #000; border-radius:16px; overflow:hidden; box-shadow: var(--shadow-sm)}

/* Features (Services) */
.feature{background:#fff; border:2px solid #000; border-radius:16px; overflow:hidden; transition: border-color .15s ease; box-shadow: var(--shadow-sm)}
.feature:hover{border-color: var(--red-brand)}
.feature-title{font-size:20px; font-weight:900; margin:12px 14px 6px}
.feature-text{color:var(--gray-700); margin:0 14px 16px}

/* Process */
.process{display:grid; gap:14px; margin-top:16px}
@media (min-width:900px){ .process{grid-template-columns:repeat(6,1fr)} }
.p-item{border-radius:14px; padding:14px; text-align:center; background:#fff; border:2px solid #000}
.p-title{font-weight:900; color:var(--red-brand)}
.p-desc{font-size:12px; color:var(--gray-700)}

/* Clients */
.clients-grid{display:grid; gap:14px; grid-template-columns:repeat(2,1fr); margin-top:12px}
@media (min-width:640px){ .clients-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:900px){ .clients-grid{grid-template-columns:repeat(6,1fr)} }
.client-badge{display:flex; align-items:center; justify-content:center; min-height:64px; border:2px solid #000; border-radius:12px; background:#fff; font-weight:800; color:var(--gray-900); letter-spacing:.12em; box-shadow: var(--shadow-sm)}

/* Contact */
.contact{background:#000; color:#fff; border-top:1px solid #111}
.form{margin-top:18px; background:#0b0b0b; border:2px solid #000; border-radius:16px; padding:18px; box-shadow: var(--shadow-md)}
.row{display:grid; gap:12px}
.row.two{grid-template-columns:1fr} @media (min-width:760px){ .row.two{grid-template-columns:1fr 1fr} }
.field label{display:block; margin:0 0 6px; color:#e5e7eb; font-weight:600}
.field input, .field textarea{width:100%; background:#fff; color:#000; border:1px solid var(--gray-400); border-radius:12px; padding:12px; font:inherit; outline:none; transition: box-shadow .15s ease, border-color .15s ease}
.field input:focus, .field textarea:focus{ border-color: var(--red-brand); box-shadow: 0 0 0 4px rgba(230,0,0,.18) }
.field textarea{min-height:140px; resize:vertical}
.human-check{display:flex; align-items:center; gap:8px; margin-top:8px}
.banner{margin-top:12px; border:1px solid transparent; border-radius:10px; padding:10px; font-weight:600}
.banner.success{background:#ecfdf5; border-color:#a7f3d0; color:#065f46}
.banner.error{background:#fef2f2; border-color:#fecaca; color:#991b1b}
.actions{margin-top:10px}
.btn-primary.wide{width:100%}
.note{margin:8px 0 0; color:#94a3b8; font-size:12px}

/* Legal pages */
.legal-main{background:var(--gray-50); padding: min(8vw, 80px) 0}
.card-legal{background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:18px; margin:16px 0; box-shadow: var(--shadow-sm)}
.h2{font-size:22px; font-weight:900; margin:0 0 8px}
.h3{font-size:18px; font-weight:800; margin:10px 0 6px}
.with-underline{position:relative}
.with-underline::after{content:""; display:block; width:80px; height:3px; background:var(--red-brand); margin-top:8px; border-radius:2px}
.info-accent{border-left:4px solid var(--red-brand); padding-left:12px; color:var(--gray-700)}
.legal-list{margin:0; padding-left:18px; color:var(--gray-700)}
.cta-legal{margin:24px 0 8px}
.cta-legal-inner{background:linear-gradient(135deg, #0B0B0B, #111827 60%, #420000); border:1px solid #000; border-radius:16px; padding:18px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.cta-legal-title{font-size:22px; margin:0}

/* Footer */
.site-footer{background:#000; color:#d1d5db; border-top:1px solid #111}
.footer-grid{display:grid; gap:18px; padding: min(8vw, 60px) 0}
@media (min-width:900px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr} }
.brand-row{display:flex; align-items:center; gap:10px}
.foot-title{color:#fff; margin:0 0 10px; font-size:14px; letter-spacing:.12em; text-transform:uppercase}
.foot-links{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot-link{background:none; border:0; padding:0; font:inherit; color:#9CA3AF; text-decoration:none; cursor:pointer}
.foot-link:hover{color:#fff}
.copy{border-top:1px solid #111; background:#000}
.copy-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0}

/* Utilities */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden}