@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow+Condensed:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
    --black: #050505;
    --white: #f5f5f2;
    --muted: #9b9b97;
    --line: #242424;
    --panel: #0c0c0c;
    --red: #b8171f;
    --red-bright: #d62029;
    --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: Inter, Arial, sans-serif; line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--red); color: var(--white); }

.site-header { position: sticky; top: 0; z-index: 20; background: rgba(5,5,5,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.nav { width: calc(100% - 48px); max-width: none; height: 92px; margin: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; position: relative; }
.brand::after { content:""; position:absolute; left:50%; bottom:-9px; width:18px; height:2px; background:var(--red); transform:translateX(-50%) scaleX(0); transition:transform .3s ease; }
.brand:hover::after { transform:translateX(-50%) scaleX(1); }
.brand img { width: 78px; height: 76px; object-fit: contain; object-position: center; filter: drop-shadow(0 0 12px rgba(255,255,255,.08)); transition: transform .35s cubic-bezier(.2,.9,.2,1), filter .35s ease; }
.brand:hover img { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 0 16px rgba(184,23,31,.18)); }

.nav-links { display:flex; gap:34px; align-items:center; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.nav-links a { color:var(--muted); transition:color .25s ease; position:relative; padding:7px 0; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--red); transform:scaleX(0); transform-origin:right; transition:transform .28s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--white); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }

.container { width:min(calc(100% - 48px), var(--max)); margin:auto; }
.hero { min-height:calc(100vh - 92px); display:grid; align-items:end; padding:80px 0 74px; border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; left:0; bottom:0; width:1px; height:170px; background:linear-gradient(to bottom, transparent, var(--red)); opacity:.75; }
.hero-glow { position:absolute; right:-12%; top:14%; width:38vw; height:38vw; max-width:600px; max-height:600px; border:1px solid rgba(184,23,31,.13); border-radius:50%; box-shadow:0 0 120px rgba(184,23,31,.035); pointer-events:none; }
.hero-inner { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:end; position:relative; z-index:1; }
.kicker { margin:0 0 18px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
.accent-dot { display:inline-block; width:5px; height:5px; margin-left:8px; background:var(--red); border-radius:50%; vertical-align:middle; }
.hero-wordmark { width:min(680px, 100%); margin:0; filter:drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
.studio-line { margin-top:22px; display:flex; align-items:center; gap:14px; text-transform:uppercase; font-family:"Archivo Black", Impact, sans-serif; font-size:clamp(18px,2vw,30px); letter-spacing:.15em; }
.studio-line span { width:54px; height:2px; background:var(--red); }
.hero-copy { max-width:430px; padding-bottom:8px; }
.hero-copy p { margin:0 0 28px; color:#c7c7c3; font-size:15px; }
.sharp-link { display:inline-flex; align-items:center; gap:15px; padding:14px 0; border-top:1px solid var(--white); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; transition:color .25s ease, border-color .25s ease, transform .25s ease; }
.sharp-link:hover { color:var(--red-bright); border-color:var(--red); transform:translateX(5px); }
.sharp-link::after { content:"↗"; font-size:16px; }

.section { padding:130px 0; border-bottom:1px solid var(--line); }
.section-head { display:flex; justify-content:space-between; gap:30px; margin-bottom:62px; align-items:end; }
.section-number { color:var(--muted); font-size:11px; letter-spacing:.18em; }
.section h2, .content-block h2, .project-info h3, .page-title, .footer-brand {
    font-family:"Archivo Black", Impact, "Arial Black", sans-serif;
    text-transform:uppercase;
}
.section h2 { margin:0; font-size:clamp(48px,7vw,96px); font-weight:400; line-height:.9; letter-spacing:-.05em; }
.project-card { display:grid; grid-template-columns:1fr 1fr; min-height:420px; border:1px solid var(--line); background:var(--panel); transition:border-color .35s ease, transform .45s ease; }
.project-card:hover { border-color:#4a2023; transform:translateY(-4px); }
.project-art { min-height:420px; background:linear-gradient(135deg,transparent 49.8%,#1a1a1a 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,#141414 50%,transparent 50.2%); background-size:100% 100%; position:relative; overflow:hidden; }
.project-art::before { content:""; position:absolute; left:10%; top:0; width:1px; height:100%; background:linear-gradient(to bottom, transparent, rgba(184,23,31,.55), transparent); transform:skewX(-10deg); }
.project-art::after { content:"T.I."; position:absolute; right:-18px; bottom:-50px; font-family:"Archivo Black", Impact, sans-serif; font-size:220px; line-height:.8; color:#111; letter-spacing:-.08em; }
.art-accent { position:absolute; right:0; top:32px; width:3px; height:84px; background:var(--red); z-index:2; }
.project-info { padding:52px; display:flex; flex-direction:column; justify-content:space-between; }
.project-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.project-info h3 { margin:45px 0 12px; font-size:clamp(42px,6vw,72px); line-height:.9; letter-spacing:-.05em; }
.project-info p { max-width:450px; color:#aaa; font-size:15px; }

.page-main { padding:100px 0 140px; }
.page-title { font-size:clamp(70px,12vw,160px); margin:0 0 90px; font-weight:400; line-height:.8; letter-spacing:-.065em; }
.content-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.content-block { border-top:1px solid var(--white); padding-top:22px; position:relative; }
.content-block::before { content:""; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--red); transition:width .55s ease; }
.content-block:hover::before { width:88px; }
.content-block h2 { margin:0 0 25px; font-size:40px; font-weight:400; line-height:1; letter-spacing:-.04em; }
.content-block p { max-width:600px; color:#bcbcb8; font-size:15px; }

.form { max-width:800px; }
.contact-success { max-width:800px; padding:42px 0 18px; border-top:1px solid var(--line); }
.contact-success[hidden] { display:none; }
.success-kicker { margin:0 0 14px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.contact-success h2 { margin:0 0 16px; max-width:680px; font-family:"Archivo Black", Impact, sans-serif; font-size:clamp(28px,4vw,48px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; }
.contact-success p:last-child { margin:0; max-width:620px; color:var(--muted); font-size:15px; line-height:1.7; }
.form.is-submitting .submit { opacity:.65; cursor:wait; pointer-events:none; }
.field { margin-bottom:30px; }
.field label { display:block; margin-bottom:10px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.field input, .field textarea, .field select { width:100%; border:1px solid var(--line); border-radius:0; outline:none; background:#090909; color:var(--white); padding:17px 16px; font:inherit; transition:border-color .25s ease, box-shadow .25s ease; }
.field textarea { min-height:190px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--red); box-shadow:0 0 0 1px rgba(184,23,31,.12); }
.submit { border:1px solid var(--white); background:var(--white); color:var(--black); padding:16px 24px; cursor:pointer; font:600 11px Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease; }
.submit:hover { background:var(--red); border-color:var(--red); color:var(--white); transform:translateY(-2px); }

.site-footer { padding:35px 0 28px; }
.footer-top { display:flex; justify-content:space-between; gap:30px; align-items:center; }
.footer-brand { font-size:28px; letter-spacing:-.04em; }
.footer-meta { color:var(--muted); font-size:11px; letter-spacing:.13em; text-transform:uppercase; text-align:right; }
.footer-legal { margin-top:28px; padding-top:16px; border-top:1px solid var(--line); color:#555; font-size:11px; letter-spacing:.08em; }

/* Page entrance + scroll reveals */
.page-pop { opacity:0; transform:translateY(22px) scale(.985); animation:pagePop .7s cubic-bezier(.2,.9,.2,1) forwards; }
.delay-1 { animation-delay:.12s; }
.delay-2 { animation-delay:.22s; }
[data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.reveal-card { opacity:0; transform:translateY(34px) scale(.985); transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1), border-color .35s ease; }
.reveal-card.is-visible { opacity:1; transform:translateY(0) scale(1); }
@keyframes pagePop { 0% { opacity:0; transform:translateY(28px) scale(.975); } 70% { opacity:1; transform:translateY(-3px) scale(1.01); } 100% { opacity:1; transform:translateY(0) scale(1); } }


/* Subtle signature accents */
.page-main, .hero, .section { position:relative; }
.page-main { overflow:hidden; }
.ambient-orb { position:absolute; border:1px solid rgba(214,32,41,.18); border-radius:50%; pointer-events:none; z-index:0; box-shadow:0 0 80px rgba(184,23,31,.035); }
.ambient-orb::after { content:""; position:absolute; inset:18%; border:1px solid rgba(214,32,41,.07); border-radius:50%; }
.orb-one { width:280px; height:280px; right:-140px; top:120px; }
.orb-two { width:150px; height:150px; left:-70px; top:58%; opacity:.8; }
.orb-three { width:90px; height:90px; right:8%; bottom:9%; opacity:.7; }
.section > .container, .page-main > .container, .hero > .container { position:relative; z-index:1; }

.blood-splatter { position:absolute; width:210px; height:160px; background:url("../assets/blood-splatter.svg") center/contain no-repeat; opacity:.24; pointer-events:none; z-index:0; filter:drop-shadow(0 0 10px rgba(184,23,31,.05)); }
.blood-top { right:8%; top:20px; transform:rotate(-8deg); }
.blood-bottom { left:4%; bottom:70px; transform:rotate(15deg) scale(.78); opacity:.18; }

.contact-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr); gap:84px; align-items:start; }
.contact-aside { border-top:1px solid var(--line); padding:26px 0 0 30px; position:relative; min-height:520px; }
.contact-aside::before { content:""; position:absolute; top:-1px; left:0; width:82px; height:1px; background:var(--red); }
.contact-aside h2 { margin:0 0 18px; font-family:"Archivo Black", Impact, sans-serif; font-size:clamp(30px,4vw,52px); line-height:.95; text-transform:uppercase; letter-spacing:-.045em; }
.contact-aside > p { margin:0 0 34px; max-width:390px; color:#bbb; font-size:16px; }
.contact-details { display:grid; gap:24px; margin-top:30px; }
.contact-detail { padding-bottom:22px; border-bottom:1px solid var(--line); }
.contact-detail span { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.contact-detail strong { font-size:15px; font-weight:500; color:var(--white); }
.contact-detail .red-mark { color:var(--red-bright); }
.contact-aside .mini-orb { width:12px; height:12px; margin:34px 0 0; border-radius:50%; background:var(--red); box-shadow:0 0 0 7px rgba(184,23,31,.06); }

.site-footer .footer-meta br { display:none; }

@media (max-width:760px) {
    .nav { width:calc(100% - 32px); margin:0 16px; }
    .container { width:min(calc(100% - 32px),var(--max)); }
    .nav { height:78px; }
    .brand img { width:60px; height:60px; }
    .nav-links { gap:15px; font-size:9px; letter-spacing:.08em; }
    .hero { min-height:calc(100vh - 78px); padding:58px 0 48px; }
    .hero-inner,.project-card,.content-grid { grid-template-columns:1fr; }
    .hero-inner { gap:46px; }
    .hero-wordmark { width:min(620px,100%); }
    .studio-line { font-size:18px; }
    .section { padding:85px 0; }
    .section-head { align-items:start; flex-direction:column-reverse; }
    .project-art { min-height:260px; }
    .project-art::after { font-size:150px; }
    .project-info { padding:32px; }
    .page-main { padding:70px 0 100px; }
    .page-title { margin-bottom:60px; }
    .content-grid { gap:55px; }
    .contact-layout { grid-template-columns:1fr; gap:56px; }
    .contact-aside { min-height:0; padding-left:0; }
    .ambient-orb.orb-one { width:180px; height:180px; right:-100px; }
    .blood-splatter { width:150px; height:110px; opacity:.16; }
    .footer-top { align-items:flex-start; flex-direction:column; }
    .footer-meta { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none !important; transition:none !important; }
    [data-reveal],.reveal-card { opacity:1; transform:none; }
}
body.is-leaving { animation: pageExit .18s ease forwards; } @keyframes pageExit { to { opacity:0; transform:translateY(-8px); } }


/* Refined atmosphere: mostly black, with a restrained red edge vignette */
body {
    background: var(--black);
    position: relative;
}
body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(16vw, 230px);
    pointer-events: none;
    z-index: 0;
    opacity: var(--edge-vignette-opacity, .68);
    transform: translateX(var(--edge-vignette-shift, 0));
    transition: opacity 2.2s ease, transform 4s ease;
}
body::before {
    left: 0;
    background: radial-gradient(ellipse at left center, rgba(120, 8, 15, .16) 0%, rgba(72, 5, 9, .075) 42%, transparent 76%);
}
body::after {
    right: 0;
    transform: translateX(calc(var(--edge-vignette-shift, 0) * -1));
    background: radial-gradient(ellipse at right center, rgba(120, 8, 15, .16) 0%, rgba(72, 5, 9, .075) 42%, transparent 76%);
}
.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* Let the header belong to the page instead of reading as a separate black strip */
.site-header {
    background: linear-gradient(180deg, rgba(12, 5, 6, .92), rgba(7, 5, 5, .86));
    border-bottom-color: rgba(86, 25, 29, .58);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

/* Smaller, correctly proportioned V mark */
.nav { position: relative; justify-content: flex-start; }
.brand img { width: 56px; height: 56px; object-fit: contain; }
.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 38px;
    font-size: 13px;
}

/* Background circles with barely noticeable ambient movement */
.ambient-orb {
    animation: ambientDrift 12s ease-in-out infinite alternate;
    will-change: transform;
}
.orb-two { animation-duration: 15s; animation-delay: -4s; }
.orb-three { animation-duration: 18s; animation-delay: -7s; }
.hero-glow { animation: glowDrift 16s ease-in-out infinite alternate; }
@keyframes ambientDrift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(7px, -5px, 0); }
    100% { transform: translate3d(-5px, 7px, 0); }
}
@keyframes glowDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-10px, 8px, 0) scale(1.018); }
}

/* Cleaner blood detail: small impact marks and droplets, never a large graphic blob */
.blood-splatter {
    width: 150px;
    height: 130px;
    opacity: .14;
    background-size: contain;
    filter: none;
}
.blood-top { right: 7%; top: 34px; transform: rotate(-9deg) scale(.82); }
.blood-bottom { left: 3%; bottom: 54px; transform: rotate(12deg) scale(.66); opacity: .11; }

@media (max-width:760px) {
    .nav { justify-content: space-between; }
    .brand img { width: 48px; height: 48px; }
    .nav-links { position: static; transform: none; gap: 16px; font-size: 10px; }
    body::before, body::after { width: 20vw; opacity: .48; }
}